Browse Source

[spark] Style the snippet actions the same the assist actions

This also makes the styles more generic and moves them into hue3.css
Johan Ahlen 10 năm trước cách đây
mục cha
commit
ee7bc21f8f

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

@@ -276,14 +276,6 @@ body {
   height: 29px;
 }
 
-.snippet-actions {
-    display: none;
-}
-
-.snippet-container:hover .snippet-actions {
-    display: inline-block;
-}
-
 .text-snippet h2 {
   padding-left: 0 !important;
 }

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

@@ -222,7 +222,7 @@ from django.utils.translation import ugettext as _
     <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>
+    <div class="assist" data-bind="component: { name: 'assist-panel', params: { assist: assist, appName: 'spark' }}" style="height:100%"></div>
   </div>
   <div class="resizer" data-bind="visible: $root.isAssistVisible(), splitDraggable : { appName: 'spark', leftPanelVisible: $root.isAssistVisible }"><div class="resize-bar">&nbsp;</div></div>
   <div class="right-panel">
@@ -283,7 +283,7 @@ from django.utils.translation import ugettext as _
 
 
 <script type="text/html" id="snippet">
-  <div class="snippet-container row-fluid">
+  <div class="snippet-container reveals-actions row-fluid">
     <div data-bind="css: klass, attr: {'id': 'snippet_' + id()}">
 
       <h2 class="card-heading simple" data-bind="visible: $root.isEditing() || (! $root.isEditing() && type() != 'text')">
@@ -310,7 +310,7 @@ from django.utils.translation import ugettext as _
         </div>
 
         <span data-bind="editable: name, editableOptions: {enabled: $root.isEditing(), placement: 'right'}"></span>
-        <div class="snippet-actions inline pull-right">
+        <div class="actions inline pull-right">
           <a href="javascript:void(0)" data-bind="click: function(){ codeVisible(! codeVisible()) }"><i class="fa" data-bind="css: {'fa-compress' : codeVisible, 'fa-expand' : ! codeVisible() }"></i></a>
           <a href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: Object.keys(ko.mapping.toJS(properties)).length > 0"><i class="fa fa-cog"></i></a>
           <a href="javascript:void(0)" data-bind="click: function(){ remove($parent, $data); window.setTimeout(redrawFixedHeaders, 100);}"><i class="fa fa-times"></i></a>
@@ -638,9 +638,9 @@ from django.utils.translation import ugettext as _
     <a data-bind="visible: status() == 'loading'" class="btn btn-primary spark-btn" style="cursor: default;" 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="snippet-actions run-button btn btn-primary disable-feedback spark-btn pointer">
-      <i class="fa fa-play"></i>
-    </a>
+    <div class="actions">
+      <a title="${ _('CTRL + ENTER') }" data-bind="click: execute, visible: status() != 'running' && status() != 'loading'" class="run-button btn btn-primary disable-feedback spark-btn pointer" style="color: #FFF;"><i class="fa fa-play"></i></a>
+    </div>
     <a title="${ _('Cancel') }" data-bind="click: cancel, visible: status() == 'running'" class="btn btn-danger disable-feedback spark-btn pointer">
       <i class="fa fa-stop"></i>
     </a>

+ 27 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2000,3 +2000,30 @@ pre {
 .hiveAutocompleteItem {
   white-space: nowrap;
 }
+
+.reveals-actions:hover .actions,
+.reveals-actions-2nd:hover .actions-2nd,
+.reveals-actions-3rd:hover .actions-3rd {
+  opacity: 1;
+}
+
+.actions,
+.actions-2nd,
+.actions-3rd {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.2s linear;
+}
+
+.actions > a,
+.actions-2nd > a,
+.actions-3rd > a {
+  color: #D1D1D1;
+  transition: color 0.2s ease;
+}
+
+.actions > a:hover,
+.actions-2nd > a:hover,
+.actions-3rd > a:hover {
+  color: #338bb8;
+}

+ 14 - 53
desktop/core/src/desktop/templates/ko_components.mako

@@ -56,11 +56,6 @@ from django.utils.translation import ugettext as _
       color: #737373;
     }
 
-    .assist-column-link:hover,
-    .assist-table-link:hover {
-      color: #338bb8;
-    }
-
     .assist-columns {
       margin-left: 0px;
     }
@@ -69,49 +64,11 @@ from django.utils.translation import ugettext as _
       padding: 6px 5px;
     }
 
