Browse Source

[notebook] Move snippet type switch to left bar

I've also dropped the type name and made the snippet name less bold.
Johan Ahlen 10 năm trước cách đây
mục cha
commit
153824e

+ 4 - 17
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -325,11 +325,13 @@ body {
   border-right: 1px solid #dddddd;
 }
 
+.empty-title {
+  font-weight: normal;
+}
+
 .snippet-icon-image {
   height: 16px;
   width: 16px;
-  margin-left: 3px;
-  margin-right: 3px;
   -webkit-filter: grayscale(1)  brightness(1.5);
   -webkit-filter: grayscale(100%) brightness(150%);
   filter: grayscale(100%) brightness(150%);
@@ -348,8 +350,6 @@ body {
   color: #d1d1d1;
   height: 16px;
   width: 16px;
-  margin-left: 3px;
-  margin-right: 3px;
   -webkit-transition: color 0.2s ease;
   -moz-transition: color 0.2s ease;
   -ms-transition: color 0.2s ease;
@@ -378,10 +378,6 @@ body {
   overflow-y: auto;
 }
 
-.editable-empty, .editable-empty:hover {
-  color: #DDD !important;
-}
-
 .editable-click, a.editable-click, a.editable-click:hover {
   cursor: pointer !important;
 }
@@ -598,15 +594,6 @@ h1.empty {
   }
 }
 
-.widget-type.dropdown a.dropdown-toggle {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.widget-type.dropdown .dropdown-toggle .caret {
-  margin-top: 0;
-}
-
 .no-underline:hover {
   text-decoration: none!important;
 }

+ 31 - 32
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -343,8 +343,6 @@ ${ require.config() }
   <!-- ko if: viewSettings().snippetIcon -->
   <i class="fa snippet-icon" data-bind="css: viewSettings().snippetIcon"></i>
   <!-- /ko -->
-
-  <sup style="margin-left: -2px" data-bind="text: $root.getSnippetName(type())"></sup>
 </script>
 
 <script type="text/html" id="snippet-log">
@@ -374,41 +372,27 @@ ${ 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">
-
-      <h5 class="card-heading-print" data-bind="text: name, css: {'visible': name() != ''}"></h5>
-
-      <h2 style="margin-left:35px;" class="card-heading simple" data-bind="dblclick: function(){ $parent.newSnippetAbove(id()) }, clickForAceFocus: ace">
-
-        <div class="inactive-action hover-actions dropdown inline widget-type">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
-            <span data-bind="template: { name: 'snippetIcon', data: $data }"></span>
-            <span>
-              <b class="caret"></b>
-            </span>
-          </a>
-          <ul class="dropdown-menu" data-bind="foreach: $root.availableSnippets">
-            <li><a class="pointer" data-bind="click: function(){ $parent.type($data.type()); }, text: name"></a></li>
-          </ul>
-        </div>
-
-        <div class="inactive-action hover-actions inline"><span data-bind="editable: name, editableOptions: { emptytext: '${_ko('Untitled')}', mode: 'inline', enabled: true, placement: 'right' }" style="border:none;"></span></div>
-
-        <div class="hover-actions inline pull-right" style="font-size: 15px;margin-right:18px">
-          <a class="inactive-action" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { $data.showLogs(! $data.showLogs()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
-          <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
-          <a class="inactive-action move-widget" href="javascript:void(0)"><i class="fa fa-arrows"></i></a>
-          <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ codeVisible(! codeVisible()) }, visible: type() != 'text'"><i class="fa" data-bind="css: {'fa-compress' : codeVisible, 'fa-expand' : ! codeVisible() }"></i></a>
-          <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
-          <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ $root.removeSnippet($parent, $data); }"><i class="fa fa-times"></i></a>
-        </div>
-      </h2>
-
       <div style="position: relative;">
         <div class="snippet-row">
-          <div class="snippet-left-bar" style="vertical-align: bottom;">
+          <div class="snippet-left-bar">
+            <!-- ko template: 'snippet-type-controls' --><!-- /ko -->
             <!-- ko template: { if: ['text', 'markdown'].indexOf(type()) == -1, name: 'snippet-execution-controls' } --><!-- /ko -->
           </div>
           <div class="snippet-body" data-bind="verticalSlide: codeVisible, clickForAceFocus: ace">
+            <h5 class="card-heading-print" data-bind="text: name, css: {'visible': name() != ''}"></h5>
+
+            <h2 style="margin-left:5px;padding: 3px 0" class="card-heading simple" data-bind="dblclick: function(){ $parent.newSnippetAbove(id()) }, clickForAceFocus: ace">
+              <div class="inactive-action hover-actions inline"><span class="inactive-action" data-bind="css: { 'empty-title': name() === '' }, editable: name, editableOptions: { emptytext: '${_ko('Untitled')}', mode: 'inline', enabled: true, placement: 'right' }" style="border:none;color: #DDD"></span></div>
+
+              <div class="hover-actions inline pull-right" style="font-size: 15px;">
+                <a class="inactive-action" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { $data.showLogs(! $data.showLogs()); window.setTimeout(redrawFixedHeaders, 100); }, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
+                <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
+                <a class="inactive-action move-widget" href="javascript:void(0)"><i class="fa fa-arrows"></i></a>
+                <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ codeVisible(! codeVisible()) }, visible: type() != 'text'"><i class="fa" data-bind="css: {'fa-compress' : codeVisible, 'fa-expand' : ! codeVisible() }"></i></a>
+                <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>
+                <a class="inactive-action" href="javascript:void(0)" data-bind="click: function(){ $root.removeSnippet($parent, $data); }"><i class="fa fa-times"></i></a>
+              </div>
+            </h2>
             <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'code-editor-snippet-body' } --><!-- /ko -->
             <!-- ko template: { if: type() == 'text', name: 'text-snippet-body' } --><!-- /ko -->
             <!-- ko template: { if: type() == 'markdown', name: 'markdown-snippet-body' } --><!-- /ko -->
@@ -763,6 +747,21 @@ ${ require.config() }
   </div>
 </script>
 
+<script type="text/html" id="snippet-type-controls">
+  <div class="inactive-action dropdown hover-actions">
+    <a class="snippet-side-btn" style="padding-right: 0; padding-left: 2px;" data-toggle="dropdown" href="javascript: void(0);">
+      <span data-bind="template: { name: 'snippetIcon', data: $data }"></span>
+    </a>
+    <a class="inactive-action dropdown-toggle snippet-side-btn" style="padding:0" data-toggle="dropdown" href="javascript: void(0);">
+      <i class="fa fa-caret-down"></i>
+    </a>
+
+    <ul class="dropdown-menu" data-bind="foreach: $root.availableSnippets">
+      <li><a class="pointer" data-bind="click: function(){ $parent.type($data.type()); }, text: name"></a></li>
+    </ul>
+  </div>
+</script>
+
 <script type ="text/html" id="snippet-execution-controls">
   <div class="hover-actions" style="position:absolute; bottom: 0">
     <a class="snippet-side-btn" style="cursor: default;" data-bind="visible: status() == 'loading'" title="${ _('Creating session') }">