Browse Source

[spark] Put grid and chart buttons next to execute

The discoverability of these buttons wasn't that good when they're small icons on the right, this reverts that change and moves them back next to the play button.
Johan Ahlen 10 năm trước cách đây
mục cha
commit
42c7343922
1 tập tin đã thay đổi với 13 bổ sung11 xóa
  1. 13 11
      apps/spark/src/spark/templates/editor_components.mako

+ 13 - 11
apps/spark/src/spark/templates/editor_components.mako

@@ -664,16 +664,14 @@ from django.utils.translation import ugettext as _
     </a>
     <div class="hover-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>
-      <span style="color: #CCC; padding-left: 5px;" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
-    </div>
 
-    <div class="pull-right hover-actions" style="padding-top: 8px; font-size: 15px;">
-      <a href="javascript: void(0)" data-bind="visible: result.type() == 'table' && result.hasSomeResults(), click: function() { $data.showGrid(true); }, css: {'blue': $data.showGrid}" title="${ _('Grid') }">
-        <i class="fa fa-th"></i>
-      </a>
+      <div style="display: inline-block; margin-left: 15px;">
+        <a class="btn" href="javascript: void(0)" data-bind="visible: result.type() == 'table' && result.hasSomeResults(), click: function() { $data.showGrid(true); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
+          <i class="fa fa-th"></i>
+        </a>
 
-      <div class="hover-actions hover-dropdown"  data-bind="visible: result.type() == 'table' && result.hasSomeResults()">
-        <a href="javascript: void(0)" data-bind="css: {'blue': $data.showChart}, click: function(){ $data.showChart(true); }">
+        <div class="btn-group">
+        <a class="btn" href="javascript: void(0)" data-bind="visible: result.type() == 'table' && result.hasSomeResults(), css: {'active': $data.showChart}, click: function(){ $data.showChart(true); }">
           <i class="hcha hcha-bar-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
           <i class="hcha hcha-line-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.LINECHART"></i>
           <i class="hcha hcha-pie-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.PIECHART"></i>
@@ -681,12 +679,11 @@ from django.utils.translation import ugettext as _
           <i class="fa fa-fw fa-map-marker" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.MAP"></i>
           <i class="hcha hcha-map-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP"></i>
         </a>
-
-        <a href="javascript: void(0)" data-bind="visible: result.type() == 'table', css: {'blue': $data.showChart}" data-toggle="dropdown">
+        <a style="min-width: 12px; width: 12px;" class="btn dropdown-toggle" data-toggle="dropdown" href="javascript: void(0)" data-bind="visible: result.type() == 'table' && result.hasSomeResults(), css: {'active': $data.showChart}">
           <i class="fa fa-caret-down"></i>
         </a>
 
-        <ul class="dropdown-menu pull-right">
+        <ul class="dropdown-menu">
           <li>
             <a href="javascript:void(0)" data-bind="css: {'active': chartType() == ko.HUE_CHARTS.TYPES.BARCHART}, click: function(){ $data.showChart(true); chartType(ko.HUE_CHARTS.TYPES.BARCHART); }">
               <i class="hcha hcha-bar-chart"></i> ${_('Bars')}
@@ -718,7 +715,12 @@ from django.utils.translation import ugettext as _
             </a>
           </li>
         </ul>
+        </div>
       </div>
+    </div>
+
+    <div class="pull-right hover-actions" style="padding-top: 8px; font-size: 15px;">
+      <span style="color: #CCC; padding-right: 10px;" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
 
       <a href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && result.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>