Преглед на файлове

HUE-4102 [editor] Move session settings to a context panel

Enrico Berti преди 9 години
родител
ревизия
a6109e9000

+ 24 - 24
desktop/core/src/desktop/templates/config_ko_components.mako

@@ -85,6 +85,11 @@ from desktop.views import _ko
   <script type="text/html" id="property-selector-template">
     <!-- ko foreach: selectedProperties -->
     <div>
+      <div class="config-property-remove">
+        <a class="inactive-action" href="javascript:void(0)" data-bind="click: function() { $parent.removeProperty($data) }" title="${ _('Remove') }">
+          <i class="fa fa-times"></i>
+        </a>
+      </div>
       <!-- ko template: {
         name: 'property',
         data: {
@@ -96,17 +101,12 @@ from desktop.views import _ko
           visibleObservable: $parent.visibleObservable
         }
       } --><!-- /ko -->
-      <div class="config-property-remove">
-        <a class="inactive-action" href="javascript:void(0)" data-bind="click: function() { $parent.removeProperty($data) }" title="${ _('Remove') }">
-          <i class="fa fa-times"></i>
-        </a>
-      </div>
     </div>
     <!-- /ko -->
-    <div class="margin-left-10" data-bind="visible: availableProperties().length > 0">
+    <div class="config-property-available margin-left-10" data-bind="visible: availableProperties().length > 0">
       <select data-bind="options: availableProperties, optionsText: 'nice_name', optionsCaption: '${_ko('Add a property...')}', value: propertyToAdd"></select>
       <div style="display: inline-block; vertical-align: top; margin-top: 6px; margin-left: 6px;">
-        <a class="inactive-action pointer" data-bind="click: addProperty">
+        <a class="inactive-action pointer" data-bind="click: addProperty, visible: propertyToAdd() != null">
           <i class="fa fa-plus"></i>
         </a>
       </div>
@@ -248,7 +248,7 @@ from desktop.views import _ko
 
           self.selectedProperties = ko.observableArray();
           self.availableProperties = ko.observableArray();
