Browse Source

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 năm trước cách đây
mục cha
commit
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>

BIN
desktop/core/static/art/hue-login-logo.png


BIN
desktop/core/static/art/hue-logo-mini-letterpress.png


BIN
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 {