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 years ago
parent
commit
ee7bc21f8f

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

@@ -276,14 +276,6 @@ body {
   height: 29px;
   height: 29px;
 }
 }
 
 
-.snippet-actions {
-    display: none;
-}
-
-.snippet-container:hover .snippet-actions {
-    display: inline-block;
-}
-
 .text-snippet h2 {
 .text-snippet h2 {
   padding-left: 0 !important;
   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) }">
     <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { $root.isAssistVisible(false) }">
       <i class="fa fa-chevron-left"></i>
       <i class="fa fa-chevron-left"></i>
     </a>
     </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>
   <div class="resizer" data-bind="visible: $root.isAssistVisible(), splitDraggable : { appName: 'spark', leftPanelVisible: $root.isAssistVisible }"><div class="resize-bar">&nbsp;</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">
   <div class="right-panel">
@@ -283,7 +283,7 @@ from django.utils.translation import ugettext as _
 
 
 
 
 <script type="text/html" id="snippet">
 <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()}">
     <div data-bind="css: klass, attr: {'id': 'snippet_' + id()}">
 
 
       <h2 class="card-heading simple" data-bind="visible: $root.isEditing() || (! $root.isEditing() && type() != 'text')">
       <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>
         </div>
 
 
         <span data-bind="editable: name, editableOptions: {enabled: $root.isEditing(), placement: 'right'}"></span>
         <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(){ 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(){ 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>
           <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') }">
     <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>
       <i class="fa fa-spinner fa-spin"></i>
     </a>
     </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">
     <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>
       <i class="fa fa-stop"></i>
     </a>
     </a>

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

@@ -2000,3 +2000,30 @@ pre {
 .hiveAutocompleteItem {
 .hiveAutocompleteItem {
   white-space: nowrap;
   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;
       color: #737373;
     }
     }
 
 
-    .assist-column-link:hover,
-    .assist-table-link:hover {
-      color: #338bb8;
-    }
-
     .assist-columns {
     .assist-columns {
       margin-left: 0px;
       margin-left: 0px;
     }
     }
@@ -69,49 +64,11 @@ from django.utils.translation import ugettext as _
       padding: 6px 5px;
       padding: 6px 5px;
     }
     }
 
 
-    .assist-column .column-actions,
-    .assist-table .table-actions {
-      opacity: 0;
+    .assist-actions  {
       position:absolute;
       position:absolute;
       right: 0;
       right: 0;
       padding-left:3px;
       padding-left:3px;
       background-color: #FFF;
       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>
   </style>
 
 
@@ -160,10 +117,12 @@ from django.utils.translation import ugettext as _
   </script>
   </script>
 
 
   <script type="text/html" id="assist-panel-template">
   <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%;">
       <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')}
         <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>
         </li>
         <!-- ko if: assist.mainObjects().length > 0 -->
         <!-- ko if: assist.mainObjects().length > 0 -->
         <li>
         <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>
           <div data-bind="visible: Object.keys(assist.firstLevelObjects()).length == 0">${_('The selected database has no tables.')}</div>
         </li>
         </li>
         <li class="nav-header" style="margin-top:10px;">${_('tables')}
         <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>
         <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>
           <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()">
           <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>
               </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>
               <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()">
               <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()">
                 <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>
                       <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>
                     </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>
                     <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>