-          self.propertyToAdd = ko.observable();
+          self.propertyToAdd = ko.observable(null);
 
           var setInitialProperties = function () {
             self.selectedProperties([]);
@@ -457,15 +457,15 @@ from desktop.views import _ko
         <!-- /ko -->
         <div class="input-append" style="margin-bottom: 4px">
           <!-- ko if: $parent.options.length === 0 -->
-          <input type="text" style="width: 182px; margin-right: 4px;" placeholder="${ _('Key') }" data-bind="textInput: key, valueUpdate: 'afterkeydown'"/>
+          <input type="text" class="config-property-input-small" style="width: 182px; margin-right: 4px;" placeholder="${ _('Key') }" data-bind="textInput: key, valueUpdate: 'afterkeydown'"/>
           <!-- /ko -->
-          <input type="text" style="width: 182px;" placeholder="${ _('Value') }" data-bind="textInput: value, valueUpdate: 'afterkeydown'"/>
-          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+          <input type="text" class="config-property-input-mini" style="width: 182px;" placeholder="${ _('Value') }" data-bind="textInput: value, valueUpdate: 'afterkeydown'"/>
+          <span class="add-on move-widget muted" data-bind="visible: $parent.values().length > 1"><i class="fa fa-arrows"></i></span>
           <a class="add-on muted" href="javascript: void(0);" data-bind="click: function(){ $parent.removeValue($data); }"><i class="fa fa-minus"></i></a>
         </div>
       </li>
     </ul>
-    <div style="margin-top: 5px;">
+    <div class="config-property-add-value" style="margin-top: 5px;">
       <a class="inactive-action pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
         <i class="fa fa-plus"></i>
       </a>
@@ -537,15 +537,15 @@ from desktop.views import _ko
         <!-- /ko -->
         <div class="input-append" style="margin-bottom: 4px">
           <!-- ko if: $parent.options.length === 0 -->
-          <input type="text" style="width: 182px; margin-right: 4px;" placeholder="${ _('Name') }" data-bind="textInput: name, valueUpdate: 'afterkeydown'"/>
+          <input type="text" class="config-property-input-small" style="width: 182px; margin-right: 4px;" placeholder="${ _('Name') }" data-bind="textInput: name, valueUpdate: 'afterkeydown'"/>
           <!-- /ko -->
-          <input type="text" style="width: 182px;" placeholder="${ _('Value') }" data-bind="textInput: value, valueUpdate: 'afterkeydown'"/>
-          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+          <input type="text" class="config-property-input-small" style="width: 182px;" placeholder="${ _('Value') }" data-bind="textInput: value, valueUpdate: 'afterkeydown'"/>
+          <span class="add-on move-widget muted" data-bind="visible: $parent.values().length > 1"><i class="fa fa-arrows"></i></span>
           <a class="add-on muted" href="javascript: void(0);" data-bind="click: function(){ $parent.removeValue($data); }"><i class="fa fa-minus"></i></a>
         </div>
       </li>
     </ul>
-    <div style="margin-top: 5px;">
+    <div class="config-property-add-value" style="margin-top: 5px;">
       <a class="inactive-action pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
         <i class="fa fa-plus"></i>
       </a>
@@ -611,14 +611,14 @@ from desktop.views import _ko
     <ul data-bind="sortable: { data: values, options: { axis: 'y', containment: 'parent' }}, visible: values().length" class="unstyled">
       <li>
         <div class="input-append" style="margin-bottom: 4px">
-          <input type="text" style="width: 182px; margin-right: 4px;" placeholder="${ _('Name, e.g. foo') }" data-bind="textInput: name, valueUpdate: 'afterkeydown'"/>
-          <input type="text" style="width: 150px" placeholder="${ _('Class, e.g. org.hue.Bar') }" data-bind="textInput: class_name, valueUpdate: 'afterkeydown'"/>
-          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+          <input type="text" class="config-property-input-small" style="width: 182px; margin-right: 4px;" placeholder="${ _('Name, e.g. foo') }" data-bind="textInput: name, valueUpdate: 'afterkeydown'"/>
+          <input type="text" class="config-property-input-small" style="width: 150px" placeholder="${ _('Class, e.g. org.hue.Bar') }" data-bind="textInput: class_name, valueUpdate: 'afterkeydown'"/>
+          <span class="add-on move-widget muted" data-bind="visible: $parent.values().length > 1"><i class="fa fa-arrows"></i></span>
           <a class="add-on muted" href="javascript: void(0);" data-bind="click: function(){ $parent.removeValue($data); }"><i class="fa fa-minus"></i></a>
         </div>
       </li>
     </ul>
-    <div style="margin-top: 5px;">
+    <div class="config-property-add-value" style="margin-top: 5px;">
       <a class="inactive-action pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
         <i class="fa fa-plus"></i>
       </a>
@@ -674,12 +674,12 @@ from desktop.views import _ko
       <li>
         <div class="input-append" style="margin-bottom: 4px">
           <input type="text" class="filechooser-input" data-bind="value: path, valueUpdate:'afterkeydown', filechooser: { value: path, isAddon: true }" placeholder="${ _('Path to the file, e.g. hdfs://localhost:8020/user/hue/file.hue') }"/>
-          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+          <span class="add-on move-widget muted" data-bind="visible: $parent.values().length > 1"><i class="fa fa-arrows"></i></span>
           <a class="add-on muted" href="javascript: void(0);" data-bind="click: function(){ $parent.removeValue($data); }"><i class="fa fa-minus"></i></a>
         </div>
       </li>
     </ul>
-    <div style="margin-top: 5px;">
+    <div class="config-property-add-value" style="margin-top: 5px;">
       <a class="inactive-action pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
         <i class="fa fa-plus"></i>
       </a>
@@ -761,12 +761,12 @@ from desktop.views import _ko
           <input type="text" data-bind="textInput: value, valueUpdate: 'afterkeydown', attr: { placeholder: $parent.placeholder }"/>
           <!-- /ko -->
           <!-- ko template: { if: $parent.inputTemplate, name: $parent.inputTemplate } --><!-- /ko -->
-          <span class="add-on move-widget muted"><i class="fa fa-arrows"></i></span>
+          <span class="add-on move-widget muted" data-bind="visible: $parent.values().length > 1"><i class="fa fa-arrows"></i></span>
           <a class="add-on muted" href="javascript: void(0);" data-bind="click: function(){ $parent.removeValue($data); }"><i class="fa fa-minus"></i></a>
         </div>
       </li>
     </ul>
-    <div style="margin-top: 5px;">
+    <div class="config-property-add-value" style="margin-top: 5px;">
       <a class="inactive-action pointer" style="padding: 3px 10px 3px 3px;;" data-bind="click: addValue">
         <i class="fa fa-plus"></i>
       </a>

+ 53 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -64,6 +64,27 @@ body {
   outline: none !important;
 }
 
+.context-panel {
+  position: fixed;
+  background: #fff;
+  height: calc(100% - 70px);
+  top: 70px;
+  transition: all;
+  -webkit-transition-duration: .3s;
+  transition-duration: .3s;
+  z-index: 10;
+  overflow-y: auto;
+  padding: 10px;
+  width: 380px;
+  right: -440px;
+  box-shadow: 0 0 20px rgba(14, 18, 21, .38);
+  outline: none !important;
+}
+
+.context-panel.visible {
+  right: 0;
+}
+
 .resizer {
   position: absolute;
   height: 100%;
@@ -1070,3 +1091,35 @@ pre {
 .meta-noresults {
   font-style: italic;
 }
+
+.config-property {
+  display: inline!important;
+}
+
+.config-property-available {
+  margin-left: 0!important;
+  margin-top: 10px;
+}
+
+.config-property-add-value {
+  margin-top: -8px!important;
+  margin-bottom: 20px;
+}
+
+.config-property-input-small {
+  width: 120px!important;
+}
+
+.config-property-input-mini {
+  width: 90px!important;
+}
+
+.config-label {
+  text-align: left!important;
+  margin-left: 0!important;
+}
+
+.config-property-remove {
+  float: right;
+  margin-top: 2px!important;
+}

+ 2 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -1707,6 +1707,8 @@
     self.isLeftPanelVisible = ko.observable();
     ApiHelper.getInstance(self).withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
 
+    self.isContextPanelVisible = ko.observable(false);
+
     self.availableSnippets = ko.mapping.fromJS(options.languages);
 
     self.editorMode = options.mode == 'editor';

+ 52 - 57
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -199,7 +199,7 @@ ${ hueIcons.symbols() }
 
         &nbsp;&nbsp;&nbsp;
 
-        <a class="btn pointer" title="${ _('Sessions') }" rel="tooltip" data-placement="bottom" data-toggle="modal" data-target="#sessionsDemiModal">
+        <a class="btn pointer" title="${ _('Sessions') }" rel="tooltip" data-placement="bottom" data-bind="css: {'active': $root.isContextPanelVisible }, click: function() { $root.isContextPanelVisible(!$root.isContextPanelVisible()); }">
           <i class="fa fa-cogs"></i>
         </a>
 
@@ -984,6 +984,57 @@ ${ hueIcons.symbols() }
       %endif
     </div>
   </div>
+
+  <div class="context-panel" data-bind="css: {'visible': isContextPanelVisible}">
+    <div class="row-fluid">
+      <div class="span12">
+        <!-- ko with: $root.selectedNotebook() -->
+        <form class="form-horizontal">
+          <fieldset>
+            <legend><i class="fa fa-cloud"></i> ${ _('Sessions') }</legend>
+            <!-- ko ifnot: sessions().length -->
+            <p>${ _('There are currently no active sessions.') }</p>
+            <!-- /ko -->
+            <!-- ko foreach: sessions -->
+            <h4 data-bind="text: $root.getSnippetName(type())" style="clear:left; display: inline-block"></h4>
+            <div class="session-actions">
+              <a class="inactive-action pointer" title="${ _('Recreate session') }" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().restartSession($data) }"><i class="fa fa-refresh" data-bind="css: { 'fa-spin': restarting }"></i> ${ _('Recreate') }</a>
+              <a class="inactive-action pointer margin-left-10" title="${ _('Close session') }" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().closeAndRemoveSession($data) }"><i class="fa fa-times"></i> ${ _('Close') }</a>
+              %if conf.USE_DEFAULT_CONFIGURATION.get():
+              <a class="inactive-action pointer margin-left-10" title="${ _('Save session settings as default') }" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().saveDefaultUserProperties($data) }"><i class="fa fa-save"></i> ${ _('Set as default settings') }</a>
+              %endif
+              <!-- ko if: type()== 'impala' && typeof http_addr != 'undefined' -->
+              <a class="margin-left-10" data-bind="attr: {'href': window.location.protocol + '//' + http_addr().replace(/^(https?):\/\//, '')}" target="_blank"><i class="fa fa-external-link"></i> <span data-bind="text: http_addr().replace(/^(https?):\/\//, '')"></span></a>
+              <!-- /ko -->
+            </div>
+            <div style="width:100%;">
+              <!-- ko component: { name: 'property-selector', params: { properties: properties } } --><!-- /ko -->
+            </div>
+            <div style="clear:both; padding-left: 120px;">
+              <!-- ko if: availableNewProperties().length -->
+              <select data-bind="options: availableNewProperties,
+                       optionsText: 'nice_name',
+                       optionsValue: 'name',
+                       value: selectedSessionProperty,
+                       optionsCaption: '${ _ko('Choose a property...') }'"></select>
+              <a class="pointer" style="padding:5px;" data-bind="click: selectedSessionProperty() && function() {
+                  properties.push(ko.mapping.fromJS({'name': selectedSessionProperty(), 'value': ''}));
+                  selectedSessionProperty('');
+                }" style="margin-left:10px;vertical-align: text-top;">
+                <i class="fa fa-plus"></i>
+              </a>
+              <!-- /ko -->
+            </div>
+            <!-- /ko -->
+            <!-- /ko -->
+            <br/>
+          </fieldset>
+        </form>
+        <!-- /ko -->
+      </div>
+    </div>
+  </div>
+
 </script>
 
 <script type="text/html" id="snippetIcon">
