Skip to content

N
nexpie-grafana-theme
Commit a685e46f by Torkel Ödegaard
Options

ux(): minor tweaks

parent d0d21ba9
Showing with 35 additions and 37 deletions
public/app/features/dashboard/timepicker/dropdown.html
......@@ -35,15 +35,13 @@
<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
</div>
<label class="small">Refreshing every:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
</div>
<div class="gf-form">
<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
</div>
</div>
......
public/app/features/datasources/partials/edit.html
......@@ -41,7 +41,7 @@
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn btn-link" href="datasources">Cancel</a>
......
public/app/features/styleguide/styleguide.html
......@@ -26,20 +26,14 @@
</tab>
<tab heading="Buttons">
<div class="style-guide-button-list p-a-2">
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-info">btn-info</button>
<button class="btn btn-inverse">btn-inverse</button>
<button class="btn btn-success">btn-success</button>
<button class="btn btn-warning">btn-warning</button>
<button class="btn btn-danger">btn-danger</button>
<div ng-repeat="variant in ctrl.buttonVariants" class="row">
<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
btn{{variant}}{{buttonName}} {{btnSize}}
</button>
</div>
</div>
<div class="style-guide-button-list p-a-2">
<button class="btn btn-primary btn-small">btn-small</button>
<button class="btn btn-success btn-large">btn-large</button>
</div>
</tab>
<tab heading="Forms">
</tab>
......
public/app/features/styleguide/styleguide.ts
......@@ -6,6 +6,9 @@ import _ from 'lodash';
class StyleGuideCtrl {
colors: any = [];
theme: string;
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
buttonSizes = ['btn-small', '', 'btn-large'];
buttonVariants = ['-', '-outline-'];
/** @ngInject **/
constructor($http) {
......
public/app/partials/dashboard.html
......@@ -100,7 +100,7 @@
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
<div class="span12" style="text-align:right;">
<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-info btn-small">
<span style="margin-right: 10px;" ng-click="addRowDefault()" class="pointer btn btn-secondary btn-small">
<span><i class="fa fa-plus"></i> ADD ROW</span>
</span>
</div>
......
public/sass/_variables.dark.scss
......@@ -92,8 +92,8 @@ $modal-background: $black;
$code-tag-bg: #444;
// Lists
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black;
$grafanaListHighlight: #333;
......@@ -117,20 +117,20 @@ $table-border: $dark-3; // table and cell border
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg: lighten($green, 3%);
$btn-warning-bg: $brand-warning;
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%);
$btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-text-color: $link-color;
$btn-link-color: $gray-3;
......@@ -226,7 +226,7 @@ $successText: #468847;
$successBackground: $btn-success-bg;
$infoText: $blue-dark;
$infoBackground: $btn-info-bg;
$infoBackground: $blue-dark;
// Tooltips and popovers
// -------------------------
......
public/sass/_variables.light.scss
......@@ -31,7 +31,7 @@ $white: #fff;
// Accent colors
// -------------------------
$blue: #2AB2E4;
$blue-dark: #75CAEB;
$blue-dark: #3CAAD6;
$green: #28B62C;
$red: #FF4136;
$yellow: #FF851B;
......@@ -125,8 +125,8 @@ $scrollbarBorder: $gray-4;
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 4%);
$btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
......@@ -250,8 +250,8 @@ $successText: lighten($green, 10%);
$successBackground: $green;
$successBorder: transparent;
$infoText: lighten($purple,10%);
$infoBackground: $purple;
$infoText: $blue;
$infoBackground: $blue-dark;
$infoBorder: transparent;
......
public/sass/components/_buttons.scss
......@@ -65,7 +65,7 @@
}
.btn-link {
color: $btn-link-color;
color: $btn-link-color;
}
// Set the backgrounds
......@@ -86,8 +86,8 @@
@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
}
// Info appears as a neutral blue
.btn-info {
@include buttonBackground($btn-info-bg, $btn-info-bg-hl);
.btn-secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}
// Inverse appears as dark gray
.btn-inverse {
......@@ -100,10 +100,10 @@
@include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
@include button-outline-variant($btn-inverse-bg);
@include button-outline-variant($btn-secondary-bg);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg);
.btn-outline-inverse {
@include button-outline-variant($btn-inverse-bg);
}
.btn-outline-success {
@include button-outline-variant($btn-success-bg);
......
public/sass/layout/_page.scss
......@@ -18,6 +18,7 @@
}
}
$color-page-hero-bg: #2e2e2e;
.page-container {
background-color: $page-bg;
position: relative;
......@@ -26,6 +27,7 @@
margin-left: 0;
min-height: calc(100% - 54px);
padding-bottom: $spacer * 5;
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%);
}
.page-header {
......@@ -40,7 +42,7 @@
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 4px solid transparent;
border-bottom: 2px solid transparent;
h1 {
font-style: italic;
......
public/sass/pages/_styleguide.scss
......@@ -16,6 +16,7 @@
.style-guide-button-list {
padding: $spacer;
button {
display: block;
margin: 0 $spacer $spacer 0;
}
}
......
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