Răsfoiți Sursa

HUE-3294 [core] Switch left menu to overlay and add some initial content and styling

Johan Ahlen 9 ani în urmă
părinte
comite
e80caf3bd5

+ 61 - 14
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -104,7 +104,7 @@ body {
   font-size: 13px;
   border-radius: 2px;
   background-color: #FFF;
-  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 
@@ -304,15 +304,68 @@ body {
 }
 
 .left-nav {
-  -ms-flex: 0 0 0;
-  flex: 0 0 0;
+  position:absolute;
+  background-color: #003F6C;
+  color: #f9f9f9;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
   overflow-x: hidden;
   white-space: nowrap;
-  background-color: lightgrey;
-  -webkit-transition: 0.4s flex;
-  -moz-transition: 0.4s flex;
-  -ms-transition: 0.4s flex;
-  transition: 0.4s flex;
+  -webkit-transition: 0.2s width;
+  -moz-transition: 0.2s width;
+  -ms-transition: 0.2s width;
+  transition: 0.2s width;
+}
+
+.left-nav-menu {
+  margin: 10px 0 0 0;
+}
+
+.left-nav-menu li {
+  padding-left: 10px;
+  list-style: none;
+  line-height: 30px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.left-nav-menu li:not(.divider) {
+  background-color: transparent;
+  -webkit-transition: 0.4s background-color;
+  -moz-transition: 0.4s background-color;
+  -ms-transition: 0.4s background-color;
+  transition: 0.4s background-color;
+}
+
+.left-nav-menu li:not(.divider):hover {
+  background-color: rgba(240, 240, 240, 0.8);
+}
+
+.left-nav-menu li a {
+  font-size: 14px;
+  letter-spacing: 1px;
+  color: #f9f9f9;
+  -webkit-transition: 0.4s color;
+  -moz-transition: 0.4s color;
+  -ms-transition: 0.4s color;
+  transition: 0.4s color;
+}
+
+.left-nav-menu li:not(.divider):hover a {
+  color: #003F6C;
+}
+
+.left-nav-menu li a:hover {
+  text-decoration: none;
+}
+
+.left-nav-visible {
+  width: 200px;
+  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.18);
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.13);
 }
 
 .assist-panel {
@@ -406,12 +459,6 @@ body {
   color: #338bb8;
 }
 
-.left-nav-visible {
-  -ms-flex: 0 0 15em;
-  flex: 0 0 15em;
-  background-color: lightgrey;
-}
-
 h1 {
   font-size: 3rem;
 }

+ 24 - 47
desktop/core/src/desktop/templates/responsive.mako

@@ -192,55 +192,32 @@ ${ hueIcons.symbols() }
 
   <div class="content-wrapper">
     <div class="left-nav">
-      Home</br>
-      </br>
-
-      <a href="javascript:void(0);" data-bind="click: function () { huePubSub.publish('switch.app', 'editor'); }">Query</a><br/>
-      <br/>
-      [Hive, Impala, Pig, PySpark, Solr, MapReduce...]<br/>
-
-      <br/>
-
-      Search Dashboards<br/>
-
-      <br/>
-
-      <a href="javascript:void(0);" data-bind="click: function () { huePubSub.publish('switch.app', 'metastore'); }">Browse</a><br/>
-      [Tables]<br/>
-      [Files]<br/>
-      [Indexes]<br/>
-      [HBase]<br/>
-
-      <br/>
-
-      Jobs<br/>
-      [YARN, MR, Hive, Impala, Spark, Sqoop, Pig]<br/>
-      Batch<br/>
-      Schedules<br/>
-      <br/>
-
-      Oozie<br/>
-      Workflows<br/>
-      Coordinators<br/>
-      Bundles<br/>
-      <br/>
-
-      Security<br/>
-      Hive Tables<br/>
-      Solr Collections<br/>
-      HDFS Acls<br/>
-      <br/>
-
-      [Custom App 1]<br/>
-      [Custom App 2]<br/>
+      <ul class="left-nav-menu">
+        <li><a href="javascript: void(0);">Reporter</a></li>
+        <li><a href="javascript: void(0);">Hive</a></li>
+        <li><a href="javascript: void(0);">Impala</a></li>
+        <li><a href="javascript: void(0);">Dashboards</a></li>
+        <li><a href="javascript: void(0);">Oozie</a></li>
+        <li class="divider"></li>
+        <li><a href="javascript: void(0);">Metastore</a></li>
+        <li><a href="javascript: void(0);">Indexes</a></li>
+        <li><a href="javascript: void(0);">Job Browser</a></li>
+        <li><a href="javascript: void(0);">File Browser</a></li>
+        <li><a href="javascript: void(0);">HBase</a></li>
+        <li><a href="javascript: void(0);">Security</a></li>
+        <li class="divider"></li>
+        <li><a href="javascript: void(0);">Custom App 1</a></li>
+        <li><a href="javascript: void(0);">Custom App 2</a></li>
+        <li><a href="javascript: void(0);">Custom App 3</a></li>
+      </ul>
     </div>
 
-    <div style="position: fixed; bottom: 0; left: 0">
-      Create Table<br/>
-      Import File<br/>
-      Import Queries<br/>
-      [+]
-    </div>
+##     <div style="position: fixed; bottom: 0; left: 0">
+##       Create Table<br/>
+##       Import File<br/>
+##       Import Queries<br/>
+##       [+]
+##     </div>
 
     <div class="left-panel" data-bind="css: { 'side-panel-closed': !leftAssistVisible() }">
       <a href="javascript:void(0);" style="z-index: 1000; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-left-side-panel" data-bind="visible: ! leftAssistVisible(), toggle: leftAssistVisible"><i class="fa fa-chevron-right"></i></a>