Pārlūkot izejas kodu

HUE-5811 [assist] Align assist doc icon to the right

Johan Ahlen 8 gadi atpakaļ
vecāks
revīzija
4652b29

+ 1 - 0
desktop/core/src/desktop/static/desktop/css/hue.css

@@ -214,6 +214,7 @@
   padding-left: 12px;
   height: 40px;
   border-bottom: 1px solid #f1f1f1;
+  padding-right: 15px;
 }
 .assist-type-switch {
   display: inline-block;

+ 1 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css

@@ -214,6 +214,7 @@
   padding-left: 12px;
   height: 40px;
   border-bottom: 1px solid #f1f1f1;
+  padding-right: 15px;
 }
 .assist-type-switch {
   display: inline-block;

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

@@ -2037,7 +2037,7 @@
   ko.bindingHandlers.splitDraggable = {
     init: function (element, valueAccessor) {
       var options = ko.unwrap(valueAccessor());
-      var leftPanelWidth = $.totalStorage(options.appName + "_left_panel_width") != null ? $.totalStorage(options.appName + "_left_panel_width") : 250;
+      var leftPanelWidth = $.totalStorage(options.appName + "_left_panel_width") != null ? Math.max($.totalStorage(options.appName + "_left_panel_width"), 250) : 250;
 
       var containerSelector = options.containerSelector || ".panel-container";
       var leftPanelSelector = options.leftPanelSelector || ".left-panel";
@@ -2077,7 +2077,7 @@
         axis: "x",
         containment: $container,
         drag: function (event, ui) {
-          ui.position.left = Math.min($container.width() - $container.position().left - 200, Math.max(150, ui.position.left));
+          ui.position.left = Math.min($container.width() - $container.position().left - 200, Math.max(250, ui.position.left));
 
           dragTimeout = window.setTimeout(function () {
             $leftPanel.css("width", ui.position.left + "px");

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

@@ -232,6 +232,7 @@
   padding-left: 12px;
   height: 40px;
   border-bottom: 1px solid #f1f1f1;
+  padding-right: 15px;
 }
 
 .assist-type-switch {

+ 4 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -809,7 +809,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
       <!-- ko if: availablePanels.length > 1 -->
       <div style="position: relative; flex: 0 0 40px; line-height: 40px;" class="assist-panel-switches">
         <!-- ko foreach: availablePanels -->
-        <div class="inactive-action assist-type-switch" data-bind="click: function () { $parent.visiblePanel($data); }, css: { 'blue': $parent.visiblePanel() === $data }, attr: { 'title': name }">
+        <div class="inactive-action assist-type-switch" data-bind="click: function () { $parent.visiblePanel($data); }, css: { 'blue': $parent.visiblePanel() === $data }, style: { 'float': rightAlignIcon ? 'right' : 'left' },  attr: { 'title': name }">
           <i class="fa fa-fw valign-middle" data-bind="css: icon"></i>
         </div>
         <!-- /ko -->
@@ -893,6 +893,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
        * @param {string} options.type
        * @param {number} options.minHeight
        * @param {string} options.icon
+       * @param {boolean} [options.rightAlignIcon] - Default false
        * @param {boolean} options.visible
        * @param {boolean} [options.showNavSearch] - Default true
        * @param {(AssistDbPanel|AssistHdfsPanel|AssistDocumentsPanel|AssistS3Panel|AssistCollectionsPanel)} panelData
@@ -906,6 +907,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
         self.name = options.name;
         self.panelData = options.panelData;
         self.showNavSearch = typeof options.showNavSearch !== 'undefined' ? options.showNavSearch : true;
+        self.rightAlignIcon = !!options.rightAlignIcon;
 
         self.visible = ko.observable(options.visible || true);
         options.apiHelper.withTotalStorage('assist', 'showingPanel_' + self.type, self.visible, false, options.visible);
@@ -1439,6 +1441,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
             type: 'documents',
             icon: 'fa-files-o',
             minHeight: 50,
+            rightAlignIcon: true,
             visible: params.visibleAssistPanels && params.visibleAssistPanels.indexOf('documents') !== -1
           }));
         }

+ 49 - 49
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -673,55 +673,6 @@ table.airy tr td {
   background: linear-gradient(to right, #fcf8e3 0%, rgba(255, 255, 255, 0) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcf8e3', endColorstr='#00ffffff', GradientType=1);
 }
-.alert-info-gradient {
-  border: none;
-  margin-top: -3px;
-  background: -moz-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
-  background: -webkit-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
-  background: -o-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
-  background: -ms-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
-  background: linear-gradient(to right, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9edf7', endColorstr='#00ffffff', GradientType=1);
-}
-.alert-success-gradient {
-  border: none;
-  margin-top: -3px;
-  background: -moz-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
-  background: -webkit-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
-  background: -o-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
-  background: -ms-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
-  background: linear-gradient(to right, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dff0d8', endColorstr='#00ffffff', GradientType=1);
-}
-.alert-neutral-gradient {
-  border: none;
-  border-left: 1px solid #DBE8F1;
-  margin-top: -3px;
-  background: -moz-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
-  background: -webkit-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
-  background: -o-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
-  background: -ms-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
-  background: linear-gradient(to right, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F1F1', endColorstr='#00ffffff', GradientType=1);
-}
-.alert-neutral {
-  border: none;
-  margin-top: -3px;
-  background: transparent;
-  margin-bottom: 0;
-  padding: 0;
-  padding-right: 4px;
-  display: inline-block;
-}
-.alert-empty {
-  border: none;
-  margin-bottom: 0;
-  background: transparent;
-  padding-left: 4px;
-}
-.icon-explanation {
-  margin-left: 4px;
-}
 .hoverMsg {
   background: #000;
   height: 100%;
@@ -1052,3 +1003,52 @@ h4.header {
   width: 8px !important;
   margin-left: 10px !important;
 }
+.alert-info-gradient {
+  border: none;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9edf7', endColorstr='#00ffffff', GradientType=1);
+}
+.alert-success-gradient {
+  border: none;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dff0d8', endColorstr='#00ffffff', GradientType=1);
+}
+.alert-neutral-gradient {
+  border: none;
+  border-left: 1px solid #DBE8F1;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F1F1', endColorstr='#00ffffff', GradientType=1);
+}
+.alert-neutral {
+  border: none;
+  margin-top: -3px;
+  background: transparent;
+  margin-bottom: 0;
+  padding: 0;
+  padding-right: 4px;
+  display: inline-block;
+}
+.alert-empty {
+  border: none;
+  margin-bottom: 0;
+  background: transparent;
+  padding-left: 4px;
+}
+.icon-explanation {
+  margin-left: 4px;
+}

+ 55 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook.less

@@ -1154,3 +1154,58 @@ h4.header {
   width: 8px !important;
   margin-left: 10px !important;
 }
+
+.alert-info-gradient {
+  border: none;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, #d9edf7 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9edf7', endColorstr='#00ffffff', GradientType=1);
+}
+
+.alert-success-gradient {
+  border: none;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, #dff0d8 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dff0d8', endColorstr='#00ffffff', GradientType=1);
+}
+
+.alert-neutral-gradient {
+  border: none;
+  border-left: 1px solid #DBE8F1;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, #F1F1F1 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F1F1', endColorstr='#00ffffff', GradientType=1);
+}
+
+.alert-neutral {
+  border: none;
+  margin-top: -3px;
+  background: transparent;
+  margin-bottom: 0;
+  padding: 0;
+  padding-right: 4px;
+  display: inline-block;
+}
+
+.alert-empty {
+  border: none;
+  margin-bottom: 0;
+  background: transparent;
+  padding-left: 4px;
+}
+
+.icon-explanation {
+  margin-left: 4px;
+}