Quellcode durchsuchen

[editor] Constrain the sortable properties and move the minus next to input

This takes care of an issue where you could drag the sortable properties outside the parent element, moving hdfs paths to settings etc.
Johan Ahlen vor 9 Jahren
Ursprung
Commit
98bbdd8

+ 2 - 4
desktop/core/src/desktop/templates/ko_components.mako

@@ -74,7 +74,7 @@ from desktop.views import _ko
 
 <%def name="csvListInput()">
   <script type="text/html" id="csv-list-input-template">
-    <ul data-bind="sortable: values, visible: values().length" class="unstyled">
+    <ul data-bind="sortable: { data: values, options: { axis: 'y', containment: 'parent' }}, visible: values().length" class="unstyled">
       <li style="margin-bottom: 4px">
         <div class="input-append">
           <!-- ko ifnot: $parent.inputTemplate -->
@@ -82,10 +82,8 @@ from desktop.views import _ko
           <!-- /ko -->
           <!-- ko template: { if: $parent.inputTemplate, name: $parent.inputTemplate } --><!-- /ko -->
           <span class="add-on move-widget muted"><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>
-        <a href="#" data-bind="click: function(){ $parent.removeValue(this); }">
-          <i class="fa fa-minus"></i>
-        </a>
       </li>
     </ul>
     <div style="min-width: 280px; margin-top: 5px;">

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

@@ -513,7 +513,7 @@ ${ require.config() }
     <a class="inactive-action" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { hideFixedHeaders(); $data.showLogs(!$data.showLogs());}, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
     <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
     <a class="inactive-action move-widget" href="javascript:void(0)"><i class="fa fa-arrows"></i></a>
-    <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
+    <a class="inactive-action" href="javascript:void(0)" data-bind="toggle: settingsVisible, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
     <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ $root.removeSnippet($parent, $data); }"><i class="fa fa-times"></i></a>
   </div>
 </script>
@@ -530,7 +530,7 @@ ${ require.config() }
     </div>
     <!-- /ko -->
     <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { hideFixedHeaders(); $data.showLogs(!$data.showLogs());}, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
-    <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
+    <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="toggle: settingsVisible, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
   </div>
 </script>