From e0809831470ab08153763d982e9aa68eba2f441c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Feb 2019 16:14:11 +0100 Subject: [PATCH 1/4] Panel edit navbar poc --- .../dashboard/components/DashNav/DashNav.tsx | 57 ++++++++++------ .../dashboard/containers/DashboardPage.tsx | 3 +- public/sass/components/_navbar.scss | 65 ++++++++++++++++++- public/sass/components/_panel_editor.scss | 4 ++ 4 files changed, 107 insertions(+), 22 deletions(-) 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 { From 0f96cf866272ef72a016b0d1c9b5225037d73a17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 7 Feb 2019 19:06:51 +0100 Subject: [PATCH 2/4] slight tweaks --- public/sass/components/_navbar.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 5215af41dcc..0096810798a 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -41,7 +41,7 @@ .panel-in-fullscreen { .navbar { - padding-left: 15px; + padding-left: 20px; } .navbar-button--add-panel, @@ -190,14 +190,22 @@ .navbar-edit__back-btn { background: transparent; - border: 2px solid $white; + border: 2px solid $text-color; border-radius: 50%; width: 34px; height: 34px; - margin-right: 7px; + transition: transform 0.1s ease 0.1s; + color: $text-color; i { font-size: $font-size-lg; + position: relative; + top: 2px; + } + + &:hover { + color: $text-color-strong; + border-color: $text-color-strong; } } From f38e64cc5da68bee5395004f5fb0cfd26cecaf02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 10 Feb 2019 20:01:22 +0100 Subject: [PATCH 3/4] 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 { <>
- + {!this.isInFullscreenOrSettings && } {haveFolder && {folderTitle} / } {dashboard.title} @@ -144,24 +144,24 @@ export class DashNav extends PureComponent { ); } - renderPanelFullscreeMode() { - const { fullscreenPanel } = this.props; + get isInFullscreenOrSettings() { + return this.props.editview || this.props.isFullscreen; + } + renderBackButton() { return (
- -
- - -
+ + +
); } 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 { return (
- {!fullscreenPanel && this.renderDashboardTitleSearchButton()} - {fullscreenPanel && this.renderPanelFullscreeMode()} + {this.isInFullscreenOrSettings && this.renderBackButton()} + {this.renderDashboardTitleSearchButton()} {this.playlistSrv.isPlaying && (
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 { 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 { editview={editview} $injector={$injector} onAddPanel={this.onAddPanel} - fullscreenPanel={fullscreenPanel} />
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; } } From 9565e48f03535966bef099f4a19a3f6e418221c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Feb 2019 09:34:14 +0100 Subject: [PATCH 4/4] Fixed issue where double clicking on back button closes sidemenu --- public/app/core/components/sidemenu/SideMenu.test.tsx | 10 ++++++++++ public/app/core/components/sidemenu/SideMenu.tsx | 7 +++++++ public/app/core/reducers/location.ts | 2 ++ public/app/store/configureStore.ts | 4 ++-- public/app/types/location.ts | 1 + public/sass/components/_search.scss | 2 +- 6 files changed, 23 insertions(+), 3 deletions(-) diff --git a/public/app/core/components/sidemenu/SideMenu.test.tsx b/public/app/core/components/sidemenu/SideMenu.test.tsx index 2a262adca5a..2286787d777 100644 --- a/public/app/core/components/sidemenu/SideMenu.test.tsx +++ b/public/app/core/components/sidemenu/SideMenu.test.tsx @@ -8,6 +8,16 @@ jest.mock('../../app_events', () => ({ emit: jest.fn(), })); +jest.mock('app/store/store', () => ({ + store: { + getState: jest.fn().mockReturnValue({ + location: { + lastUpdated: 0, + } + }) + } +})); + jest.mock('app/core/services/context_srv', () => ({ contextSrv: { sidemenu: true, diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx index fd3e0d95564..29ef0fed069 100644 --- a/public/app/core/components/sidemenu/SideMenu.tsx +++ b/public/app/core/components/sidemenu/SideMenu.tsx @@ -3,9 +3,16 @@ import appEvents from '../../app_events'; import { contextSrv } from 'app/core/services/context_srv'; import TopSection from './TopSection'; import BottomSection from './BottomSection'; +import { store } from 'app/store/store'; export class SideMenu extends PureComponent { toggleSideMenu = () => { + // ignore if we just made a location change, stops hiding sidemenu on double clicks of back button + const timeSinceLocationChanged = new Date().getTime() - store.getState().location.lastUpdated; + if (timeSinceLocationChanged < 1000) { + return; + } + contextSrv.toggleSideMenu(); appEvents.emit('toggle-sidemenu'); }; diff --git a/public/app/core/reducers/location.ts b/public/app/core/reducers/location.ts index c038ab53c9f..dff1ac8f5c1 100644 --- a/public/app/core/reducers/location.ts +++ b/public/app/core/reducers/location.ts @@ -9,6 +9,7 @@ export const initialState: LocationState = { query: {}, routeParams: {}, replace: false, + lastUpdated: 0, }; export const locationReducer = (state = initialState, action: Action): LocationState => { @@ -28,6 +29,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS query: { ...query }, routeParams: routeParams || state.routeParams, replace: replace === true, + lastUpdated: new Date().getTime(), }; } } diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts index e2c33523271..2638587e96d 100644 --- a/public/app/store/configureStore.ts +++ b/public/app/store/configureStore.ts @@ -1,6 +1,6 @@ import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; import thunk from 'redux-thunk'; -import { createLogger } from 'redux-logger'; +// import { createLogger } from 'redux-logger'; import sharedReducers from 'app/core/reducers'; import alertingReducers from 'app/features/alerting/state/reducers'; import teamsReducers from 'app/features/teams/state/reducers'; @@ -41,7 +41,7 @@ export function configureStore() { if (process.env.NODE_ENV !== 'production') { // DEV builds we had the logger middleware - setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())))); + setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk)))); } else { setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk)))); } diff --git a/public/app/types/location.ts b/public/app/types/location.ts index a47ef05d2be..4730f9d6ed7 100644 --- a/public/app/types/location.ts +++ b/public/app/types/location.ts @@ -15,6 +15,7 @@ export interface LocationState { query: UrlQueryMap; routeParams: UrlQueryMap; replace: boolean; + lastUpdated: number; } export type UrlQueryValue = string | number | boolean | string[] | number[] | boolean[]; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index daad8fd10da..eba03283510 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -21,9 +21,9 @@ // Search .search-field-wrapper { width: 100%; + height: $navbarHeight; display: flex; background-color: $navbarBackground; - box-shadow: $navbarShadow; position: relative; & > input {