Эх сурвалжийг харах

HUE-6121 [frontend] Fix issue with compose menu icon colors and switch to svg icons for Hive and Impala

Johan Ahlen 8 жил өмнө
parent
commit
0da9284

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


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

@@ -28,6 +28,14 @@
   cursor: pointer;
 }
 
+.svg-app-icon {
+  fill: @hue-primary-color-dark;
+  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
+  vertical-align: middle;
+}
+
 .app-header a {
   font-size: 20px !important;
   color: @hue-primary-color-dark !important;

+ 17 - 1
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -182,12 +182,28 @@ body {
   margin: -1px 2px 0 -7px;
 }
 
+.compose-action svg {
+  margin: 0 2px -4px -7px;
+  display: inline-block !important; // Conflicts with nv.d3.css
+}
+
 .compose-action .dropdown-menu i {
+  margin: -1px 2px 0 -7px;
+}
+
+.compose-action .dropdown-menu i,
+.compose-action .dropdown-menu svg {
   color: @hue-primary-color-dark;
+  fill: @hue-primary-color-dark;
   height: 18px;
   width: 18px;
   font-size: 14px;
-  margin: -1px 2px 0 -7px;
+}
+
+.compose-action a:hover i,
+.compose-action a:hover svg {
+  color: @cui-white;
+  fill: @cui-white;
 }
 
 .dropdown-no-icon {

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

@@ -290,7 +290,7 @@ ${ hueIcons.symbols() }
   </div>
     <a class="brand nav-tooltip pull-left" title="${_('About Hue')}" data-rel="navigator-tooltip" href="/about">
       <svg style="margin-top: 2px; margin-left:8px;width: 60px;height: 16px;display: inline-block;">
-        <use xlink:href="#hue-logo"></use>
+        <use xlink:href="#hi-logo"></use>
       </svg>
     </a>
     % if user.is_authenticated() and section != 'login':

+ 3 - 3
desktop/core/src/desktop/templates/hue.mako

@@ -103,7 +103,7 @@ ${ hueIcons.symbols() }
         </a>
 
         <a class="brand" data-bind="click: function () { page('/home') }" href="javascript: void(0);" title="${_('Documents')}">
-          <svg style="height: 24px; width: 120px;"><use xlink:href="#hue-logo"></use></svg>
+          <svg style="height: 24px; width: 120px;"><use xlink:href="#hi-logo"></use></svg>
         </a>
 
         <div class="compose-action btn-group">
@@ -118,10 +118,10 @@ ${ hueIcons.symbols() }
                 <a title="${_('Query editor')}" data-rel="navigator-tooltip" href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }"><i class="fa fa-fw fa-edit inline-block"></i> ${ _('Editor') }</a>
                 <ul class="dropdown-menu">
                   % if 'impala' in apps:
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('impala', true); }"><img src="${ static(apps['impala'].icon_path) }" class="app-icon" alt="${ _('Impala icon') }"/> ${_('Impala Query')}</a></li>
+                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('impala', true); }"><svg style="display: inline-block;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-impala"></use></svg> ${_('Impala Query')}</a></li>
                   % endif
                   % if 'beeswax' in apps:
-                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon" alt="${ _('Hive icon') }"/> ${_('Hive Query')}</a></li>
+                  <li><a href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-hive"></use></svg> ${_('Hive Query')}</a></li>
                   % endif
                   % if SHOW_NOTEBOOKS.get():
                   <li><a href="javascript: void(0)" data-bind="click: function(){ page('/notebook'); }"><i class="fa fa-fw fa-file-text-o inline-block"></i> ${ _('Notebook') }</a></li>

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 10 - 1
desktop/core/src/desktop/templates/hue_icons.mako


+ 1 - 1
desktop/core/src/desktop/templates/login.mako

@@ -54,7 +54,7 @@ ${ hueIcons.symbols() }
   </div>
   <a class="brand pull-left" href="/">
     <svg style="margin-top: 2px; margin-left:8px;width: 60px;height: 16px;display: inline-block;">
-      <use xlink:href="#hue-logo"></use>
+      <use xlink:href="#hi-logo"></use>
     </svg>
   </a>
 </div>

+ 2 - 2
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -296,7 +296,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
             <!-- ko if: editorMode -->
               <a data-bind="attr: { href: '${ url('notebook:editor') }?type=' + editorType(), title: editorTypeTitle() + '${ _(' Editor') }' }" style="cursor: pointer">
               <!-- ko if: editorType() == 'impala' -->
-                <img src="${ static('impala/art/icon_impala_48.png') }" class="app-icon"  alt="${ _('Impala icon') }"/>
+                <svg class="svg-app-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-impala"></use></svg>
                 Impala
               <!-- /ko -->
               <!-- ko if: editorType() == 'rdbms' -->
@@ -332,7 +332,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
                 MapReduce
               <!-- /ko -->
               <!-- ko if: editorType() == 'beeswax' || editorType() == 'hive' -->
-                <img src="${ static('beeswax/art/icon_beeswax_48.png') }" class="app-icon" alt="${ _('Hive icon') }" />
+                <svg class="svg-app-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hi-hive"></use></svg>
                 Hive
               <!-- /ko -->
               <!-- ko if: ['impala', 'pig', 'hive', 'beeswax', 'rdbms', 'java', 'spark2', 'sqoop1', 'distcp', 'shell', 'mapreduce'].indexOf(editorType()) == -1 -->

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно