diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index a5a78a63bf1..1583303dfa1 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component } from 'react'; export interface IProps { model: any; @@ -17,7 +17,7 @@ class EmptyListCTA extends Component { proTipTarget } = this.props.model; return ( -
+
{title}
{buttonTitle}
diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap index 0598d7ecd4e..0da3d94aaa8 100644 --- a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap +++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.jest.tsx.snap @@ -2,7 +2,7 @@ exports[`CollorPalette renders correctly 1`] = `
- import coreModule from 'app/core/core_module'; var template = ` diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js index d8ad335de5c..9df53bdbd48 100644 --- a/public/app/core/directives/dash_class.js +++ b/public/app/core/directives/dash_class.js @@ -18,22 +18,21 @@ function (_, $, coreModule) { elem.toggleClass('panel-in-fullscreen', false); }); - var lastHideControlsVal; - $scope.$watch('ctrl.dashboard.hideControls', function() { - if (!$scope.dashboard) { - return; - } - - var hideControls = $scope.dashboard.hideControls; - if (lastHideControlsVal !== hideControls) { - elem.toggleClass('hide-controls', hideControls); - lastHideControlsVal = hideControls; - } - }); - $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) { elem.toggleClass('playlist-active', newValue === true); }); + + $scope.$watch('ctrl.dashboardViewState.state.editview', function(newValue) { + if (newValue) { + elem.toggleClass('dashboard-page--settings-opening', _.isString(newValue)); + setTimeout(function() { + elem.toggleClass('dashboard-page--settings-open', _.isString(newValue)); + }, 10); + } else { + elem.removeClass('dashboard-page--settings-opening'); + elem.removeClass('dashboard-page--settings-open'); + } + }); } }; }); diff --git a/public/app/core/directives/dash_edit_link.js b/public/app/core/directives/dash_edit_link.js index 02c7d55b99e..f0dc6f59a6a 100644 --- a/public/app/core/directives/dash_edit_link.js +++ b/public/app/core/directives/dash_edit_link.js @@ -13,7 +13,6 @@ function ($, angular, coreModule, _) { 'templating': { src: 'public/app/features/templating/partials/editor.html'}, 'history': { html: ''}, 'timepicker': { src: 'public/app/features/dashboard/timepicker/dropdown.html' }, - 'add-panel': { html: '' }, 'import': { html: '', isModal: true }, 'permissions': { html: '', isModal: true }, 'new-folder': { diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 062eea3506a..362b20fc307 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -72,8 +72,8 @@ export class KeybindingSrv { }, 'keydown'); } - showDashEditView(view) { - var search = _.extend(this.$location.search(), {editview: view}); + showDashEditView() { + var search = _.extend(this.$location.search(), {editview: 'settings'}); this.$location.search(search); } @@ -84,10 +84,6 @@ export class KeybindingSrv { scope.broadcastRefresh(); }); - this.bind('mod+h', () => { - dashboard.hideControls = !dashboard.hideControls; - }); - this.bind('mod+s', e => { scope.appEvent('save-dashboard'); }); @@ -197,7 +193,7 @@ export class KeybindingSrv { }); this.bind('d s', () => { - this.showDashEditView('settings'); + this.showDashEditView(); }); this.bind('d k', () => { @@ -215,8 +211,14 @@ export class KeybindingSrv { } scope.appEvent('hide-modal'); - scope.appEvent('hide-dash-editor'); scope.appEvent('panel-change-view', {fullscreen: false, edit: false}); + + // close settings view + var search = this.$location.search(); + if (search.editview) { + delete search.editview; + this.$location.search(search); + } }); } } diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index bfbd9e9950e..bf0dae2c631 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -68,6 +68,13 @@ function popoverSrv($compile, $rootScope, $timeout) { openDrop = drop; openDrop.open(); }, 100); + + // return close function + return function() { + if (drop) { + drop.close(); + } + }; }; } diff --git a/public/app/features/annotations/annotation_tooltip.ts b/public/app/features/annotations/annotation_tooltip.ts index 4828eb671a6..03d42c382f7 100644 --- a/public/app/features/annotations/annotation_tooltip.ts +++ b/public/app/features/annotations/annotation_tooltip.ts @@ -4,7 +4,7 @@ import coreModule from 'app/core/core_module'; import alertDef from '../alerting/alert_def'; /** @ngInject **/ -export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv, popoverSrv, $compile) { +export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv, $compile) { function sanitizeString(str) { try { diff --git a/public/app/features/annotations/editor_ctrl.ts b/public/app/features/annotations/editor_ctrl.ts index a52e241ce35..f83de99a8c6 100644 --- a/public/app/features/annotations/editor_ctrl.ts +++ b/public/app/features/annotations/editor_ctrl.ts @@ -26,7 +26,7 @@ export class AnnotationsEditorCtrl { ]; /** @ngInject */ - constructor(private $scope, private datasourceSrv) { + constructor($scope, private datasourceSrv) { $scope.ctrl = this; this.mode = 'list'; @@ -62,7 +62,6 @@ export class AnnotationsEditorCtrl { update() { this.reset(); this.mode = 'list'; - this.$scope.broadcastRefresh(); } setupNew() { @@ -70,32 +69,24 @@ export class AnnotationsEditorCtrl { this.reset(); } + backToList() { + this.mode = 'list'; + } + add() { this.annotations.push(this.currentAnnotation); this.reset(); this.mode = 'list'; - this.$scope.broadcastRefresh(); - this.$scope.dashboard.updateSubmenuVisibility(); } removeAnnotation(annotation) { var index = _.indexOf(this.annotations, annotation); this.annotations.splice(index, 1); - this.$scope.dashboard.updateSubmenuVisibility(); - this.$scope.broadcastRefresh(); } onColorChange(newColor) { this.currentAnnotation.iconColor = newColor; } - - annotationEnabledChange() { - this.$scope.broadcastRefresh(); - } - - annotationHiddenChanged() { - this.$scope.dashboard.updateSubmenuVisibility(); - } } coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl); diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 4c0b8f7b127..62175e5278f 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -1,145 +1,113 @@ +
-
-

- Annotations -

+

+ Annotations + > New + > Edit +

- - - -
- -
- -
-
-
What are Annotations?
-

- Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons - on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event. - In the Queries tab you can add queries that return annotation events. -

-

- You can add annotations directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. -

- Checkout the Annotations documentation for more information. -
+
+
+
+ New
-
-
- No annotation queries defined -
- +
+ + + + + + + + - - + - -
Query nameData source
+   {{annotation.name}} +   {{annotation.name}} (Built-in) + {{annotation.datasource || 'Default'}} + - - - Edit - -
-
+ + -
-
-   New -
-
- -
-
-
-
General
-
-
- Name - -
-
- Data source -
- -
-
-
-
- -
-
- - - - -
- - - - -
-
-
-
- -
Query
- - - - - -
-
- - + +
+
+
There are no custom annotation queries added yet
+ + + Add Annotation Query + +
+
What are Annotations?
+

+ Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons + on all graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add annotation events + directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. +

+ Checkout the Annotations documentation for more information.
+ +
+
+
General
+
+
+ Name + +
+
+ Data source +
+ +
+
+
+
+ +
+
+ + + + +
+ + + + +
+
+
+ +
Query
+ + + + + +
+
+ + +
+
+
diff --git a/public/app/features/dashboard/all.ts b/public/app/features/dashboard/all.ts index 50c83803471..e9ca2a854be 100644 --- a/public/app/features/dashboard/all.ts +++ b/public/app/features/dashboard/all.ts @@ -26,8 +26,9 @@ import './acl/acl'; import './folder_picker/picker'; import './folder_modal/folder'; import './move_to_folder_modal/move_to_folder'; -import coreModule from 'app/core/core_module'; +import './settings/settings'; +import coreModule from 'app/core/core_module'; import {DashboardListCtrl} from './dashboard_list_ctrl'; import {FolderDashboardsCtrl} from './folder_dashboards_ctrl'; import {FolderPermissionsCtrl} from './folder_permissions_ctrl'; diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 2c9d028ddf8..2909c55bad5 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -122,12 +122,6 @@ export class DashboardCtrl implements PanelContainer { this.$rootScope.$broadcast("refresh"); } - onFolderChange(folder) { - this.dashboard.folderId = folder.id; - this.dashboard.meta.folderId = folder.id; - this.dashboard.meta.folderTitle= folder.title; - } - getPanelContainer() { return this; } diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 10b0d0da67b..034ad7d84e1 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -22,7 +22,6 @@ export class DashboardModel { graphTooltip: any; time: any; timepicker: any; - hideControls: any; templating: any; annotations: any; refresh: any; @@ -67,7 +66,6 @@ export class DashboardModel { this.timezone = data.timezone || ''; this.editable = data.editable !== false; this.graphTooltip = data.graphTooltip || 0; - this.hideControls = data.hideControls || false; this.time = data.time || {from: 'now-6h', to: 'now'}; this.timepicker = data.timepicker || {}; this.templating = this.ensureListExist(data.templating); diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 62974fb77dd..03453611036 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -27,40 +27,35 @@ - - - - -
- - - -
+
+
+ +
+
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 2b174e2c301..aed803efb9a 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -1,4 +1,3 @@ -import _ from 'lodash'; import moment from 'moment'; import angular from 'angular'; import {appEvents, NavModel} from 'app/core/core'; @@ -15,13 +14,11 @@ export class DashNavCtrl { private $rootScope, private dashboardSrv, private $location, - private backendSrv, public playlistSrv, navModelSrv) { this.navModel = navModelSrv.getDashboardNav(this.dashboard, this); appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope); - appEvents.on('delete-dashboard', this.deleteDashboard.bind(this), $scope); if (this.dashboard.meta.isSnapshot) { var meta = this.dashboard.meta; @@ -32,13 +29,26 @@ export class DashNavCtrl { } } - openEditView(editview) { - var search = _.extend(this.$location.search(), {editview: editview}); + toggleSettings() { + let search = this.$location.search(); + if (search.editview) { + delete search.editview; + } else { + search.editview = 'settings'; + } this.$location.search(search); } - showHelpModal() { - appEvents.emit('show-modal', {templateHtml: ''}); + close() { + let search = this.$location.search(); + if (search.editview) { + delete search.editview; + } + if (search.fullscreen) { + delete search.fullscreen; + delete search.edit; + } + this.$location.search(search); } starDashboard() { @@ -63,73 +73,10 @@ export class DashNavCtrl { angular.element(evt.currentTarget).tooltip('hide'); } - makeEditable() { - this.dashboard.editable = true; - - return this.dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(() => { - // force refresh whole page - window.location.href = window.location.href; - }); - } - - exitFullscreen() { - this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false}); - } - saveDashboard() { return this.dashboardSrv.saveDashboard(); } - deleteDashboard() { - var confirmText = ''; - var text2 = this.dashboard.title; - - const alerts = _.sumBy(this.dashboard.panels, panel => { - return panel.alert ? 1 : 0; - }); - - if (alerts > 0) { - confirmText = 'DELETE'; - text2 = `This dashboard contains ${alerts} alerts. Deleting this dashboard will also delete those alerts`; - } - - appEvents.emit('confirm-modal', { - title: 'Delete', - text: 'Do you want to delete this dashboard?', - text2: text2, - icon: 'fa-trash', - confirmText: confirmText, - yesText: 'Delete', - onConfirm: () => { - this.dashboard.meta.canSave = false; - this.deleteDashboardConfirmed(); - } - }); - } - - deleteDashboardConfirmed() { - this.backendSrv.delete('/api/dashboards/db/' + this.dashboard.meta.slug).then(() => { - appEvents.emit('alert-success', ['Dashboard Deleted', this.dashboard.title + ' has been deleted']); - this.$location.url('/'); - }); - } - - saveDashboardAs() { - return this.dashboardSrv.showSaveAsModal(); - } - - viewJson() { - var clone = this.dashboard.getSaveModelClone(); - - this.$rootScope.appEvent('show-json-editor', { - object: clone, - }); - } - - onFolderChange(folderId) { - this.dashboard.folderId = folderId; - } - showSearch() { this.$rootScope.appEvent('show-dash-search'); } diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/history/history.html index 7968f1162c5..48caddeb90e 100644 --- a/public/app/features/dashboard/history/history.html +++ b/public/app/features/dashboard/history/history.html @@ -1,146 +1,118 @@ -
-

- Version history -

+

+ Versions + + > Comparing {{ctrl.baseInfo.version}} + + {{ctrl.newInfo.version}} + (Latest) + +

- +
+
+ + Fetching history list… +
- -
+
+
+ + + + + + + + + + + + + + + + + + + + + +
VersionDateUpdated ByNotes
+ + + {{revision.version}}{{revision.createdDateString}}{{revision.createdBy}}{{revision.message}} + +   Restore + + +   Latest + +
-
- -
-
- - Fetching history list… -
- -
-
- - - - - - - - - - - - - - - - - - - - - -
VersionDateUpdated ByNotes
- - - {{revision.version}}{{revision.createdDateString}}{{revision.createdBy}}{{revision.message}} - -   Restore - - -   Latest - -
- -
- - Fetching more entries… -
- -
-
- - -
-
-
-
-
- -
- - -
-
+
- Fetching changes… + Fetching more entries…
-
- -   Restore to version {{ctrl.baseInfo.version}} - -

- Comparing Version {{ctrl.baseInfo.version}} - - Version {{ctrl.newInfo.version}} - (Latest) -

-
-

- Version {{ctrl.newInfo.version}} updated by - {{ctrl.newInfo.createdBy}} - {{ctrl.newInfo.ageString}} - - {{ctrl.newInfo.message}} -

-

- Version {{ctrl.baseInfo.version}} updated by - {{ctrl.baseInfo.createdBy}} - {{ctrl.baseInfo.ageString}} - - {{ctrl.baseInfo.message}} -

-
-
-
-
+
+
+ +
+ +
+
+ + Fetching changes… +
+ +
+ +
+

+ Version {{ctrl.newInfo.version}} updated by + {{ctrl.newInfo.createdBy}} + {{ctrl.newInfo.ageString}} + - {{ctrl.newInfo.message}} +

+

+ Version {{ctrl.baseInfo.version}} updated by + {{ctrl.baseInfo.createdBy}} + {{ctrl.baseInfo.ageString}} + - {{ctrl.baseInfo.message}} +

+
+ +
+
+
+ +
+ +
+ +
+
+
diff --git a/public/app/features/dashboard/history/history.ts b/public/app/features/dashboard/history/history.ts index b0dee045a6a..05e78d08989 100644 --- a/public/app/features/dashboard/history/history.ts +++ b/public/app/features/dashboard/history/history.ts @@ -1,5 +1,3 @@ -/// - import './history_srv'; import _ from 'lodash'; diff --git a/public/app/features/dashboard/partials/addAnnotationModal.html b/public/app/features/dashboard/partials/addAnnotationModal.html deleted file mode 100644 index f55f888375f..00000000000 --- a/public/app/features/dashboard/partials/addAnnotationModal.html +++ /dev/null @@ -1,65 +0,0 @@ -
- -
-

- Add Annotation -

- - - - -
- - -
- -
-
-
diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html deleted file mode 100644 index 77d6691f8f9..00000000000 --- a/public/app/features/dashboard/partials/settings.html +++ /dev/null @@ -1,95 +0,0 @@ -
-

- Settings -

- - - - -
- -
-
- -
-
Details
-
- - -
-
- - -
-
- - - -
- - -
- -
-
Options
-
-
- -
- -
-
- - - - -
-
- -
-
Panel Options
-
- -
- -
-
-
-
- -
- -
- -
- -
- -
diff --git a/public/app/features/dashboard/save_as_modal.ts b/public/app/features/dashboard/save_as_modal.ts index 643d6a36f67..d69b64f1960 100644 --- a/public/app/features/dashboard/save_as_modal.ts +++ b/public/app/features/dashboard/save_as_modal.ts @@ -1,5 +1,3 @@ -/// - import coreModule from 'app/core/core_module'; const template = ` diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html new file mode 100644 index 00000000000..e78dcb74127 --- /dev/null +++ b/public/app/features/dashboard/settings/settings.html @@ -0,0 +1,109 @@ + + +
+

+ General +

+ +
+
+ + +
+
+ + +
+
+ + + +
+ + + + +
+ + + +
Panel Options
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+

View JSON

+ +
+ +
+
+ +
+

Settings view not found

+ +
+
The settings page could not be found or you do not have permission to access it
+
+
+ +
+

Make Editable

+ + +
+ diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts new file mode 100644 index 00000000000..87ac91d568b --- /dev/null +++ b/public/app/features/dashboard/settings/settings.ts @@ -0,0 +1,156 @@ +import { coreModule, appEvents, contextSrv } from 'app/core/core'; +import { DashboardModel } from '../dashboard_model'; +import $ from 'jquery'; +import _ from 'lodash'; + +export class SettingsCtrl { + dashboard: DashboardModel; + isOpen: boolean; + viewId: string; + json: string; + alertCount: number; + canSaveAs: boolean; + canDelete: boolean; + sections: any[]; + + /** @ngInject */ + constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) { + // temp hack for annotations and variables editors + // that rely on inherited scope + $scope.dashboard = this.dashboard; + + this.$scope.$on('$destroy', () => { + this.dashboard.updateSubmenuVisibility(); + this.$rootScope.$broadcast('refresh'); + }); + + this.canSaveAs = contextSrv.isEditor; + this.canDelete = this.dashboard.meta.canSave; + + this.buildSectionList(); + this.onRouteUpdated(); + + $rootScope.onAppEvent('$routeUpdate', this.onRouteUpdated.bind(this), $scope); + } + + buildSectionList() { + this.sections = []; + if (this.dashboard.meta.canEdit) { + this.sections.push({ title: 'General', id: 'settings', icon: 'fa fa-fw fa-sliders' }); + this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'fa fa-fw fa-comment-o' }); + this.sections.push({ title: 'Variables', id: 'templating', icon: 'fa fa-fw fa-dollar' }); + this.sections.push({ title: 'Links', id: 'links', icon: 'fa fa-fw fa-external-link' }); + + if (this.dashboard.id) { + this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' }); + } + } + + if (contextSrv.isEditor && !this.dashboard.editable) { + this.sections.push({ title: 'Make Editable', icon: 'fa fa-fw fa-edit', id: 'make_editable' }); + this.viewId = 'make_editable'; + } + + this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'fa fa-fw fa-code' }); + + const params = this.$location.search(); + const url = this.$location.path(); + + for (let section of this.sections) { + const sectionParams = _.defaults({ editview: section.id }, params); + section.url = url + '?' + $.param(sectionParams); + } + } + + onRouteUpdated() { + this.viewId = this.$location.search().editview; + + if (this.viewId) { + this.json = JSON.stringify(this.dashboard.getSaveModelClone(), null, 2); + } + + const currentSection = _.find(this.sections, { id: this.viewId }); + if (!currentSection) { + this.sections.unshift({ title: 'Not found', id: '404', icon: 'fa fa-fw fa-warning' }); + this.viewId = '404'; + return; + } + } + + openSaveAsModal() { + this.dashboardSrv.showSaveAsModal(); + } + + hideSettings() { + var urlParams = this.$location.search(); + delete urlParams.editview; + setTimeout(() => { + this.$rootScope.$apply(() => { + this.$location.search(urlParams); + }); + }); + } + + makeEditable() { + this.dashboard.editable = true; + + return this.dashboardSrv.saveDashboard({ makeEditable: true, overwrite: false }).then(() => { + // force refresh whole page + window.location.href = window.location.href; + }); + } + + deleteDashboard() { + var confirmText = ''; + var text2 = this.dashboard.title; + + const alerts = _.sumBy(this.dashboard.panels, panel => { + return panel.alert ? 1 : 0; + }); + + if (alerts > 0) { + confirmText = 'DELETE'; + text2 = `This dashboard contains ${alerts} alerts. Deleting this dashboard will also delete those alerts`; + } + + appEvents.emit('confirm-modal', { + title: 'Delete', + text: 'Do you want to delete this dashboard?', + text2: text2, + icon: 'fa-trash', + confirmText: confirmText, + yesText: 'Delete', + onConfirm: () => { + this.dashboard.meta.canSave = false; + this.deleteDashboardConfirmed(); + } + }); + } + + deleteDashboardConfirmed() { + this.backendSrv.delete('/api/dashboards/db/' + this.dashboard.meta.slug).then(() => { + appEvents.emit('alert-success', ['Dashboard Deleted', this.dashboard.title + ' has been deleted']); + this.$location.url('/'); + }); + } + + onFolderChange(folder) { + this.dashboard.folderId = folder.id; + this.dashboard.meta.folderId = folder.id; + this.dashboard.meta.folderTitle = folder.title; + } +} + +export function dashboardSettings() { + return { + restrict: 'E', + templateUrl: 'public/app/features/dashboard/settings/settings.html', + controller: SettingsCtrl, + bindToController: true, + controllerAs: 'ctrl', + transclude: true, + scope: { dashboard: '=' }, + }; +} + +coreModule.directive('dashboardSettings', dashboardSettings); diff --git a/public/app/features/dashboard/specs/save_as_modal.jest.ts b/public/app/features/dashboard/specs/save_as_modal.jest.ts index b2ab77f2255..9155f59ca70 100644 --- a/public/app/features/dashboard/specs/save_as_modal.jest.ts +++ b/public/app/features/dashboard/specs/save_as_modal.jest.ts @@ -1,4 +1,4 @@ -import { SaveDashboardAsModalCtrl } from '../save_as_modal'; +import { SaveDashboardAsModalCtrl } from '../save_as_modal; import { describe, it, expect } from 'test/lib/common'; describe('saving dashboard as', () => { diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index 9e9d22fb495..f240a86efba 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -1,5 +1,4 @@
-
diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index 7c57b76b957..07f97604c42 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -24,3 +24,62 @@
+ +
+
+

Custom range

+ + +
+
+ +
+
+ +
+
+ +
+ +
+ + + +
+
+ +
+
+ +
+
+ +
+ +
+ + +
+
+ +
+
+ +
+
+
+ +
+

Quick ranges

+
    +
  • + +
    • +
+
+
+ diff --git a/public/app/features/dashboard/timepicker/timepicker.ts b/public/app/features/dashboard/timepicker/timepicker.ts index 14d97b900fd..3f909bdefb3 100644 --- a/public/app/features/dashboard/timepicker/timepicker.ts +++ b/public/app/features/dashboard/timepicker/timepicker.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import angular from 'angular'; import moment from 'moment'; @@ -25,10 +23,12 @@ export class TimePickerCtrl { refresh: any; isUtc: boolean; firstDayOfWeek: number; + closeDropdown: any; + isOpen: boolean; /** @ngInject */ constructor(private $scope, private $rootScope, private timeSrv) { - $scope.ctrl = this; + this.$scope.ctrl = this; $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope); $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope); @@ -96,6 +96,11 @@ export class TimePickerCtrl { } openDropdown() { + if (this.isOpen) { + this.isOpen = false; + return; + } + this.onRefresh(); this.editTimeRaw = this.timeRaw; this.timeOptions = rangeUtil.getRelativeTimesList(this.panel, this.rangeString); @@ -107,12 +112,7 @@ export class TimePickerCtrl { }; this.refresh.options.unshift({text: 'off'}); - - this.$rootScope.appEvent('show-dash-editor', { - editview: 'timepicker', - scope: this.$scope, - cssClass: 'gf-timepicker-dropdown', - }); + this.isOpen = true; } applyCustom() { @@ -121,7 +121,7 @@ export class TimePickerCtrl { } this.timeSrv.setTime(this.editTimeRaw); - this.$rootScope.appEvent('hide-dash-editor'); + this.isOpen = false; } absoluteFromChanged() { @@ -144,7 +144,7 @@ export class TimePickerCtrl { } this.timeSrv.setTime(range); - this.$rootScope.appEvent('hide-dash-editor'); + this.isOpen = false; } } @@ -175,7 +175,6 @@ export function timePickerDirective() { }; } - angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective); angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective); diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 11dfdf74c1f..155aa78a6fe 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -1,80 +1,77 @@ -
-
Links and Dash Navigation
+

+ Dashboard Links +

-
- -
-
+
+
+
+
+ Type +
+ +
+
+
+ With tags + +
+ +
+ Title + +
+
- Type -
- -
+
  • Url
    • +
    -
    - With tags - -
    - -
    + +
    Title - +
    -
    -
    -
  • Url
    • - -
    -
    - Title - -
    +
    + Tooltip + +
    -
    - Tooltip - -
    - -
    - Icon -
    - -
    +
    + Icon +
    +
    +
    -
    -
    -
    - Include -
    -
    -
    - - - +
    +
    +
    + Include
    +
    + + + +
    +
    -
    -
    - -
    -
    - -
    -
    - -
    +
    +
    + +
    +
    + +
    +
    +
    - - diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index ab74a006fce..4655ff19282 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -134,20 +134,27 @@ export class PanelCtrl { getMenu() { let menu = []; menu.push({text: 'View', click: 'ctrl.viewPanel();', icon: "fa fa-fw fa-eye", shortcut: "v"}); - menu.push({text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', icon: "fa fa-fw fa-edit", shortcut: "e"}); + + if (this.dashboard.meta.canEdit) { + menu.push({text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', icon: "fa fa-fw fa-edit", shortcut: "e"}); + } + menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"}); let extendedMenu = this.getExtendedMenu(); menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu}); - menu.push({divider: true, role: 'Editor'}); - menu.push({text: 'Remove', click: 'ctrl.removePanel();', role: 'Editor', icon: "fa fa-fw fa-trash", shortcut: "p r"}); + if (this.dashboard.meta.canEdit) { + menu.push({divider: true, role: 'Editor'}); + menu.push({text: 'Remove', click: 'ctrl.removePanel();', role: 'Editor', icon: "fa fa-fw fa-trash", shortcut: "p r"}); + } + return menu; } getExtendedMenu() { let menu = []; - if (!this.fullscreen) { + if (!this.fullscreen && this.dashboard.meta.canEdit) { menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); } menu.push({text: 'Panel JSON', click: 'ctrl.editPanelJson(); dismiss();' }); diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index c10bc5bb5ec..63fc862eab9 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import coreModule from 'app/core/core_module'; import {variableTypes} from './variable'; @@ -45,6 +43,10 @@ export class VariableEditorCtrl { }); }; + $scope.setMode = function(mode) { + $scope.mode = mode; + }; + $scope.add = function() { if ($scope.isValid()) { variableSrv.addVariable($scope.current); diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 5a9fe04c625..424023d6054 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,45 +1,43 @@
    -
    -

    - Templating -

    - +

    + Variables + > New + > Edit +

    - -
    +
    -
    +
    +
    +
    There are no variables added yet
    + + + Add variable + +
    +
    What does variables do?
    +

    Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names + in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of + the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. -

    -
    - No template variables defined -

    + Checkout the + + Templating documentation + for more information. +
    - - - + + +
    +
    +
    + New +
    + +
    + + @@ -55,7 +53,6 @@ - -
    Variable Definition {{variable.query}} @@ -70,256 +67,236 @@
    -
    + +
    +
    -
    -
    -
    What does templating do?
    -

    Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application - and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of - the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. -
    -
    +

    +
    General
    +
    +
    +
    + Name + +
    +
    + + Type + + {{variableTypes[current.type].description}} + + +
    + +
    +
    +
    - Checkout the Templating documentation for more information. -

    +
    + Template names cannot begin with '__' that's reserved for Grafanas global variables +
    + +
    +
    + Label + +
    +
    + Hide +
    + +
    +
    -
    -
    -   New -
    -
    +
    +
    Interval Options
    - -
    Variable
    -
    -
    -
    - Name - -
    -
    - - Type - - {{variableTypes[current.type].description}} - - -
    - -
    -
    -
    +
    + Values + +
    -
    - Template names cannot begin with '__' that's reserved for Grafanas global variables -
    +
    + + -
    -
    - Label - -
    -
    - Hide -
    - -
    -
    -
    -
    +
    + + Step count How many times should the current time range be divided to calculate the value + +
    + +
    +
    +
    + + Min interval The calculated value will not go below this threshold + + +
    +
    +
    -
    -
    Interval Options
    +
    +
    Custom Options
    +
    + Values separated by comma + +
    +
    -
    - Values - -
    +
    +
    Constant options
    +
    + Value + +
    +
    -
    - - +
    +
    Query Options
    -
    - - Step count How many times should the current time range be divided to calculate the value - -
    - -
    -
    -
    - - Min interval The calculated value will not go below this threshold - - -
    -
    -
    +
    +
    + Data source +
    + +
    +
    +
    + + Refresh + + When to update the values of this variable. + + +
    + +
    +
    +
    +
    + Query + +
    +
    + + Regex + + Optional, if you want to extract part of a series name or metric node segment. + + + +
    +
    + + Sort + + How to sort the values of this variable. + + +
    + +
    +
    +
    -
    -
    Custom Options
    -
    - Values separated by comma - -
    -
    +
    +
    Data source options
    -
    -
    Constant options
    -
    - Value - -
    -
    +
    + +
    + +
    +
    -
    -
    Query Options
    +
    +
    + + + +
    +
    -
    -
    Data source options
    +
    +
    Options
    +
    + Data source +
    + +
    +
    +
    -
    - -
    - -
    -
    +
    +
    Selection Options
    +
    + + + + +
    +
    + Custom all value + +
    +
    -
    - - -
    -
    +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    -
    -
    Options
    -
    - Data source -
    - -
    -
    -
    +
    + {{infoText}} +
    -
    -
    Selection Options
    -
    - - - - -
    -
    - Custom all value - -
    -
    +
    + + +
    -
    -
    Value groups/tags (Experimental feature)
    - - -
    - Tags query - -
    -
    -
  • Tag values query
    • - -
    -
    - -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    - -
    - {{infoText}} -
    - -
    - - -
    - -
    -
    +
    diff --git a/public/app/partials/confirm_modal.html b/public/app/partials/confirm_modal.html index 0b706788e90..d0b0d260f78 100644 --- a/public/app/partials/confirm_modal.html +++ b/public/app/partials/confirm_modal.html @@ -21,7 +21,6 @@
    -
    diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 855237cb557..210275d2200 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -2,15 +2,17 @@
    -
    -
    + + +
    -
    diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 9a67f24890e..13dd25755ee 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -1,5 +1,3 @@ -/// - import 'vendor/flot/jquery.flot'; import 'vendor/flot/jquery.flot.selection'; import 'vendor/flot/jquery.flot.time'; diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 614089d3121..2cbf193bdc6 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -86,6 +86,7 @@ @import "components/dashboard_grid"; @import "components/dashboard_list"; @import "components/page_header"; +@import "components/dashboard_settings"; @import "components/empty_list_cta"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index a2ccc01f071..d2895fc2d78 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -22,7 +22,6 @@ $gray-5: #ECECEC; $gray-6: #f4f5f8; $gray-7: #fbfbfb; -// $gray-blue: #292a2d; $gray-blue: #212327; $input-black: #09090B; @@ -100,6 +99,7 @@ $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); $panel-header-hover-bg: $dark-4; $panel-header-menu-hover-bg: $dark-5; +$panel-edit-shadow: 0 -30px 30px -30px $black; // page header $page-header-bg: linear-gradient(90deg, #292a2d, black); @@ -192,7 +192,7 @@ $input-label-border-color: $dark-3; $input-invalid-border-color: lighten($red, 5%); // Search -$search-shadow: 0 0 35px 0 $body-bg; +$search-shadow: 0 0 30px 0 $black; $search-filter-box-bg: $gray-blue; // Dropdowns @@ -229,10 +229,10 @@ $horizontalComponentOffset: 180px; // ------------------------- $wellBackground: #131517; -$navbarHeight: 52px; +$navbarHeight: 55px; $navbarBackgroundHighlight: $dark-3; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $body-bg; +$navbarBorder: 1px solid $dark-3; $navbarShadow: 0 0 20px black; $navbarText: $gray-4; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index f6512aed3c4..0570b6a6e85 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -103,6 +103,7 @@ $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); $panel-header-hover-bg: $gray-6; $panel-header-menu-hover-bg: $gray-4; +$panel-edit-shadow: 0 0 30px 20px $black; // Page header $page-header-bg: linear-gradient(90deg, $white, $gray-7); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index a0c52dee2ef..d031a0485f6 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -199,11 +199,11 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // Try to avoid customizing these :) $zindex-dropdown: 1000; $zindex-navbar-fixed: 1020; +$zindex-sidemenu: 1025; $zindex-tooltip: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; $zindex-typeahead: 1060; -$zindex-sidemenu: $zindex-navbar-fixed; // Buttons // diff --git a/public/sass/base/_grafana_icons.scss b/public/sass/base/_grafana_icons.scss index 967912eb1ab..9c4b2d0e008 100644 --- a/public/sass/base/_grafana_icons.scss +++ b/public/sass/base/_grafana_icons.scss @@ -19,6 +19,7 @@ text-transform: none; line-height: 1; display: inline-block; + vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss new file mode 100644 index 00000000000..50f157a5a15 --- /dev/null +++ b/public/sass/components/_dashboard_settings.scss @@ -0,0 +1,80 @@ +.dashboard-settings { + opacity: 0; + height: 100%; + display: flex; + flex-direction: row; +} + +.dashboard-page--settings-opening { + .dashboard-container { + display: none; + } +} + +.dashboard-page--settings-open { + .dashboard-settings { + opacity: 1; + transition: opacity 300ms ease-in-out; + } +} + +.dashboard-settings__content { + flex-grow: 1; + min-width: 0; + height: 100%; + padding: 30px; +} + +.dashboard-settings__aside { + padding: 30px 0 0 30px; + background: $panel-bg; + display: flex; + flex-direction: column; +} + +.dashboard-settings__aside-header { + color: $text-muted; + font-size: $font-size-h3; + padding-right: 60px; + white-space: nowrap; + + i { + font-size: 25px; + position: relative; + top: 1px; + padding-right: 5px; + } +} + +.dashboard-settings__header { + font-size: $font-size-h3; + margin-bottom: 20px; +} + +.dashboard-settings__nav-item { + padding: 7px 12px; + color: $text-color; + font-size: $font-size-md; + @include left-brand-border; + + &.active { + @include left-brand-border-gradient(); + background: $page-bg; + } + + i { + padding-right: 5px; + } +} + +.dashboard-settings__aside-actions { + display: flex; + flex-direction: column; + height: 100%; + flex-grow: 1; + margin: $spacer*3 $spacer*2 0 0; + + button { + margin-bottom: 10px; + } +} diff --git a/public/sass/components/_empty_list_cta.scss b/public/sass/components/_empty_list_cta.scss index a8c235d83db..dd50f3a3b8b 100644 --- a/public/sass/components/_empty_list_cta.scss +++ b/public/sass/components/_empty_list_cta.scss @@ -1,21 +1,24 @@ -.empty-list-cta { - background-color: $search-filter-box-bg; - text-align: center; +.empty-list-cta { + background-color: $search-filter-box-bg; + text-align: center; + padding: $spacer*2; + border-radius: $border-radius; + + .grafana-info-box { + max-width: 700px; + margin: 0 auto; + } } .empty-list-cta__title { - padding-bottom: 30px; - font-style: italic; + padding-bottom: $spacer*3; + font-style: italic; } .empty-list-cta__button { - margin-bottom: 50px; -} - -.empty-list-cta__pro-tip { - padding-bottom: 20px; + margin-bottom: $spacer*3; } .empty-list-cta__pro-tip-link { - margin-left: 5px; -} \ No newline at end of file + margin-left: 5px; +} diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 7783b364861..5ee712b0810 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -66,6 +66,7 @@ $input-border: 1px solid $input-border-color; padding: $input-padding-y $input-padding-x; flex-shrink: 0; font-weight: $font-weight-semi-bold; + font-size: $font-size-sm; background-color: $input-label-bg; display: block; @@ -84,6 +85,14 @@ $input-border: 1px solid $input-border-color; } } +.gf-form-label + .gf-form-label { + margin-right: $gf-form-margin; +} + +.gf-form + .gf-form { + margin-right: $gf-form-margin; +} + .gf-form-pre { display: block; flex-grow: 1; @@ -253,9 +262,6 @@ $input-border: 1px solid $input-border-color; margin-right: $gf-form-margin; line-height: $input-line-height; font-size: $font-size-sm; - box-shadow: none; - @include border-radius($label-border-radius-sm); - border: $input-btn-border-width solid transparent; flex-shrink: 0; flex-grow: 0; diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index 0d3cbcd52b8..2a9c03cbdfa 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -1,13 +1,3 @@ -// .grafana-info-box::before { -// content: "\f05a"; -// font-family:'FontAwesome'; -// position: absolute; -// top: -13px; -// left: -8px; -// font-size: 20px; -// color: $text-color; -// } - .grafana-info-box { position: relative; background: $info-box-background; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 231adbc4a55..1f8e2419197 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -2,13 +2,57 @@ .navbar { position: relative; margin-left: 40px; - // box-shadow: $navbarShadow; z-index: $zindex-navbar-fixed; - // background: $navbarBackground; height: $navbarHeight; padding-right: $spacer; display: flex; flex-grow: 1; + border-bottom: 1px solid transparent; + transition: all 350ms ease-in-out; +} + +@mixin navbar-alt-look() { + background: $page-header-bg; + box-shadow: $search-shadow; + border-bottom: $navbarBorder; +} + + +.dashboard-page--settings-open { + .navbar { + @include navbar-alt-look(); + } + + .navbar-button--add-panel, + .navbar-button--star, + .navbar-button--share, + .navbar-button--settings, + .navbar-page-btn .fa-caret-down, + .gf-timepicker-nav { + display: none; + } + + .navbar-buttons--close { + display: flex; + } +} + +.panel-in-fullscreen { + .navbar { + @include navbar-alt-look(); + } + + .navbar-button--add-panel, + .navbar-button--star, + .navbar-button--save, + .navbar-button--settings, + .navbar-page-btn .fa-caret-down { + display: none; + } + + .navbar-buttons--close { + display: flex; + } } .navbar-page-btn { @@ -19,8 +63,9 @@ margin: 0; color: darken($link-color, 5%); font-size: $font-size-lg; - padding: 1rem 1rem 0.75rem 1rem; + padding-left: 1rem; min-height: $navbarHeight; + line-height: $navbarHeight; .fa-caret-down { font-size: 60%; @@ -43,26 +88,17 @@ } } -.navbar-page-btn-wrapper { - display: inline-block; - position: relative; -} - -.navbar-section-wrapper { - position: relative; - float: left; -} - -.navbar-mini-btn-wrapper { - padding: 15px; -} - .navbar-buttons { height: $navbarHeight; display: flex; align-items: center; justify-content: flex-end; margin-right: $spacer; + + &--close { + display: none; + margin-right: 0; + } } .navbar__spacer { @@ -74,7 +110,7 @@ display: inline-block; font-weight: $btn-font-weight; - padding: 8px 11px; + padding: 6px 11px; line-height: 16px; color: $text-muted; border: 1px solid $navbar-button-border; @@ -90,7 +126,7 @@ } &--add-panel { - padding: 5px 10px; + padding: 3px 10px; .gicon { font-size: 22px; @@ -98,7 +134,7 @@ } &--tight { - padding: 9px 4px; + padding: 7px 4px; .fa { font-size: 14px; @@ -106,6 +142,10 @@ top: 2px; } } + + &--primary { + @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); + } } @include media-breakpoint-up(sm) { @@ -115,7 +155,8 @@ .sidemenu-open { .navbar { - margin-left: 15px; + padding-left: 15px; + margin-left: 0; } } diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index cd8f949ed64..66c029071b2 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -33,6 +33,10 @@ .gf-form-label { margin-right: 2px; } + + .gf-form + .gf-form { + margin-right: 0; + } } .gf-form-query-content { diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 66cadd01369..6b81f144457 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -27,6 +27,7 @@ background: $input-bg; border: 1px solid $input-border-color; border-left: none; + border-radius: $input-border-radius; } input + label::before, input + label::after { @@ -45,7 +46,6 @@ display: flex; flex-direction: column; justify-content: center; - border-radius: $input-border-radius; } &:hover { diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index d2c9b24d2a0..dfd760753fe 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -6,7 +6,8 @@ padding: 0; .tabbed-view-header { - padding: 1.5em 1rem 0 1rem; + padding: 0px 25px; + background: none; } } } diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 396c3f98880..ee53ddfbb4c 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -18,11 +18,17 @@ border: solid transparent; border-width: 0 1px 1px; border-radius: 3px 3px 0 0; + color: $text-color; i { margin-right: 5px; } + .gicon { + position: relative; + top: -2px; + } + &:hover, &:focus { color: $link-hover-color; diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index a1fb558c087..e4beb2cb39e 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -13,17 +13,18 @@ } .gf-timepicker-dropdown { - margin: -8px -10px 10px 5px; + position: absolute; + top: $navbarHeight; + right: 0; padding: 10px 20px; - float: right; - background-color: $panel-bg; - @include box-shadow($navbarDropdownShadow); + background-color: $page-bg; + border-radius: 0 0 0 4px; + box-shadow: $search-shadow; } .gf-timepicker-absolute-section { width: 290px; float: left; - border-right: 1px solid $divider-border-color; padding: 0 10px; select { width: 183px; @@ -41,7 +42,7 @@ font-size: 75%; padding: 3px; border-radius: 2px; - font-weight: bold; + font-weight: 500; margin-left: 4px; } @@ -59,7 +60,7 @@ li.active { border-bottom: 1px solid $blue; margin: 3px 0; - font-weight: bold; + font-weight: 500; } } } diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index b3c9a44e658..e528891547a 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -1,19 +1,5 @@ -@mixin hide-controls() { - .add-row-panel-hint, - .dash-row-menu-container { - display: none; - } - .panel-drop-zone { - visibility: hidden; - } -} - -.hide-controls { - @include hide-controls(); -} .page-kiosk-mode { - @include hide-controls(); dashnav { display: none; } @@ -45,7 +31,7 @@ background: transparent; transform: translate3d(-40px, 0, 0); transition: all 1.5s ease-in-out 1s; - .icon-gf { + i { opacity: 0; transition: all 1.5s ease-in-out 1s; } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 4deefc2b9cb..d1951486c4b 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -217,20 +217,6 @@ div.flot-text { } } -.dash-edit-view { - opacity: 0; - - &--open{ - opacity: 1; - transition: opacity 200ms ease-in-out; - } -} - -.dashboard-nav-shadow { - box-shadow: 0 0 20px black; - height: 10px; - position: absolute; - width: 100%; - z-index: 1; - top: -10px; +.panel-full-edit { + margin: $dashboard-padding (-$dashboard-padding) 0 (-$dashboard-padding); }