diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx index 671d05d7c6f..0078c6bb7c9 100644 --- a/public/app/core/components/Switch/Switch.tsx +++ b/public/app/core/components/Switch/Switch.tsx @@ -36,17 +36,13 @@ export class Switch extends PureComponent { } return ( -
- {label && ( - - )} +
+ ); } } diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index 92946b866a1..941c2dfd6a4 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -64,10 +64,10 @@
-
diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 45258ded652..dc5e5b580bb 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -1,12 +1,12 @@
- - +
{{::section.title}} @@ -22,12 +22,12 @@
- - +
diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts index 1fce79105dc..4d3477006ac 100644 --- a/public/app/core/components/switch.ts +++ b/public/app/core/components/switch.ts @@ -15,6 +15,15 @@ const template = ` `; +const checkboxTemplate = ` + +`; + export class SwitchCtrl { onChange: any; checked: any; @@ -53,4 +62,23 @@ export function switchDirective() { }; } +export function checkboxDirective() { + return { + restrict: 'E', + controller: SwitchCtrl, + controllerAs: 'ctrl', + bindToController: true, + scope: { + checked: '=', + label: '@', + labelClass: '@', + tooltip: '@', + switchClass: '@', + onChange: '&', + }, + template: checkboxTemplate, + }; +} + coreModule.directive('gfFormSwitch', switchDirective); +coreModule.directive('gfFormCheckbox', checkboxDirective); diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/history/history.html index 48caddeb90e..5a053c46cc6 100644 --- a/public/app/features/dashboard/history/history.html +++ b/public/app/features/dashboard/history/history.html @@ -30,8 +30,8 @@ - - + + {{revision.version}} {{revision.createdDateString}} diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 2dcdd22e97e..61c2be2adea 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -44,8 +44,8 @@ const panelTemplate = ` -
@@ -80,6 +80,16 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { let lastAlertState; let hasAlertRule; + function mouseEnter() { + panelContainer.toggleClass('panel-hover-highlight', true); + ctrl.dashboard.setPanelFocus(ctrl.panel.id); + } + + function mouseLeave() { + panelContainer.toggleClass('panel-hover-highlight', false); + ctrl.dashboard.setPanelFocus(0); + } + function resizeScrollableContent() { if (panelScrollbar) { panelScrollbar.update(); @@ -130,6 +140,19 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { }); }); + ctrl.events.on('view-mode-changed', () => { + // first wait one pass for dashboard fullscreen view mode to take effect (classses being applied) + setTimeout(() => { + // then recalc style + ctrl.calculatePanelHeight(); + // then wait another cycle (this might not be needed) + $timeout(() => { + ctrl.render(); + resizeScrollableContent(); + }); + }); + }); + // set initial height ctrl.calculatePanelHeight(); @@ -151,7 +174,11 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { panelContainer.removeClass('panel-alert-state--' + lastAlertState); } - if (ctrl.alertState.state === 'ok' || ctrl.alertState.state === 'alerting') { + if ( + ctrl.alertState.state === 'ok' || + ctrl.alertState.state === 'alerting' || + ctrl.alertState.state === 'pending' + ) { panelContainer.addClass('panel-alert-state--' + ctrl.alertState.state); } @@ -202,6 +229,9 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { scope.$apply(ctrl.openInspector.bind(ctrl)); }); + elem.on('mouseenter', mouseEnter); + elem.on('mouseleave', mouseLeave); + scope.$on('$destroy', () => { elem.off(); cornerInfoElem.off(); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 841f06156ac..111ee870658 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -138,6 +138,7 @@ $input-padding-y-lg: 10px !default; $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; $gf-form-margin: 0.2rem; +$gf-form-input-height: 35px; $cursor-disabled: not-allowed !default; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index f2756e16203..48e886e4c93 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -102,6 +102,7 @@ $input-border: 1px solid $input-border-color; background-color: $input-label-bg; display: block; + height: $gf-form-input-height; border: $input-btn-border-width solid $input-label-border-color; border-right: none; @@ -160,6 +161,7 @@ $input-border: 1px solid $input-border-color; .gf-form-input { display: block; width: 100%; + height: $gf-form-input-height; padding: $input-padding-y $input-padding-x; margin-right: $gf-form-margin; font-size: $font-size-md; @@ -345,9 +347,6 @@ $input-border: 1px solid $input-border-color; .gf-form-dropdown-typeahead { margin-right: $gf-form-margin; position: relative; - background-color: $input-bg; - border: $input-border; - border-radius: $input-border-radius; &::after { position: absolute; @@ -360,10 +359,6 @@ $input-border: 1px solid $input-border-color; pointer-events: none; font-size: 11px; } - - .gf-form-input { - border: none; - } } .gf-form-help-icon { diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index c80c8a6980a..d168dbeb225 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -2,110 +2,66 @@ SWITCH 3 - YES NO ============================================================ */ -.gf-form-switch { - &--small { - max-width: 2rem; - min-width: 1.5rem; - - input + label { - height: 25px; - } - - input + label::before, - input + label::after { - font-size: $font-size-sm; - } - } - - &--table-cell { - margin-bottom: 0; - margin-right: 0; - - input + label { - height: 3.6rem; - } - } -} - -.gf-form-switch--transparent { - input + label { - background: transparent; - border: none; - } - - input + label::before, - input + label::after { - background: transparent; - border: none; - } - - &:hover { - input + label::before { - background: transparent; - } - - input + label::after { - background: transparent; - } - } -} - -.gf-form-switch--search-result__section { - min-width: 3.05rem; - margin-right: -0.3rem; - - input + label { - height: 1.7rem; - } -} - -.gf-form-switch--search-result__item { - min-width: 2.7rem; - - input + label { - height: 2.7rem; - } -} - -.gf-form-switch--search-result-filter-row__checkbox { - min-width: 3.75rem; - - input + label { - height: 2.5rem; - } -} - gf-form-switch[disabled] { - .gf-form-label, - .gf-form-switch input + label { + .gf-form-switch, + .gf-form-switch-container { cursor: default; pointer-events: none !important; - &::before, - &::after { - color: $text-color-faint; - text-shadow: none; + .gf-form-label { + color: $text-color-weak; } } } .gf-form-switch-container { display: flex; + cursor: pointer; } .gf-form-switch { position: relative; display: inline-block; width: 60px; - height: 34px; + height: $gf-form-input-height; background: $switch-bg; border: 1px solid $input-border-color; border-left: none; + border-radius: $input-border-radius; input { opacity: 0; width: 0; height: 0; } + + &--transparent { + background: transparent; + border: none; + } + + &--search-result__section { + width: 3.05rem; + height: auto; + position: relative; + top: -5px; + left: 3px; + } + + &--search-result__item { + width: 2.7rem; + height: auto; + position: relative; + top: 3px; + } + + &--table-cell { + width: 40px; + background: transparent; + height: auto; + border: none; + position: relative; + top: -5px; + } } /* The slider */ @@ -118,6 +74,7 @@ gf-form-switch[disabled] { background: $switch-slider-off-bg; border-radius: 8px; height: 16px; + width: 29px; &::before { position: absolute; @@ -137,16 +94,10 @@ input:checked + .gf-form-switch__slider { background: $switch-slider-on-bg; } -/* input:focus + .gf-form-switch__slider { */ -/* box-shadow: 0 0 1px #2196f3; */ -/* } */ - input:checked + .gf-form-switch__slider::before { transform: translateX(14px); } -/* The Checkbox */ - .gf-form-switch__checkbox { position: absolute; left: 16px; @@ -160,6 +111,7 @@ input:checked + .gf-form-switch__slider::before { justify-content: center; align-items: center; } + input:checked + .gf-form-switch__checkbox::before { font-family: 'FontAwesome'; content: '\f00c';