浏览代码

HUE-1198 [core] Change Hue Logo

Changed logo
Improved logo on admin wizard and home app
Letterpress logo on top bar
New login form
Enrico Berti 12 年之前
父节点
当前提交
82489f250f

+ 2 - 2
apps/about/src/about/templates/admin_wizard.mako

@@ -33,7 +33,7 @@ ${ commonheader(_('About Hue'), "quick_start", user, "100px") | n,unicode }
     </div>
   </div>
 % endif
-
+<div style="position: absolute;top:110px;right:30px"><img src="/static/art/hue-logo-subtle.png"/></div>
 <div class="container-fluid">
 
   <div class="row-fluid">
@@ -41,7 +41,7 @@ ${ commonheader(_('About Hue'), "quick_start", user, "100px") | n,unicode }
       % if user.is_superuser:
         ${ _('Quick Start Wizard') } -
       % endif
-      Hue ${version} <img src="/static/art/hue-login-logo.png"/>
+      Hue ${version}
     </h2>
   </div>
 

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

@@ -134,7 +134,7 @@ from django.utils.translation import ugettext as _
     % endif
     <div class="navbar-inner">
       <div class="container-fluid">
-        <a class="brand nav-tooltip" title="${_('About Hue')}" href="/about">Hue</a>
+        <a class="brand nav-tooltip" title="${_('About Hue')}" href="/about"><img src="/static/art/hue-logo-mini-letterpress.png" /></a>
         <div id="usernameDropdown" class="btn-group pull-right">
           <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
             <i class="icon-user"></i> ${user.username}

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

@@ -25,6 +25,7 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
   <li><a href="/${ app }${ extra_path }"><i class="icon-double-angle-right"></i> ${ label is not None and label or apps[app].nice_name }</a></li>
 </%def>
 
+<div style="position: absolute;top:80px;right:30px"><img src="/static/art/hue-logo-subtle.png"/></div>
 
 <div class="container-fluid">
   <h1>${_('Welcome Home.')}</h1>

+ 133 - 96
desktop/core/src/desktop/templates/login.mako

