full screen mode implementation for dashboard (#12265)

* full screen mode implementation * Have Edit and Add buttons kick you out of full screen mode * Instruct the grid to resize when switching between full screen and regular modes * Use new styles and listen for ESC key * handle dark theme * Remove full screen option from edit mode It’s awkward with no obvious save button to escape edit mode. * Code review comments * deregister the route handler if the user navigates away from the dashboard page. * Use a new broadcast event rather than hijacking the window resize one
elastic · Jun 23, 2017 · 9981104 · 9981104
1 parent 68bdd7c
commit 9981104
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 5 deletions.
diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.html b/src/core_plugins/kibana/public/dashboard/dashboard.html
@@ -1,4 +1,14 @@
 <dashboard-app class="app-container dashboard-container">
+  <div class="fullScreenModePlaceholder">
+    <div
+      ng-if="fullScreenMode"
+      class="kuiButton exitFullScreenMode"
+      ng-click="exitFullScreenMode()"
+    >
+      <div class="kuiIcon fa fa-angle-double-up"></div>
+      Exit Full Screen Mode
+    </div>
+  </div>
   <!-- Local nav. -->
   <kbn-top-nav name="dashboard" config="topNavMenu">
     <!-- Transcluded elements. -->
@@ -71,6 +81,7 @@
 
   <!-- Filters. -->
   <filter-bar
+    ng-show="showFilterBar()"
     state="state"
     index-patterns="indexPatterns"
   ></filter-bar>
@@ -84,7 +95,7 @@ <h2 class="kuiTitle kuiVerticalRhythm">
     </h2>
 
     <p class="kuiText kuiVerticalRhythm">
-      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="kbnTopNav.open('add'); toggleAddVisualization = !toggleAddVisualization" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't set up any visualizations yet, <a class="kuiLink" href="#/visualize">visit the Visualize app</a> to create your first visualization.
+      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="showAddPanel()" aria-label="Add visualization">Add</a> button in the menu bar above to add a visualization to the dashboard. <br/>If you haven't set up any visualizations yet, <a class="kuiLink" href="#/visualize">visit the Visualize app</a> to create your first visualization.
     </p>
   </div>
 
@@ -94,7 +105,7 @@ <h2 class="kuiTitle kuiVerticalRhythm">
     </h2>
 
     <p class="kuiText kuiVerticalRhythm">
-      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="kbnTopNav.click('edit');">Edit</a> button in the menu bar above to start working on your new dashboard.
+      Click the <a kbn-accessible-click class="kuiButton kuiButton--primary kuiButton--small" ng-click="enterEditMode()">Edit</a> button in the menu bar above to start working on your new dashboard.
     </p>
   </div>
 

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard.js b/src/core_plugins/kibana/public/dashboard/dashboard.js
@@ -25,6 +25,7 @@ import { notify } from 'ui/notify';
 import './panel/get_object_loaders_for_dashboard';
 import { documentationLinks } from 'ui/documentation_links/documentation_links';
 import { showCloneModal } from './top_nav/show_clone_modal';
+import { ESC_KEY_CODE } from 'ui_framework/services';
 
 const app = uiModules.get('app/dashboard', [
   'elasticsearch',
@@ -117,6 +118,7 @@ app.directive('dashboardApp', function ($injector) {
           description: dashboardState.getDescription(),
         };
         $scope.panels = dashboardState.getPanels();
+        $scope.fullScreenMode = dashboardState.getFullScreenMode();
       };
 
       // Part of the exposed plugin API - do not remove without careful consideration.
@@ -286,7 +288,50 @@ app.directive('dashboardApp', function ($injector) {
         }).catch(notify.error);
       };
 
+      $scope.showFilterBar = () => filterBar.getFilters().length > 0 || !$scope.fullScreenMode;
+      let onRouteChange;
+      const setFullScreenMode = (fullScreenMode) => {
+        $scope.fullScreenMode = fullScreenMode;
+        dashboardState.setFullScreenMode(fullScreenMode);
+        chrome.setVisible(!fullScreenMode);
+        $scope.$broadcast('reLayout');
+
+        // Make sure that if we exit the dashboard app, the chrome becomes visible again
+        // (e.g. if the user clicks the back button).
+        if (fullScreenMode) {
+          onRouteChange = $scope.$on('$routeChangeStart', () => {
+            chrome.setVisible(true);
+            onRouteChange();
+          });
+        } else if (onRouteChange) {
+          onRouteChange();
+        }
+      };
+
+      $scope.$watch('fullScreenMode', () => setFullScreenMode(dashboardState.getFullScreenMode()));
+
+      $scope.exitFullScreenMode = () => setFullScreenMode(false);
+
+      document.addEventListener('keydown', (e) => {
+        if (e.keyCode === ESC_KEY_CODE) {
+          setFullScreenMode(false);
+        }
+      }, false);
+
+      $scope.showAddPanel = () => {
+        if ($scope.fullScreenMode) {
+          $scope.exitFullScreenMode();
+        }
+        $scope.kbnTopNav.open('add');
+      };
+      $scope.enterEditMode = () => {
+        if ($scope.fullScreenMode) {
+          $scope.exitFullScreenMode();
+        }
+        $scope.kbnTopNav.click('edit');
+      };
       const navActions = {};
+      navActions[TopNavIds.FULL_SCREEN] = () => setFullScreenMode(true);
       navActions[TopNavIds.EXIT_EDIT_MODE] = () => onChangeViewMode(DashboardViewMode.VIEW);
       navActions[TopNavIds.ENTER_EDIT_MODE] = () => onChangeViewMode(DashboardViewMode.EDIT);
       navActions[TopNavIds.CLONE] = () => {

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_state.js b/src/core_plugins/kibana/public/dashboard/dashboard_state.js
@@ -10,6 +10,7 @@ import { createPanelState, getPersistedStateId } from 'plugins/kibana/dashboard/
 
 function getStateDefaults(dashboard, hideWriteControls) {
   return {
+    fullScreenMode: false,
     title: dashboard.title,
     description: dashboard.description,
     timeRestore: dashboard.timeRestore,
@@ -83,6 +84,15 @@ export class DashboardState {
     this.createStateMonitor();
   }
 
+  getFullScreenMode() {
+    return this.appState.fullScreenMode;
+  }
+
+  setFullScreenMode(fullScreenMode) {
+    this.appState.fullScreenMode = fullScreenMode;
+    this.saveState();
+  }
+
   registerPanelIndexPatternMap(panelIndex, indexPattern) {
     this.panelIndexPatternMapping[panelIndex] = indexPattern;
   }

diff --git a/src/core_plugins/kibana/public/dashboard/grid.js b/src/core_plugins/kibana/public/dashboard/grid.js
@@ -202,6 +202,7 @@ app.directive('dashboardGrid', function ($compile, Notifier) {
         $window.on('resize', safeLayout);
         $scope.$on('ready:vis', safeLayout);
         $scope.$on('globalNav:update', safeLayout);
+        $scope.$on('reLayout', safeLayout);
       }
 
       // tell gridster to add the panel, and create additional meatadata like $scope

diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -2,6 +2,51 @@
 @import (reference) "~ui/styles/mixins";
 @import "~ui/styles/local_search.less";
 
+.fullScreenModePlaceholder {
+  text-align: center;
+  width: 100%;
+  z-index: 50;
+  height: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.exitFullScreenMode {
+  background-color: @globalColorLightestGray;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  width: 200px;
+  height: 40px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 0;
+  position: fixed;
+  transform: translateY(22px);
+  z-index: 50;
+  display: block;
+  transition: transform .2s ease-in-out;
+  border: solid 1px @globalColorLightGray;
+  border-bottom: 0;
+
+  .kuiIcon {
+    display: block;
+  }
+
+  &:hover {
+    transform: translateY(0px);
+  }
+}
+
+.exitFullScreenMode:hover {
+  bottom: 0px;
+  transition: all .5s ease;
+}
+
 .tab-dashboard {
   background-color: @dashboard-bg;
 }
@@ -13,13 +58,12 @@
 dashboard-grid {
   display: block;
   margin: 0;
-  padding: 5px;
+  padding: 20px;
 }
 
 .start-screen {
   margin: 20px auto;
   background-color: @dashboard-bg;
-  padding: 20px;
   max-width: 800px;
   background: tint(@globalColorBlue, 90%);
   padding: 40px;

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js b/src/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js
@@ -12,6 +12,7 @@ export function getTopNavConfig(dashboardMode, actions) {
   switch (dashboardMode) {
     case DashboardViewMode.VIEW:
       return [
+        getFullScreenConfig(actions[TopNavIds.FULL_SCREEN]),
         getShareConfig(),
         getCloneConfig(actions[TopNavIds.CLONE]),
         getEditConfig(actions[TopNavIds.ENTER_EDIT_MODE])];
@@ -27,6 +28,15 @@ export function getTopNavConfig(dashboardMode, actions) {
   }
 }
 
+function getFullScreenConfig(action) {
+  return {
+    key: 'full screen',
+    description: 'Full Screen Mode',
+    testId: 'dashboardFullScreenMode',
+    run: action
+  };
+}
+
 /**
  * @returns {kbnTopNavConfig}
  */

diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js b/src/core_plugins/kibana/public/dashboard/top_nav/top_nav_ids.js
@@ -5,5 +5,6 @@ export const TopNavIds = {
   SAVE: 'save',
   EXIT_EDIT_MODE: 'exitEditMode',
   ENTER_EDIT_MODE: 'enterEditMode',
-  CLONE: 'clone'
+  CLONE: 'clone',
+  FULL_SCREEN: 'fullScreenMode',
 };
diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
@@ -15,6 +15,9 @@
     }
   }
 
+  .exitFullScreenMode {
+    background-color: @globalColorDarkestGray;
+  }
 
 // /src/ui/public/styles/bootstrap/forms.less
   .form-control {