소스 검색

[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 년 전
부모
커밋
98bbdd8
2개의 변경된 파일4개의 추가작업 그리고 6개의 파일을 삭제
  1. 2 4
      desktop/core/src/desktop/templates/ko_components.mako
  2. 2 2
      desktop/libs/notebook/src/notebook/templates/editor_components.mako

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