Browse Source

HUE-1592 [core] Fix new navigator glitches

Changed size of home icon
Fixed Oozie dashboard styles
Removed app title ellipsis
Made boxes style cleaner (equal border all over)
Added padding to checkboxes on Metastore tables
Introduced navigator open on hover
Enrico Berti 12 years ago
parent
commit
0d00902277

+ 1 - 1
apps/metastore/src/metastore/templates/databases.mako

@@ -52,7 +52,7 @@ ${ components.menubar() }
           </%def>
           </%def>
         </%actionbar:render>
         </%actionbar:render>
 
 
-        <table class="table table-condensed table-striped datatables">
+        <table class="table table-condensed datatables">
           <thead>
           <thead>
             <tr>
             <tr>
               <th width="1%"><div class="hueCheckbox selectAll" data-selectables="databaseCheck"></div></th>
               <th width="1%"><div class="hueCheckbox selectAll" data-selectables="databaseCheck"></div></th>

+ 4 - 4
apps/metastore/src/metastore/templates/describe_partitions.mako

@@ -37,6 +37,8 @@ ${ components.menubar() }
     <div class="span9">
     <div class="span9">
       <div class="card card-small">
       <div class="card card-small">
         <h1 class="card-heading simple">${ components.breadcrumbs(breadcrumbs) }</h1>
         <h1 class="card-heading simple">${ components.breadcrumbs(breadcrumbs) }</h1>
+          <div class="card-body">
+            <p>
           % if partitions:
           % if partitions:
           <table class="table table-striped table-condensed datatables">
           <table class="table table-striped table-condensed datatables">
           <tr>
           <tr>
@@ -64,12 +66,10 @@ ${ components.menubar() }
           % endfor
           % endfor
           </table>
           </table>
           % else:
           % else:
-            <div class="card-body">
-              <p>
-                <div class="alert">${_('The table %s has no partitions.' % table.name)}</div>
+              <div class="alert">${_('The table %s has no partitions.' % table.name)}</div>
+          % endif
               </p>
               </p>
             </div>
             </div>
-          % endif
         </div>
         </div>
     </div>
     </div>
   </div>
   </div>

+ 2 - 2
apps/metastore/src/metastore/templates/tables.mako

@@ -60,7 +60,7 @@ ${ components.menubar() }
           </%def>
           </%def>
         </%actionbar:render>
         </%actionbar:render>
 
 
-        <table class="table table-condensed datatables" data-tablescroller-disable="true">
+          <table class="table table-condensed datatables" data-tablescroller-disable="true">
           <thead>
           <thead>
             <tr>
             <tr>
               <th width="1%"><div class="hueCheckbox selectAll" data-selectables="tableCheck"></div></th>
               <th width="1%"><div class="hueCheckbox selectAll" data-selectables="tableCheck"></div></th>
