Browse Source

HUE-8245 [dashboard] Show arrow help to improve discoverability of plus button drag

Also changed outdated and grainy PNGs with SVG
Enrico Berti 7 years ago
parent
commit
1e071276bf

BIN
desktop/core/src/desktop/static/desktop/art/hint_arrow.png


+ 21 - 0
desktop/core/src/desktop/static/desktop/art/hint_arrow.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="115.000000pt" height="131.000000pt" viewBox="0 0 115.000000 131.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,131.000000) scale(0.100000,-0.100000)"
+fill="#C8C8C8" stroke="none">
+<path d="M856 1278 c-14 -18 -49 -65 -78 -105 -29 -39 -72 -92 -96 -117 -64
+-68 -53 -86 61 -101 29 -4 50 -12 54 -21 10 -28 -31 -137 -80 -214 -142 -217
+-380 -368 -591 -373 l-81 -3 -7 -79 c-4 -44 -15 -115 -24 -158 -13 -61 -14
+-81 -5 -90 7 -7 51 -13 110 -15 91 -4 103 -2 172 27 158 66 297 177 452 361
+147 175 234 336 245 457 l4 52 32 -5 c17 -4 47 -10 66 -15 71 -18 77 -4 30 73
+-17 27 -64 118 -104 203 -72 150 -76 155 -105 155 -22 0 -37 -9 -55 -32z m139
+-184 c47 -92 84 -169 81 -172 -3 -2 -27 3 -53 12 -94 33 -87 35 -80 -17 20
+-148 -134 -413 -372 -639 -144 -138 -332 -238 -444 -238 -75 0 -82 7 -68 69 6
+29 11 73 11 99 0 80 7 92 52 92 66 0 189 30 263 64 83 39 217 138 276 204 59
+66 134 184 157 245 11 29 23 78 27 109 8 63 6 64 -70 67 -76 3 -80 8 -43 49
+19 20 55 69 82 107 45 64 86 115 92 115 1 0 41 -75 89 -166z"/>
+</g>
+</svg>

BIN
desktop/core/src/desktop/static/desktop/art/hint_arrow_flipped.png


BIN
desktop/core/src/desktop/static/desktop/art/hint_arrow_horiz_flipped.png


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 12 - 0
desktop/core/src/desktop/static/desktop/less/hue-helpers.less

@@ -165,3 +165,15 @@ pre, .like-pre {
 .no-border {
   border: none !important;
 }
+
+.flip-horizontal {
+  transform: scaleX(-1);
+}
+
+.flip-vertical {
+  transform: scaleY(-1);
+}
+
+.flip-both {
+  transform: scale(-1, -1);
+}

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

@@ -106,20 +106,20 @@
 </%def>
 
 <%def name="layout_skeleton(suffix='')">
-  <div id="emptyDashboard" data-bind="fadeVisible: !isEditing() && columns().length == 0">
+  <div class="initial-hint empty-dashboard" data-bind="fadeVisible: !isEditing() && columns().length == 0">
     <div style="float:left; padding-top: 90px; margin-right: 20px; text-align: center; width: 260px">${ _('Click on the pencil to get started with your dashboard!') }</div>
-    <img src="${ static('desktop/art/hint_arrow.png') }" alt="${ _('Hint arrow') }" />
+    <img src="${ static('desktop/art/hint_arrow.svg') }" alt="${ _('Hint arrow') }" />
   </div>
 
-  <div id="emptyDashboardEditing" data-bind="fadeVisible: isEditing() && columns().length == 0 && previewColumns() == ''">
+  <div class="initial-hint empty-dashboard-editing" data-bind="fadeVisible: isEditing() && columns().length == 0 && previewColumns() == ''">
     <div style="float:right; padding-top: 90px; margin-left: 20px; text-align: center; width: 260px">${ _('Pick an index and Click on a layout to start your dashboard!') }</div>
-    <img src="${ static('desktop/art/hint_arrow_horiz_flipped.png') }" alt="${ _('Hint arrow') }" />
+    <img src="${ static('desktop/art/hint_arrow.svg') }" alt="${ _('Hint arrow') }" class="flip-horizontal" />
   </div>
 
   <!-- ko if: $root.isGridster -->
-  <div id="emptyDashboardEditing" data-bind="visible: $root.gridItems().length === 0 && columns().length > 0">
-    <div style="float:left; padding-top: 90px; margin-right: 20px; text-align: center; width: 260px">${_('Drag any of the top widgets inside your dashboard')}</div>
-    <img src="${ static('desktop/art/hint_arrow.png') }" alt="${ _('Hint arrow') }" />
+  <div class="initial-hint empty-dashboard-plus" data-bind="fadeVisible: columns().length > 0 && showPlusButtonHint">
+    <div style="float:left; padding-top: 90px; margin-right: 20px; text-align: center; width: 260px">${_('Drag the plus button into your dashboard')}</div>
+    <img src="${ static('desktop/art/hint_arrow.svg') }" alt="${ _('Hint arrow') }" />
   </div>
   <!-- /ko -->
 
@@ -179,7 +179,7 @@
 <div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing()}">
   <div class="container-fluid">
   <!-- ko if: $root.isGridster -->
