Parcourir la source

HUE-6177 [frontend] Fix the hover colour on the main menu items

Johan Ahlen il y a 8 ans
Parent
commit
0f39ebc

Fichier diff supprimé car celui-ci est trop grand
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Fichier diff supprimé car celui-ci est trop grand
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 1 - 1
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -48,7 +48,7 @@ input[type='password']::-ms-reveal {
 }
 
 .svg-app-icon {
-  fill: @hue-primary-color-dark;
+  fill: currentColor;
   height: 24px !important; //conflicts with nv.d3.css
   width: 24px !important; //conflicts with nv.d3.css
   display: inline-block !important; //conflicts with nv.d3.css

+ 14 - 0
desktop/core/src/desktop/static/desktop/less/hue3-extra.less

@@ -189,4 +189,18 @@
 
 .vertical-full.container-fluid {
   padding-top: 0;
+}
+
+.dropdown-menu > li > a > svg {
+  color: @hue-primary-color-dark;
+}
+.dropdown-menu > li.active > a > svg,
+.dropdown-menu > li > a:hover > svg,
+.dropdown-menu > li > a:focus > svg,
+.dropdown-menu > li > a:active > svg {
+  color: #FFF !important;
+}
+
+.dropdown-menu .svg-app-icon {
+  margin-right: 4px;
 }

+ 7 - 7
desktop/core/src/desktop/templates/common_header.mako

@@ -313,16 +313,16 @@ ${ hueIcons.symbols() }
          <ul role="menu" class="dropdown-menu">
            % if 'beeswax' in apps:
              % if USE_NEW_EDITOR.get():
-             <li><a href="${ url('notebook:editor') }?type=hive"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon" alt="${ _('Hive icon') }"/> ${_('Hive')}</a></li>
+             <li><a href="${ url('notebook:editor') }?type=hive"><svg class="svg-app-icon"><use xlink:href="#hi-hive"></use></svg> ${_('Hive')}</a></li>
              % else:
-             <li><a href="/${apps['beeswax'].display_name}"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon" alt="${ _('Hive icon') }"/> ${_('Hive')}</a></li>
+             <li><a href="/${apps['beeswax'].display_name}"><svg class="svg-app-icon"><use xlink:href="#hi-hive"></use></svg> ${_('Hive')}</a></li>
              % endif
            % endif
            % if 'impala' in apps:
              % if USE_NEW_EDITOR.get(): ## impala requires beeswax anyway
-             <li><a href="${ url('notebook:editor') }?type=impala"><img src="${ static(apps['impala'].icon_path) }" class="app-icon" alt="${ _('Impala icon') }"/> ${_('Impala')}</a></li>
+             <li><a href="${ url('notebook:editor') }?type=impala"><svg class="svg-app-icon"><use xlink:href="#hi-impala"></use></svg> ${_('Impala')}</a></li>
              % else:
-             <li><a href="/${apps['impala'].display_name}"><img src="${ static(apps['impala'].icon_path) }" class="app-icon" alt="${ _('Impala icon') }"/> ${_('Impala')}</a></li>
+             <li><a href="/${apps['impala'].display_name}"><svg class="svg-app-icon"><use xlink:href="#hi-impala"></use></svg> ${_('Impala')}</a></li>
              % endif
            % endif
            % if 'rdbms' in apps:
@@ -334,13 +334,13 @@ ${ hueIcons.symbols() }
            % endif
            % if 'pig' in apps:
              % if USE_NEW_EDITOR.get() and False:
-             <li><a href="${ url('notebook:editor') }?type=pig"><img src="${ static(apps['pig'].icon_path) }" class="app-icon" alt="${ _('Pig icon') }"/> ${_('Pig')}</a></li>
+             <li><a href="${ url('notebook:editor') }?type=pig"><svg class="svg-app-icon"><use xlink:href="#hi-pig"></use></svg> ${_('Pig')}</a></li>
              % else:
-             <li><a href="/${apps['pig'].display_name}"><img src="${ static(apps['pig'].icon_path) }" class="app-icon" alt="${ _('Pig icon') }"/> ${_('Pig')}</a></li>
+             <li><a href="/${apps['pig'].display_name}"><svg class="svg-app-icon"><use xlink:href="#hi-pig"></use></svg> ${_('Pig')}</a></li>
              % endif
            % endif
            % if 'jobsub' in apps:
-             <li><a href="/${apps['jobsub'].display_name}"><img src="${ static(apps['jobsub'].icon_path) }" class="app-icon" alt="${ _('Job designer icon') }"/> ${_('Job Designer')}</a></li>
+             <li><a href="/${apps['jobsub'].display_name}"><svg class="svg-app-icon"><use xlink:href="#hi-job-designer"></use></svg> ${_('Job Designer')}</a></li>
            % endif
          </ul>
        </li>

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff