浏览代码

HUE-5556 [core] Create a customizable SVG logo

Enrico Berti 9 年之前
父节点
当前提交
0bebebe

+ 4 - 0
desktop/conf.dist/hue.ini

@@ -255,6 +255,10 @@
     # defaults to 86400000 (1 day), set to 0 to disable caching
     ## cacheable_ttl=86400000
 
+    # SVG code to replace the default Hue logo in the top bar and sign in screen
+    # e.g. <image xlink:href="/static/desktop/art/hue-logo-mini-white.png" x="0" y="0" height="40" width="160" />
+    ## logo_svg=
+
   # Configuration options for user authentication into the web application
   # ------------------------------------------------------------------------
   [[auth]]

+ 4 - 0
desktop/conf/pseudo-distributed.ini.tmpl

@@ -259,6 +259,10 @@
     # defaults to 86400000 (1 day), set to 0 to disable caching
     ## cacheable_ttl=86400000
 
+    # SVG code to replace the default Hue logo in the top bar and sign in screen
+    # e.g. <image xlink:href="/static/desktop/art/hue-logo-mini-white.png" x="0" y="0" height="40" width="160" />
+    ## logo_svg=
+
   # Configuration options for user authentication into the web application
   # ------------------------------------------------------------------------
   [[auth]]

+ 3 - 0
desktop/core/src/desktop/conf.py

@@ -729,6 +729,9 @@ CUSTOM = ConfigSection(
                    default=86400000,
                    type=int,
                    help=_("The cache TTL in milliseconds for the assist/autocomplete/etc calls. Set to 0 it disables the cache.")),
+    LOGO_SVG=Config("logo_svg",
+                   default="",
+                   help=_("SVG code to replace the default Hue logo in the top bar and sign in screen")),
 ))
 
 AUTH = ConfigSection(

+ 6 - 0
desktop/core/src/desktop/static/desktop/css/login.css

@@ -53,6 +53,12 @@
   margin-bottom: 35px;
 }
 
+.login-container .empty-logo {
+  background-color: #FFF;
+  width: 70px;
+  height: 70px;
+}
+
 .login-container .logo img {
   margin-top: 2px;
 }

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

@@ -13,10 +13,17 @@
 ## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ## See the License for the specific language governing permissions and
 ## limitations under the License.
+<%!
+  from desktop import conf
+%>
 
 <%def name="symbols()">
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none;">
+
     <symbol id="hue-logo" viewBox="0 0 159.657 40">
+      % if conf.CUSTOM.LOGO_SVG.get():
+        ${ conf.CUSTOM.LOGO_SVG.get()|n }
+      % else:
       <defs>
         <style>
           .logo-main {
@@ -31,6 +38,7 @@
       <path class="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 class="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 class="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"/>
+      % endif
     </symbol>
 
     <symbol id="hi-file" viewBox="0 0 640 640">

+ 20 - 2
desktop/core/src/desktop/templates/login.mako

@@ -21,6 +21,8 @@
   from useradmin.password_policy import is_password_policy_enabled, get_password_hint
 %>
 
+<%namespace name="hueIcons" file="/hue_icons.mako" />
+
 ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True) | n,unicode }
 
 <link rel="stylesheet" href="${ static('desktop/css/login.css') }">
@@ -40,6 +42,8 @@ ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True)
   }
 </style>
 
+${ hueIcons.symbols() }
+
 <div class="navigator">
   <div class="pull-right">
 
@@ -48,7 +52,11 @@ ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True)
   </ul>
 
   </div>
-  <a class="brand pull-left" href="/"><img src="${ static('desktop/art/hue-logo-mini-white.png') }" data-orig="${ static('desktop/art/hue-logo-mini-white.png') }" data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }" /></a>
+  <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>
+    </svg>
+  </a>
 </div>
 
 
@@ -57,7 +65,14 @@ ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True)
   <form method="POST" action="${action}" autocomplete="off">
     ${ csrf_token(request) | n,unicode }
 
-    <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70"></div>
+    % if conf.CUSTOM.LOGO_SVG.get():
+    <div class="empty-logo">
+    </div>
+    % else:
+    <div class="logo">
+      <img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70">
+    </div>
+    % endif
 
     %if first_login_ever:
       <div class="alert alert-info center">
@@ -127,6 +142,9 @@ ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True)
 
 
 <div class="trademark center muted">
+  % if conf.CUSTOM.LOGO_SVG.get():
+    ${ _('Powered by') } <img src="${ static('desktop/art/hue-login-logo.png') }" width="40" style="vertical-align: text-top;"> -
+  % endif
   ${ _('Hue and the Hue logo are trademarks of Cloudera, Inc.') }
 </div>