Browse Source

HUE-8452 [report] The app toolbar should use Flexbox instead of docking

Enrico Berti 7 years ago
parent
commit
51666e5687

+ 2 - 2
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -81,7 +81,7 @@
 
   % if not USE_NEW_ADD_METHOD.get():
   <!-- ko if: columns().length > 0 && isToolbarVisible -->
-  <div data-bind="dockable: { scrollable: '.page-content', jumpCorrection: 50, topSnap: '${ conf.CUSTOM.BANNER_TOP_HTML.get() and "128px" or "100px" }', triggerAdjust: 50 }">
+  <div>
     %if hasattr(caller, "results"):
     <div style="float: left; margin-left: 20px">
       <div class="toolbar-label">${_('DISPLAY')}</div>
@@ -180,7 +180,7 @@
     </div>
   </div>
 
-<div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing()}">
+<div class="dashboard dashboard-flex" data-bind="css: {'with-top-margin': isEditing()}">
   <div class="container-fluid">
   <!-- ko if: $root.isGridster -->
     <div class="gridster" data-bind="click: function(){ showPlusButtonHint(false); }">

File diff suppressed because it is too large
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


+ 16 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -19,10 +19,26 @@
 @import (reference) "hue-mixins.less";
 
 .dashboard-container {
+  &.dashboard-container-flex {
+    .display-flex();
+    .flex-direction(column);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+  }
+
   .dashboard .container-fluid {
     padding: 6px;
   }
 
+  .dashboard-flex {
+    .flex(1 1 auto);
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
   .row-container {
     width: 100%;
     min-height: 70px;

+ 1 - 1
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -51,7 +51,7 @@ from dashboard.conf import USE_GRIDSTER, USE_NEW_ADD_METHOD, HAS_REPORT_ENABLED,
     </div>
   </form>
 %else:
-<div class="search-bar" data-bind="visible: !$root.isPlayerMode(), dockable: { scrollable: '.page-content', jumpCorrection: 0, topSnap: '${ conf.CUSTOM.BANNER_TOP_HTML.get() and "78px" or "50px" }', triggerAdjust: 50, zIndex: 1001 }, event: { mouseover: function(){ if (columns().length && isGridster()) { showPlusButtonHint(true); } } }">
+<div class="search-bar" data-bind="visible: !$root.isPlayerMode(), event: { mouseover: function(){ if (columns().length && isGridster()) { showPlusButtonHint(true); } } }">
   <div class="search-bar-header">
     <div class="search-bar-logo">
       <div class="app-header">

+ 1 - 1
desktop/libs/dashboard/src/dashboard/templates/search.mako

@@ -30,7 +30,7 @@ ${ commonshare() | n,unicode }
 ${ notebookKoComponents.downloadSnippetResults() }
 %endif
 
-<div id="searchComponents" class="dashboard-container search-components">
+<div id="searchComponents" class="dashboard-container dashboard-container-flex search-components">
 ${ common_search.page_structure(False, is_embeddable, is_report) }
 </div>
 

Some files were not shown because too many files changed in this diff