Browse Source

HUE-7396 [dashboard] Re-organize available layouts

Romain Rigaux 8 years ago
parent
commit
26e79377ff
1 changed files with 64 additions and 18 deletions
  1. 64 18
      desktop/core/src/desktop/templates/common_dashboard.mako

+ 64 - 18
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -45,25 +45,39 @@
   %if not hasattr(caller, "skipLayout"):
   %if not hasattr(caller, "skipLayout"):
   <div style="float: left" data-bind="visible: columns().length == 0">
   <div style="float: left" data-bind="visible: columns().length == 0">
     <div class="toolbar-label">${_('LAYOUT')}</div>
     <div class="toolbar-label">${_('LAYOUT')}</div>
-    <a href="javascript: magicSearchLayout(searchViewModel)" onmouseover="searchViewModel.previewColumns('magic')" onmouseout="searchViewModel.previewColumns('')">
+    <a href="javascript: magicSearchLayout(searchViewModel)" title="${ _('Dynamic dashboard: multiple interconnected widgets') }" onmouseover="searchViewModel.previewColumns('magic')" onmouseout="searchViewModel.previewColumns('')">
       <div class="layout-container">
       <div class="layout-container">
         <div class="layout-box" style="width: 24px"></div>
         <div class="layout-box" style="width: 24px"></div>
-        <div class="layout-box" style="width: 72px; margin-left: 4px"><i class="fa fa-table"></i></div>
+        <div class="layout-box" style="width: 72px; margin-left: 4px"><i class="fa fa-line-chart"></i></div>
       </div>
       </div>
     </a>
     </a>
-    <a href="javascript: fullLayout(searchViewModel)" onmouseover="searchViewModel.previewColumns('full')" onmouseout="searchViewModel.previewColumns('')">
+    <a href="javascript: fullLayout(searchViewModel)" title="${ _('Query Builder: Single widget for easily analysing data in multiple dimensions') }" onmouseover="searchViewModel.previewColumns('qbuilder')" onmouseout="searchViewModel.previewColumns('')">
+      <div class="layout-container">
+        <div class="layout-box" style="width: 100px;"><i class="fa fa-table"></i></div>
+      </div>
+    </a>
+    <a href="javascript: fullLayout(searchViewModel)" title="${ _('Report: static dashboard with multiple widgets executing independent queries') }" onmouseover="searchViewModel.previewColumns('dashboard')" onmouseout="searchViewModel.previewColumns('')">
+      <div class="layout-container">
+        <div class="layout-box" style="width: 100px;">
+          <i class="fa fa-area-chart"></i>
+        </div>
+      </div>
+    </a>
+    <a href="javascript: fullLayout(searchViewModel)" title="${ _('Empty dashboard that can be used as a starting point') }" onmouseover="searchViewModel.previewColumns('full')" onmouseout="searchViewModel.previewColumns('')">
       <div class="layout-container">
       <div class="layout-container">
         <div class="layout-box" style="width: 100px;"></div>
         <div class="layout-box" style="width: 100px;"></div>
       </div>
       </div>
     </a>
     </a>
   </div>
   </div>
   %endif
   %endif
+
   %if hasattr(caller, "results"):
   %if hasattr(caller, "results"):
   <div style="float: left; margin-left: 20px" data-bind="visible: columns().length > 0">
   <div style="float: left; margin-left: 20px" data-bind="visible: columns().length > 0">
     <div class="toolbar-label">${_('RESULTS')}</div>
     <div class="toolbar-label">${_('RESULTS')}</div>
     ${caller.results()}
     ${caller.results()}
   </div>
   </div>
   %endif
   %endif
+
   %if hasattr(caller, "widgets"):
   %if hasattr(caller, "widgets"):
   <div class="card-toolbar-content" style="float: left; margin-left: 20px" data-bind="visible: columns().length > 0">
   <div class="card-toolbar-content" style="float: left; margin-left: 20px" data-bind="visible: columns().length > 0">
     %if hasattr(caller, "widgetSectionName"):
     %if hasattr(caller, "widgetSectionName"):
@@ -74,6 +88,7 @@
     ${caller.widgets()}
     ${caller.widgets()}
   </div>
   </div>
   %endif
   %endif
+
   <div class="clearfix"></div>
   <div class="clearfix"></div>
 </div>
 </div>
 
 
@@ -92,26 +107,57 @@
 
 
 
 
   <div data-bind="visible: isEditing() && previewColumns() != '' && columns().length == 0, css:{'with-top-margin': isEditing()}">
   <div data-bind="visible: isEditing() && previewColumns() != '' && columns().length == 0, css:{'with-top-margin': isEditing()}">
