浏览代码

HUE-6869 [assist] Scroll to the active language reference topic when opened through link

Johan Ahlen 7 年之前
父节点
当前提交
d18b65a817

文件差异内容过多而无法显示
+ 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


+ 12 - 3
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -573,7 +573,8 @@
 .assist-flex-fill,
 .assist-flex-fill,
 .assist-flex-half,
 .assist-flex-half,
 .assist-flex-quarter,
 .assist-flex-quarter,
-.assist-flex-three-quarter {
+.assist-flex-40,
+.assist-flex-60 {
   position: relative;
   position: relative;
   white-space: nowrap;
   white-space: nowrap;
   overflow-x: hidden;
   overflow-x: hidden;
@@ -581,6 +582,10 @@
   outline: none !important;
   outline: none !important;
 }
 }
 
 
+.assist-docs-topics {
+  position: relative;
+}
+
 .assist-flex-fill {
 .assist-flex-fill {
   .flex(1 1 100%);
   .flex(1 1 100%);
 }
 }
@@ -593,8 +598,12 @@
   .flex(0 1 25%);
   .flex(0 1 25%);
 }
 }
 
 
-.assist-flex-three-quarter {
-  .flex(0 1 75%);
+.assist-flex-40 {
+  .flex(0 1 40%);
+}
+
+.assist-flex-60 {
+  .flex(0 1 60%);
 }
 }
 
 
 .database-tree ul {
 .database-tree ul {

+ 18 - 3
desktop/core/src/desktop/templates/assist.mako

@@ -2241,7 +2241,10 @@ from desktop.views import _ko
     <!-- ko if: $data.length -->
     <!-- ko if: $data.length -->
     <ul class="assist-docs-topic-tree " data-bind="foreach: $data">
     <ul class="assist-docs-topic-tree " data-bind="foreach: $data">
       <li>
       <li>
-        <a class="assist-field-link" href="javascript: void(0);" data-bind="css: { 'blue': $component.selectedTopic() === $data }, click: function () { $component.selectedTopic($data); }, toggle: open, text: title"></a>
+        <a class="black-link" href="javascript: void(0);" data-bind="click: function () { $component.selectedTopic($data); }, toggle: open">
+          <i class="fa fa-fw" style="font-size: 12px;" data-bind="css: { 'fa-chevron-right': children.length && !open(), 'fa-chevron-down': children.length && open() }"></i>
+          <span class="assist-field-link" href="javascript: void(0);" data-bind="css: { 'blue': $component.selectedTopic() === $data }, text: title"></span>
+        </a>
         <!-- ko if: open -->
         <!-- ko if: open -->
         <!-- ko template: { name: 'language-reference-topic-tree', data: children } --><!-- /ko -->
         <!-- ko template: { name: 'language-reference-topic-tree', data: children } --><!-- /ko -->
         <!-- /ko -->
         <!-- /ko -->
@@ -2258,7 +2261,7 @@ from desktop.views import _ko
             <input class="clearable" type="text" placeholder="Filter..." data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
             <input class="clearable" type="text" placeholder="Filter..." data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
           </div>
           </div>
         </div>
         </div>
-        <div class="assist-docs-topics" data-bind="css: { 'assist-flex-fill': !selectedTopic(), 'assist-flex-quarter': selectedTopic() }">
+        <div class="assist-docs-topics" data-bind="css: { 'assist-flex-fill': !selectedTopic(), 'assist-flex-40': selectedTopic() }">
           <!-- ko ifnot: query -->
           <!-- ko ifnot: query -->
           <!-- ko template: { name: 'language-reference-topic-tree', data: availableTopics } --><!-- /ko -->
           <!-- ko template: { name: 'language-reference-topic-tree', data: availableTopics } --><!-- /ko -->
           <!-- /ko -->
           <!-- /ko -->
@@ -2278,7 +2281,7 @@ from desktop.views import _ko
           <!-- /ko -->
           <!-- /ko -->
         </div>
         </div>
         <!-- ko if: selectedTopic -->
         <!-- ko if: selectedTopic -->
-        <div class="assist-flex-three-quarter assist-docs-details" data-bind="with: selectedTopic">
+        <div class="assist-flex-60 assist-docs-details" data-bind="with: selectedTopic">
           <div class="assist-panel-close"><button class="close" data-bind="click: function() { $component.selectedTopic(undefined); }">&times;</button></div>
           <div class="assist-panel-close"><button class="close" data-bind="click: function() { $component.selectedTopic(undefined); }">&times;</button></div>
           <div class="assist-function-signature blue" data-bind="html: titleMatch() || title"></div>
           <div class="assist-function-signature blue" data-bind="html: titleMatch() || title"></div>
           <div data-bind="html: bodyMatch() || body"></div>
           <div data-bind="html: bodyMatch() || body"></div>
@@ -2393,6 +2396,15 @@ from desktop.views import _ko
           $(element).find('.assist-docs-topics').scrollTop(0);
           $(element).find('.assist-docs-topics').scrollTop(0);
         });
         });
 
 
+        var scrollToSelectedTopic = function () {
+          var topics = $(element).find('.assist-docs-topics');
+          if (topics.find('.blue').length) {
+            topics.scrollTop(Math.min(topics.scrollTop() + topics.find('.blue').position().top - 20, topics.find('> ul').height() - topics.height()));
+          }
+        };
+
+        huePubSub.subscribe('scroll.test', scrollToSelectedTopic);
+
         var showTopicSub = huePubSub.subscribe('assist.lang.ref.panel.show.topic', function (topicId) {
         var showTopicSub = huePubSub.subscribe('assist.lang.ref.panel.show.topic', function (topicId) {
           var mainTopic = topicId.split('#')[0]; // TODO: Handle subtopics
           var mainTopic = topicId.split('#')[0]; // TODO: Handle subtopics
           var topicStack = [];
           var topicStack = [];
@@ -2405,6 +2417,9 @@ from desktop.views import _ko
                 }
                 }
                 self.query('');
                 self.query('');
                 self.selectedTopic(topic);
                 self.selectedTopic(topic);
+                window.setTimeout(function () {
+                  scrollToSelectedTopic();
+                }, 0);
                 return true;
                 return true;
               } else if (topic.children.length) {
               } else if (topic.children.length) {
                 var inChild = findTopic(topic.children);
                 var inChild = findTopic(topic.children);

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