@@ -119,7 +119,7 @@ ${ components.menubar() }
     ko.applyBindings(viewModel);
     ko.applyBindings(viewModel);
 
 
     var tables = $(".datatables").dataTable({
     var tables = $(".datatables").dataTable({
-      "sDom": "",
+      "sDom": "<'row'r>t<'row'<'span8'i><''p>>",
       "bPaginate": false,
       "bPaginate": false,
       "bLengthChange": false,
       "bLengthChange": false,
       "bInfo": false,
       "bInfo": false,

+ 8 - 1
apps/oozie/src/oozie/templates/dashboard/list_oozie_bundle.mako

@@ -26,8 +26,12 @@
 ${ commonheader(_("Bundle Dashboard"), "oozie", user) | n,unicode }
 ${ commonheader(_("Bundle Dashboard"), "oozie", user) | n,unicode }
 ${ layout.menubar(section='bundles', dashboard=True) }
 ${ layout.menubar(section='bundles', dashboard=True) }
 
 
-
 <div class="container-fluid">
 <div class="container-fluid">
+<div class="card card-small">
+  <div class="card-body">
+  <p>
+
+
 <div class="row-fluid">
 <div class="row-fluid">
   <div class="span2">
   <div class="span2">
     <div class="sidebar-nav">
     <div class="sidebar-nav">
@@ -273,6 +277,9 @@ ${ layout.menubar(section='bundles', dashboard=True) }
 </div>
 </div>
 
 
 
 
+  </p>
+  </div>
+  </div>
 </div>
 </div>
 
 
 <div id="confirmation" class="modal hide">
 <div id="confirmation" class="modal hide">

+ 6 - 1
apps/oozie/src/oozie/templates/dashboard/list_oozie_bundles.mako

@@ -28,6 +28,9 @@ ${layout.menubar(section='bundles', dashboard=True)}
 
 
 
 
 <div class="container-fluid">
 <div class="container-fluid">
+  <div class="card card-small">
+  <div class="card-body">
+  <p>
   <form>
   <form>
     <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${ _('Search for username, name, etc...') }">
     <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${ _('Search for username, name, etc...') }">
 
 
@@ -89,7 +92,9 @@ ${layout.menubar(section='bundles', dashboard=True)}
       </tbody>
       </tbody>
      </table>
      </table>
    </div>
    </div>
-
+  </p>
+  </div>
+  </div>
 </div>
 </div>
 
 
 
 

+ 7 - 5
apps/oozie/src/oozie/templates/dashboard/list_oozie_coordinator.mako

@@ -26,8 +26,11 @@
 ${ commonheader(_("Coordinator Dashboard"), "oozie", user) | n,unicode }
 ${ commonheader(_("Coordinator Dashboard"), "oozie", user) | n,unicode }
 ${ layout.menubar(section='coordinators', dashboard=True) }
 ${ layout.menubar(section='coordinators', dashboard=True) }
 
 
-
 <div class="container-fluid">
 <div class="container-fluid">
+<div class="card card-small">
+  <div class="card-body">
+  <p>
+
 <div class="row-fluid">
 <div class="row-fluid">
   <div class="span2">
   <div class="span2">
     <div class="sidebar-nav">
     <div class="sidebar-nav">
@@ -276,10 +279,9 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
 </div>
 </div>
 
 
 
 
-
-
-
-
+  </p>
+  </div>
+</div>
 </div>
 </div>
 
 
 <div id="confirmation" class="modal hide">
 <div id="confirmation" class="modal hide">

+ 6 - 1
apps/oozie/src/oozie/templates/dashboard/list_oozie_coordinators.mako

@@ -28,6 +28,9 @@ ${layout.menubar(section='coordinators', dashboard=True)}
 
 
 
 
 <div class="container-fluid">
 <div class="container-fluid">
+  <div class="card card-small">
+  <div class="card-body">
+  <p>
   <form>
   <form>
     <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${ _('Search for username, name, etc...') }">
     <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${ _('Search for username, name, etc...') }">
 
 
@@ -94,7 +97,9 @@ ${layout.menubar(section='coordinators', dashboard=True)}
       </tbody>
       </tbody>
      </table>
      </table>
    </div>
    </div>
-
+  </p>
+  </div>
+  </div>
 </div>
 </div>
 
 
 
 

+ 7 - 0
apps/oozie/src/oozie/templates/dashboard/list_oozie_info.mako

@@ -28,6 +28,10 @@ ${ layout.menubar(section='oozie', dashboard=True) }
 
 
 <div class="container-fluid">
 <div class="container-fluid">
 
 
+  <div class="card card-small">
+  <div class="card-body">
+  <p>
+
   <h1 class="card-heading card-heading-noborder simple pull-right" style="margin-top: -4px;">
   <h1 class="card-heading card-heading-noborder simple pull-right" style="margin-top: -4px;">
   ${ _('Oozie status') }
   ${ _('Oozie status') }
   <div class="label ${ utils.get_status(oozie_status['systemMode']) }" style="line-height: 20px; vertical-align: middle">
   <div class="label ${ utils.get_status(oozie_status['systemMode']) }" style="line-height: 20px; vertical-align: middle">
@@ -118,6 +122,9 @@ ${ layout.menubar(section='oozie', dashboard=True) }
       <a href="${ url('oozie:list_oozie_bundles') }" class="btn">${ _('Back') }</a>
       <a href="${ url('oozie:list_oozie_bundles') }" class="btn">${ _('Back') }</a>
     </div>
     </div>
 
 
+    </p>
+    </div>
+    </div>
   </div>
   </div>
 
 
 
 

+ 8 - 2
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow.mako

@@ -25,10 +25,12 @@
 <%namespace name="utils" file="../utils.inc.mako" />
 <%namespace name="utils" file="../utils.inc.mako" />
 
 
 ${ commonheader(_("Workflow Dashboard"), "oozie", user) | n,unicode }
 ${ commonheader(_("Workflow Dashboard"), "oozie", user) | n,unicode }
-${ layout.menubar(section='dashboard', dashboard=True) }
-
+${ layout.menubar(section='workflows', dashboard=True) }
 
 
 <div class="container-fluid" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 <div class="container-fluid" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<div class="card card-small">
+  <div class="card-body">
+  <p>
 
 
   <div class="row-fluid">
   <div class="row-fluid">
     <div class="span2">
     <div class="span2">
@@ -289,6 +291,10 @@ ${ layout.menubar(section='dashboard', dashboard=True) }
 
 
   </div>
   </div>
 
 
+
+  </p>
+  </div>
+  </div>
 </div>
 </div>
 
 
 <div id="confirmation" class="modal hide">
 <div id="confirmation" class="modal hide">

+ 7 - 1
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow_action.mako

@@ -28,6 +28,9 @@ ${ layout.menubar(section='workflows', dashboard=True) }
 
 
 
 
 <div class="container-fluid">
 <div class="container-fluid">
+  <div class="card card-small">
+  <div class="card-body">
+  <p>
  <div class="row-fluid">
  <div class="row-fluid">
     <div class="span2">
     <div class="span2">
       <div class="sidebar-nav">
       <div class="sidebar-nav">
@@ -176,9 +179,12 @@ ${ layout.menubar(section='workflows', dashboard=True) }
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
-
+</p>
+    </div>
+    </div>
 </div>
 </div>
 
 
+
 <script src="/static/ext/js/codemirror-3.11.js"></script>
 <script src="/static/ext/js/codemirror-3.11.js"></script>
 <link rel="stylesheet" href="/static/ext/css/codemirror.css">
 <link rel="stylesheet" href="/static/ext/css/codemirror.css">
 <script src="/static/ext/js/codemirror-xml.js"></script>
 <script src="/static/ext/js/codemirror-xml.js"></script>

+ 7 - 3
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflows.mako

@@ -25,10 +25,13 @@
 
 
 
 
 ${ commonheader(_("Workflows Dashboard"), "oozie", user) | n,unicode }
 ${ commonheader(_("Workflows Dashboard"), "oozie", user) | n,unicode }
-${ layout.menubar(section='dashboard', dashboard=True) }
+${ layout.menubar(section='workflows', dashboard=True) }
 
 
 
 
 <div class="container-fluid">
 <div class="container-fluid">
+  <div class="card card-small">
+  <div class="card-body">
+  <p>
   <form>
   <form>
     <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${ _('Search for username, name, etc...') }">
     <input type="text" id="filterInput" class="input-xlarge search-query" placeholder="${ _('Search for username, name, etc...') }">
 
 
@@ -96,9 +99,10 @@ ${ layout.menubar(section='dashboard', dashboard=True) }
       </tbody>
       </tbody>
      </table>
      </table>
    </div>
    </div>
-
+    </p>
+  </div>
+</div>
 </div>
 </div>
-
 
 
 <div id="confirmation" class="modal hide">
 <div id="confirmation" class="modal hide">
   <div class="modal-header">
   <div class="modal-header">

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

@@ -146,6 +146,7 @@ from django.utils.translation import ugettext as _
         placement: "bottom"
         placement: "bottom"
       });
       });
 
 
