apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/8569/head
Torkel Ödegaard 9 years ago
parent 689e366f59
commit 88da3a99e1
6 changed files with 87 additions and 135 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      public/app/core/components/switch.ts
  2. 123
      public/app/features/dashboard/history/history.html
  3. 17
      public/sass/components/_filter-table.scss
  4. 4
      public/sass/components/_gf-form.scss
  5. 17
      public/sass/components/_switch.scss
  6. 58
      public/sass/pages/_history.scss

3
public/app/core/components/switch.ts
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 {

Write Preview
Loading…
Cancel
Save