Эх сурвалжийг харах

[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 9 жил өмнө
parent
commit
98bbdd85d1

+ 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>