Skip to content

N
nexpie-grafana-theme
Commit 88da3a99 by Torkel Ödegaard
Options

refactoring: trying to remove all the css overrides in history tab and make the… 

refactoring: trying to remove all the css overrides in history tab and make the styles more more inline with best practice css, and if needed use modifier overrides instead
parent 689e366f
Showing with 87 additions and 135 deletions
public/app/core/components/switch.ts
...@@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module'; ...@@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module';
import Drop from 'tether-drop'; import Drop from 'tether-drop';
var template = ` var template = `
<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer"> <label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
{{ctrl.label}} {{ctrl.label}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center"> <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
{{ctrl.tooltip}} {{ctrl.tooltip}}
...@@ -24,6 +24,7 @@ export class SwitchCtrl { ...@@ -24,6 +24,7 @@ export class SwitchCtrl {
checked: any; checked: any;
show: any; show: any;
id: any; id: any;
label: string;
/** @ngInject */ /** @ngInject */
constructor($scope, private $timeout) { constructor($scope, private $timeout) {
......
public/app/features/dashboard/history/history.html
...@@ -33,70 +33,69 @@ ...@@ -33,70 +33,69 @@
</div> </div>
<div ng-if="!ctrl.loading"> <div ng-if="!ctrl.loading">
<div class="history-table gf-form"> <div class="gf-form-group">
<div class="gf-form-group"> <table class="filter-table">
<table class="filter-table"> <thead>
<thead> <tr>
<tr> <th class="width-4"></th>
<th class="width-4"></th> <th class="width-4">Version</th>
<th class="width-4">Version</th> <th class="width-14">Date</th>
<th class="width-14">Date</th> <th class="width-10">Updated By</th>
<th class="width-10">Updated By</th> <th class="width-30">Notes</th>
<th class="width-30">Notes</th> <th></th>
<th></th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr ng-repeat="revision in ctrl.revisions">
<tr ng-repeat="revision in ctrl.revisions"> <td class="filter-table__switch-cell" bs-tooltip="ctrl.compareRevisionDisabled(revision.checked) ? 'You can only compare 2 versions at a time' : ''">
<td bs-tooltip="ctrl.compareRevisionDisabled(revision.checked) ? 'You can only compare 2 versions at a time' : ''"> <gf-form-switch switch-class="gf-form-switch--table-cell"
<gf-form-switch checked="revision.checked" checked="revision.checked"
on-change="ctrl.compareRevisionStateChanged(revision)" on-change="ctrl.compareRevisionStateChanged(revision)"
ng-disabled="ctrl.compareRevisionDisabled(revision.checked)"> ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
</gf-form-switch> </gf-form-switch>
</td> </td>
<td>{{revision.version}}</td> <td class="text-center">{{revision.version}}</td>
<td>{{ctrl.formatDate(revision.created)}}</td> <td>{{ctrl.formatDate(revision.created)}}</td>
<td>{{revision.createdBy}}</td> <td>{{revision.createdBy}}</td>
<td>{{revision.message}}</td> <td>{{revision.message}}</td>
<td class="text-right"> <td class="text-right">
<a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)"> <a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
<i class="fa fa-history"></i>&nbsp;&nbsp;Restore <i class="fa fa-history"></i>&nbsp;&nbsp;Restore
</a> </a>
<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version"> <a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
<i class="fa fa-check"></i>&nbsp;&nbsp;Current <i class="fa fa-check"></i>&nbsp;&nbsp;Current
</a> </a>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div ng-if="ctrl.appending"> <div ng-if="ctrl.appending">
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-spin"></i>
<em>Fetching more entries&hellip;</em> <em>Fetching more entries&hellip;</em>
</div> </div>
<div class="gf-form-group" ng-show="ctrl.mode === 'list'"> <div class="gf-form-group" ng-show="ctrl.mode === 'list'">
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<a type="button" <a type="button"
class="btn gf-form-button btn-primary" class="btn gf-form-button btn-primary"
ng-if="ctrl.revisions.length > 1" ng-if="ctrl.revisions.length > 1"
ng-class="{disabled: !ctrl.isComparable()}" ng-class="{disabled: !ctrl.isComparable()}"
ng-click="ctrl.getDiff(ctrl.diff)" ng-click="ctrl.getDiff(ctrl.diff)"
bs-tooltip="ctrl.isComparable() ? '' : 'Select 2 versions to start comparing'"> bs-tooltip="ctrl.isComparable() ? '' : 'Select 2 versions to start comparing'">
<i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions <i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
</a> </a>
<a type="button" <a type="button"
class="btn gf-form-button btn-inverse" class="btn gf-form-button btn-inverse"
ng-if="ctrl.revisions.length >= ctrl.limit" ng-if="ctrl.revisions.length >= ctrl.limit"
ng-click="ctrl.addToLog()" ng-click="ctrl.addToLog()"
ng-class="{disabled: ctrl.isLastPage()}" ng-class="{disabled: ctrl.isLastPage()}"
ng-disabled="ctrl.isLastPage()"> ng-disabled="ctrl.isLastPage()">
Show more versions Show more versions
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
......
public/sass/components/_filter-table.scss
...@@ -19,24 +19,21 @@ ...@@ -19,24 +19,21 @@
.filter-table tr { .filter-table tr {
background: $grafanaListBackground; background: $grafanaListBackground;
border-bottom: 2px solid $page-bg; border-bottom: 3px solid $page-bg;
} }
.filter-table th { .filter-table th {
width: auto; width: auto;
padding: 10px 15px 10px 0; padding: $table-cell-padding;
text-align: left; text-align: left;
&:first-child {
padding-left: 15px;
}
} }
.filter-table td { .filter-table td {
padding: 15px 15px 15px 0; padding: $table-cell-padding;
&:first-child { &.filter-table__switch-cell {
padding-left: 15px; padding: 0;
border-right: 3px solid $page-bg;
} }
} }
...@@ -55,3 +52,5 @@ ...@@ -55,3 +52,5 @@
.filter-table .expanded > td { .filter-table .expanded > td {
padding-bottom: 0; padding-bottom: 0;
} }
public/sass/components/_gf-form.scss
...@@ -232,10 +232,6 @@ $gf-form-margin: 0.25rem; ...@@ -232,10 +232,6 @@ $gf-form-margin: 0.25rem;
flex-grow: 0; flex-grow: 0;
} }
.gf-form-switch {
margin-right: $gf-form-margin;
}
.natural-language-input { .natural-language-input {
&input[type="number"] { &input[type="number"] {
font-size: $font-size-base; font-size: $font-size-base;
......
public/sass/components/_switch.scss
...@@ -11,6 +11,7 @@ $switch-height: 1.5rem; ...@@ -11,6 +11,7 @@ $switch-height: 1.5rem;
max-width: 4.5rem; max-width: 4.5rem;
flex-grow: 1; flex-grow: 1;
min-width: 4.0rem; min-width: 4.0rem;
margin-right: $gf-form-margin;
input { input {
position: absolute; position: absolute;
...@@ -42,8 +43,10 @@ $switch-height: 1.5rem; ...@@ -42,8 +43,10 @@ $switch-height: 1.5rem;
color: #fff; color: #fff;
font-size: $font-size-sm; font-size: $font-size-sm;
text-align: center; text-align: center;
line-height: 2.8rem;
font-size: 150%; font-size: 150%;
display: flex;
flex-direction: column;
justify-content: center;
} }
&:hover { &:hover {
...@@ -89,6 +92,14 @@ $switch-height: 1.5rem; ...@@ -89,6 +92,14 @@ $switch-height: 1.5rem;
transform: rotateY(0); transform: rotateY(0);
} }
&--table-cell {
margin-bottom: 0;
margin-right: 0;
input + label {
height: 3.6rem;
}
}
} }
gf-form-switch[disabled] { gf-form-switch[disabled] {
...@@ -96,5 +107,9 @@ gf-form-switch[disabled] { ...@@ -96,5 +107,9 @@ gf-form-switch[disabled] {
.gf-form-switch input + label { .gf-form-switch input + label {
cursor: default; cursor: default;
pointer-events: none !important; pointer-events: none !important;
&::before {
color: $text-color-faint;
text-shadow: none;
}
} }
} }
public/sass/pages/_history.scss
// History Table
.history-table {
// .gf-form overrides
.gf-form-label { display: none; }
.gf-form-switch {
margin-bottom: 0;
input + label {
height: 3.6rem;
width: 110%;
}
input + label::before, input + label::after {
background-color: $diff-switch-bg;
background-image: none;
border: 0;
height: 50px;
line-height: 3.7rem;
}
}
gf-form-switch[disabled] {
.gf-form-switch input + label {
&::before {
color: $diff-switch-disabled;
text-shadow: none;
}
}
}
// .filter-table overrides
.filter-table {
tr {
border-bottom: 3px solid $page-bg;
}
thead tr {
border-width: 3px;
}
$date-padding: 1em;
td {
padding: 0;
&:nth-child(2) {
border-left: 5px solid $page-bg;
padding-left: 1.5em;
}
&:nth-child(3) { padding-left: $date-padding; }
&:last-child { padding-right: 1.5em; }
}
th:nth-child(2) { padding-left: 0.5em; }
th:nth-child(3) { padding-left: $date-padding; }
}
}
// Diff View // Diff View
.history-list { .history-list {
......
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