@@ -20,117 +20,154 @@ from django.utils.translation import ugettext as _
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <title>Hue Login</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <link href="/static/ext/css/bootstrap.min.css" rel="stylesheet">
-    <link href="/static/css/hue2.css" rel="stylesheet">
-
-    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
-    <!--[if lt IE 9]>
-    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-
-    <style type="text/css">
-        body {
-            padding-top: 100px;
-        }
-    </style>
+  <meta charset="utf-8">
+  <title>${_('Hue Login')}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <link href="/static/ext/css/bootstrap.min.css" rel="stylesheet">
+  <link href="/static/ext/css/font-awesome.min.css" rel="stylesheet">
+  <link href="/static/css/hue2.css" rel="stylesheet">
+
+  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+  <!--[if lt IE 9]>
+  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
+  <style type="text/css">
+    body {
+      padding-top: 80px;
+    }
+
+    #logo {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 40px
+    }
+
+    .login-content {
+      width: 400px;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .login-content label {
+      margin-bottom: 20px;
+      font-size: 16px;
+    }
+
+    .login-content input[type='text'], .login-content input[type='password'] {
+      width: 90%;
+      margin-top: 10px;
+    }
+
+    .login-content input {
+      width: 100%;
+      padding: 10px 16px;
+    }
+
+    hr {
+      border-top-color: #DEDEDE;
+    }
+
+    ul.errorlist li {
+      font-size: 13px;
+      font-weight: normal;
+      font-style: normal;
+    }
+
+    input.error {
+      border-color: #b94a48;
+      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    }
+  </style>
 </head>
 
 <body>
-    <div class="navbar navbar-fixed-top">
-        % if conf.CUSTOM.BANNER_TOP_HTML.get():
-        <div id="banner-top" class="banner">
-            ${conf.CUSTOM.BANNER_TOP_HTML.get()}
-        </div>
-        % endif
-        <div class="navbar-inner">
-            <div class="container-fluid">
-                <a class="brand" href="#">Hue</a>
-            </div>
-        </div>
+  <div class="navbar navbar-fixed-top">
+    % if conf.CUSTOM.BANNER_TOP_HTML.get():
+    <div id="banner-top" class="banner">
+      ${conf.CUSTOM.BANNER_TOP_HTML.get()}
     </div>
+    % endif
+    <div class="navbar-inner">
+      <div class="container-fluid"></div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      <img id="logo" src="/static/art/hue-login-logo.png" />
+    </div>
+    <div class="row">
+      <div class="login-content">
+        <form method="POST" action="${action}" class="well">
+          <label
+          % if backend_name == 'OAuthBackend':
+            class="hide"
+          % endif
+          ><i class="icon-user"></i> ${_('Username')}
+              ${ form['username'] | n,unicode }
+              ${ form['username'].errors | n,unicode }
+          </label>
+          <label
+          % if backend_name in ('AllowAllBackend', 'OAuthBackend'):
+            class="hide"
+          % endif
+          ><i class="icon-lock"></i> ${_('Password')}
+              ${ form['password'] | n,unicode }
+              ${ form['password'].errors | n,unicode }
+          </label>
 
-    <div class="container">
-        <div class="row">
-            <img src="/static/art/hue-login-logo.png" style="display: block; margin-left: auto; margin-right: auto"/>
-            </br>
-        </div>
-        <div class="row">
-            <div class="span4 offset4">
-                <form method="POST" action="${action}" class="well">
-                    <label
-                    % if backend_name == 'OAuthBackend':
-                      class="hide"
-                    % endif
-                    >${_('Username')}
-                        ${ form['username'] | n,unicode }
-                        ${ form['username'].errors | n,unicode }
-                    </label>
-                    <label
-                    % if backend_name in ('AllowAllBackend', 'OAuthBackend'):
-                      class="hide"
-                    % endif
-                    >${_('Password')}
-                        ${ form['password'] | n,unicode }
-                        ${ form['password'].errors | n,unicode }
-                    </label>
-
-                    %if first_login_ever:
-                        <input type="submit" class="btn btn-primary" value="${_('Sign up')}" />
-                    %else:
-                        <input type="submit" class="btn btn-primary" value="${_('Sign in')}"/>
-                    %endif
-                    <input type="hidden" name="next" value="${next}" />
-
-                    %if login_errors:
-                        <br/>
-                        <br/>
-                        <div class="alert alert-error">
-                            <p><strong>${_('Error!')}</strong> ${_('Invalid username or password.')}</p>
-                        </div>
-                    %endif
-                </form>
+          %if login_errors:
+            <div class="alert alert-error" style="text-align: center">
+              <strong><i class="icon-warning-sign"></i> ${_('Error!')}</strong> ${_('Invalid username or password.')}
             </div>
-        </div>
-
-        %if first_login_ever:
-        <div class="row">
-            <div class="span6 offset3">
-                <div class="alert alert-block">
-                    <p>${_('Since this is your first time logging in, pick any username and password. Be sure to remember these, as')}
-                     <strong>${_('they will become your Hue superuser credentials.')}</strong>.</p>
-                </div>
+          %endif
+
+          %if first_login_ever:
+            <div class="alert alert-block">
+              <i class="icon-warning-sign"></i>
+              ${_('Since this is your first time logging in, pick any username and password. Be sure to remember these, as')}
+              <strong>${_('they will become your Hue superuser credentials.')}</strong>.
             </div>
-        </div>
-        %endif
+            <hr/>
+            <input type="submit" class="btn btn-large btn-primary" value="${_('Sign up')}" />
+          %else:
+            <hr/>
+            <input type="submit" class="btn btn-large btn-primary" value="${_('Sign in')}"/>
+          %endif
+          <input type="hidden" name="next" value="${next}" />
+        </form>
+      </div>
     </div>
+  </div>
 
-% if backend_name == 'AllowAllBackend':
   <script src="/static/ext/js/jquery/jquery-1.8.1.min.js"></script>
   <script>
     $(document).ready(function(){
+
+    % if backend_name == 'AllowAllBackend':
       $('#id_password').val('password');
-    });
-  </script>
-% endif
+    % endif
 
-% if backend_name == 'OAuthBackend':
-  <script src="/static/ext/js/jquery/jquery-1.8.1.min.js"></script>
-  <script>
-  $(document).ready(function(){
-    $("input").css({"display": "block", "margin-left": "auto", "margin-right": "auto"});
-    $("input").bind('click', function() {
-      window.location.replace('/login/oauth/');
-      return false;
+    % if backend_name == 'OAuthBackend':
+      $("input").css({"display": "block", "margin-left": "auto", "margin-right": "auto"});
+      $("input").bind('click', function() {
+        window.location.replace('/login/oauth/');
+       return false;
+      });
+    % endif
+
+      $("ul.errorlist").each(function(){
+        $(this).prev().addClass("error");
+      });
     });
-  });
   </script>
-% endif
-
 </body>
 </html>

二进制
desktop/core/static/art/hue-login-logo.png


二进制
desktop/core/static/art/hue-logo-mini-letterpress.png


二进制
desktop/core/static/art/hue-logo-subtle.png


+ 3 - 1
desktop/core/static/css/hue2.css

@@ -1,5 +1,7 @@
 .navbar .brand {
-    color: #FFFFFF;
+  color: #FFFFFF;
+  padding-top: 8px;
+  padding-bottom:0px;
 }
 
 .subnav {