Bladeren bron

[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 jaren geleden
bovenliggende
commit
3c0dbca37a
2 gewijzigde bestanden met toevoegingen van 22 en 8 verwijderingen
  1. 15 3
      apps/spark/src/spark/static/spark/css/spark.css
  2. 7 5
      apps/spark/src/spark/templates/editor.mako

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

@@ -30,12 +30,13 @@
 }
 
 .CodeMirror {
-  border: 1px solid #EEE;
-  border-top: none;
-  border-bottom: none;
   height: auto;
 }
 
+.card .card-heading.simple {
+  border: none;
+}
+
 .add-snippet {
   margin: 10px;
   margin-top: 60px;
@@ -263,6 +264,17 @@ h1.empty {
   background-color: #F0F0F0;
 }
 
+.editor:hover .run-button {
+    display: inherit;
+}
+
+.snippet-body:hover .run-button {
+    display: inline-block;
+}
+
+.run-button {
+    display: none;
+}
 .chart-icon {
   width: 15px;
   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') }">
               <i class="fa fa-spinner fa-spin"></i>
             </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>
             </a>
             <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>
 
           <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>
       <!-- /ko -->
 
@@ -1067,6 +1068,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
       }
 
       var options = $.extend(valueAccessor(), {
+        lineNumbers: false,
         extraKeys: {
           "Ctrl-Space": function (cm) {
             $(document.body).on("contextmenu", function (e) {