Преглед изворни кода

HUE-5767 [core] Started restyling the login page for Hue 4

Enrico Berti пре 8 година
родитељ
комит
fdc304e5af

+ 1 - 0
Gruntfile.js

@@ -37,6 +37,7 @@ module.exports = function(grunt) {
           'desktop/core/src/desktop/static/desktop/css/hue.css': 'desktop/core/src/desktop/static/desktop/less/hue.less',
           'desktop/core/src/desktop/static/desktop/css/hue3-extra.css': 'desktop/core/src/desktop/static/desktop/less/hue3-extra.less',
           'desktop/core/src/desktop/static/desktop/css/login.css': 'desktop/core/src/desktop/static/desktop/less/login.less',
+          'desktop/core/src/desktop/static/desktop/css/login4.css': 'desktop/core/src/desktop/static/desktop/less/login4.less',
           'desktop/core/src/desktop/static/desktop/css/httperrors.css': 'desktop/core/src/desktop/static/desktop/less/httperrors.less',
           'apps/metastore/src/metastore/static/metastore/css/metastore.css': 'apps/metastore/src/metastore/static/metastore/less/metastore.less',
           'desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css': 'desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less',

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/login.css


+ 17 - 0
desktop/core/src/desktop/static/desktop/css/login4.css

@@ -0,0 +1,17 @@
+/*!
+Licensed to Cloudera, Inc. under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  Cloudera, Inc. licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+ */.login-container .logo{width:140px;height:70px;text-align:center}.svg-hue-logo-main{fill:#338BB8}.svg-hue-logo-trunk{fill:#A585B9}

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-mixins.less

@@ -27,6 +27,7 @@
 
 @hue-primary-color-dark: #338BB8;
 @hue-primary-color-light: #DBE8F1;
+@hue-trunk: #A585B9;
 
 @hue-disabled-color: @cui-gray-100;
 @hue-error-color: @cui-red-400;

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

@@ -64,7 +64,7 @@ body {
 }
 
 .svg-hue-logo-trunk {
-  fill: #D7B9EB;
+  fill: @hue-trunk;
 }
 
 .top-nav {

+ 88 - 95
desktop/core/src/desktop/static/desktop/less/login.less

@@ -15,6 +15,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
+@import (reference) "hue-mixins.less";
 
 @-webkit-keyframes spinner {
   from {
@@ -33,116 +34,106 @@
   background: #FFFFFF;
   border: 1px solid #E0E2E3;
   border-radius: 4px;
-}
-
-.login-container a {
-  white-space: normal;
-}
-
-.login-container .logo {
-  background-color: #FFF;
-  width: 70px;
-  height: 70px;
-  text-align: center;
-  -webkit-border-radius: 35px;
-  -moz-border-radius: 35px;
-  border-radius: 35px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 35px;
-  margin-bottom: 35px;
-}
-
-.login-container .empty-logo {
-  background-color: #FFF;
-  width: 70px;
-  height: 70px;
-}
-
-.login-container .logo img {
-  margin-top: 2px;
-}
-
-.login-container form {
-  margin-left: 75px;
-  margin-right: 75px;
-}
-
-.login-container form input[type='submit'], .login-container form select {
-  width: 100%;
-}
+  a {
+    white-space: normal;
+  }
+  .logo {
+    background-color: #FFF;
+    width: 70px;
+    height: 70px;
+    text-align: center;
+    -webkit-border-radius: 35px;
+    -moz-border-radius: 35px;
+    border-radius: 35px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 35px;
+    margin-bottom: 35px;
+  }
+  .empty-logo {
+    background-color: #FFF;
+    width: 70px;
+    height: 70px;
+  }
+  .logo img {
+    margin-top: 2px;
+  }
 
-.login-container form .text-input {
-  padding: 0 10px 2px 10px;
-  border: 1px solid #E0E2E3;
-  border-radius: 3px;
-  margin-bottom: 20px;
-}
+  form {
+    margin-left: 75px;
+    margin-right: 75px;
+    input[type='submit'], .login-container form select {
+      width: 100%;
+    }
+    .text-input {
+      padding: 0 10px 2px 10px;
+      border: 1px solid #E0E2E3;
+      border-radius: 3px;
+      margin-bottom: 20px;
+    }
+    .text-input.error {
+      border-color: #D0021B;
+    }
+    ul.errorlist li {
+      color: #D0021B;
+      padding: 0;
+      font-weight: normal;
+      font-style: normal;
+      margin-top: -10px;
+      margin-bottom: 20px;
+    }
+    input[type='text'], input[type='password'], input[type='text']:hover, input[type='password']:hover {
+      padding: 0;
+      border: none;
+      box-shadow: none;
+      background: #FFFFFF;
+      height: 45px;
+      font-size: 16px;
+      color: #9e9e9e;
+      font-weight: 400;
+      resize: none;
+      margin: 0;
+      width: 100%;
+    }
+
+    input[type='submit'] {
+      height: 45px;
+      min-height: 45px;
+      font-weight: normal;
+      text-shadow: none;
+      margin-left: 0;
+      border-radius: 3px;
+      font-size: 16px;
+      margin-bottom: 55px;
+    }
+  }
 
-.login-container form .text-input.error {
-  border-color: #D0021B;
-}
+  h4 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
 
-.login-container form ul.errorlist li {
-  color: #D0021B;
-  padding: 0;
-  font-weight: normal;
-  font-style: normal;
-  margin-top: -10px;
-  margin-bottom: 20px;
 }
 
 :-webkit-autofill, :-webkit-autofill:focus {
-  -webkit-box-shadow: 0 0 0px 1000px white inset!important;
-  -webkit-text-fill-color: #9e9e9e!important;
+  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+  -webkit-text-fill-color: #9e9e9e !important;
 }
 
 ::-webkit-input-placeholder {
-   color: #CCD1D9!important;
+  color: #CCD1D9 !important;
 }
 
 :-moz-placeholder { /* Firefox 18- */
-   color: #CCD1D9!important;
+  color: #CCD1D9 !important;
 }
 
-::-moz-placeholder {  /* Firefox 19+ */
-   color: #CCD1D9!important;
+::-moz-placeholder { /* Firefox 19+ */
+  color: #CCD1D9 !important;
 }
 
 :-ms-input-placeholder {
-   color: #CCD1D9!important;
-}
-
-.login-container form input[type='text'], .login-container form input[type='password'], .login-container form input[type='text']:hover, .login-container form input[type='password']:hover {
-  padding: 0;
-  border: none;
-  box-shadow: none;
-  background: #FFFFFF;
-  height: 45px;
-  font-size: 16px;
-  color: #9e9e9e;
-  font-weight: 400;
-  resize: none;
-  margin: 0;
-  width: 100%;
-}
-
-.login-container form input[type='submit'] {
-  height: 45px;
-  min-height: 45px;
-  font-weight: normal;
-  text-shadow: none;
-  margin-left: 0;
-  background: #338BB8;
-  border-color: #338BB8;
-  border-radius: 3px;
-  font-size: 16px;
-  margin-bottom: 55px;
-}
-
-.login-container h4 {
-  text-align: center;
-  margin-bottom: 20px;
+  color: #CCD1D9 !important;
 }
 
 .tooltip {
@@ -160,15 +151,18 @@
 
 @media screen and (max-width: 800px) {
   body {
-    padding-top: 40px!important;
+    padding-top: 40px !important;
   }
+
   .login-box {
     width: 300px;
   }
+
   .login-container form {
     margin-left: 10px;
     margin-right: 10px;
   }
+
   .login-container form input[type='submit'] {
     margin-bottom: 20px;
   }
@@ -186,4 +180,3 @@
   background: transparent;
   border: none;
 }
-

+ 34 - 0
desktop/core/src/desktop/static/desktop/less/login4.less

@@ -0,0 +1,34 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ 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.
+*/
+@import (reference) "hue-mixins.less";
+
+.login-container {
+  .logo {
+    width: 140px;
+    height: 70px;
+    text-align: center;
+  }
+}
+
+.svg-hue-logo-main {
+  fill: @hue-primary-color-dark;
+}
+
+.svg-hue-logo-trunk {
+  fill: @hue-trunk;
+}

+ 16 - 7
desktop/core/src/desktop/templates/login.mako

@@ -19,6 +19,7 @@
   from django.utils.translation import ugettext as _
   from desktop.views import commonheader, commonfooter
   from useradmin.password_policy import is_password_policy_enabled, get_password_hint
+  from desktop.conf import is_hue4
 %>
 
 <%namespace name="hueIcons" file="/hue_icons.mako" />
@@ -26,10 +27,15 @@
 ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True) | n,unicode }
 
 <link rel="stylesheet" href="${ static('desktop/css/login.css') }">
-<link rel="stylesheet" href="${ static('desktop/ext/chosen/chosen.min.css') }">
+%if is_hue4():
+<link rel="stylesheet" href="${ static('desktop/css/login4.css') }">
+%endif
+
 <style type="text/css">
   body {
+    %if not is_hue4():
     background-color: #FAFAFA;
+    %endif
     padding-top: 150px;
   }
 
@@ -42,8 +48,7 @@ ${ commonheader(_("Welcome to Hue"), "login", user, request, "50px", True, True)
   }
 </style>
 
-${ hueIcons.symbols() }
-
+%if not is_hue4():
 <div class="navigator">
   <div class="pull-right">
 
@@ -58,7 +63,7 @@ ${ hueIcons.symbols() }
     </svg>
   </a>
 </div>
-
+%endif
 
 <div class="login-container">
 
@@ -70,7 +75,11 @@ ${ hueIcons.symbols() }
     </div>
     % else:
     <div class="logo">
+      %if is_hue4():
+      <svg style="height: 70px; width: 140px;"><use xlink:href="#hi-logo"></use></svg>
+      %else:
       <img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70" alt="${ _('Hue logo') }">
+      %endif
     </div>
     % endif
 
@@ -143,14 +152,14 @@ ${ hueIcons.symbols() }
 
 <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;"  alt="${ _('Hue logo') }"> -
+    ${ _('Powered by') } <img src="${ static('desktop/art/hue-login-logo.png') }" width="40" style="vertical-align: middle"  alt="${ _('Hue logo') }"> -
   % endif
   ${ _('Hue and the Hue logo are trademarks of Cloudera, Inc.') }
 </div>
 
-
+%if not is_hue4():
 <div class="footer"></div>
-
+%endif
 
 <script>
   $(document).ready(function () {

Неке датотеке нису приказане због велике количине промена