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

HUE-3294 [search] Integration with the new layout

Enrico Berti пре 9 година
родитељ
комит
6d23bd1

+ 10 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2765,10 +2765,19 @@ body {
   margin-top: -13px !important;
 }
 
+.hue-spinner-center.hue-spinner-xlarge {
+  margin-left: -30px !important;
+  margin-top: -30px !important;
+}
+
 .hue-spinner-large {
   font-size: 26px !important;
 }
 
+.hue-spinner-xlarge {
+  font-size: 60px !important;
+}
+
 .hue-spinner i {
   font-size: 16px;
   color: #aaa;
@@ -3439,4 +3448,4 @@ input[type='password']::-ms-reveal {
 
 .selectize-dropdown {
   z-index: 10000!important;
-}
+}

+ 29 - 4
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -65,7 +65,7 @@ body {
   position: relative;
   background-color: #338BB8;
   width: 100%;
-  z-index: 999999;
+  z-index: 1049;
 }
 
 .top-nav-left {
@@ -301,11 +301,11 @@ body {
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  /*overflow-y: auto;*/
 }
 
 .page-content .content-panel {
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .left-nav {
@@ -940,10 +940,35 @@ h6 {
 }
 
 /* editor */
-.progress {
+#editorComponents .progress {
   border: none;
 }
 
-.context-panel {
+#editorComponents .context-panel {
   display: none;
 }
+
+#editorComponents .snippet {
+  margin-right: 0;
+}
+
+/* search */
+#searchComponents .search-bar, #searchComponents .card-toolbar {
+  position: static;
+}
+
+#searchComponents .card-toolbar {
+  zoom: 0.8;
+}
+
+#searchComponents .card-toolbar a, #searchComponents .card-toolbar .draggable-widget {
+  float: left;
+}
+
+#searchComponents .card-toolbar .draggable-widget a {
+  float: none;
+}
+
+#searchComponents .form-search .input-append .search-query {
+  width: 50px;
+}

+ 4 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -342,7 +342,7 @@
         spin = value();
       } else {
         $.extend(options, value);
-        spin = ko.isObservable(value.spin) ? value.spin() : value.spin;
+        spin = typeof value.spin === 'function' ? value.spin() : value.spin;
       }
 
       ko.virtualElements.emptyNode(element);
@@ -356,6 +356,9 @@
           if (options.size === 'large') {
             $spinner.addClass('hue-spinner-large');
           }
+          if (options.size === 'xlarge') {
+            $spinner.addClass('hue-spinner-xlarge');
+          }
           if (options.center) {
             $spinner.addClass('hue-spinner-center');
           }

+ 6 - 14
desktop/core/src/desktop/templates/responsive.mako

@@ -96,15 +96,16 @@ ${ hueIcons.symbols() }
         <button class="btn dropdown-toggle" data-toggle="dropdown">
           <span class="caret"></span>
         </button>
+
         <ul class="dropdown-menu">
           % if 'beeswax' in apps:
-            <li><a href="${ url('notebook:editor') }?type=hive"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon"/> ${_('Hive')}</a></li>
+            <li><a href="#" data-bind="click: function(){ ko.dataFor($('.page-content')[0]).currentApp('editor') }"><img src="${ static(apps['beeswax'].icon_path) }" class="app-icon"/> ${_('Hive')}</a></li>
           % endif
           % if 'impala' in apps: ## impala requires beeswax anyway
             <li><a href="${ url('notebook:editor') }?type=impala"><img src="${ static(apps['impala'].icon_path) }" class="app-icon"/> ${_('Impala')}</a></li>
           % endif
           % if 'search' in apps:
-            <li><a href="${ url('search:new_search') }"><img src="${ static('search/art/icon_search_48.png') }" class="app-icon"/> ${ _('Dashboard') }</a></li>
+            <li><a href="#" data-bind="click: function(){ ko.dataFor($('.page-content')[0]).currentApp('search') }"><img src="${ static('search/art/icon_search_48.png') }" class="app-icon"/> ${ _('Dashboard') }</a></li>
           % endif
           % if 'oozie' in apps:
           % if not user.has_hue_permission(action="disable_editor_access", app="oozie") or user.is_superuser:
@@ -206,7 +207,7 @@ ${ hueIcons.symbols() }
         <li><a href="javascript: void(0);">Custom App 3</a></li>
         <li class="header">&nbsp;</li>
         <li class="header">Browse</li>
-        <li><a href="javascript: void(0);">Metastore</a></li>
+        <li><a href="javascript: { ko.dataFor($('.page-content')[0]).currentApp('metastore') }">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>
@@ -258,17 +259,8 @@ ${ hueIcons.symbols() }
     }"><div class="resize-bar">&nbsp;</div></div>
 
 
-    <div class="page-content" data-bind="niceScroll">
-      <!-- ko ifnot: currentApp() -->
-      Load
-      <a href="#" data-bind="click: function(){ currentApp('editor') }">editor</a> |
-      <a href="#" data-bind="click: function(){ currentApp('metastore') }">metastore</a> |
-      <a href="#" data-bind="click: function(){ currentApp('search') }">search</a>
-      <!-- /ko -->
-
-      <!-- ko if: isLoadingEmbeddable -->
-      <i class="fa fa-spinner fa-spin"></i>
-      <!-- /ko -->
+    <div class="page-content" data-bind="niceScroll: {horizrailenabled: false}">
+      <!-- ko hueSpinner: { spin: isLoadingEmbeddable, center: true, size: 'xlarge' } --><!-- /ko -->
       <div id="embeddable_editor" class="embeddable"></div>
       <div id="embeddable_metastore" class="embeddable"></div>
       <div id="embeddable_search" class="embeddable"></div>