瀏覽代碼

HUE-6077 [frontend] Simplified top bar and removed dropdown carets

Enrico Berti 8 年之前
父節點
當前提交
335842b

文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 28 - 18
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -91,8 +91,8 @@ body {
   z-index: 2999;
   top: 45px;
   padding: 10px;
-  max-height: 350px;
-  width: 400px;
+  max-height: 400px;
+  width: 500px;
   right: 10px;
   font-size: 13px;
   border-radius: @hue-panel-border-radius;
@@ -115,18 +115,27 @@ body {
   padding: 4px;
 }
 
-.compose-action {
+.btn-flat {
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.dropdown-menu-new {
+  margin-left: 267px;
+}
+
+.navbar-dropdown-flat {
   margin-top: 10px;
   z-index: 999999;
   line-height: 20px;
   border-radius: 4px;
 }
 
-.compose-action:hover .btn {
+.navbar-dropdown-flat:hover .btn, .btn-flat:hover {
   background-color: rgba(240, 240, 240, 0.6) !important;
 }
 
-.compose-action .btn {
+.navbar-dropdown-flat .btn, .btn-flat {
   color: @hue-primary-color-dark;
   border: 1px solid transparent;
   background-color: transparent;
@@ -136,8 +145,9 @@ body {
   .hue-ease-transition(~"background-color, color");
 }
 
-.compose-action .btn:hover {
+.navbar-dropdown-flat .btn:hover, .btn-flat:hover {
   background-color: rgba(240, 240, 240, 0.92);
+  border: 1px solid transparent;
   color: @hue-primary-color-dark;
 }
 
@@ -152,47 +162,47 @@ body {
   .hue-ease-transition(~"background-color, color");
 }
 
-.compose-action .btn:hover .jobs-badge {
+.navbar-dropdown-flat .btn:hover .jobs-badge {
   background-color: @hue-primary-color-dark;
   color: rgba(240, 240, 240, 0.92);
 }
 
-.compose-action .btn:first-child:active,
-.compose-action .btn:first-child {
+.navbar-dropdown-flat .btn:first-child:active,
+.navbar-dropdown-flat .btn:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   padding-right: 2px;
   box-shadow: none;
 }
 
-.compose-action .btn:last-of-type:not(:first-child) {
+.navbar-dropdown-flat .btn:last-of-type:not(:first-child) {
   padding-left: 4px;
 }
 
-.compose-action .btn:last-of-type {
+.navbar-dropdown-flat .btn:last-of-type {
   margin-left: 0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   box-shadow: none;
 }
 
-.compose-action .dropdown-menu img {
+.navbar-dropdown .dropdown-menu img {
   height: 18px;
   width: 18px;
   margin: -1px 2px 0 -7px;
 }
 
-.compose-action svg {
+.navbar-dropdown svg {
   margin: 0 2px -4px -7px;
   display: inline-block !important; // Conflicts with nv.d3.css
 }
 
-.compose-action .dropdown-menu i {
+.navbar-dropdown .dropdown-menu i {
   margin: -1px 2px 0 -7px;
 }
 
-.compose-action .dropdown-menu i,
-.compose-action .dropdown-menu svg {
+.navbar-dropdown .dropdown-menu i,
+.navbar-dropdown .dropdown-menu svg {
   color: @hue-primary-color-dark;
   fill: @hue-primary-color-dark;
   height: 18px;
@@ -200,8 +210,8 @@ body {
   font-size: 14px;
 }
 
-.compose-action a:hover i,
-.compose-action a:hover svg {
+.navbar-dropdown a:hover i,
+.navbar-dropdown a:hover svg {
   color: @cui-white;
   fill: @cui-white;
 }

+ 8 - 21
desktop/core/src/desktop/templates/hue.mako

@@ -109,13 +109,9 @@ ${ hueIcons.symbols() }
           <svg style="height: 24px; width: 120px;"><use xlink:href="#hi-logo"></use></svg>
         </a>
 
-        <div class="compose-action btn-group">
-          <button class="btn" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }" title="${ _('Hive editor') }">${ _('Compose') }</button>
-          <button class="btn dropdown-toggle" data-toggle="dropdown">
-            <span class="caret"></span>
-          </button>
-
-          <ul class="dropdown-menu">
+        <div class="navbar-dropdown">
+          <button class="btn btn-primary pull-right" title="${ _('Compose') }" data-toggle="dropdown">${ _('NEW') }</button>
+          <ul class="dropdown-menu dropdown-menu-new">
             % if 'beeswax' in apps or 'impala' in apps or SHOW_NOTEBOOKS.get() or interpreters:
               <li class="dropdown-submenu">
                 <a data-rel="navigator-tooltip" href="javascript: void(0)" data-bind="click: function(){ page('/editor'); onePageViewModel.changeEditorType('hive', true); }"><i class="fa fa-fw fa-edit inline-block"></i> ${ _('Editor') }</a>
@@ -190,33 +186,24 @@ ${ hueIcons.symbols() }
 
       <div class="top-nav-right">
         % if user.is_authenticated() and section != 'login':
-        <div class="compose-action btn-group pull-right">
+        <div class="dropdown navbar-dropdown pull-right">
           <%
             view_profile = user.has_hue_permission(action="access_view:useradmin:edit_user", app="useradmin") or user.is_superuser
           %>
-          <button class="btn"
-          % if view_profile:
-            data-bind="click: function(){ page('/useradmin/users/') }" title="${ _('View Profile') if is_ldap_setup else _('Edit Profile') }"
-          % endif
-          >
-          ${ user.username }
-          </button>
-          <button class="btn dropdown-toggle" data-toggle="dropdown">
-            <span class="caret"></span>
-          </button>
+          <button class="btn btn-flat" data-toggle="dropdown"><i class="fa fa-user"></i> ${ user.username }</button>
           <ul class="dropdown-menu">
             % if view_profile:
-            <li><a href="${ url('useradmin.views.edit_user', username=user.username) }"><i class="fa fa-key"></i> ${_('Profile')}</a></li>
+            <li><a href="javascript:void(0)" data-bind="click: function(){ page('/useradmin/users/') }" title="${ _('View Profile') if is_ldap_setup else _('Edit Profile') }"><i class="fa fa-fw fa-user"></i> ${_('My Profile')}</a></li>
             % endif
             % if user.is_superuser:
-            <li data-bind="click: function () { page('/useradmin/users/') }"><a href="javascript: void(0);"><i class="fa fa-group"></i> ${_('Manage Users')}</a></li>
+            <li data-bind="click: function () { page('/useradmin/users/') }"><a href="javascript: void(0);"><i class="fa fa-fw fa-group"></i> ${_('Manage Users')}</a></li>
             % endif
             <li><a href="http://gethue.com" target="_blank"><span class="dropdown-no-icon">${_('Help')}</span></a></li>
             % if user.is_superuser:
             <li><a href="/about/"><span class="dropdown-no-icon">${_('About Hue')}</span></a></li>
             % endif
             <li class="divider"></li>
-            <li><a title="${_('Sign out')}" href="/accounts/logout/"><i class="fa fa-sign-out"></i> ${ _('Sign out') }</a></li>
+            <li><a title="${_('Sign out')}" href="/accounts/logout/"><i class="fa fa-fw fa-sign-out"></i> ${ _('Sign out') }</a></li>
           </ul>
         </div>
         % endif

+ 9 - 15
desktop/core/src/desktop/templates/ko_components.mako

@@ -160,13 +160,11 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="hue-history-panel-template">
-    <div class="compose-action btn-group  pull-right">
-      <button class="btn" title="${_('Task history')}" data-bind="toggle: historyPanelVisible">
-        <i class="fa fa-history"></i>
-          <div class="jobs-badge" data-bind="text: historyRunningJobs().length, visible: historyRunningJobs().length > 0"></div>
-          <div class="jobs-badge" data-bind="text: historyFinishedJobs().length, visible: historyFinishedJobs().length > 0"></div>
-      </button>
-    </div>
+    <button class="btn btn-flat pull-right" title="${_('Task history')}" data-bind="toggle: historyPanelVisible">
+      <i class="fa fa-history"></i>
+        <div class="jobs-badge" data-bind="text: historyRunningJobs().length, visible: historyRunningJobs().length > 0"></div>
+        <div class="jobs-badge" data-bind="text: historyFinishedJobs().length, visible: historyFinishedJobs().length > 0"></div>
+    </button>
 
     <div class="jobs-panel" data-bind="visible: historyPanelVisible" style="display: none;">
       <a class="pointer pull-right" data-bind="click: function(){ historyPanelVisible(false); }"><i class="fa fa-times"></i></a>
@@ -366,15 +364,11 @@ from desktop.views import _ko
   </script>
 
   <script type="text/html" id="hue-job-browser-panel-template">
-    <div class="compose-action btn-group pull-right">
-      <button class="btn" title="${_('Job browser')}" data-bind="click: function(){ page('/jobbrowser/') }">${ _('Jobs') }
-        <div id="jobBrowserCount" class="jobs-badge" title="${_('Running jobs')}" data-bind="visible: jobCount() > 0, text: jobCount">0</div>
-      </button>
-      <button class="btn dropdown-toggle" data-bind="toggle: jobsPanelVisible" title="${_('Inline Job browser')}">
-        <span class="caret"></span>
-      </button>
-    </div>
+    <button class="btn btn-flat pull-right" title="${_('Preview Job browser')}" data-bind="toggle: jobsPanelVisible">${ _('Jobs') }
+      <div id="jobBrowserCount" class="jobs-badge" title="${_('Running jobs')}" data-bind="visible: jobCount() > 0, text: jobCount">0</div>
+    </button>
     <div class="jobs-panel" data-bind="visible: jobsPanelVisible" style="display: none;">
+      <a href="javascript:void(0)" class="inactive-action pull-right" data-bind="click: function(){ page('/jobbrowser/'); jobsPanelVisible(false); }"><i class="fa fa-expand" title="${ _('Open Job Browser') }"></i></a>
       <span style="font-size: 15px; font-weight: 300">${_('Jobs')} | ${_('Workflows')} | ${_('Schedules')}</span>
       <div id="mini_jobbrowser"></div>
     </div>

部分文件因文件數量過多而無法顯示