Răsfoiți Sursa

[editor] Better history icon and empty history message

Enrico Berti 10 ani în urmă
părinte
comite
e9314b6

+ 11 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -715,6 +715,17 @@ table.airy tr td {
   padding: 5px;
 }
 
+.alert-notebook {
+  border: none;
+  margin-top: -3px;
+  background: -moz-linear-gradient(left, rgba(252, 248, 227, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  background: -webkit-linear-gradient(left, rgba(252, 248, 227, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  background: -o-linear-gradient(left, rgba(252, 248, 227, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  background: -ms-linear-gradient(left, rgba(252, 248, 227, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(to right, rgba(252, 248, 227, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcf8e3', endColorstr='#00ffffff', GradientType=1)
+}
+
 .hoverMsg {
   background: #000;
   height: 100%;

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

@@ -995,6 +995,7 @@
         doc_type: self.selectedSnippet()
       }, function (data) {
           self.history.removeAll();
+          self.showHistory(false);
         }).fail(function (xhr) {
            $(document).trigger("error", xhr.responseText);
         });

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

@@ -416,10 +416,14 @@ ${ require.config() }
   <!-- ko if: $root.editorMode -->
   <div class="query-history-container" data-bind="slideVisible: $parent.showHistory" style="display: none;">
     <div data-bind="delayedOverflow, css: resultsKlass" style="margin-top: 5px; position: relative;">
+      <!-- ko ifnot: $parent.history().length > 0 -->
+      <div class="alert alert-notebook"><strong>${ _('There is currently no query history.')}</strong> ${ _('Did you know that you can autocomplete your SQL statement with CTRL+Space and run the query with CTRL+Enter?') }</div>
+      <!-- /ko -->
+      <!-- ko if: $parent.history().length > 0 -->
       <table class="table table-compressed">
         <thead>
           <tr>
-            <th colspan="2" class="muted">${ _('Query history') } &nbsp; <a href="#clearHistoryModal" title="${_('Clear the query history')}" rel="tooltip" class="" data-toggle="modal"><i class="fa fa-calendar-times-o"></i></a></th>
+            <th colspan="2" class="muted">${ _('Query history') } &nbsp; <span class="inactive-action"><a href="#clearHistoryModal" title="${_('Clear the query history')}" rel="tooltip" class="snippet-icon" data-toggle="modal"><i class="fa fa-calendar-times-o"></i></a></span></th>
           </tr>
         </thead>
         <tbody data-bind="foreach: $parent.history">
@@ -429,6 +433,7 @@ ${ require.config() }
           </tr>
         </tbody>
       </table>
+      <!-- /ko -->
     </div>
   </div>
   <!-- /ko -->