Skip to content

N
nexpie-grafana-theme
Commit 571cfab9 by Torkel Ödegaard
Options

added chekbox and other tweaks

parent 808a0aa6
Showing with 113 additions and 111 deletions
public/app/core/components/Switch/Switch.tsx
...@@ -36,17 +36,13 @@ export class Switch extends PureComponent<Props, State> { ...@@ -36,17 +36,13 @@ export class Switch extends PureComponent<Props, State> {
} }
return ( return (
<div className="gf-form"> <label htmlFor={labelId} className="gf-form-switch-container">
{label && ( {label && <label className={labelClassName}>{label}</label>}
<label htmlFor={labelId} className={labelClassName}>
{label}
</label>
)}
<div className={switchClassName}> <div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} /> <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<span className="gf-form-switch__slider" /> <span className="gf-form-switch__slider" />
</div> </div>
</div> </label>
); );
} }
} }
public/app/core/components/manage_dashboards/manage_dashboards.html
...@@ -64,10 +64,10 @@ ...@@ -64,10 +64,10 @@
<div class="search-results" ng-show="ctrl.sections.length > 0"> <div class="search-results" ng-show="ctrl.sections.length > 0">
<div class="search-results-filter-row"> <div class="search-results-filter-row">
<gf-form-switch <gf-form-checkbox
on-change="ctrl.onSelectAllChanged()" on-change="ctrl.onSelectAllChanged()"
checked="ctrl.selectAllChecked" checked="ctrl.selectAllChecked"
switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox" switch-class="gf-form-switch--transparent"
/> />
<div class="search-results-filter-row__filters"> <div class="search-results-filter-row__filters">
<div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)"> <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
......
public/app/core/components/search/search_results.html
<div ng-repeat="section in ctrl.results" class="search-section"> <div ng-repeat="section in ctrl.results" class="search-section">
<div class="search-section__header pointer" ng-hide="section.hideHeader" ng-class="{'selected': section.selected}" ng-click="ctrl.toggleFolderExpand(section)"> <div class="search-section__header pointer" ng-hide="section.hideHeader" ng-class="{'selected': section.selected}" ng-click="ctrl.toggleFolderExpand(section)">
<div ng-click="ctrl.toggleSelection(section, $event)"> <div ng-click="ctrl.toggleSelection(section, $event)">
<gf-form-switch <gf-form-checkbox
ng-show="ctrl.editable" ng-show="ctrl.editable"
on-change="ctrl.selectionChanged($event)" on-change="ctrl.selectionChanged($event)"
checked="section.checked" checked="section.checked"
switch-class="gf-form-switch--transparent gf-form-switch--search-result__section"> switch-class="gf-form-switch--transparent gf-form-switch--search-result__section">
</gf-form-switch> </gf-form-checkbox>
</div> </div>
<i class="search-section__header__icon" ng-class="section.icon"></i> <i class="search-section__header__icon" ng-class="section.icon"></i>
<span class="search-section__header__text">{{::section.title}}</span> <span class="search-section__header__text">{{::section.title}}</span>
...@@ -22,12 +22,12 @@ ...@@ -22,12 +22,12 @@
<div ng-if="section.expanded"> <div ng-if="section.expanded">
<a ng-repeat="item in section.items" class="search-item search-item--indent" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}" > <a ng-repeat="item in section.items" class="search-item search-item--indent" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}" >
<div ng-click="ctrl.toggleSelection(item, $event)"> <div ng-click="ctrl.toggleSelection(item, $event)">
<gf-form-switch <gf-form-checkbox
ng-show="ctrl.editable" ng-show="ctrl.editable"
on-change="ctrl.selectionChanged()" on-change="ctrl.selectionChanged()"
checked="item.checked" checked="item.checked"
switch-class="gf-form-switch--transparent gf-form-switch--search-result__item"> switch-class="gf-form-switch--transparent gf-form-switch--search-result__item">
</gf-form-switch> </gf-form-checkbox>
</div> </div>
<span class="search-item__icon"> <span class="search-item__icon">
<i class="gicon mini gicon-dashboard-list"></i> <i class="gicon mini gicon-dashboard-list"></i>
......
public/app/core/components/switch.ts
...@@ -15,6 +15,15 @@ const template = ` ...@@ -15,6 +15,15 @@ const template = `
</label> </label>
`; `;
const checkboxTemplate = `
<label for="check-{{ctrl.id}}" class="gf-form-check-container">
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<span class="gf-form-switch__checkbox"></span>
</div>
</label>
`;
export class SwitchCtrl { export class SwitchCtrl {
onChange: any; onChange: any;
checked: any; checked: any;
...@@ -53,4 +62,23 @@ export function switchDirective() { ...@@ -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('gfFormSwitch', switchDirective);
coreModule.directive('gfFormCheckbox', checkboxDirective);
public/app/features/dashboard/history/history.html
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
<tbody> <tbody>
<tr ng-repeat="revision in ctrl.revisions"> <tr ng-repeat="revision in ctrl.revisions">
<td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right"> <td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
<gf-form-switch switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare"> <gf-form-checkbox switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
</gf-form-switch> </gf-form-checkbox>
</td> </td>
<td class="text-center">{{revision.version}}</td> <td class="text-center">{{revision.version}}</td>
<td>{{revision.createdDateString}}</td> <td>{{revision.createdDateString}}</td>
......
public/app/features/panel/panel_directive.ts
...@@ -44,8 +44,8 @@ const panelTemplate = ` ...@@ -44,8 +44,8 @@ const panelTemplate = `
</li> </li>
</ul> </ul>
<button class="panel-editor-tabs__close" ng-click="ctrl.exitFullscreen();"> <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
<i class="fa fa-reply"></i> <i class="fa fa-remove"></i>
</button> </button>
</div> </div>
...@@ -80,6 +80,16 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { ...@@ -80,6 +80,16 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
let lastAlertState; let lastAlertState;
let hasAlertRule; 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() { function resizeScrollableContent() {
if (panelScrollbar) { if (panelScrollbar) {
panelScrollbar.update(); panelScrollbar.update();
...@@ -130,6 +140,19 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { ...@@ -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 // set initial height
ctrl.calculatePanelHeight(); ctrl.calculatePanelHeight();
...@@ -151,7 +174,11 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { ...@@ -151,7 +174,11 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
panelContainer.removeClass('panel-alert-state--' + lastAlertState); 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); panelContainer.addClass('panel-alert-state--' + ctrl.alertState.state);
} }
...@@ -202,6 +229,9 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { ...@@ -202,6 +229,9 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
scope.$apply(ctrl.openInspector.bind(ctrl)); scope.$apply(ctrl.openInspector.bind(ctrl));
}); });
elem.on('mouseenter', mouseEnter);
elem.on('mouseleave', mouseLeave);
scope.$on('$destroy', () => { scope.$on('$destroy', () => {
elem.off(); elem.off();
cornerInfoElem.off(); cornerInfoElem.off();
......
public/sass/_variables.scss
...@@ -138,6 +138,7 @@ $input-padding-y-lg: 10px !default; ...@@ -138,6 +138,7 @@ $input-padding-y-lg: 10px !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$gf-form-margin: 0.2rem; $gf-form-margin: 0.2rem;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
......
public/sass/components/_gf-form.scss
...@@ -102,6 +102,7 @@ $input-border: 1px solid $input-border-color; ...@@ -102,6 +102,7 @@ $input-border: 1px solid $input-border-color;
background-color: $input-label-bg; background-color: $input-label-bg;
display: block; display: block;
height: $gf-form-input-height;
border: $input-btn-border-width solid $input-label-border-color; border: $input-btn-border-width solid $input-label-border-color;
border-right: none; border-right: none;
...@@ -160,6 +161,7 @@ $input-border: 1px solid $input-border-color; ...@@ -160,6 +161,7 @@ $input-border: 1px solid $input-border-color;
.gf-form-input { .gf-form-input {
display: block; display: block;
width: 100%; width: 100%;
height: $gf-form-input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
font-size: $font-size-md; font-size: $font-size-md;
...@@ -345,9 +347,6 @@ $input-border: 1px solid $input-border-color; ...@@ -345,9 +347,6 @@ $input-border: 1px solid $input-border-color;
.gf-form-dropdown-typeahead { .gf-form-dropdown-typeahead {
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
position: relative; position: relative;
background-color: $input-bg;
border: $input-border;
border-radius: $input-border-radius;
&::after { &::after {
position: absolute; position: absolute;
...@@ -360,10 +359,6 @@ $input-border: 1px solid $input-border-color; ...@@ -360,10 +359,6 @@ $input-border: 1px solid $input-border-color;
pointer-events: none; pointer-events: none;
font-size: 11px; font-size: 11px;
} }
.gf-form-input {
border: none;
}
} }
.gf-form-help-icon { .gf-form-help-icon {
......
public/sass/components/_switch.scss
...@@ -2,110 +2,66 @@ ...@@ -2,110 +2,66 @@
SWITCH 3 - YES NO 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-switch[disabled] {
.gf-form-label, .gf-form-switch,
.gf-form-switch input + label { .gf-form-switch-container {
cursor: default; cursor: default;
pointer-events: none !important; pointer-events: none !important;
&::before, .gf-form-label {
&::after { color: $text-color-weak;
color: $text-color-faint;
text-shadow: none;
} }
} }
} }
.gf-form-switch-container { .gf-form-switch-container {
display: flex; display: flex;
cursor: pointer;
} }
.gf-form-switch { .gf-form-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 60px;
height: 34px; height: $gf-form-input-height;
background: $switch-bg; background: $switch-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-left: none; border-left: none;
border-radius: $input-border-radius;
input { input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 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 */ /* The slider */
...@@ -118,6 +74,7 @@ gf-form-switch[disabled] { ...@@ -118,6 +74,7 @@ gf-form-switch[disabled] {
background: $switch-slider-off-bg; background: $switch-slider-off-bg;
border-radius: 8px; border-radius: 8px;
height: 16px; height: 16px;
width: 29px;
&::before { &::before {
position: absolute; position: absolute;
...@@ -137,16 +94,10 @@ input:checked + .gf-form-switch__slider { ...@@ -137,16 +94,10 @@ input:checked + .gf-form-switch__slider {
background: $switch-slider-on-bg; background: $switch-slider-on-bg;
} }
/* input:focus + .gf-form-switch__slider { */
/* box-shadow: 0 0 1px #2196f3; */
/* } */
input:checked + .gf-form-switch__slider::before { input:checked + .gf-form-switch__slider::before {
transform: translateX(14px); transform: translateX(14px);
} }
/* The Checkbox */
.gf-form-switch__checkbox { .gf-form-switch__checkbox {
position: absolute; position: absolute;
left: 16px; left: 16px;
...@@ -160,6 +111,7 @@ input:checked + .gf-form-switch__slider::before { ...@@ -160,6 +111,7 @@ input:checked + .gf-form-switch__slider::before {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
input:checked + .gf-form-switch__checkbox::before { input:checked + .gf-form-switch__checkbox::before {
font-family: 'FontAwesome'; font-family: 'FontAwesome';
content: '\f00c'; content: '\f00c';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment