Bläddra i källkod

HUE-8790 [core] Fix custom logo displaying on the sidebar

Romain 6 år sedan
förälder
incheckning
08eb1b90f4

+ 1 - 1
desktop/core/src/desktop/js/ko/components/ko.sidebar.js

@@ -100,7 +100,7 @@ const TEMPLATE = `
   <!-- ko component: { name: 'hue-app-switcher' } --><!-- /ko -->
   <!-- /ko -->
   <!-- ko ifnot: window.DISPLAY_APP_SWITCHER -->
-  <div class="hue-sidebar-header">
+  <div class="hue-sidebar-header" data-bind="css: { 'hue-sidebar-custom-logo' : window.CUSTOM_LOGO }">
     <a data-bind="hueLink: '/home/'" href="javascript: void(0);" title="${I18n('Documents')}">
       <div class="hue-sidebar-logo"><svg><use xlink:href="#hi-sidebar-logo"></use></svg></div>
     </a>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 26 - 1
desktop/core/src/desktop/static/desktop/less/components/hue-sidebar.less

@@ -90,6 +90,11 @@
     margin-bottom: 8px;
     padding: 0 0 0 24px;
     background-color: @header-bg;
+    &.hue-sidebar-custom-logo {
+      background-color: @cui-white;
+      border-top: 2px solid @hue-primary-color-dark;
+      height: calc(@sidebar-header-height - 3px);
+    }
 
     .hue-app-switcher-trigger {
       color: @hue-primary-color-dark;
@@ -143,6 +148,15 @@
       height: 32px;
       width: 100px;
     }
+
+    &.hue-sidebar-custom-logo {
+      .hue-sidebar-logo {
+        margin-left: 32px;
+      }
+      .hue-sidebar-logo svg {
+        width: 128px;
+      }
+    }
   }
 
   .hue-sidebar-body {
@@ -265,6 +279,14 @@
         color: @cui-white;
       }
 
+      &.hue-sidebar-custom-logo {
+        padding: 0;
+        .hue-sidebar-logo {
+          width: 56px;
+          margin-left: -6px;
+        }
+      }
+
       .hue-app-switcher-trigger svg {
         width: 32px;
         height: 32px;
@@ -348,6 +370,9 @@
 
   &:not(.collapsed) .hue-sidebar-header {
     background-color: @header-bg-open !important;
+    &.hue-sidebar-custom-logo {
+      background-color: @cui-white !important;
+    }
   }
 
   .item-spacer {
@@ -459,4 +484,4 @@
       }
     }
   }
-}
+}

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

@@ -61,7 +61,11 @@ if USE_NEW_EDITOR.get():
   <meta charset="utf-8">
   <title>Hue ${ get_nice_name(current_app, section) } ${ get_title(title) }</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/favicon.ico') }" />
+  % if conf.CUSTOM.LOGO_SVG.get():
+  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/custom-branding/favicon.ico') }"/>
+  % else:
+  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/favicon.ico') }"/>
+  % endif
 
   <meta name="twitter:image" content="${ static('desktop/art/hue-login-logo-ellie.png') }">
   <meta name="twitter:card" content="summary">

+ 5 - 1
desktop/core/src/desktop/templates/common_header_m.mako

@@ -49,7 +49,11 @@ if USE_NEW_EDITOR.get():
   <meta charset="utf-8">
   <title>Hue ${get_nice_name(current_app, section)} - ${get_title(title)}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/favicon.ico') }" />
+   % if conf.CUSTOM.LOGO_SVG.get():
+  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/custom-branding/favicon.ico') }"/>
+  % else:
+  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/favicon.ico') }"/>
+  % endif
   <meta name="description" content="">
   <meta name="author" content="">
 

+ 1 - 0
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -58,6 +58,7 @@
   window.APP_SWITCHER_ALTUS_BASE_URL = '${ APP_SWITCHER_ALTUS_BASE_URL.get() }';
   window.APP_SWITCHER_MOW_BASE_URL = '${ APP_SWITCHER_MOW_BASE_URL.get() }';
   window.DISPLAY_APP_SWITCHER = '${ DISPLAY_APP_SWITCHER.get() }' === 'True';
+  window.CUSTOM_LOGO = '${ conf.CUSTOM.LOGO_SVG.get() }' !== '';
 
   window.KNOX_BASE_PATH_HUE = '/KNOX_BASE_PATH_HUE';
   window._KNOX_BASE_PATH = '/KNOX_BASE_PATH_KNOX';

+ 4 - 0
desktop/core/src/desktop/templates/hue.mako

@@ -43,7 +43,11 @@
   <meta charset="utf-8">
   <title>Hue</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  % if conf.CUSTOM.LOGO_SVG.get():
+  <link rel="icon" type="image/x-icon" href="${ static('desktop/art/custom-branding/favicon.ico') }"/>
+  % else:
   <link rel="icon" type="image/x-icon" href="${ static('desktop/art/favicon.ico') }"/>
+  % endif
   <meta name="description" content="">
   <meta name="author" content="">
 

+ 8 - 4
desktop/core/src/desktop/templates/hue_icons.mako

@@ -167,10 +167,14 @@
     </symbol>
 
     <symbol id="hi-sidebar-logo" viewBox="0 0 159.657 40">
-      <path class="svg-hue-sidebar-logo-main" d="M26.691,0c-.263,0-.523,0-.784.012l.07,13.609H10.1A26.108,26.108,0,0,1,16.693,1.733C6.906,5.271,0,13.846,0,23.867A22.465,22.465,0,0,0,7.024,40h9.94A26.2,26.2,0,0,1,10.1,27.832H25.977V40h9.187V1.234A29.527,29.527,0,0,0,26.691,0Z"></path>
-      <path class="svg-hue-logo-trunk" d="M37.96,2.316V22.565c2.807.258,5.034,4.249,5.034,9.135,0,3.677-1.262,6.846-3.084,8.3H45.4a23.571,23.571,0,0,0,6.383-16.133A23.842,23.842,0,0,0,37.96,2.316ZM40.717,14.4a1.952,1.952,0,0,1-1.834-2.051A1.952,1.952,0,0,1,40.717,10.3a1.835,1.835,0,0,1,1.668,1.2,1.137,1.137,0,0,0-.943-.537l-.023,0a.576.576,0,0,1,.245.481.506.506,0,1,1-1.006,0,.63.63,0,0,1,.025-.168,1.371,1.371,0,0,0-.408.992,1.244,1.244,0,0,0,1.168,1.308,1.17,1.17,0,0,0,1.058-.754A1.889,1.889,0,0,1,40.717,14.4Z"></path>
-      <path class="svg-hue-sidebar-logo-main" d="M74.5,40c-14.2,0-18.368-4.38-18.368-16.532V1.71h10.6V23.186c0,6.5,2.19,7.841,8.619,7.841H86.364c6.853,0,8.618-1.341,8.618-7.841V1.71h10.456V23.468C105.439,35.62,101.27,40,86.929,40Z"></path>
-      <path class="svg-hue-sidebar-logo-main" d="M159.657,24.74V12.165c0-6.076-3.038-10.455-13.988-10.455h-18.51c-13.493,0-17.379,3.744-17.379,14.907v8.83C109.78,35.62,114.513,40,126.664,40h28.19V32.017h-28.19c-4.945,0-6.358-.848-6.358-5.511V24.74Zm-39.35-8.83c0-5.511,1.7-6.076,6.994-6.076H144.82c3.18,0,4.311.636,4.311,3.18v4.945H120.306Z"></path>
+      % if conf.CUSTOM.LOGO_SVG.get():
+        ${ conf.CUSTOM.LOGO_SVG.get()|n }
+      % else:
+        <path class="svg-hue-sidebar-logo-main" d="M26.691,0c-.263,0-.523,0-.784.012l.07,13.609H10.1A26.108,26.108,0,0,1,16.693,1.733C6.906,5.271,0,13.846,0,23.867A22.465,22.465,0,0,0,7.024,40h9.94A26.2,26.2,0,0,1,10.1,27.832H25.977V40h9.187V1.234A29.527,29.527,0,0,0,26.691,0Z"></path>
+        <path class="svg-hue-logo-trunk" d="M37.96,2.316V22.565c2.807.258,5.034,4.249,5.034,9.135,0,3.677-1.262,6.846-3.084,8.3H45.4a23.571,23.571,0,0,0,6.383-16.133A23.842,23.842,0,0,0,37.96,2.316ZM40.717,14.4a1.952,1.952,0,0,1-1.834-2.051A1.952,1.952,0,0,1,40.717,10.3a1.835,1.835,0,0,1,1.668,1.2,1.137,1.137,0,0,0-.943-.537l-.023,0a.576.576,0,0,1,.245.481.506.506,0,1,1-1.006,0,.63.63,0,0,1,.025-.168,1.371,1.371,0,0,0-.408.992,1.244,1.244,0,0,0,1.168,1.308,1.17,1.17,0,0,0,1.058-.754A1.889,1.889,0,0,1,40.717,14.4Z"></path>
+        <path class="svg-hue-sidebar-logo-main" d="M74.5,40c-14.2,0-18.368-4.38-18.368-16.532V1.71h10.6V23.186c0,6.5,2.19,7.841,8.619,7.841H86.364c6.853,0,8.618-1.341,8.618-7.841V1.71h10.456V23.468C105.439,35.62,101.27,40,86.929,40Z"></path>
+        <path class="svg-hue-sidebar-logo-main" d="M159.657,24.74V12.165c0-6.076-3.038-10.455-13.988-10.455h-18.51c-13.493,0-17.379,3.744-17.379,14.907v8.83C109.78,35.62,114.513,40,126.664,40h28.19V32.017h-28.19c-4.945,0-6.358-.848-6.358-5.511V24.74Zm-39.35-8.83c0-5.511,1.7-6.076,6.994-6.076H144.82c3.18,0,4.311.636,4.311,3.18v4.945H120.306Z"></path>
+      % endif
     </symbol>
 
     <symbol id="hi-cdp-logo" viewBox="0 0 106 32">

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

@@ -155,7 +155,6 @@ ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True)
   % endif
 </div>
 
-
 <div class="trademark center muted">
   % if CUSTOM.LOGO_SVG.get():
     ${ _('Powered by') } <img src="${ static('desktop/art/hue-login-logo.png') }" width="40" style="vertical-align: middle"  alt="${ _('Hue logo') }"> -

Vissa filer visades inte eftersom för många filer har ändrats