@@ -1822,62 +1873,6 @@ ${ hueIcons.symbols() }
 </div>
 
 
-<div id="sessionsDemiModal" class="demi-modal fade" data-backdrop="false">
-  <a href="javascript: void(0)" data-dismiss="modal" class="pull-right" style="margin: 10px"><i class="fa fa-times"></i></a>
-  <div class="modal-body">
-    <div class="row-fluid">
-      <div class="span12">
-        <!-- ko with: $root.selectedNotebook() -->
-        <form class="form-horizontal">
-          <fieldset>
-            <legend><i class="fa fa-cloud"></i> ${ _('Sessions') }</legend>
-            <!-- ko ifnot: sessions().length -->
-            <p>${ _('There are currently no active sessions.') }</p>
-            <!-- /ko -->
-            <!-- ko foreach: sessions -->
-            <h4 data-bind="text: $root.getSnippetName(type())" style="clear:left; display: inline-block"></h4>
-            <div class="session-actions">
-              <a class="inactive-action pointer" title="${ _('Recreate session') }" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().restartSession($data) }"><i class="fa fa-refresh" data-bind="css: { 'fa-spin': restarting }"></i> ${ _('Recreate') }</a>
-              <a class="inactive-action pointer margin-left-10" title="${ _('Close session') }" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().closeAndRemoveSession($data) }"><i class="fa fa-times"></i> ${ _('Close') }</a>
-              %if conf.USE_DEFAULT_CONFIGURATION.get():
-              <a class="inactive-action pointer margin-left-10" title="${ _('Save session settings as default') }" rel="tooltip" data-bind="click: function() { $root.selectedNotebook().saveDefaultUserProperties($data) }"><i class="fa fa-save"></i> ${ _('Set as default settings') }</a>
-              %endif
-              <!-- ko if: type()== 'impala' && typeof http_addr != 'undefined' -->
-              <a class="margin-left-10" data-bind="attr: {'href': window.location.protocol + '//' + http_addr().replace(/^(https?):\/\//, '')}" target="_blank"><i class="fa fa-external-link"></i> <span data-bind="text: http_addr().replace(/^(https?):\/\//, '')"></span></a>
-              <!-- /ko -->
-            </div>
-            <div style="width:100%;">
-              <!-- ko component: { name: 'property-selector', params: { properties: properties } } --><!-- /ko -->
-            </div>
-            <div style="clear:both; padding-left: 120px;">
-              <!-- ko if: availableNewProperties().length -->
-              <select data-bind="options: availableNewProperties,
-                       optionsText: 'nice_name',
-                       optionsValue: 'name',
-                       value: selectedSessionProperty,
-                       optionsCaption: '${ _ko('Choose a property...') }'"></select>
-              <a class="pointer" style="padding:5px;" data-bind="click: selectedSessionProperty() && function() {
-                  properties.push(ko.mapping.fromJS({'name': selectedSessionProperty(), 'value': ''}));
-                  selectedSessionProperty('');
-                }" style="margin-left:10px;vertical-align: text-top;">
-                <i class="fa fa-plus"></i>
-              </a>
-              <!-- /ko -->
-            </div>
-            <!-- /ko -->
-            <!-- /ko -->
-            <br/>
-          </fieldset>
-        </form>
-        <!-- /ko -->
-      </div>
-    </div>
-
-  </div>
-  <div style="position:absolute; width:100%; bottom: 0;"><a class="pointer demi-modal-chevron" data-dismiss="modal"><i class="fa fa-chevron-up"></i></a></div>
-</div>
-
-
 <div class="hoverMsg hide">
   <!-- ko if: $root.editorMode -->
   <p class="hoverText">${_('Drop a SQL file here')}</p>