-  <div class="container-fluid">
-    <div class="row-fluid" data-bind="visible: previewColumns() == 'full'">
-      <div class="span12 preview-row">
-        <div style="font-size: 80px; padding-top: 120px">${ _('One column layout') }</div>
+    <div class="container-fluid">
+
+      <div class="row-fluid" data-bind="visible: previewColumns() == 'full'">
+        <div class="span12 preview-row">
+          <div style="font-size: 80px; padding-top: 120px">${ _('Blank') }</div>
+        </div>
       </div>
       </div>
-    </div>
-    <div class="row-fluid" data-bind="visible: previewColumns() == 'magic'">
-      <div class="span2 preview-row"></div>
-      <div class="span10">
-        <div class="preview-row" style="font-size: 120px; min-height: 50px !important;">
-          <i class="fa fa-filter"></i>
+
+      <div class="row-fluid" data-bind="visible: previewColumns() == 'magic'">
+        <div class="span2 preview-row" style="font-size: 120px;">
+          <i class="fa fa-pie-chart" style="padding-top: 10px"></i>
         </div>
         </div>
-        <div class="preview-row" style="margin-top: 40px; padding-top: 40px; padding-bottom: 0; min-height: 200px !important;">
-          <i class="fa fa-table" style="font-size: 120px"></i><br/>
-          <div style="font-size: 80px; padding-top: 20px">${ _('Grid results') }</div>
+        <div class="span10">
+          <div class="preview-row" style="font-size: 120px; min-height: 50px !important;">
+            <i class="fa fa-filter"></i>
+          </div>
+          <div class="preview-row" style="margin-top: 40px; padding-top: 40px; padding-bottom: 0; min-height: 200px !important;">
+            <i class="fa fa-line-chart" style="font-size: 120px"></i><br/>
+            <div style="font-size: 80px; padding-top: 20px">${ _('Dashboard') }</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="row-fluid" data-bind="visible: previewColumns() == 'qbuilder'">
+        <div class="span12">
+          <div class="preview-row" style="font-size: 120px; min-height: 50px !important;">
+            <i class="fa fa-square"></i>
+            <i class="fa fa-square" style="margin-left: 20px"></i>
+            <i class="fa fa-superscript" style="margin-left: 20px"></i>
+          </div>
+          <div class="preview-row" style="margin-top: 40px; padding-top: 40px; padding-bottom: 0; min-height: 200px !important;">
+            <i class="fa fa-table" style="font-size: 120px"></i><br/>
+            <div style="font-size: 80px; padding-top: 20px">${ _('Query Builder') }</div>
+          </div>
         </div>
         </div>
       </div>
       </div>
+
+      <div class="row-fluid" data-bind="visible: previewColumns() == 'dashboard'">
+        <div class="span12">
+          <div class="preview-row" style="font-size: 120px; min-height: 50px !important;">
+            <i class="fa fa-pie-chart"></i>
+          </div>
+          <div class="preview-row" style="margin-top: 40px; padding-top: 40px; padding-bottom: 0; min-height: 200px !important;">
+            <i class="fa fa-area-chart" style="font-size: 120px"></i><br/>
+            <div style="font-size: 80px; padding-top: 20px">${ _('Report') }</div>
+          </div>
+        </div>
+      </div>
+
     </div>
     </div>
   </div>
   </div>
-</div>
 
 
 <div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing()}">
 <div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing()}">
   <div class="container-fluid">
   <div class="container-fluid">
@@ -162,7 +208,7 @@
 <script type="text/html" id="row-template${ suffix }">
 <script type="text/html" id="row-template${ suffix }">
   <div class="emptyRow" data-bind="visible: widgets().length == 0 && $index() == 0 && $root.isEditing() && $parent.size() > 4 && $parent.rows().length == 1">
   <div class="emptyRow" data-bind="visible: widgets().length == 0 && $index() == 0 && $root.isEditing() && $parent.size() > 4 && $parent.rows().length == 1">
     <img src="${ static('desktop/art/hint_arrow_flipped.png') }" style="float:left; margin-right: 10px" alt="${ _('Hint arrow') }"/>
     <img src="${ static('desktop/art/hint_arrow_flipped.png') }" style="float:left; margin-right: 10px" alt="${ _('Hint arrow') }"/>
-    <div style="float:left; text-align: center; width: 260px">${_('Drag any of the widgets inside your empty row')}</div>
+    <div style="float: left; text-align: center; width: 260px">${_('Drag any of the widgets inside your empty row')}</div>
     <div class="clearfix"></div>
     <div class="clearfix"></div>
   </div>
   </div>
   <div class="container-fluid">
   <div class="container-fluid">