testing panel edit ux idea

public/app/core/directives/dash_class.ts

@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import coreModule from '../core_module';
 
@@ -5,18 +6,20 @@ import coreModule from '../core_module';
 function dashClass($timeout) {
   return {
     link: ($scope, elem) => {
+      const body = $('body');
+
       $scope.ctrl.dashboard.events.on('view-mode-changed', panel => {
         console.log('view-mode-changed', panel.fullscreen);
         if (panel.fullscreen) {
-          elem.addClass('panel-in-fullscreen');
+          body.addClass('panel-in-fullscreen');
         } else {
           $timeout(() => {
-            elem.removeClass('panel-in-fullscreen');
+            body.removeClass('panel-in-fullscreen');
           });
         }
       });
 
-      elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
+      body.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
 
       $scope.$watch('ctrl.dashboardViewState.state.editview', newValue => {
         if (newValue) {

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

@@ -128,15 +128,13 @@ export class DashboardPanel extends React.Component<Props, State> {
           />
         </div>
         {this.props.panel.isEditing && (
-          <div className="panel-editor-container__editor">
-            <PanelEditor
-              panel={this.props.panel}
-              panelType={this.props.panel.type}
-              dashboard={this.props.dashboard}
-              onTypeChanged={this.onPluginTypeChanged}
-              pluginExports={pluginExports}
-            />
-          </div>
+          <PanelEditor
+            panel={this.props.panel}
+            panelType={this.props.panel.type}
+            dashboard={this.props.dashboard}
+            onTypeChanged={this.onPluginTypeChanged}
+            pluginExports={pluginExports}
+          />
         )}
       </div>
     );

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

@@ -77,20 +77,24 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     const activeTab = location.query.tab || 'queries';
 
     return (
-      <div className="tabbed-view tabbed-view--new">
-        <div className="tabbed-view-header">
-          <ul className="gf-tabs">
-            {this.tabs.map(tab => {
-              return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
-            })}
-          </ul>
+      <div className="panel-editor-container__editor">
+        <div className="panel-editor__aside">
+          <h2 className="panel-editor__aside-header">
+            <i className="fa fa-cog" />
+            Edit Panel
+          </h2>
+          {this.tabs.map(tab => {
+            return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
+          })}
 
-          <button className="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
-            <i className="fa fa-remove" />
-          </button>
+          <div className="dashboard-settings__aside-actions">
+            <button className="btn btn-inverse" ng-click="ctrl.exitFullscreen();">
+              <i className="fa fa-remove" /> Close
+            </button>
+          </div>
         </div>
 
-        <div className="tabbed-view-body">
+        <div className="panel-editor__content">
           {activeTab === 'queries' && this.renderQueriesTab()}
           {activeTab === 'visualization' && this.renderVizTab()}
         </div>
@@ -107,15 +111,13 @@ interface TabItemParams {
 
 function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   const tabClasses = classNames({
-    'gf-tabs-link': true,
+    'dashboard-settings__nav-item': true,
     active: activeTab === tab.id,
   });
 
   return (
-    <li className="gf-tabs-item" key={tab.id}>
-      <a className={tabClasses} onClick={() => onClick(tab)}>
-        <i className={tab.icon} /> {tab.text}
-      </a>
-    </li>
+    <a className={tabClasses} onClick={() => onClick(tab)}>
+      <i className={tab.icon} /> {tab.text}
+    </a>
   );
 }

public/app/features/dashboard/submenu/submenu.html

@@ -23,5 +23,7 @@
     <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
   </div>
 
+	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="ctrl.dashboard.meta.fullscreen"></gf-time-picker>
+
   <div class="clearfix"></div>
 </div>

public/sass/components/_navbar.scss

@@ -41,7 +41,8 @@
 
 .panel-in-fullscreen {
   .navbar {
-    @include navbar-alt-look();
+    // @include navbar-alt-look();
+    display: none;
   }
 
   .navbar-button--add-panel,
@@ -98,11 +99,11 @@
 }
 
 .navbar-buttons {
-  height: $navbarHeight;
+  // height: $navbarHeight;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-right: $spacer;
+  // margin-right: $spacer;
 
   &--close {
     display: none;

public/sass/components/_submenu.scss

@@ -4,7 +4,6 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-
   margin: 0 0 $panel-margin 0;
 }
 

public/sass/components/_viz_editor.scss

@@ -79,3 +79,50 @@
   height: 100%;
   filter: saturate(30%);
 }
+
+.panel-editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-editor-container__panel {
+  height: 35%;
+}
+
+.panel-editor-container__editor {
+  height: 65%;
+  margin-top: $panel-margin;
+  display: flex;
+  flex-direction: row;
+}
+
+.panel-editor__content {
+  flex-grow: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 20px 0 20px 20px;
+  max-width: 1100px;
+}
+
+.panel-editor__aside {
+  padding: 18px 0 0 20px;
+  background: $panel-bg;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-editor__aside-header {
+  color: $text-muted;
+  font-size: $font-size-h3;
+  padding-right: 50px;
+  white-space: nowrap;
+  margin-bottom: $spacer;
+
+  i {
+    font-size: 25px;
+    position: relative;
+    top: 1px;
+    padding-right: 5px;
+  }
+}

public/sass/pages/_dashboard.scss

@@ -9,6 +9,21 @@
   }
 }
 
+.panel-in-fullscreen {
+  .dashboard-container--has-submenu {
+    height: 100%;
+  }
+  .scroll-canvas--dashboard {
+    height: 100%;
+  }
+  .sidemenu {
+    display: none;
+  }
+  .main-view {
+    background: unset;
+  }
+}
+
 .template-variable {
   color: $variable;
 }
@@ -37,20 +52,6 @@ div.flot-text {
   height: 100%;
 }
 
-.panel-editor-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.panel-editor-container__panel {
-  height: 35%;
-}
-
-.panel-editor-container__editor {
-  height: 65%;
-}
-
 .panel-container {
   background-color: $panel-bg;
   border: $panel-border;