Răsfoiți Sursa

[notebook] Show actions when snippet is in focus

Johan Ahlen 10 ani în urmă
părinte
comite
760e6f2

+ 1 - 1
desktop/core/src/desktop/static/desktop/css/common_dashboard.css

@@ -429,6 +429,6 @@ body.modal-open {
   transition: border-left-color 0.2s ease;
 }
 
-.ace-editor:hover {
+.active-editor {
   border-left-color: #3893c2;
 }

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

@@ -40,7 +40,7 @@
       var hide = function () {
         hideTimeout = window.setTimeout(function () {
           $element.find(selector).fadeTo("normal", 0);
-        }, 100);
+        }, 50);
       };
 
       if (ko.isObservable(options.override)) {
@@ -1824,6 +1824,7 @@
       });
 
       editor.on("focus", function () {
+        snippet.inFocus(true);
         $(".ace-editor").data("last-active-editor", false);
         $el.data("last-active-editor", true);
       });
@@ -1833,6 +1834,7 @@
       });
 
       editor.on("blur", function () {
+        snippet.inFocus(false);
         snippet.statement_raw(editor.getValue());
       });
 

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

@@ -23,7 +23,7 @@
 }(this, function (ko, AssistHelper, Autocompleter) {
 
   var SPARK_MAPPING = {
-    ignore: ["ace", "images", "autocompleter", "selectedStatement", "assistHelpers", "user"]
+    ignore: ["ace", "images", "autocompleter", "selectedStatement", "assistHelpers", "user", "inFocus"]
   };
 
   var Result = function (snippet, result) {
@@ -153,6 +153,7 @@
     self.errors = ko.observableArray([]);
 
     self.availableSnippets = vm.availableSnippets();
+    self.inFocus = ko.observable(false);
 
     self.getAceMode = function() {
       return vm.getSnippetViewSettings(self.type()).aceMode;

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

@@ -350,7 +350,7 @@ ${ require.config() }
 
 
 <script type="text/html" id="snippet">
-  <div class="snippet-container row-fluid" data-bind="visibleOnHover: { selector: '.hover-actions' }">
+  <div class="snippet-container row-fluid" data-bind="visibleOnHover: { override: inFocus, selector: '.hover-actions' }">
     <div data-bind="css: klass, attr: {'id': 'snippet_' + id()}">
 
       <h5 class="card-heading-print" data-bind="text: name, css: {'visible': name() != ''}"></h5>
@@ -487,7 +487,7 @@ ${ require.config() }
 <script type="text/html" id="code-editor-snippet-body">
   <div class="row-fluid" style="margin-bottom: 5px">
     <div class="editor span12" data-bind="verticalSlide: codeVisible, click: function(snippet, e){ setAceFocus(e, ace()); }">
-      <div class="ace-editor" data-bind="attr: { id: id() }, delayedOverflow, aceEditor: {
+      <div class="ace-editor" data-bind="css: {'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
           snippet: $data,
           openIt: '${ _ko("Alt or Ctrl + Click to open it") }'
         }"></div>
@@ -540,7 +540,7 @@ ${ require.config() }
         </ul>
       </div>
       <div data-bind="css: {'span10': isResultSettingsVisible, 'span12 nomargin': !isResultSettingsVisible()}">
-        <div data-bind="attr: { 'id': 'toggleResultSettingsGrid' + id() }, click: toggleResultSettings" class="toggle-result-settings show-result-settings">
+        <div data-bind="attr: { 'id': 'toggleResultSettingsGrid' + id() }, click: toggleResultSettings" class="hover-actions toggle-result-settings show-result-settings">
           <a class="inactive-action pointer" title="${_('Show columns')}" data-bind="visible: !isResultSettingsVisible()">
             <i class="fa fa-chevron-right"></i>
           </a>
@@ -565,7 +565,7 @@ ${ require.config() }
     <div data-bind="visible: showChart" style="display:none;">
       <div data-bind="visible: isResultSettingsVisible, css:{'span2 result-settings': isResultSettingsVisible, 'hidden': ! isResultSettingsVisible()}">
         <div style="float: right; margin-right: -30px; margin-top:0" data-bind="attr: { 'class': 'hover-actions inline toggle-result-settings toggleResultSettingsChart' + id() }, click: toggleResultSettings">
-          <a class="inactive-action" title="${_('Hide settings')}" class="pointer">
+          <a class="inactive-action pointer" title="${_('Hide')}" data-bind="visible: isResultSettingsVisible">
             <i class="fa fa-chevron-left"></i>
           </a>
         </div>
@@ -653,7 +653,7 @@ ${ require.config() }
 
       <div data-bind="css:{'span10 chart-container': isResultSettingsVisible, 'span12 nomargin chart-container': !isResultSettingsVisible() }">
         <div style="margin-right: -30px; margin-top:0" data-bind="visible: !isResultSettingsVisible(), click: toggleResultSettings, attr: { 'class': 'hover-actions inline toggle-result-settings toggleResultSettingsChart' + id()}">
-          <a class="inactive-action" title="${_('Show settings')}" class="pointer">
+          <a class="inactive-action pointer" title="${_('Show settings')}" data-bind="visible: !isResultSettingsVisible()">
             <i class="fa fa-chevron-right"></i>
           </a>
         </div>