From f38e64cc5da68bee5395004f5fb0cfd26cecaf02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sun, 10 Feb 2019 20:01:22 +0100
Subject: [PATCH] Navbar back button, no title edit this time

---
 .../dashboard/components/DashNav/DashNav.tsx  | 30 ++++++-------
 .../dashboard/containers/DashboardPage.tsx    |  3 +-
 public/sass/components/_navbar.scss           | 44 -------------------
 public/sass/components/_panel_editor.scss     |  4 +-
 4 files changed, 18 insertions(+), 63 deletions(-)

diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx
index 8560b3bfbba..6db07b5d42e 100644
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx
@@ -9,16 +9,16 @@ import { PlaylistSrv } from 'app/features/playlist/playlist_srv';
 
 // Components
 import { DashNavButton } from './DashNavButton';
+import { Tooltip } from '@grafana/ui';
 
 // State
 import { updateLocation } from 'app/core/actions';
 
 // Types
-import { DashboardModel, PanelModel } from '../../state';
+import { DashboardModel } from '../../state';
 
 export interface Props {
   dashboard: DashboardModel;
-  fullscreenPanel?: PanelModel;
   editview: string;
   isEditing: boolean;
   isFullscreen: boolean;
@@ -133,7 +133,7 @@ export class DashNav extends PureComponent<Props> {
       <>
         <div>
           <a className="navbar-page-btn" onClick={this.onOpenSearch}>
-            <i className="gicon gicon-dashboard" />
+            {!this.isInFullscreenOrSettings && <i className="gicon gicon-dashboard" />}
             {haveFolder && <span className="navbar-page-btn--folder">{folderTitle} / </span>}
             {dashboard.title}
             <i className="fa fa-caret-down" />
@@ -144,24 +144,24 @@ export class DashNav extends PureComponent<Props> {
     );
   }
 
-  renderPanelFullscreeMode() {
-    const { fullscreenPanel } = this.props;
+  get isInFullscreenOrSettings() {
+    return this.props.editview || this.props.isFullscreen;
+  }
 
+  renderBackButton() {
     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>
+        <Tooltip content="Go back (Esc)">
+          <button className="navbar-edit__back-btn" onClick={this.onClose}>
+            <i className="fa fa-arrow-left" />
+          </button>
+        </Tooltip>
       </div>
     );
   }
 
   render() {
-    const { dashboard, onAddPanel, fullscreenPanel } = this.props;
+    const { dashboard, onAddPanel } = this.props;
     const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta;
     const { snapshot } = dashboard;
 
@@ -169,8 +169,8 @@ export class DashNav extends PureComponent<Props> {
 
     return (
       <div className="navbar">
-        {!fullscreenPanel && this.renderDashboardTitleSearchButton()}
-        {fullscreenPanel && this.renderPanelFullscreeMode()}
+        {this.isInFullscreenOrSettings && this.renderBackButton()}
+        {this.renderDashboardTitleSearchButton()}
 
         {this.playlistSrv.isPlaying && (
           <div className="navbar-buttons navbar-buttons--playlist">
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 724f3a625c0..27118e297b5 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/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, fullscreenPanel } = this.state;
+    const { isSettingsOpening, isEditing, isFullscreen, scrollTop } = this.state;
 
     if (!dashboard) {
       if (isInitSlow) {
@@ -266,7 +266,6 @@ 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}>
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 0096810798a..ce0fb45051e 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -47,9 +47,6 @@
   .navbar-button--add-panel,
   .navbar-button--star,
   .navbar-button--tv,
-  .navbar-page-btn .fa-caret-down {
-    display: none;
-  }
 
   .navbar-buttons--close {
     display: flex;
@@ -185,7 +182,6 @@
   height: $navbarHeight;
   align-items: center;
   padding-left: 7px;
-  flex-grow: 1;
 }
 
 .navbar-edit__back-btn  {
@@ -209,44 +205,4 @@
   }
 }
 
-.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;
-  }
-}
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
index e533681d672..b1d828069fb 100644
--- a/public/sass/components/_panel_editor.scss
+++ b/public/sass/components/_panel_editor.scss
@@ -87,8 +87,8 @@
     margin: 0 $dashboard-padding;
   }
 
-  .panel-title-text {
-    visibility: hidden;
+  .search-container {
+    left: 0 !important;
   }
 }