Browse Source

[editor] Always show the snippet actions in editor mode

For the notebook they will appear on hover as before
Johan Ahlen 10 years ago
parent
commit
d65a300

+ 2 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2183,10 +2183,12 @@ div.navigator .pull-right .nav {
   background: transparent;
   background: transparent;
 }
 }
 
 
+.snippet-actions,
 .hover-actions {
 .hover-actions {
   opacity: 0;
   opacity: 0;
 }
 }
 
 
+.snippet-actions *,
 .hover-actions * {
 .hover-actions * {
   text-decoration: none !important;
   text-decoration: none !important;
 }
 }

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

@@ -42,7 +42,7 @@
 
 
       var selector = options.selector;
       var selector = options.selector;
       var hideTimeout = -1;
       var hideTimeout = -1;
-      var override = false;
+      var override = options.override && ! ko.isObservable(options.override);
       var inside = false;
       var inside = false;
 
 
       var show = function () {
       var show = function () {
@@ -57,6 +57,7 @@
       };
       };
 
 
       if (ko.isObservable(options.override)) {
       if (ko.isObservable(options.override)) {
+        override = options.override();
         options.override.subscribe(function (newValue) {
         options.override.subscribe(function (newValue) {
           override = newValue;
           override = newValue;
           if (newValue) {
           if (newValue) {
@@ -67,6 +68,10 @@
         })
         })
       }
       }
 
 
+      if (override) {
+        window.setTimeout(show, 1);
+      }
+
       $element.mouseenter(function () {
       $element.mouseenter(function () {
         inside = true;
         inside = true;
         show();
         show();

+ 7 - 6
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -357,8 +357,9 @@ ${ require.config() }
                 .addClass('card-heading')
                 .addClass('card-heading')
                 .html($element.parents('h2').html())
                 .html($element.parents('h2').html())
                 .appendTo(_par)
                 .appendTo(_par)
-                .find('.hover-actions')
-                .removeClass('hover-actions');
+                .find('.hover-actions, .snippet-actions')
+                .removeClass('hover-actions')
+                .removeClass('snippet-actions');
               $('<pre>')
               $('<pre>')
                 .addClass('dragging-pre muted')
                 .addClass('dragging-pre muted')
                 .html(ko.dataFor($element.parents('.card-widget')[0]).statement())
                 .html(ko.dataFor($element.parents('.card-widget')[0]).statement())
@@ -457,7 +458,7 @@ ${ require.config() }
 </script>
 </script>
 
 
 <script type="text/html" id="snippet">
 <script type="text/html" id="snippet">
-  <div class="snippet-container row-fluid" data-bind="visibleOnHover: { override: inFocus, selector: '.hover-actions' }">
+  <div class="snippet-container row-fluid" data-bind="visibleOnHover: { override: inFocus, selector: '.hover-actions' }, visibleOnHover: { override: $root.editorMode, selector: '.snippet-actions' }">
     <div class="snippet card card-widget" data-bind="css: {'notebook-snippet' : ! $root.editorMode, 'editor-mode': $root.editorMode, 'active-editor': inFocus, 'snippet-text' : type() == 'text'}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace">
     <div class="snippet card card-widget" data-bind="css: {'notebook-snippet' : ! $root.editorMode, 'editor-mode': $root.editorMode, 'active-editor': inFocus, 'snippet-text' : type() == 'text'}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace">
       <div style="position: relative;">
       <div style="position: relative;">
         <div class="snippet-row">
         <div class="snippet-row">
@@ -858,13 +859,13 @@ ${ require.config() }
 
 
 <script type ="text/html" id="snippet-execution-controls">
 <script type ="text/html" id="snippet-execution-controls">
   <!-- ko if: $root.editorMode -->
   <!-- ko if: $root.editorMode -->
-  <div class="hover-actions" style="position:absolute; bottom: 26px">
+  <div class="snippet-actions" style="position:absolute; bottom: 26px">
     <a class="snippet-side-btn" data-bind="visible: $parent.history().length > 0, click: function() { $parent.showHistory(! $parent.showHistory()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $parent.showHistory}" title="${ _('Show history') }">
     <a class="snippet-side-btn" data-bind="visible: $parent.history().length > 0, click: function() { $parent.showHistory(! $parent.showHistory()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $parent.showHistory}" title="${ _('Show history') }">
       <i class="fa fa-fw fa-history"></i>
       <i class="fa fa-fw fa-history"></i>
     </a>
     </a>
   </div>
   </div>
   <!-- /ko -->
   <!-- /ko -->
-  <div class="hover-actions" style="position:absolute; bottom: 0">
+  <div class="snippet-actions" style="position:absolute; bottom: 0">
     <a class="snippet-side-btn" style="cursor: default;" data-bind="visible: status() == 'loading'" title="${ _('Creating session') }">
     <a class="snippet-side-btn" style="cursor: default;" data-bind="visible: status() == 'loading'" title="${ _('Creating session') }">
       <i class="fa fa-fw fa-spinner fa-spin"></i>
       <i class="fa fa-fw fa-spinner fa-spin"></i>
     </a>
     </a>
@@ -878,7 +879,7 @@ ${ require.config() }
 </script>
 </script>
 
 
 <script type="text/html" id="snippet-result-controls">
 <script type="text/html" id="snippet-result-controls">
-  <div class="hover-actions" style="opacity:1">
+  <div class="snippet-actions" style="opacity:1">
     <div style="margin-top:25px;">
     <div style="margin-top:25px;">
       <a class="snippet-side-btn" href="javascript: void(0)" data-bind="click: function() { $data.showGrid(true); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
       <a class="snippet-side-btn" href="javascript: void(0)" data-bind="click: function() { $data.showGrid(true); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
         <i class="fa fa-th"></i>
         <i class="fa fa-th"></i>