Browse Source

[notebook] Add horizontal separator between snippets

This also drops the blue left border of the code editor
Johan Ahlen 10 năm trước cách đây
mục cha
commit
ae09fb5

+ 1 - 5
desktop/core/src/desktop/static/desktop/css/common_dashboard.css

@@ -427,8 +427,4 @@ body.modal-open {
   -moz-transition: border-left-color 0.2s ease;
   -ms-transition: border-left-color 0.2s ease;
   transition: border-left-color 0.2s ease;
-}
-
-.active-editor {
-  border-left-color: #3893c2;
-}
+}

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

@@ -88,6 +88,13 @@ body {
 .snippet {
   margin: 10px;
   margin-right: 30px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e5e5e5;
+  border-radius: 0;
+}
+
+.ace_gutter {
+  background: #F1F1F1;
 }
 
 .snippet-left-bar {

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

@@ -291,9 +291,6 @@
     self.isLoading = ko.computed(function () {
       return self.status() == "loading";
     });
-    self.klass = ko.computed(function () {
-      return "snippet card card-widget" + (self.type() == "text" ? " snippet-text" : "");
-    });
 
     self.resultsKlass = ko.computed(function () {
       return "results " + self.type();

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

@@ -371,7 +371,7 @@ ${ require.config() }
 
 <script type="text/html" id="snippet">
   <div class="snippet-container row-fluid" data-bind="visibleOnHover: { override: inFocus, selector: '.hover-actions' }">
-    <div data-bind="css: klass, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace">
+    <div class="snippet card card-widget" data-bind="css: {'active-editor': inFocus, 'snippet-text' : type() == 'text'}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace">
       <div style="position: relative;">
         <div class="snippet-row">
           <div class="snippet-left-bar">