Przeglądaj źródła

[spark] Improve assist icon appearance

Johan Ahlen 10 lat temu
rodzic
commit
f03b79c

+ 8 - 10
apps/spark/src/spark/static/spark/css/spark.css

@@ -292,16 +292,6 @@ body {
   margin-left: 0;
 }
 
-.assist-action {
-  margin-left: 3px;
-  opacity:0;
-  transition: opacity 0.2s linear;
-}
-
-.assist-container:hover .assist-action {
-  opacity:1;
-}
-
 .show-assist {
   position: fixed;
   top: 80px;
@@ -330,6 +320,14 @@ body {
   top: 2px;
   right: 4px;
   z-index: 1000;
+  color: #D1D1D1;
+  font-size: 12px;
+  transition: margin-right 0.2s linear, color 0.5s ease;
+}
+
+.hide-assist:hover {
+  margin-right: 2px;
+  color: #338bb8;
 }
 
 .logs {

+ 1 - 1
apps/spark/src/spark/templates/editor_components.mako

@@ -219,7 +219,7 @@ from django.utils.translation import ugettext as _
 
 <script type="text/html" id="notebook">
   <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible()">
-    <a title="${_('Toggle Assist')}" class="pointer assist-action hide-assist" data-bind="click: function() { $root.isAssistVisible(false) }">
+    <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { $root.isAssistVisible(false) }">
       <i class="fa fa-chevron-left"></i>
     </a>
     <div class="assist" data-bind="component: { name: 'assist-panel', params: { assist: assist, appName: 'spark' }}"></div>

+ 45 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -68,6 +68,51 @@ from django.utils.translation import ugettext as _
     .assist-columns > li {
       padding: 6px 5px;
     }
+
+    .assist-column .column-actions,
+    .assist-table .table-actions {
+      opacity: 0;
+      position:absolute;
+      right: 0;
+      padding-left:3px;
+      background-color: #FFF;
+      transition: opacity 0.2s linear, color 0.2s ease;
+    }
+
+    .column-actions > a,
+    .table-actions > a {
+      color: #D1D1D1;
+      transition: color 0.2s ease;
+    }
+
+    .column-actions > a:hover,
+    .table-actions > a:hover {
+      color: #338bb8;
+    }
+
+    .assist-column:hover .column-actions,
+    .assist-table:hover .table-actions {
+      opacity: 1;
+    }
+
+    .table-actions:hover {
+      color: #338bb8;
+    }
+
+    .assist-action {
+      margin-left: 3px;
+      color: #D1D1D1;
+      opacity:0;
+      transition: opacity 0.2s linear, color 0.2s ease;
+    }
+
+    .assist-container:hover .assist-action {
+      opacity:1;
+    }
+
+    .assist-action:hover {
+      color: #338bb8;
+    }
   </style>
 
   <script type="text/html" id="assist-panel-template">