Bladeren bron

[notebook] Show snippet header on hover

Johan Ahlen 10 jaren geleden
bovenliggende
commit
6e7f8dc65d

+ 1 - 1
desktop/core/src/desktop/templates/ko_components.mako

@@ -982,7 +982,7 @@ from desktop.views import _ko
             <img class="snippet-icon" data-bind="attr: { 'src': $root.getSnippetViewSettings(type()).snippetImage }">
             <!-- /ko -->
             <!-- ko if: $root.getSnippetViewSettings(type()).snippetIcon -->
-            <i style="margin-left: 6px" class="fa snippet-icon" data-bind="css: $root.getSnippetViewSettings(type()).snippetIcon"></i>
+            <i style="margin-left: 6px; color: #338bb8;" class="fa snippet-icon" data-bind="css: $root.getSnippetViewSettings(type()).snippetIcon"></i>
             <!-- /ko -->
             </div>
             <span data-bind="text: name"></span>

+ 39 - 1
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -314,12 +314,50 @@ body {
   border-right: 1px solid #dddddd;
 }
 
+.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%);
+  -webkit-transition: -webkit-filter 0.2s ease;
+  -moz-transition: filter 0.2s ease;
+  -ms-transition: filter 0.2s ease;
+}
+
+.hover-actions:hover .snippet-icon-image {
+  -webkit-filter: grayscale(0)  brightness(1);
+  -webkit-filter: grayscale(0%) brightness(100%);
+  filter: grayscale(0%) brightness(100%);
+}
+
 .snippet-icon {
-  color: #338bb8;
+  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;
+}
+
+.hover-actions:hover .snippet-icon {
+  color: #338bb8;
+}
+
+.hover-actions sup,
+.hover-actions .caret {
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+}
+
+.hover-actions:hover sup,
+.hover-actions:hover .caret {
+  color: #338bb8;
 }
 
 .row-container.is-editing {

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

@@ -339,13 +339,13 @@ ${ require.config() }
 <script type="text/html" id="snippetIcon">
 
   <!-- ko if: viewSettings().snippetImage -->
-  <img class="snippet-icon" data-bind="attr: { 'src': viewSettings().snippetImage }">
+  <img class="snippet-icon-image" data-bind="attr: { 'src': viewSettings().snippetImage }">
   <!-- /ko -->
   <!-- ko if: viewSettings().snippetIcon -->
   <i class="fa snippet-icon" data-bind="css: viewSettings().snippetIcon"></i>
   <!-- /ko -->
 
-  <sup style="color: #338bb8; margin-left: -2px" data-bind="text: $root.getSnippetName(type())"></sup>
+  <sup style="margin-left: -2px" data-bind="text: $root.getSnippetName(type())"></sup>
 </script>
 
 
@@ -357,7 +357,7 @@ ${ require.config() }
 
       <h2 class="card-heading simple" data-bind="dblclick: function(){ $parent.newSnippetAbove(id()) }">
 
-        <div class="dropdown inline widget-type">
+        <div class="hover-actions dropdown inline widget-type">
           <a class="dropdown-toggle no-underline" data-toggle="dropdown" href="javascript:void(0)">
             <span data-bind="template: { name: 'snippetIcon', data: $data }"></span>
             <span class="hover-actions-no-transition">