浏览代码

HUE-7832 [editor] Show editor documents in the left assist instead of home

Johan Ahlen 8 年之前
父节点
当前提交
96e8157c84

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 1 - 43
desktop/core/src/desktop/static/desktop/js/document/hueFileEntry.js

@@ -101,49 +101,7 @@ var HueFileEntry = (function () {
     self.isFilterVisible = ko.observable(false);
     self.filter = ko.observable('').extend({ rateLimit: 400 });
 
-    self.availableTypeFilters = ko.pureComputed(function () {
-      var filters = {};
-
-      self.entries().forEach(function (entry) {
-        var type = entry.definition().type;
-        if (!filters[type] && type !== 'directory') {
-
-          var label = HUE_I18n.documentType[type];
-          if (!label) {
-            if (type.indexOf('query-') === 0) {
-              label = type.substring(6);
-            } else {
-              label = type
-            }
-            if (label.length > 0) {
-              label = label.charAt(0).toUpperCase() + label.slice(1);
-            }
-          }
-          if (label) {
-            filters[type] = {
-              type: type,
-              label: label
-            }
-          }
-        }
-      });
-      var result = [];
-      Object.keys(filters).forEach(function (key) {
-        result.push(filters[key]);
-      });
-      result.sort(function (a, b) {
-        return a.label.localeCompare(b.label);
-      });
-
-      result.unshift({
-        type: 'all',
-        label: HUE_I18n.documentType['all']
-      });
-
-      return result;
-    });
-
-    self.typeFilter = options.typeFilter || ko.observable(self.availableTypeFilters()[0]); // First one is always 'all'
+    self.typeFilter = options.typeFilter || ko.observable(DOCUMENT_TYPES[0]); // First one is always 'all'
 
     self.isFilterVisible.subscribe(function (newValue) {
       if (!newValue && self.filter()) {

+ 15 - 0
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -509,6 +509,21 @@
   padding-left: 10px;
 }
 
+.assist-db-header-actions .highlightable a > span {
+  -webkit-transition: all .6s ease;
+  -moz-transition: all .6s ease;
+  -o-transition: all .6s ease;
+  transition: all .6s ease;
+}
+
+.assist-db-header-actions .highlight {
+  padding-left: 0;
+  a > span {
+    text-shadow: 0 0 0.2em @hue-primary-color-light;
+    color: @hue-primary-color-dark !important;
+  }
+}
+
 .assist-details-header {
   display: table-cell;
   width: 95px;

+ 40 - 19
desktop/core/src/desktop/templates/assist.mako

@@ -639,8 +639,8 @@ from desktop.views import _ko
 
   <script type="text/html" id="assist-document-header-actions">
     <div class="assist-db-header-actions">
-      <!-- ko if: !loading() && availableTypeFilters().length > 1 -->
-      <div data-bind="component: { name: 'hue-drop-down', params: { fixedPosition: true, value: typeFilter, entries: availableTypeFilters, linkTitle: '${ _ko('Document type') }' } }" style="display: inline-block"></div>
+      <!-- ko if: !loading() -->
+      <div class="highlightable" data-bind="css: { 'highlight': $parent.highlightTypeFilter() }, component: { name: 'hue-drop-down', params: { fixedPosition: true, value: typeFilter, entries: DOCUMENT_TYPES, linkTitle: '${ _ko('Document type') }' } }" style="display: inline-block"></div>
       <!-- /ko -->
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.document.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${_('Manual refresh')}"></i></a>
     </div>
@@ -669,17 +669,22 @@ from desktop.views import _ko
     </div>
     <div class="assist-flex-fill assist-file-scrollable">
       <div data-bind="visible: ! loading() && ! hasErrors() && entries().length > 0">
-         <ul class="assist-tables" data-bind="foreachVisible: {data: filteredEntries, minHeight: 27, container: '.assist-file-scrollable' }">
-           <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, assistFileDraggable, visibleOnHover: { 'selector': '.assist-file-actions' }">
-             <div class="assist-file-actions table-actions">
-               <a class="inactive-action" href="javascript:void(0)" data-bind="click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-fw fa-info" title="${_('Show details')}"></i></a>
-             </div>
-             <a href="javascript:void(0)" class="assist-entry assist-document-link" data-bind="click: open, attr: {'title': name }">
-               <!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: false } } --><!-- /ko -->
-               <span class="highlightable" data-bind="css: { 'highlight': highlight }, text: definition().name"></span>
-             </a>
-           </li>
-         </ul>
+        <!-- ko if: filteredEntries().length == 0 -->
+        <ul class="assist-tables">
+          <li class="assist-entry"><span class="assist-no-entries">${_('No documents found')}</span></li>
+        </ul>
+        <!-- /ko -->
+        <ul class="assist-tables" data-bind="foreachVisible: { data: filteredEntries, minHeight: 27, container: '.assist-file-scrollable' }">
+          <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, assistFileDraggable, visibleOnHover: { 'selector': '.assist-file-actions' }">
+            <div class="assist-file-actions table-actions">
+              <a class="inactive-action" href="javascript:void(0)" data-bind="click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-fw fa-info" title="${_('Show details')}"></i></a>
+            </div>
+            <a href="javascript:void(0)" class="assist-entry assist-document-link" data-bind="click: open, attr: {'title': name }">
+              <!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: false } } --><!-- /ko -->
+              <span class="highlightable" data-bind="css: { 'highlight': highlight }, text: definition().name"></span>
+            </a>
+          </li>
+        </ul>
       </div>
       <div data-bind="visible: !loading() && ! hasErrors() && entries().length === 0">
         <span class="assist-no-entries">${_('Empty directory')}</span>
@@ -1347,10 +1352,9 @@ from desktop.views import _ko
 
         self.activeEntry = ko.observable();
         self.activeSort = ko.observable('defaultAsc');
-        self.typeFilter = ko.observable({
-          type: 'all',
-          label: HUE_I18n.documentType['all']
-        });
+        self.typeFilter = ko.observable(DOCUMENT_TYPES[0]); // all is first
+
+        self.highlightTypeFilter = ko.observable(false);
 
         var lastOpenedUuid = self.apiHelper.getFromTotalStorage('assist', 'last.opened.assist.doc.uuid');
 
@@ -1397,7 +1401,6 @@ from desktop.views import _ko
         });
 
         huePubSub.subscribe('assist.doc.highlight', function (details) {
-          huePubSub.publish('left.assist.show');
           huePubSub.publish('assist.show.documents');
           huePubSub.publish('context.popover.hide');
           var whenLoaded = $.Deferred().done(function () {
@@ -1442,6 +1445,20 @@ from desktop.views import _ko
         });
       }
 
+      AssistDocumentsPanel.prototype.setTypeFilter = function (newType) {
+        var self = this;
+        DOCUMENT_TYPES.some(function (docType) {
+          if (docType.type === newType) {
+            self.typeFilter(docType);
+            return true;
+          }
+        });
+        self.highlightTypeFilter(true);
+        window.setTimeout(function () {
+          self.highlightTypeFilter(false);
+        }, 600)
+      };
+
       AssistDocumentsPanel.prototype.fallbackToRoot = function () {
         var self = this;
         if (!self.activeEntry() || self.activeEntry().definition() && (self.activeEntry().definition().path !== '/' || self.activeEntry().definition().uuid)) {
@@ -1974,10 +1991,14 @@ from desktop.views import _ko
 
               panels.push(documentsPanel);
 
-              huePubSub.subscribe('assist.show.documents', function () {
+              huePubSub.subscribe('assist.show.documents', function (docType) {
+                huePubSub.publish('left.assist.show');
                 if (self.visiblePanel() !== documentsPanel) {
                   self.visiblePanel(documentsPanel);
                 }
+                if (docType) {
+                  documentsPanel.panelData.setTypeFilter(docType);
+                }
               });
 
               var vcsKeysLength = ${ len(VCS.keys()) };

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -211,7 +211,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
             </li>
             <li>
               <!-- ko if: IS_HUE_4 -->
-              <a data-bind="hueLink: '/home/?type=' + (editorMode() ? 'query-' : '') + editorType()">
+              <a data-bind="publish: { 'assist.show.documents': 'query-' + editorType() }">
                 <svg class="hi hi-fw hi-bigger"><use xlink:href="#hi-documents"></use></svg> <span data-bind="text: editorMode() ? '${ _ko('Queries') }' : '${ _ko('Notebooks') }'"></span>
               </a>
               <!-- /ko -->

部分文件因为文件数量过多而无法显示