-    .assist-column .column-actions,
-    .assist-table .table-actions {
-      opacity: 0;
+    .assist-actions  {
       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>
 
@@ -160,10 +117,12 @@ from django.utils.translation import ugettext as _
   </script>
 
   <script type="text/html" id="assist-panel-template">
-    <div style="position: relative;">
+    <div class="reveals-actions" style="position: relative; height: 100%">
       <ul class="nav nav-list" style="float:left; border: none; padding: 0; background-color: #FFF; margin-bottom: 1px; width: 100%;">
         <li class="nav-header">${_('database')}
-          <i title="${_('Manually refresh the table list')}" class="pull-right pointer assist-action fa fa-refresh" data-bind="click: reloadAssist"></i>
+          <div class="pull-right actions">
+            <a href="javascript:void(0)" data-bind="click: reloadAssist"><i class="pointer fa fa-refresh" title="${_('Manually refresh the table list')}"></i></a>
+          </div>
         </li>
         <!-- ko if: assist.mainObjects().length > 0 -->
         <li>
@@ -171,21 +130,23 @@ from django.utils.translation import ugettext as _
           <div data-bind="visible: Object.keys(assist.firstLevelObjects()).length == 0">${_('The selected database has no tables.')}</div>
         </li>
         <li class="nav-header" style="margin-top:10px;">${_('tables')}
-          <i class="assist-action pointer pull-right fa fa-search" data-bind="click: toggleSearch"></i>
+          <div class="pull-right actions">
+            <a href="javascript:void(0)" data-bind="click: toggleSearch"><i class="pointer fa fa-search" title="${_('Search')}"></i></a>
+          </div>
         </li>
         <li>
           <div data-bind="slideVisible: options.isSearchVisible"><input type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="value: assist.filter, valueUpdate: 'afterkeydown'"/></div>
           <ul class="assist-tables" data-bind="visible: Object.keys(assist.firstLevelObjects()).length > 0, foreach: assist.filteredFirstLevelObjects()">
-            <li class="assist-table" style="position:relative;">
-              <div class="table-actions">
-                <a href="javascript:void(0)" class="preview-sample" data-bind="click: $parent.showTablePreview"><i class="fa fa-list" title="${_('Preview Sample data')}"></i></a>
-                <a href="javascript:void(0)" class="table-stats" data-bind="click: function(data, event) { $parent.showStats(data, null, event) }"><i class='fa fa-bar-chart' title="${_('View statistics') }"></i></a>
+            <li class="assist-table reveals-actions-2nd" style="position:relative;">
+              <div class="actions-2nd assist-actions">
+                <a href="javascript:void(0)" data-bind="click: $parent.showTablePreview"><i class="fa fa-list" title="${_('Preview Sample data')}"></i></a>
+                <a href="javascript:void(0)" data-bind="click: function(data, event) { $parent.showStats(data, null, event) }"><i class='fa fa-bar-chart' title="${_('View statistics') }"></i></a>
               </div>
               <a class="assist-table-link" href="javascript:void(0)" data-bind="click: $parent.loadAssistSecondLevel, event: { 'dblclick': function(){ huePubSub.publish('assist.dblClickItem', $data); }, text: $data }"><span data-bind="text: $data"></span></a>
               <div data-bind="visible: $parent.assist.firstLevelObjects()[$data].loaded() && $parent.assist.firstLevelObjects()[$data].open()">
                 <ul class="assist-columns" data-bind="visible: $parent.assist.firstLevelObjects()[$data].items().length > 0, foreach: $parent.assist.firstLevelObjects()[$data].items()">
-                  <li class="assist-column">
-                    <div class="column-actions">
+                  <li class="assist-column reveals-actions-3rd">
+                    <div class="actions-3rd assist-actions">
                       <a href="javascript:void(0)" class="table-stats" data-bind="click: function(data, event) { $parents[1].showStats($parent, data.name, event) }"><i class='fa fa-bar-chart' title="${_('View statistics') }"></i></a>
                     </div>
                     <a class="assist-column-link" data-bind="attr: {'title': $parents[1].secondLevelTitle($data)}" style="padding-left:10px" href="javascript:void(0)"><span data-bind="html: $parents[1].truncateSecondLevel($data), event: { 'dblclick': function() { huePubSub.publish('assist.dblClickItem', $data.name +', '); } }"></span></a>