newgrid: progress on fullscreen/edit view modes

package.json

@@ -110,6 +110,7 @@
     "angular-sanitize": "^1.6.6",
     "babel-polyfill": "^6.26.0",
     "brace": "^0.10.0",
+    "classnames": "^2.2.5",
     "clipboard": "^1.7.1",
     "eventemitter3": "^2.0.2",
     "file-saver": "^1.3.3",

public/app/core/directives/dash_class.js

@@ -19,7 +19,7 @@ function (_, $, coreModule) {
         });
 
         var lastHideControlsVal;
-        $scope.$watch('dashboard.hideControls', function() {
+        $scope.$watch('ctrl.dashboard.hideControls', function() {
           if (!$scope.dashboard) {
             return;
           }
@@ -31,7 +31,7 @@ function (_, $, coreModule) {
           }
         });
 
-        $scope.$watch('playlistSrv', function(newValue) {
+        $scope.$watch('ctrl.playlistSrv', function(newValue) {
           elem.toggleClass('playlist-active', _.isObject(newValue));
         });
       }

public/app/features/dashboard/model.ts → public/app/features/dashboard/DashboardModel.ts

@@ -10,7 +10,7 @@ import {PanelModel} from './PanelModel';
 import sortByKeys from 'app/core/utils/sort_by_keys';
 
 export const CELL_HEIGHT = 30;
-export const CELL_VMARGIN = 15;
+export const CELL_VMARGIN = 10;
 
 export class DashboardModel {
   id: any;
@@ -148,6 +148,15 @@ export class DashboardModel {
     return copy;
   }
 
+  setViewMode(panel: PanelModel, fullscreen: boolean, isEditing: boolean) {
+    this.meta.fullscreen = fullscreen;
+    this.meta.isEditing = isEditing && this.meta.canEdit;
+
+    panel.setViewMode(fullscreen, this.meta.isEditing);
+
+    this.events.emit('view-mode-changed', panel);
+  }
+
   private ensureListExist(data) {
     if (!data) { data = {}; }
     if (!data.list) { data.list = []; }

public/app/features/dashboard/PanelModel.ts

@@ -9,6 +9,8 @@ export interface GridPos {
 
 const notPersistedProperties: {[str: string]: boolean} = {
   "events": true,
+  "fullscreen": true,
+  "isEditing": true,
 };
 
 export class PanelModel {
@@ -16,6 +18,10 @@ export class PanelModel {
   gridPos:  GridPos;
   type: string;
   title: string;
+
+  // non persisted
+  fullscreen: boolean;
+  isEditing: boolean;
   events: Emitter;
 
   constructor(model) {
@@ -40,6 +46,11 @@ export class PanelModel {
     return model;
   }
 
+  setViewMode(fullscreen: boolean, isEditing: boolean) {
+    this.fullscreen = fullscreen;
+    this.isEditing = isEditing;
+  }
+
   updateGridPos(newPos: GridPos) {
     let sizeChanged = false;
 

public/app/features/dashboard/dashboard_ctrl.ts

@@ -2,7 +2,7 @@ import config from 'app/core/config';
 
 import coreModule from 'app/core/core_module';
 import {PanelContainer} from './dashgrid/PanelContainer';
-import {DashboardModel} from './model';
+import {DashboardModel} from './DashboardModel';
 
 export class DashboardCtrl implements PanelContainer {
   dashboard: DashboardModel;

public/app/features/dashboard/dashboard_srv.ts

@@ -1,7 +1,5 @@
-///<reference path="../../headers/common.d.ts" />
-
 import coreModule from 'app/core/core_module';
-import {DashboardModel} from './model';
+import {DashboardModel} from './DashboardModel';
 
 export class DashboardSrv {
   dash: any;

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import coreModule from 'app/core/core_module';
 import ReactGridLayout from 'react-grid-layout';
-import {CELL_HEIGHT, CELL_VMARGIN} from '../model';
+import {CELL_HEIGHT, CELL_VMARGIN} from '../DashboardModel';
 import {DashboardPanel} from './DashboardPanel';
-import {DashboardModel} from '../model';
+import {DashboardModel} from '../DashboardModel';
 import {PanelContainer} from './PanelContainer';
 import {PanelModel} from '../PanelModel';
+import classNames from 'classnames';
 import sizeMe from 'react-sizeme';
 
 const COLUMN_COUNT = 12;
@@ -104,8 +105,9 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     const panelElements = [];
 
     for (let panel of this.dashboard.panels) {
+      const panelClasses = classNames({panel: true, 'panel--fullscreen': panel.fullscreen});
       panelElements.push(
-        <div key={panel.id.toString()} className="panel">
+        <div key={panel.id.toString()} className={panelClasses}>
           <DashboardPanel panel={panel} getPanelContainer={this.props.getPanelContainer} />
         </div>,
       );

public/app/features/dashboard/dashgrid/PanelContainer.ts

@@ -1,4 +1,4 @@
-import {DashboardModel}  from '../model';
+import {DashboardModel}  from '../DashboardModel';
 import {PanelLoader} from './PanelLoader';
 
 export interface PanelContainer {

public/app/features/dashboard/dashnav/dashnav.ts

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import angular from 'angular';
 import {appEvents, NavModel} from 'app/core/core';
-import {DashboardModel} from '../model';
+import {DashboardModel} from '../DashboardModel';
 
 export class DashNavCtrl {
   dashboard: DashboardModel;

public/app/features/dashboard/history/history.ts

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import angular from 'angular';
 import moment from 'moment';
 
-import {DashboardModel} from '../model';
+import {DashboardModel} from '../DashboardModel';
 import {HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv} from './history_srv';
 
 export class HistoryListCtrl {

public/app/features/dashboard/history/history_srv.ts

@@ -1,8 +1,6 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
-import {DashboardModel} from '../model';
+import {DashboardModel} from '../DashboardModel';
 
 export interface HistoryListOpts {
   limit: number;

public/app/features/dashboard/specs/dashboard_model_specs.ts

@@ -1,7 +1,7 @@
 import {describe, beforeEach, it, expect} from 'test/lib/common';
 
 import _ from 'lodash';
-import {DashboardModel} from '../model';
+import {DashboardModel} from '../DashboardModel';
 
 describe('DashboardModel', function() {
 

public/app/features/dashboard/specs/exporter_specs.ts

@@ -3,7 +3,7 @@ import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
 import _ from 'lodash';
 import config from 'app/core/config';
 import {DashboardExporter} from '../export/exporter';
-import {DashboardModel} from '../model';
+import {DashboardModel} from '../DashboardModel';
 
 describe('given dashboard with repeated panels', function() {
   var dash, exported;

public/app/features/dashboard/viewStateSrv.js

@@ -27,8 +27,8 @@ function (angular, _, $, config) {
         }
       });
 
-      $scope.onAppEvent('panel-change-view', function(evt, payload) {
-        self.update(payload);
+      self.dashboard.on('view-mode-changed', function(panel) {
+        self.update({fullscreen: panel.fullscreen, edit: panel.isEditing});
       });
 
       $scope.onAppEvent('panel-initialized', function(evt, payload) {
@@ -154,9 +154,6 @@ function (angular, _, $, config) {
 
       ctrl.editMode = false;
       ctrl.fullscreen = false;
-      ctrl.dashboard.editMode = this.oldDashboardEditMode;
-
-      this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
 
       if (!render) { return false;}
 
@@ -176,14 +173,8 @@ function (angular, _, $, config) {
       ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
       ctrl.fullscreen = true;
 
-      this.oldDashboardEditMode = this.dashboard.editMode;
       this.oldTimeRange = ctrl.range;
       this.fullscreenPanel = panelScope;
-      this.dashboard.editMode = false;
-
-      $(window).scrollTop(0);
-
-      this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id});
 
       $timeout(function() {
         ctrl.render();

public/app/features/panel/metrics_tab.ts

@@ -1,6 +1,4 @@
-///<reference path="../../headers/common.d.ts" />
-
-import {DashboardModel} from '../dashboard/model';
+import {DashboardModel} from '../dashboard/DashboardModel';
 import Remarkable from 'remarkable';
 
 export class MetricsTabCtrl {

public/app/features/panel/panel_ctrl.ts

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import $ from 'jquery';
 import {profiler} from 'app/core/profiler';
 import Remarkable from 'remarkable';
-import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/model';
+import {CELL_HEIGHT, CELL_VMARGIN} from '../dashboard/DashboardModel';
 
 const TITLE_HEIGHT = 25;
 const EMPTY_TITLE_HEIGHT = 9;
@@ -72,9 +72,7 @@ export class PanelCtrl {
   }
 
   changeView(fullscreen, edit) {
-    this.publishAppEvent('panel-change-view', {
-      fullscreen: fullscreen, edit: edit, panelId: this.panel.id
-    });
+    this.dashboard.setViewMode(this.panel, fullscreen, edit);
   }
 
   viewPanel() {

public/sass/_variables.scss

@@ -222,8 +222,8 @@ $btn-border-radius:              3px;
 $side-menu-width:  60px;
 
 // dashboard
-$panel-margin: 0.4rem;
-$dashboard-padding: ($panel-margin * 2) $panel-margin $panel-margin $panel-margin;
+$panel-margin: 10px;
+$dashboard-padding: $panel-margin * 2;
 
 // tabs
 $tabs-padding-top: 0.6rem;

public/sass/components/_dashboard_grid.scss

@@ -1,2 +1,6 @@
 @import "~react-grid-layout/css/styles.css";
 @import "~react-resizable/css/styles.css";
+
+.panel-in-fullscreen {
+
+}

public/sass/components/_gridstack.scss

@@ -1,325 +0,0 @@
-.grid-stack-item > .ui-resizable-handle {
-  filter: none;
-}
-
-.grid-stack {
-  position: relative;
-  min-height: 150px;
-}
-
-.grid-stack.grid-stack-rtl {
-  direction: ltr;
-}
-
-.grid-stack.grid-stack-rtl > .grid-stack-item {
-  direction: rtl;
-}
-
-.grid-stack .grid-stack-placeholder > .placeholder-content {
-  background: $input-label-bg;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236,10.8);
-  margin: 0;
-  position: absolute;
-  top: 0;
-  left: 5px;
-  right: 5px;
-  bottom: 0;
-  width: auto;
-  text-align: center;
-}
-
-.grid-stack > .grid-stack-item {
-  min-width: 8.3333333333%;
-  position: absolute;
-  padding: 0;
-}
-
-.grid-stack > .grid-stack-item > .grid-stack-item-content {
-  margin: 0;
-  position: absolute;
-  top: 0;
-  left: 7px;
-  right: 7px;
-  bottom: 0;
-  width: auto;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-handle {
-  position: absolute;
-  display: block;
-  -ms-touch-action: none;
-  touch-action: none;
-  font-size: 10px;
-  color: $text-color-weak;
-}
-
-.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
-.grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
-  display: none;
-}
-
-.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
-  z-index: 100;
-}
-
-.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
-.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
-.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
-  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-  opacity: 0.8;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-se,
-.grid-stack > .grid-stack-item > .ui-resizable-sw {
-  font-family: 'grafana-icons' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  &::before {
-    content: "\e90b";
-  }
-}
-.grid-stack > .grid-stack-item > .ui-resizable-se {
-  cursor: se-resize;
-  width: 16px;
-  height: 16px;
-  right: 6px;
-  bottom: -2px;
-}
-
-.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
-  display: none !important;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='1'] {
-  width: 8.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='1'] {
-  left: 8.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
-  min-width: 8.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
-  max-width: 8.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='2'] {
-  width: 16.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='2'] {
-  left: 16.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
-  min-width: 16.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
-  max-width: 16.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='3'] {
-  width: 25%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='3'] {
-  left: 25%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='3'] {
-  min-width: 25%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='3'] {
-  max-width: 25%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='4'] {
-  width: 33.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='4'] {
-  left: 33.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
-  min-width: 33.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
-  max-width: 33.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='5'] {
-  width: 41.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='5'] {
-  left: 41.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
-  min-width: 41.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
-  max-width: 41.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='6'] {
-  width: 50%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='6'] {
-  left: 50%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='6'] {
-  min-width: 50%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='6'] {
-  max-width: 50%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='7'] {
-  width: 58.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='7'] {
-  left: 58.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
-  min-width: 58.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
-  max-width: 58.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='8'] {
-  width: 66.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='8'] {
-  left: 66.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
-  min-width: 66.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
-  max-width: 66.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='9'] {
-  width: 75%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='9'] {
-  left: 75%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='9'] {
-  min-width: 75%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='9'] {
-  max-width: 75%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='10'] {
-  width: 83.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='10'] {
-  left: 83.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
-  min-width: 83.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
-  max-width: 83.3333333333%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='11'] {
-  width: 91.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='11'] {
-  left: 91.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
-  min-width: 91.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
-  max-width: 91.6666666667%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-width='12'] {
-  width: 100%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-x='12'] {
-  left: 100%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-min-width='12'] {
-  min-width: 100%;
-}
-
-.grid-stack > .grid-stack-item[data-gs-max-width='12'] {
-  max-width: 100%;
-}
-
-.grid-stack.grid-stack-animate,
-.grid-stack.grid-stack-animate .grid-stack-item {
-  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-  -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-  -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-  -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
-}
-
-.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
-.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
-.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
-  -webkit-transition: left 0s, top 0s, height 0s, width 0s;
-  -moz-transition: left 0s, top 0s, height 0s, width 0s;
-  -ms-transition: left 0s, top 0s, height 0s, width 0s;
-  -o-transition: left 0s, top 0s, height 0s, width 0s;
-  transition: left 0s, top 0s, height 0s, width 0s;
-}
-
-.grid-stack.grid-stack-one-column-mode {
-  height: auto !important;
-}
-
-.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
-  position: relative !important;
-  width: auto !important;
-  left: 0 !important;
-  top: auto !important;
-  margin-bottom: 20px;
-  max-width: none !important;
-}
-
-.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
-  display: none;
-}

public/sass/components/_navbar.scss

@@ -17,7 +17,7 @@
 
 .sidemenu-open {
   .navbar {
-    padding-left: 0;
+    padding-left: $panel-margin;
   }
 }
 

public/sass/components/_sidemenu.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   width: $side-menu-width;
   background: $navbarBackground;
+  overflow: hidden;
   z-index: 10;
 
   a:focus {

public/sass/components/_submenu.scss

@@ -5,7 +5,7 @@
   align-content: flex-start;
   align-items: flex-start;
 
-  margin: 0 $panel-margin ($panel-margin*2) $panel-margin;
+  margin: 0 0 $panel-margin 0;
 }
 
 .annotation-disabled, .annotation-disabled a {