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

[notebook] Lighten up the snippet editors

This commit removes the line numbers and the upper borders from the editor and the execute button is only visible on hover.
Johan Ahlen 10 жил өмнө
parent
commit
3c0dbca

+ 15 - 3
apps/spark/src/spark/static/spark/css/spark.css

@@ -30,12 +30,13 @@
 }
 }
 
 
 .CodeMirror {
 .CodeMirror {
-  border: 1px solid #EEE;
-  border-top: none;
-  border-bottom: none;
   height: auto;
   height: auto;
 }
 }
 
 
+.card .card-heading.simple {
+  border: none;
+}
+
 .add-snippet {
 .add-snippet {
   margin: 10px;
   margin: 10px;
   margin-top: 60px;
   margin-top: 60px;
@@ -263,6 +264,17 @@ h1.empty {
   background-color: #F0F0F0;
   background-color: #F0F0F0;
 }
 }
 
 
+.editor:hover .run-button {
+    display: inherit;
+}
+
+.snippet-body:hover .run-button {
+    display: inline-block;
+}
+
+.run-button {
+    display: none;
+}
 .chart-icon {
 .chart-icon {
   width: 15px;
   width: 15px;
   text-align: center;
   text-align: center;

+ 7 - 5
apps/spark/src/spark/templates/editor.mako

@@ -402,7 +402,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
             <a data-bind="visible: status() == 'loading'" class="btn btn-disabled codeMirror-overlaybtn" title="${ _('Creating session') }">
             <a data-bind="visible: status() == 'loading'" class="btn btn-disabled codeMirror-overlaybtn" title="${ _('Creating session') }">
               <i class="fa fa-spinner fa-spin"></i>
               <i class="fa fa-spinner fa-spin"></i>
             </a>
             </a>
-            <a title="${ _('CTRL + ENTER') }" data-bind="click: execute, visible: status() != 'running' && status() != 'loading'" class="btn btn-primary disable-feedback codeMirror-overlaybtn pointer">
+            <a title="${ _('CTRL + ENTER') }" data-bind="click: execute, visible: status() != 'running' && status() != 'loading'" class="run-button btn btn-primary disable-feedback codeMirror-overlaybtn pointer">
               <i class="fa fa-play"></i>
               <i class="fa fa-play"></i>
             </a>
             </a>
             <a title="${ _('Cancel') }" data-bind="click: cancel, visible: status() == 'running'" class="btn btn-danger disable-feedback codeMirror-overlaybtn pointer">
             <a title="${ _('Cancel') }" data-bind="click: cancel, visible: status() == 'running'" class="btn btn-danger disable-feedback codeMirror-overlaybtn pointer">
@@ -681,10 +681,11 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
           </div>
           </div>
 
 
           <br/>
           <br/>
-
-          <a title="${ _('Submit') }" data-bind="click: execute, visible: status() != 'running'" class="btn btn-primary disable-feedback pointer">
-            <i class="fa fa-play"></i>
-          </a>
+          <div style="height: 32px;">
+            <a title="${ _('Submit') }" data-bind="click: execute, visible: status() != 'running'" class="run-button btn btn-primary disable-feedback pointer">
+              <i class="fa fa-play"></i>
+            </a>
+          </div>
         </div>
         </div>
       <!-- /ko -->
       <!-- /ko -->
 
 
@@ -1067,6 +1068,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
       }
       }
 
 
       var options = $.extend(valueAccessor(), {
       var options = $.extend(valueAccessor(), {
+        lineNumbers: false,
         extraKeys: {
         extraKeys: {
           "Ctrl-Space": function (cm) {
           "Ctrl-Space": function (cm) {
             $(document.body).on("contextmenu", function (e) {
             $(document.body).on("contextmenu", function (e) {