-    <div class="gridster">
+    <div class="gridster" data-bind="style: { 'opacity': $root.showPlusButtonHint() ? '.3' : '1' }">
       <!-- ko if: typeof gridItems !== 'undefined' -->
       <ul class="unstyled" data-bind="css: { 'is-adding': $root.isToolbarVisible }, gridster: { items: gridItems, template: 'widget-template-gridster${ suffix }' }"></ul>
       <!-- /ko -->
@@ -271,7 +271,7 @@
 
 <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">
-    <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.svg') }" style="float:left; margin-right: 10px" alt="${ _('Hint arrow') }" class="flip-both"/>
     <div style="float: left; text-align: center; width: 260px">${_('Drag any of the widgets inside your empty row')}</div>
     <div class="clearfix"></div>
   </div>

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


+ 2 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -1876,6 +1876,8 @@ var SearchViewModel = function (collection_json, query_json, initial_json, has_g
     self.isGridster(false);
   }
 
+  self.showPlusButtonHint = ko.observable(collection_json.layout.length === 0);
+
   self.build = function () {
     self.intervalOptions = ko.observableArray(ko.bindingHandlers.daterangepicker.INTERVAL_OPTIONS);
     self.isNested = ko.observable(false);

+ 11 - 7
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -116,21 +116,25 @@
     min-height: 100px;
   }
 
-  #emptyDashboard {
+  .initial-hint {
     position: absolute;
-    right: 204px;
-    top: 80px;
     color: @cui-gray-700;
     font-size: 20px;
     z-index: 1000;
   }
 
-  #emptyDashboardEditing {
-    position: absolute;
+  .empty-dashboard {
+    right: 204px;
+    top: 80px;
+  }
+
+  .empty-dashboard-editing {
     left: 120px;
     top: 160px;
-    color: @cui-gray-700;
-    font-size: 20px;
+  }
+
+  .empty-dashboard-plus {
+    right: 125px;
   }
 
   .emptyRow {

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

@@ -134,7 +134,7 @@ from dashboard.conf import USE_GRIDSTER, HAS_REPORT_ENABLED, HAS_WIDGET_FILTER,
     <div class="search-bar-operations">
       <!-- ko if: $root.isGridster() && !$root.isQueryBuilder() -->
       <div class="btn-group">
-        <a class="btn draggable-plus-button move-cursor" title="${ _('Click or drag to add a widget') }" rel="tooltip" data-placement="bottom" data-bind="draggable: {data: $root.collection.supportAnalytics() ? draggableBucket() : draggableBar(), options: getDraggableOptions({ data: $root.collection.supportAnalytics() ? draggableBucket() : draggableBar(), plusButton: true })}, visible: columns().length, click: function() { isToolbarVisible(!isToolbarVisible()) }, css: {'btn': true, 'btn-inverse': isToolbarVisible }">
+        <a class="btn draggable-plus-button move-cursor" title="${ _('Drag to add a widget') }" rel="tooltip" data-placement="bottom" data-bind="draggable: {data: $root.collection.supportAnalytics() ? draggableBucket() : draggableBar(), options: getDraggableOptions({ data: $root.collection.supportAnalytics() ? draggableBucket() : draggableBar(), plusButton: true })}, visible: columns().length, click: function() { isToolbarVisible(!isToolbarVisible()) }, css: {'btn': true, 'btn-inverse': isToolbarVisible }">
           <i class="fa fa-plus"></i>
         </a>
       </div>
@@ -3226,6 +3226,9 @@ var getDraggableOptions = function (options) {
           gridsterWidget: options.parent
         });
         $(this).data('startingScrollTop', $('.page-content').scrollTop());
+        if (options.plusButton) {
+          searchViewModel.showPlusButtonHint(false);
+        }
         if (options && options.start) {
           options.start();
         }

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