Selaa lähdekoodia

HUE-7049 [assist] Add a generic breadcrumb component

Johan Ahlen 8 vuotta sitten
vanhempi
commit
56cd07b

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


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

@@ -6108,7 +6108,6 @@
           valueAccessor().callback();
         }
       });
-
     }
   };
 
@@ -6133,8 +6132,7 @@
 
       if (options.theme) {
         editor.setTheme('ace/theme/' + options.theme);
-      }
-      else {
+      } else {
         editor.setTheme('ace/theme/hue');
       }
       if (options.mode) {

+ 42 - 0
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -551,6 +551,11 @@ a:visited {
   border: 1px solid transparent;
 }
 
+.hue-context-popover {
+  padding: 0;
+  border: none;
+}
+
 .hue-popover.hue-popover-top {
   margin-top: -5px;
 }
@@ -789,6 +794,43 @@ a:visited {
   position: fixed;
 }
 
+.context-popover-title {
+  .display-flex;
+  .flex-direction(row);
+  width: 100%;
+  padding:0;
+  background-color: @cui-gray-050;
+}
+
+.context-popover-breadcrumbs {
+  .flex(1 1 100%);
+  .nowrap-ellipsis();
+  padding: 5px;
+}
+
+.context-popover-close {
+  .flex(1 0 15px);
+  padding: 5px;
+}
+
+.context-popover-content {
+  padding: 5px;
+}
+
+.hue-breadcrumb-container {
+  .hue-breadcrumb {
+    display: inline-block;
+  }
+
+  .hue-breadcrumb-divider {
+    display: inline-block;
+  }
+
+  .dropdown-menu {
+    overflow-y: scroll;
+  }
+}
+
 /* styling for the imported apps */
 
 .page-content .navbar-inner {

+ 50 - 7
desktop/core/src/desktop/templates/context_popover.mako

@@ -25,11 +25,11 @@ from django.utils.translation import ugettext as _
   </script>
 
   <script type="text/html" id="context-popover-template">
-    <div class="hue-popover" data-bind="css: orientationClass, style: { 'left': left() + 'px', 'top': top() + 'px', 'width': width() + 'px', height: height() + 'px' }, resizable: { containment: 'document', handles: resizeHelper.resizableHandles, start: resizeHelper.resizeStart, stop: resizeHelper.resizeStop, resize: resizeHelper.resize }">
+    <div class="hue-popover hue-context-popover" data-bind="css: orientationClass, style: { 'left': left() + 'px', 'top': top() + 'px', 'width': width() + 'px', height: height() + 'px' }, resizable: { containment: 'document', handles: resizeHelper.resizableHandles, start: resizeHelper.resizeStart, stop: resizeHelper.resizeStop, resize: resizeHelper.resize }">
       <div class="hue-popover-arrow" data-bind="style: { 'margin-left': leftAdjust() + 'px',  'margin-top': topAdjust() + 'px' }"></div>
-      <div class="hue-popover-title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 30px;">
-        <i class="fa muted" data-bind="css: iconClass" style="margin-top: 3px"></i> <span style="padding-left: 4px;" data-bind="text: title"></span>
-        <div style="position: absolute; right: 6px; top: 8px;">
+      <div class="hue-popover-title context-popover-title">
+        <div class="context-popover-breadcrumbs" data-bind="component: { name: 'hue-breadcrumbs', params: { breadcrumbs: breadcrumbs, onSelect: onBreadcrumbSelect } }"></div>
+        <div class="context-popover-close">
           <a class="pointer inactive-action" data-bind="click: close"><i class="fa fa-fw fa-times"></i></a>
         </div>
       </div>
@@ -61,7 +61,7 @@ from django.utils.translation import ugettext as _
             }
             while (pubSubs.length > 0) {
               pubSubs.pop().remove();
-            };
+            }
             huePubSub.publish('context.popover.hidden');
           }
         }
@@ -225,8 +225,51 @@ from django.utils.translation import ugettext as _
         self.left = ko.observable(0);
         self.top = ko.observable(0);
 
