Browse Source

HUE-3335 [editor] The action buttons next to editor and result are not aligned and too close to the panels

Johan Ahlen 9 years ago
parent
commit
d0248e2

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

@@ -509,17 +509,17 @@ from desktop.views import _ko
 
     <div class="hover-dropdown" data-bind="visible: snippet.status() == 'available' && snippet.result.hasSomeResults() && snippet.result.type() == 'table'" style="display:none;">
       <a class="snippet-side-btn inactive-action dropdown-toggle pointer" style="padding-right:0" data-toggle="dropdown">
-        <i class="fa fa-download"></i>
+        <i class="fa fa-fw fa-download"></i>
       </a>
       <ul class="dropdown-menu">
         <li>
           <a class="inactive-action download" href="javascript:void(0)" data-bind="click: downloadCsv, event: { mouseover: function(){ window.onbeforeunload = null; }, mouseout: function() { window.onbeforeunload = $(window).data('beforeunload'); } }" title="${ _('Download first rows as CSV') }">
-            <i class="fa fa-file-o"></i> ${ _('CSV') }
+            <i class="fa fa-fw fa-file-o"></i> ${ _('CSV') }
           </a>
         </li>
         <li>
           <a class="inactive-action download" href="javascript:void(0)" data-bind="click: downloadXls, event: { mouseover: function(){ window.onbeforeunload = null; }, mouseout: function() { window.onbeforeunload = $(window).data('beforeunload'); } }" title="${ _('Download first rows as XLS') }">
-            <i class="fa fa-file-excel-o"></i> ${ _('Excel') }
+            <i class="fa fa-fw fa-file-excel-o"></i> ${ _('Excel') }
           </a>
         </li>
       </ul>

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

@@ -778,7 +778,6 @@ table.airy tr td {
   line-height: 27px;
   height: 27px;
   min-height: 27px;
-  padding: 0 7px;
   margin: 0;
   font-size: 13px;
   cursor: pointer;

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

@@ -972,7 +972,7 @@ ${ require.config() }
       <i class="fa fa-fw fa-play"></i>
     </a>
     <div class="dropdown">
-      <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="click: clear, visible: status() != 'running' && status() != 'loading', css: {'disabled': statement() === '' }" title="${ _('Clear the current editor') }">
+      <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="click: clear, css: {'disabled': statement() === '' || status() === 'running' || status() === 'loading' }" title="${ _('Clear the current editor') }">
         <i class="fa fa-fw fa-eraser"></i>
       </a>
       <!-- ko if: isSqlDialect -->
@@ -987,7 +987,7 @@ ${ require.config() }
           </a>
         </li>
         <li>
-          <a href="javascript:void(0)" data-bind="click: format, visible: status() != 'running' && status() != 'loading', css: {'disabled': statement() === '' }" title="${ _('Format the current SQL query') }">
+          <a href="javascript:void(0)" data-bind="click: format, css: {'disabled': statement() === '' || status() === 'running' || status() === 'loading' }" title="${ _('Format the current SQL query') }">
             <i class="fa fa-fw fa-indent"></i> ${_('Format')}
           </a>
         </li>
@@ -1011,24 +1011,24 @@ ${ require.config() }
   <div class="snippet-actions" style="opacity:1">
     <div style="margin-top:25px;">
       <a class="snippet-side-btn" href="javascript: void(0)" data-bind="click: function() { $data.showGrid(true); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
-        <i class="fa fa-th"></i>
+        <i class="fa  fa-fw fa-th"></i>
       </a>
     </div>
 
     <div class="dropdown">
       <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="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>
+        <i class="hcha fa-fw hcha-bar-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART"></i>
+        <i class="hcha fa-fw hcha-line-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.LINECHART"></i>
+        <i class="hcha fa-fw hcha-pie-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.PIECHART"></i>
         <i class="fa fa-fw fa-dot-circle-o" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.SCATTERCHART"></i>
         <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>
+        <i class="hcha fa-fw hcha-map-chart" data-bind="visible: chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP"></i>
       </a>
       <a class="dropdown-toggle snippet-side-btn" style="padding:0" data-toggle="dropdown" href="javascript: void(0)" data-bind="css: {'active': $data.showChart}">
         <i class="fa fa-caret-down"></i>
       </a>
 
-      <ul class="dropdown-menu">
+      <ul class="dropdown-menu less-padding">
         <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')}
@@ -1063,7 +1063,7 @@ ${ require.config() }
     </div>
 
     <div>
-      <a class="snippet-side-btn" href="javascript:void(0)" data-bind="click: function(){ isResultSettingsVisible(! isResultSettingsVisible()) }, css: { 'blue' : isResultSettingsVisible }"><i class="fa fa-cog"></i></a>
+      <a class="snippet-side-btn" href="javascript:void(0)" data-bind="click: function(){ isResultSettingsVisible(! isResultSettingsVisible()) }, css: { 'blue' : isResultSettingsVisible }"><i class="fa fa-fw fa-cog"></i></a>
     </div>
 
     <div data-bind="component: { name: 'downloadSnippetResults', params: { snippet: $data, notebook: $parent } }" style="display:inline-block;"></div>