IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-06-06 11:03:56 +02:00
parent 689e366f59
commit 88da3a99e1
6 changed files with 87 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/core/components/switch.ts
View File

@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module';
import Drop from 'tether-drop';
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}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
{{ctrl.tooltip}}
@ -24,6 +24,7 @@ export class SwitchCtrl {
checked: any;
show: any;
id: any;
label: string;
/** @ngInject */
constructor($scope, private $timeout) {

123
public/app/features/dashboard/history/history.html
View File

@ -33,70 +33,69 @@
</div>
<div ng-if="!ctrl.loading">
<div class="history-table gf-form">
<div class="gf-form-group">
<table class="filter-table">
<thead>
<tr>
<th class="width-4"></th>
<th class="width-4">Version</th>
<th class="width-14">Date</th>
<th class="width-10">Updated By</th>
<th class="width-30">Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="revision in ctrl.revisions">
<td bs-tooltip="ctrl.compareRevisionDisabled(revision.checked) ? 'You can only compare 2 versions at a time' : ''">
<gf-form-switch checked="revision.checked"
on-change="ctrl.compareRevisionStateChanged(revision)"
ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
</gf-form-switch>
</td>
<td>{{revision.version}}</td>
<td>{{ctrl.formatDate(revision.created)}}</td>
<td>{{revision.createdBy}}</td>
<td>{{revision.message}}</td>
<td class="text-right">
<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
</a>
<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
<i class="fa fa-check"></i>&nbsp;&nbsp;Current
</a>
</td>
</tr>
</tbody>
</table>
<div class="gf-form-group">
<table class="filter-table">
<thead>
<tr>
<th class="width-4"></th>
<th class="width-4">Version</th>
<th class="width-14">Date</th>
<th class="width-10">Updated By</th>
<th class="width-30">Notes</th>
<th></th>
</tr>
</thead>
<tbody>
<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' : ''">
<gf-form-switch switch-class="gf-form-switch--table-cell"
checked="revision.checked"
on-change="ctrl.compareRevisionStateChanged(revision)"
ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
</gf-form-switch>
</td>
<td class="text-center">{{revision.version}}</td>
<td>{{ctrl.formatDate(revision.created)}}</td>
<td>{{revision.createdBy}}</td>
<td>{{revision.message}}</td>
<td class="text-right">
<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
</a>
<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
<i class="fa fa-check"></i>&nbsp;&nbsp;Current
</a>
</td>
</tr>
</tbody>
</table>
<div ng-if="ctrl.appending">
<i class="fa fa-spinner fa-spin"></i>
<em>Fetching more entries&hellip;</em>
</div>
<div ng-if="ctrl.appending">
<i class="fa fa-spinner fa-spin"></i>
<em>Fetching more entries&hellip;</em>
</div>
<div class="gf-form-group" ng-show="ctrl.mode === 'list'">
<div class="gf-form-button-row">
<a type="button"
class="btn gf-form-button btn-primary"
ng-if="ctrl.revisions.length > 1"
ng-class="{disabled: !ctrl.isComparable()}"
ng-click="ctrl.getDiff(ctrl.diff)"
bs-tooltip="ctrl.isComparable() ? '' : 'Select 2 versions to start comparing'">
<i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
</a>
<a type="button"
class="btn gf-form-button btn-inverse"
ng-if="ctrl.revisions.length >= ctrl.limit"
ng-click="ctrl.addToLog()"
ng-class="{disabled: ctrl.isLastPage()}"
ng-disabled="ctrl.isLastPage()">
Show more versions
</a>
</div>
</div>
</div>
</div>
<div class="gf-form-group" ng-show="ctrl.mode === 'list'">
<div class="gf-form-button-row">
<a type="button"
class="btn gf-form-button btn-primary"
ng-if="ctrl.revisions.length > 1"
ng-class="{disabled: !ctrl.isComparable()}"
ng-click="ctrl.getDiff(ctrl.diff)"
bs-tooltip="ctrl.isComparable() ? '' : 'Select 2 versions to start comparing'">
<i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
</a>
<a type="button"
class="btn gf-form-button btn-inverse"
ng-if="ctrl.revisions.length >= ctrl.limit"
ng-click="ctrl.addToLog()"
ng-class="{disabled: ctrl.isLastPage()}"
ng-disabled="ctrl.isLastPage()">
Show more versions
</a>
</div>
</div>
</div>
</div>
</div>

17
public/sass/components/_filter-table.scss
View File

@ -19,24 +19,21 @@
.filter-table tr {
background: $grafanaListBackground;
border-bottom: 2px solid $page-bg;
border-bottom: 3px solid $page-bg;
}
.filter-table th {
width: auto;
padding: 10px 15px 10px 0;
padding: $table-cell-padding;
text-align: left;
&:first-child {
padding-left: 15px;
}
}
.filter-table td {
padding: 15px 15px 15px 0;
padding: $table-cell-padding;
&:first-child {
padding-left: 15px;
&.filter-table__switch-cell {
padding: 0;
border-right: 3px solid $page-bg;
}
}
@ -55,3 +52,5 @@
.filter-table .expanded > td {
padding-bottom: 0;
}

4
public/sass/components/_gf-form.scss
View File

@ -232,10 +232,6 @@ $gf-form-margin: 0.25rem;
flex-grow: 0;
}
.gf-form-switch {
margin-right: $gf-form-margin;
}
.natural-language-input {
&input[type="number"] {
font-size: $font-size-base;

17
public/sass/components/_switch.scss
View File

@ -11,6 +11,7 @@ $switch-height: 1.5rem;
max-width: 4.5rem;
flex-grow: 1;
min-width: 4.0rem;
margin-right: $gf-form-margin;
input {
position: absolute;
@ -42,8 +43,10 @@ $switch-height: 1.5rem;
color: #fff;
font-size: $font-size-sm;
text-align: center;
line-height: 2.8rem;
font-size: 150%;
display: flex;
flex-direction: column;
justify-content: center;
}
&:hover {
@ -89,6 +92,14 @@ $switch-height: 1.5rem;
transform: rotateY(0);
}
&--table-cell {
margin-bottom: 0;
margin-right: 0;
input + label {
height: 3.6rem;
}
}
}
gf-form-switch[disabled] {
@ -96,5 +107,9 @@ gf-form-switch[disabled] {
.gf-form-switch input + label {
cursor: default;
pointer-events: none !important;
&::before {
color: $text-color-faint;
text-shadow: none;
}
}
}

58
public/sass/pages/_history.scss
View File

@ -1,61 +1,3 @@
// 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
.history-list {