瀏覽代碼

HUE-6196 [assist] Add the right assist panel to the Hue 3 editors

It will only be visible when metadata is configured
Johan Ahlen 8 年之前
父節點
當前提交
aa7e4a9

+ 2 - 2
desktop/core/src/desktop/templates/assist.mako

@@ -1803,7 +1803,7 @@ from notebook.conf import get_ordered_interpreters
         };
 
         var initActive = function () {
-          if (_.isUndefined(self.activeCursorLocation())) {
+          if (!self.activeCursorLocation()) {
             huePubSub.publish('get.active.editor.cursor.location');
           }
           if (typeof self.activeCursorLocation() !== 'undefined' && typeof self.locationIndex()[self.activeCursorLocation().id] !== 'undefined') {
@@ -1832,7 +1832,7 @@ from notebook.conf import get_ordered_interpreters
             if (statements.length > 0) {
               // Pick the last statement by default (only one or cursor after last ';')
               var statementIndex = statements.length;
-              activeLocations = _.last(statements);
+              activeLocations = statements[statementIndex - 1];
               if (statements.length > 1) {
                 var cursorPos = self.activeCursorLocation().position;
                 var index = 1;

+ 1 - 1
desktop/libs/notebook/src/notebook/static/notebook/css/notebook-layout.css

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
- */html{height:100%}body{height:100%;margin:0;padding:0;background-color:#FFF;overflow-y:hidden}.vertical-full{height:100%;padding-right:1px}.main-content{height:auto;width:100%;position:absolute;top:74px;bottom:0;background-color:#FFF}.panel-container{position:relative}.left-panel{position:absolute;height:100%;overflow:hidden;outline:none !important}.context-panel{position:fixed;background:#fff;height:calc(30%);top:70px;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:401;overflow-y:auto;padding:10px 0;width:420px;right:-440px;box-shadow:0 0 20px rgba(14,18,21,0.38);outline:none !important}.context-panel.visible{right:0}.context-panel .nav-tabs{padding-left:10px}.context-panel .tab-content{padding:12px;min-height:calc(10%)}.context-panel .tab-pane{height:100%}.content-panel{position:absolute;height:100%;overflow:auto;outline:none !important}
+ */html{height:100%}body{height:100%;margin:0;padding:0;background-color:#FFF;overflow-y:hidden}.vertical-full{height:100%;padding-right:1px}.main-content{height:auto;width:100%;position:absolute;top:74px;bottom:0;background-color:#FFF}.panel-container{position:relative}.left-panel{position:absolute;height:100%;overflow:hidden;outline:none !important}.right-panel{position:absolute;right:0;height:100%;overflow:hidden;outline:none !important}.context-panel{position:fixed;background:#fff;height:calc(30%);top:70px;transition:all;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:401;overflow-y:auto;padding:10px 0;width:420px;right:-440px;box-shadow:0 0 20px rgba(14,18,21,0.38);outline:none !important}.context-panel.visible{right:0}.context-panel .nav-tabs{padding-left:10px}.context-panel .tab-content{padding:12px;min-height:calc(10%)}.context-panel .tab-pane{height:100%}.content-panel{position:absolute;height:100%;overflow:auto;outline:none !important}

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


+ 5 - 1
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -2519,7 +2519,11 @@ var EditorViewModel = (function() {
     self.assistAvailable = ko.observable(options.assistAvailable);
 
     self.isLeftPanelVisible = ko.observable();
-    ApiHelper.getInstance(self).withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
+    ApiHelper.getInstance().withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
+
+    self.isRightPanelAvailable = ko.observable(options.assistAvailable && HAS_OPTIMIZER);
+    self.isRightPanelVisible = ko.observable();
+    ApiHelper.getInstance().withTotalStorage('assist', 'assist_right_panel_visible', self.isRightPanelVisible);
 
     self.isContextPanelVisible = ko.observable(false);
     self.isContextPanelVisible.subscribe(function (newValue) {

+ 8 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook-layout.less

@@ -52,6 +52,14 @@ body {
   outline: none !important;
 }
 
+.right-panel {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  overflow: hidden;
+  outline: none !important;
+}
+
 .context-panel {
   position: fixed;
   background: #fff;

+ 40 - 4
desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less

@@ -442,14 +442,14 @@
     margin-left: 0;
   }
 
-  .show-assist {
+  .show-assist,
+  .show-assist-right {
     position: fixed;
     top: 80px;
     background-color: #FFF;
     width: 16px;
     height: 24px;
     line-height: 24px;
-    margin-left: -2px;
     text-align: center;
     -webkit-border-top-right-radius: 3px;
     -webkit-border-bottom-right-radius: 3px;
@@ -458,34 +458,70 @@
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
     z-index: 1000;
+  }
+
+  .show-assist {
+    left: 8px;
+    margin-left: -2px;
     -webkit-transition: margin-left 0.2s linear;
     -moz-transition: margin-left 0.2s linear;
     -ms-transition: margin-left 0.2s linear;
     transition: margin-left 0.2s linear;
   }
 
+  .show-assist-right {
+    right: 8px;
+    margin-right: -2px;
+    -webkit-transition: margin-right 0.2s linear;
+    -moz-transition: margin-right 0.2s linear;
+    -ms-transition: margin-right 0.2s linear;
+    transition: margin-right 0.2s linear;
+  }
+
   .show-assist:hover {
     margin-left: 0;
   }
 
-  .hide-assist {
+  .show-assist-right:hover {
+    margin-right: 0;
+  }
+
+  .hide-assist,
+  .hide-assist-right {
     position: absolute;
     top: 2px;
-    right: 4px;
     z-index: 1000;
     color: #aaa;
     font-size: 12px;
+  }
+
+  .hide-assist {
+    right: 4px;
     -webkit-transition: margin-right 0.2s linear, color 0.5s ease;
     -moz-transition: margin-right 0.2s linear, color 0.5s ease;
     -ms-transition: margin-right 0.2s linear, color 0.5s ease;
     transition: margin-right 0.2s linear, color 0.5s ease;
   }
 
+  .hide-assist-right {
+    left: 4px;
+    -webkit-transition: margin-left 0.2s linear, color 0.5s ease;
+    -moz-transition: margin-left 0.2s linear, color 0.5s ease;
+    -ms-transition: margin-left 0.2s linear, color 0.5s ease;
+    transition: margin-left 0.2s linear, color 0.5s ease;
+  }
+
   .hide-assist:hover {
     margin-right: 2px;
     color: @hue-primary-color-dark;
   }
 
+  .hide-assist-right:hover {
+    margin-left: 2px;
+    color: @hue-primary-color-dark;
+  }
+
+
   .logs {
     padding: 9.5px;
     font-size: 11px;

+ 26 - 2
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -182,12 +182,16 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
   .search-bar {
     top: 58px!important;
   }
-  .show-assist {
+
+  .show-assist,
+  .show-assist-right {
     top: 110px!important;
   }
+
   .main-content {
     top: 112px!important;
   }
+
   .context-panel {
     height: calc(100% - 104px);
     top: 104px;
@@ -427,6 +431,9 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 <a title="${_('Toggle Assist')}" class="pointer show-assist" data-bind="visible: !$root.isLeftPanelVisible() && $root.assistAvailable(), click: function() { $root.isLeftPanelVisible(true); huePubSub.publish('assist.set.manual.visibility'); }">
   <i class="fa fa-chevron-right"></i>
 </a>
+<a title="${_('Toggle Assist')}" class="pointer show-assist-right" data-bind="visible: !$root.isRightPanelVisible() && $root.isRightPanelAvailable(), click: function() { $root.isRightPanelVisible(true); huePubSub.publish('assist.set.manual.visibility'); }">
+  <i class="fa fa-chevron-left"></i>
+</a>
 % endif
 
 
@@ -464,8 +471,9 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
         }
       }"></div>
   </div>
-  <div class="resizer" data-bind="visible: isLeftPanelVisible() && assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: isLeftPanelVisible, onPosition: function(){ huePubSub.publish('split.draggable.position') } }"><div class="resize-bar">&nbsp;</div></div>
+  <div class="resizer" data-bind="visible: isLeftPanelVisible() && assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: isLeftPanelVisible, rightPanelVisible: isRightPanelVisible, onPosition: function(){ huePubSub.publish('split.draggable.position') } }"><div class="resize-bar">&nbsp;</div></div>
   % endif
+
   <div class="content-panel" data-bind="event: { scroll: function(){ var ls = $(MAIN_SCROLLABLE).data('lastScroll'); if (ls && ls != $(MAIN_SCROLLABLE).scrollTop()){ $(document).trigger('hideAutocomplete'); }; $(MAIN_SCROLLABLE).data('lastScroll', $(MAIN_SCROLLABLE).scrollTop()) } }, with: selectedNotebook">
     <div>
       <div class="row-fluid row-container sortable-snippets" data-bind="css: {'is-editing': $root.isEditing},
@@ -519,6 +527,22 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
     </div>
   </div>
 
+  % if not is_embeddable:
+    <!-- ko if: isRightPanelAvailable -->
+    <div class="resizer" data-bind="visible: isRightPanelVisible, splitDraggable : { isRightPanel: true, appName: 'notebook', leftPanelVisible: isLeftPanelVisible, rightPanelVisible: isRightPanelVisible, onPosition: function(){ huePubSub.publish('split.draggable.position') } }"><div class="resize-bar">&nbsp;</div></div>
+    <div class="assist-container right-panel" data-bind="visible: isRightPanelVisible">
+      <a title="${_('Toggle Assist')}" class="pointer hide-assist-right" data-bind="click: function() { isRightPanelVisible(false); huePubSub.publish('assist.set.manual.visibility'); }">
+        <i class="fa fa-chevron-right"></i>
+      </a>
+      <div class="assist" data-bind="component: {
+      name: 'right-assist-panel',
+      params: {}
+    }">
+      </div>
+    </div>
+    <!-- /ko -->
+  % endif
+
 
   <div class="context-panel" data-bind="css: {'visible': isContextPanelVisible}" style="${ 'height: 100%' if not is_embeddable else '' }">
     <ul class="nav nav-tabs">

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