Explorar o código

HUE-3294 [core] Style the top right nav actions

Johan Ahlen %!s(int64=9) %!d(string=hai) anos
pai
achega
d8b90d0

+ 48 - 6
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -84,11 +84,26 @@ body {
   flex: 0 0 300px;
 }
 
+
+.top-nav-right .compose-action {
+  float: right;
+  margin-right: 15px;
+}
+
+.top-nav-right .dropdown-menu {
+  margin-left: -80px;
+}
+
 .compose-action {
   float: right;
   margin-top: 10px;
   z-index: 999999;
   line-height: 20px;
+  border-radius: 4px;
+}
+
+.compose-action:hover .btn {
+  background-color: rgba(240, 240, 240, 0.4);
 }
 
 .compose-action .btn {
@@ -103,10 +118,10 @@ body {
   -mos-transition-duration: 0.2s;
   -ms-transition-duration: 0.2s;
   transition-duration: 0.2s;
-  -webkit-transition-property: background-color, color, opacity;
-  -moz-transition-property: background-color, color, opacity;
-  -ms-transition-property: background-color, color, opacity;
-  transition-property: background-color, color, opacity;
+  -webkit-transition-property: background-color, color;
+  -moz-transition-property: background-color, color;
+  -ms-transition-property: background-color, color;
+  transition-property: background-color, color;
 }
 
 .compose-action .btn:hover {
@@ -114,6 +129,30 @@ body {
   color: #338BB8;
 }
 
+.jobs-badge {
+  color: #338BB8;
+  background-color: #f9f9f9;
+  float: right;
+  margin-left: 4px;
+  padding: 1px 5px;
+  border-radius: 10px;
+  font-size: 12px;
+
+  -webkit-transition-duration: 0.2s;
+  -mos-transition-duration: 0.2s;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-property: background-color, color;
+  -moz-transition-property: background-color, color;
+  -ms-transition-property: background-color, color;
+  transition-property: background-color, color;
+}
+
+.compose-action .btn:hover .jobs-badge {
+  background-color: #338BB8;
+  color: rgba(240, 240, 240, 0.8);
+}
+
 .compose-action .btn:first-child:active,
 .compose-action .btn:first-child {
   border-top-left-radius: 4px;
@@ -122,9 +161,12 @@ body {
   box-shadow: none;
 }
 
-.compose-action .btn:nth-child(2) {
-  margin-left: 0;
+.compose-action .btn:last-of-type:not(:first-child) {
   padding-left: 1px;
+}
+
+.compose-action .btn:last-of-type {
+  margin-left: 0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   box-shadow: none;

+ 23 - 0
desktop/core/src/desktop/templates/responsive.mako

@@ -156,6 +156,29 @@ ${ hueIcons.symbols() }
       </div>
     </div>
     <div class="top-nav-right">
+      % if user.is_authenticated() and section != 'login':
+
+        <div class="compose-action btn-group">
+          <button class="btn">${user.username}</button>
+          % if user.is_superuser:
+            <button class="btn dropdown-toggle" data-toggle="dropdown">
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" >
+              <li><a href="${ url('useradmin.views.list_users') }"><i class="fa fa-group"></i> ${_('Manage Users')}</a></li>
+              <li><a href="${ url('useradmin.views.list_permissions') }"><i class="fa fa-key"></i> ${_('Set Permissions')}</a></li>
+              <li><a href="/about">${_('Help')}</a></li>
+              <li><a href="/about">${_('About Hue')}</a></li>
+              <li class="divider"></li>
+              <li><a title="${_('Sign out')}" href="/accounts/logout/"><i class="fa fa-sign-out"></i> ${ _('Sign out') }</a></li>
+            </ul>
+          % endif
+        </div>
+
+        <div class="compose-action btn-group">
+          <button class="btn" title="${_('Running jobs and workflows')}" >${ _('Jobs') } <div class="jobs-badge">20</div></button>
+        </div>
+      % endif
     </div>
   </div>