Panel edit navbar poc

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -14,10 +14,11 @@ import { DashNavButton } from './DashNavButton';
 import { updateLocation } from 'app/core/actions';
 
 // Types
-import { DashboardModel } from '../../state/DashboardModel';
+import { DashboardModel, PanelModel } from '../../state';
 
 export interface Props {
   dashboard: DashboardModel;
+  fullscreenPanel?: PanelModel;
   editview: string;
   isEditing: boolean;
   isFullscreen: boolean;
@@ -33,7 +34,6 @@ export class DashNav extends PureComponent<Props> {
 
   constructor(props: Props) {
     super(props);
-
     this.playlistSrv = this.props.$injector.get('playlistSrv');
   }
 
@@ -123,16 +123,14 @@ export class DashNav extends PureComponent<Props> {
     });
   };
 
-  render() {
-    const { dashboard, isFullscreen, editview, onAddPanel } = this.props;
-    const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
-    const { snapshot } = dashboard;
+  renderDashboardTitleSearchButton() {
+    const { dashboard } = this.props;
 
+    const folderTitle = dashboard.meta.folderTitle;
     const haveFolder = dashboard.meta.folderId > 0;
-    const snapshotUrl = snapshot && snapshot.originalUrl;
 
     return (
-      <div className="navbar">
+      <>
         <div>
           <a className="navbar-page-btn" onClick={this.onOpenSearch}>
             <i className="gicon gicon-dashboard" />
@@ -141,8 +139,38 @@ export class DashNav extends PureComponent<Props> {
             <i className="fa fa-caret-down" />
           </a>
         </div>
-
         <div className="navbar__spacer" />
+      </>
+    );
+  }
+
+  renderPanelFullscreeMode() {
+    const { fullscreenPanel } = this.props;
+
+    return (
+      <div className="navbar-edit">
+        <button className="navbar-edit__back-btn" onClick={this.onClose}>
+          <i className="fa fa-arrow-left" />
+        </button>
+        <div className="navbar-edit__input-wraper">
+          <input className="navbar-edit__input" type="text" value={fullscreenPanel.title} />
+          <i className="fa fa-pencil" />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { dashboard, onAddPanel, fullscreenPanel } = this.props;
+    const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta;
+    const { snapshot } = dashboard;
+
+    const snapshotUrl = snapshot && snapshot.originalUrl;
+
+    return (
+      <div className="navbar">
+        {!fullscreenPanel && this.renderDashboardTitleSearchButton()}
+        {fullscreenPanel && this.renderPanelFullscreeMode()}
 
         {this.playlistSrv.isPlaying && (
           <div className="navbar-buttons navbar-buttons--playlist">
@@ -228,17 +256,6 @@ export class DashNav extends PureComponent<Props> {
         </div>
 
         <div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} />
-
-        {(isFullscreen || editview) && (
-          <div className="navbar-buttons navbar-buttons--close">
-            <DashNavButton
-              tooltip="Back to dashboard"
-              classSuffix="primary"
-              icon="fa fa-reply"
-              onClick={this.onClose}
-            />
-          </div>
-        )}
       </div>
     );
   }

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -238,7 +238,7 @@ export class DashboardPage extends PureComponent<Props, State> {
 
   render() {
     const { dashboard, editview, $injector, isInitSlow, initError } = this.props;
-    const { isSettingsOpening, isEditing, isFullscreen, scrollTop } = this.state;
+    const { isSettingsOpening, isEditing, isFullscreen, scrollTop, fullscreenPanel } = this.state;
 
     if (!dashboard) {
       if (isInitSlow) {
@@ -266,6 +266,7 @@ export class DashboardPage extends PureComponent<Props, State> {
           editview={editview}
           $injector={$injector}
           onAddPanel={this.onAddPanel}
+          fullscreenPanel={fullscreenPanel}
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
           <CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>

public/sass/components/_navbar.scss

@@ -1,6 +1,6 @@
 .navbar {
   position: relative;
-  padding-left: 40px;
+  padding-left: 20px;
   z-index: $zindex-navbar-fixed;
   height: $navbarHeight;
   padding-right: 20px;
@@ -179,3 +179,66 @@
     }
   }
 }
+
+.navbar-edit {
+  display: flex;
+  height: $navbarHeight;
+  align-items: center;
+  padding-left: 7px;
+  flex-grow: 1;
+}
+
+.navbar-edit__back-btn  {
+  background: transparent;
+  border: 2px solid $white;
+  border-radius: 50%;
+  width: 34px;
+  height: 34px;
+  margin-right: 7px;
+
+  i {
+    font-size: $font-size-lg;
+  }
+}
+
+.navbar-edit__input-wraper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  &:hover {
+    i {
+      opacity: 1;
+    }
+
+    .navbar-edit__input {
+      background: $input-bg;
+      flex-grow: 1;
+      @include form-control-focus();
+    }
+  }
+
+  i {
+    left: -25px;
+    position: relative;
+    color: $text-color-weak;
+    opacity: 0;
+    transition: 200ms opacity ease-in-out;
+  }
+}
+
+.navbar-edit__input {
+  background: transparent;
+  transition: 200ms background ease-in-out;
+  width: auto;
+  font-size: $font-size-lg;
+  height: $gf-form-input-height;
+  padding: $input-padding-y $input-padding-x;
+  flex-grow: 1;
+
+  &:focus {
+    @include form-control-focus();
+    background: $input-bg;
+  }
+}

public/sass/components/_panel_editor.scss

@@ -86,6 +86,10 @@
   .panel-editor-container__panel {
     margin: 0 $dashboard-padding;
   }
+
+  .panel-title-text {
+    visibility: hidden;
+  }
 }
 
 .panel-editor-container__resizer {