+      % if 'jobbrowser' in apps:
       var JB_CHECK_INTERVAL_IN_MILLIS = 30000;
       var JB_CHECK_INTERVAL_IN_MILLIS = 30000;
       window.setTimeout(checkJobBrowserStatus, JB_CHECK_INTERVAL_IN_MILLIS);
       window.setTimeout(checkJobBrowserStatus, JB_CHECK_INTERVAL_IN_MILLIS);
 
 
@@ -162,6 +163,30 @@ from django.utils.translation import ugettext as _
           window.setTimeout(checkJobBrowserStatus, JB_CHECK_INTERVAL_IN_MILLIS);
           window.setTimeout(checkJobBrowserStatus, JB_CHECK_INTERVAL_IN_MILLIS);
         });
         });
       }
       }
+      % endif
+
+      var openTimeout, closeTimeout;
+      $(".navigator ul.nav li.dropdown").hover(function () {
+        var _this = $(this);
+        var _timeout = 500;
+        if ($(".navigator").find("ul.dropdown-menu:visible").length > 0) {
+          _timeout = 10;
+        }
+        window.clearTimeout(closeTimeout);
+        openTimeout = window.setTimeout(function () {
+          $(".navigator li.open").removeClass("open");
+          $(".navigator ul.dropdown-menu").hide();
+          _this.find("ul.dropdown-menu").show();
+        }, _timeout);
+      },
+      function () {
+        var _this = $(this);
+        window.clearTimeout(openTimeout);
+        closeTimeout = window.setTimeout(function () {
+          $(".navigator li.open").removeClass("open");
+          $(".navigator").find("ul.dropdown-menu").hide();
+        }, 500);
+      });
 
 
       var _skew = -1;
       var _skew = -1;
       $("[data-hover]").on("mouseover", function(){
       $("[data-hover]").on("mouseover", function(){
@@ -214,7 +239,7 @@ from django.utils.translation import ugettext as _
   </div>
   </div>
     <a class="brand nav-tooltip pull-left" title="${_('About Hue')}" href="/about"><img src="/static/art/hue-logo-mini-white.png" data-orig="/static/art/hue-logo-mini-white.png" data-hover="/static/art/hue-logo-mini-white-hover.png"/></a>
     <a class="brand nav-tooltip pull-left" title="${_('About Hue')}" href="/about"><img src="/static/art/hue-logo-mini-white.png" data-orig="/static/art/hue-logo-mini-white.png" data-hover="/static/art/hue-logo-mini-white-hover.png"/></a>
      <ul class="nav nav-pills pull-left">
      <ul class="nav nav-pills pull-left">
-       <li><a title="${_('My documents')}" href="/home"><i class="icon-home"></i></a></li>
+       <li><a title="${_('My documents')}" href="/home"><i class="icon-home" style="font-size: 19px"></i></a></li>
        <li class="dropdown">
        <li class="dropdown">
          <a title="${_('Query data')}" href="#" data-toggle="dropdown" class="dropdown-toggle">${_('Query Editors')} <b class="caret"></b></a>
          <a title="${_('Query data')}" href="#" data-toggle="dropdown" class="dropdown-toggle">${_('Query Editors')} <b class="caret"></b></a>
          <ul role="menu" class="dropdown-menu">
          <ul role="menu" class="dropdown-menu">

+ 6 - 0
desktop/core/static/css/hue3.css

@@ -1271,6 +1271,7 @@ a#advanced-btn:hover {
 .card-tab {
 .card-tab {
   margin-top: 0;
   margin-top: 0;
   border-bottom: 1px solid #D8D8D8;
   border-bottom: 1px solid #D8D8D8;
+  border-top: 0;
 }
 }
 
 
 .card-tab-bordertop {
 .card-tab-bordertop {
@@ -1386,6 +1387,10 @@ a#advanced-btn:hover {
   line-height: 14px !important;
   line-height: 14px !important;
 }
 }
 
 
+.navigator .nav-pills .open .dropdown-toggle, .navigator .nav > li.dropdown.open.active > a:hover, .navigator .nav > li.dropdown.open.active > a:focus {
+  color: #FFFFFF;
+}
+
 .currentApp {
 .currentApp {
   font-size: 20px;
   font-size: 20px;
   padding-top: 13px;
   padding-top: 13px;
@@ -1400,6 +1405,7 @@ a#advanced-btn:hover {
   padding: 0 !important;
   padding: 0 !important;
   margin-top: -4px !important;
   margin-top: -4px !important;
   border: none !important;
   border: none !important;
+  max-width: none!important;
 }
 }
 
 
 .currentApp a:focus, .currentApp a:hover {
 .currentApp a:focus, .currentApp a:hover {

+ 0 - 4
desktop/core/static/ext/css/bootplus.css

@@ -6109,8 +6109,6 @@ input.search-query {
   background-color: #f5f5f5;
   background-color: #f5f5f5;
   border: 1px solid #d8d8d8;
   border: 1px solid #d8d8d8;
   border-bottom: 1px solid #d5d5d5;
   border-bottom: 1px solid #d5d5d5;
-  border-top-width: 0;
-  border-bottom-width: 2px;
   -webkit-border-radius: 3px;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
           border-radius: 3px;
@@ -6623,8 +6621,6 @@ input.search-query {
   margin: 10px 0 20px 0;
   margin: 10px 0 20px 0;
   background-color: #ffffff;
   background-color: #ffffff;
   border: 1px solid #d8d8d8;
   border: 1px solid #d8d8d8;
-  border-top-width: 0;
-  border-bottom-width: 2px;
   -webkit-border-radius: 3px;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
           border-radius: 3px;

+ 2 - 2
tools/bootplus/less/bootplus/cards.less

@@ -7,8 +7,8 @@
    margin: 10px 0 20px 0;
    margin: 10px 0 20px 0;
    padding-top: 20px;
    padding-top: 20px;
    border: 1px solid @navlistBorder;
    border: 1px solid @navlistBorder;
-   border-bottom-width: 2px;
-   border-top-width: 0;
+//   border-bottom-width: 2px;
+//   border-top-width: 0;
    background-color: @white;
    background-color: @white;
    .border-radius(@borderRadiusSmall);
    .border-radius(@borderRadiusSmall);
    .box-shadow(none);
    .box-shadow(none);

+ 2 - 2
tools/bootplus/less/bootplus/navs.less

@@ -8,8 +8,8 @@
   background-color: @grayLighter;
   background-color: @grayLighter;
   border: 1px solid @navlistBorder;
   border: 1px solid @navlistBorder;
   border-bottom: 1px solid @navlistBorderBottom;
   border-bottom: 1px solid @navlistBorderBottom;
-  border-bottom-width: 2px;
-  border-top-width: 0;
+//  border-bottom-width: 2px;
+//  border-top-width: 0;
   .border-radius(@borderRadiusSmall);
   .border-radius(@borderRadiusSmall);
 }
 }