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

[editor] Added clear history UI

Enrico Berti 10 жил өмнө
parent
commit
0d8ba1ab5a

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

@@ -817,4 +817,14 @@ table.airy tr td {
 
 .editable-empty, .editable-empty:hover {
   color: #737373 !important;
+}
+
+h4.header {
+  font-weight: bold;
+  color: #999;
+  font-size: 14px;
+  text-transform: uppercase;
+  padding-left: 4px;
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 3px;
 }

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

@@ -977,6 +977,12 @@
       });
     };
 
+    self.clearHistory = function () {
+      // TODO
+      console.log("clear history")
+      $(document).trigger("hideHistoryModal");
+    };
+
     self.exportJupyterNotebook = function () {
       function addCell(type, code) {
         var cell = {

+ 24 - 0
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -417,6 +417,11 @@ ${ require.config() }
   <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;">
       <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>
+          </tr>
+        </thead>
         <tbody data-bind="foreach: $parent.history">
           <tr class="pointer" data-bind="click: function(){ location.href=url }">
             <td><code data-bind="text: query"></code></td>
@@ -1065,6 +1070,21 @@ ${ require.config() }
     <a class="btn btn-primary disable-feedback" data-dismiss="modal" data-bind="click: function() { $root.selectedNotebook().authSession(); }">${_('Connect')}</a>
   </div>
 </div>
+
+<div id="clearHistoryModal" class="modal hide fade">
+  <div class="modal-header">
+    <a href="#" class="close" data-dismiss="modal">&times;</a>
+    <h3>${_('Confirm History Clear')}</h3>
+  </div>
+  <div class="modal-body">
+    <p>${_('Are you sure you want to clear the query history?')}</p>
+  </div>
+  <div class="modal-footer">
+    <a class="btn" data-dismiss="modal">${_('No')}</a>
+    <a class="btn btn-danger disable-feedback" data-bind="click: function() { $root.selectedNotebook().clearHistory(); }">${_('Yes')}</a>
+  </div>
+</div>
+
   
 </%def>
 
@@ -1902,6 +1922,10 @@ ${ require.config() }
         $("#authModal").modal("show");
       });
 
+      $(document).on("hideHistoryModal", function (e) {
+        $("#clearHistoryModal").modal("hide");
+      });
+
       // Close the notebook snippets when leaving the page
       window.onbeforeunload = function (e) {
         viewModel.selectedNotebook().close();