-        self.iconClass = 'fa-info';
-        self.title = "title";
+        self.activeEntry = ko.observable();
+
+        self.breadcrumbs = ko.observableArray([
+          {
+            label: 'root',
+            data: {}
+          }, {
+            label: 'level_one',
+            data: {}
+          }, {
+            label: 'level_two',
+            data: {}
+          }, {
+            label: 'level_three',
+            data: {}
+          }, {
+            label: 'level_four',
+            data: {}
+          }, {
+            label: 'level_five',
+            data: {}
+          }, {
+            label: 'level_six',
+            data: {}
+          }, {
+            label: 'level_seven',
+            data: {}
+          }, {
+            label: 'level_eight',
+            data: {}
+          }, {
+            label: 'level_nine',
+            data: {}
+          }
+        ]);
+
+        self.onBreadcrumbSelect = function (breadcrumb) {
+          var newBreadcrumbs = [];
+          self.breadcrumbs().every(function (existingBreadcrumb) {
+            newBreadcrumbs.push(existingBreadcrumb);
+            return existingBreadcrumb !== breadcrumb;
+          });
+          self.activeEntry(newBreadcrumbs[newBreadcrumbs.length - 1]);
+          self.breadcrumbs(newBreadcrumbs);
+        };
 
         self.showInAssistEnabled = typeof params.showInAssistEnabled !== 'undefined' ? params.showInAssistEnabled : true;
 

+ 52 - 1
desktop/core/src/desktop/templates/ko_components.mako

@@ -23,11 +23,61 @@ from desktop.views import _ko
 %>
 
 <%def name="all()">
+
+  <script type="text/html" id="breadcrumbs-template">
+    <div class="hue-breadcrumb-container">
+      <!-- ko if: hiddenBreadcrumbs().length > 0 -->
+      ...
+      <!-- ko component: { name: 'hue-drop-down', params: { entries: hiddenBreadcrumbs, noLabel: true, searchable: false, value: hiddenValue } } --><!-- /ko -->
+      <div class="hue-breadcrumb-divider" data-bind="text: divider"></div>
+      <!-- /ko -->
+      <!-- ko foreach: lastTwoBreadcrumbs -->
+      <!-- ko if: $index() < $parent.lastTwoBreadcrumbs().length - 1 -->
+      <div class="hue-breadcrumb pointer" data-bind="text: $data.label || $data, click: $parent.onSelect"></div>
+      <div class="hue-breadcrumb-divider" data-bind="text: $parent.divider"></div>
+      <!-- /ko -->
+      <!-- ko if: $index() === $parent.lastTwoBreadcrumbs().length - 1 -->
+      <div class="hue-breadcrumb pointer" data-bind="text: $data.label || $data"></div>
+      <!-- /ko -->
+      <!-- /ko -->
+    </div>
+  </script>
+
+  <script type="text/javascript">
+    (function () {
+      function BreadcrumbViewModel(params) {
+        var self = this;
+        self.hiddenValue = ko.observable();
+        self.onSelect = params.onSelect || function () {};
+        self.hiddenValue.subscribe(function (newValue) {
+          if (newValue) {
+            self.onSelect(newValue);
+          }
+        });
+        self.hiddenBreadcrumbs = ko.pureComputed(function () {
+          if (params.breadcrumbs().length > 2) {
+            return params.breadcrumbs().slice(0, params.breadcrumbs().length - 2);
+          }
+          return [];
+        });
+        self.lastTwoBreadcrumbs = ko.pureComputed(function () {
+          return params.breadcrumbs().slice(params.breadcrumbs().length - 2, params.breadcrumbs().length);
+        });
+        self.divider  = params.divider || '>';
+      }
+
+      ko.components.register('hue-breadcrumbs', {
+        viewModel: BreadcrumbViewModel,
+        template: { element: 'breadcrumbs-template' }
+      });
+    })();
+  </script>
+
   <script type="text/html" id="hue-drop-down-template">
     <!-- ko if: !menuOnly && (!dropDownVisible() || !searchable) -->
     <a class="inactive-action hue-drop-down-active" href="javascript:void(0)" data-bind="toggle: dropDownVisible, css: { 'blue': dropDownVisible }">
       <!-- ko if: icon --><i class="fa" data-bind="css: icon"></i><!-- /ko -->
-      <!-- ko if: value -->
+      <!-- ko if: !noLabel && value -->
       <span data-bind="text: typeof value().label !== 'undefined' ? value().label : value(), visible: ! dropDownVisible() || !searchable, attr: { 'title': linkTitle }" ></span>
       <!-- /ko -->
       <i class="fa fa-caret-down"></i>
@@ -69,6 +119,7 @@ from desktop.views import _ko
         var self = this;
         self.dropDownVisible = ko.observable(!!params.showOnInit);
         self.menuOnly = !!params.menuOnly;
+        self.noLabel = !!params.noLabel;
         self.icon = params.icon;
         self.value = params.value;
         self.entries = params.entries;

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä