diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index 297d7ca7ea7..8560b3bfbba 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/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 { constructor(props: Props) { super(props); - this.playlistSrv = this.props.$injector.get('playlistSrv'); } @@ -123,16 +123,14 @@ export class DashNav extends PureComponent { }); }; - 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 ( -
+ <>
@@ -141,8 +139,38 @@ export class DashNav extends PureComponent {
-
+ + ); + } + + renderPanelFullscreeMode() { + const { fullscreenPanel } = this.props; + + return ( +
+ +
+ + +
+
+ ); + } + + render() { + const { dashboard, onAddPanel, fullscreenPanel } = this.props; + const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta; + const { snapshot } = dashboard; + + const snapshotUrl = snapshot && snapshot.originalUrl; + + return ( +
+ {!fullscreenPanel && this.renderDashboardTitleSearchButton()} + {fullscreenPanel && this.renderPanelFullscreeMode()} {this.playlistSrv.isPlaying && (
@@ -228,17 +256,6 @@ export class DashNav extends PureComponent {
(this.timePickerEl = element)} /> - - {(isFullscreen || editview) && ( -
- -
- )}
); } diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 27118e297b5..724f3a625c0 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 { 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 { editview={editview} $injector={$injector} onAddPanel={this.onAddPanel} + fullscreenPanel={fullscreenPanel} />
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 0cfa314a985..5215af41dcc 100644 --- a/public/sass/components/_navbar.scss +++ b/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; + } +} diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index b791231a242..e533681d672 100644 --- a/public/sass/components/_panel_editor.scss +++ b/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 {