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

ux(): minor tweaks

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-20 11:05:06 +01:00
parent d0d21ba9a6
commit a685e46fb6
10 changed files with 35 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/dashboard/timepicker/dropdown.html
View File

@ -35,15 +35,13 @@
<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker> <datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
</div> </div>
<label class="small">Refreshing every:</label> <label class="small">Refreshing every:</label>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl"> <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> <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>
<div class="gf-form"> <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>
</div> </div>

2
public/app/features/datasources/partials/edit.html
View File

@ -41,7 +41,7 @@
<div class="gf-form-button-row"> <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()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</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 Test Connection
</button> </button>
<a class="btn btn-link" href="datasources">Cancel</a> <a class="btn btn-link" href="datasources">Cancel</a>

18
public/app/features/styleguide/styleguide.html
View File

@ -26,20 +26,14 @@
</tab> </tab>
<tab heading="Buttons"> <tab heading="Buttons">
<div class="style-guide-button-list p-a-2"> <div ng-repeat="variant in ctrl.buttonVariants" class="row">
<button class="btn btn-primary">btn-primary</button> <div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
<button class="btn btn-info">btn-info</button> <button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
<button class="btn btn-inverse">btn-inverse</button> btn{{variant}}{{buttonName}} {{btnSize}}
<button class="btn btn-success">btn-success</button> </button>
<button class="btn btn-warning">btn-warning</button> </div>
<button class="btn btn-danger">btn-danger</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>
<tab heading="Forms"> <tab heading="Forms">
</tab> </tab>

3
public/app/features/styleguide/styleguide.ts
View File

@ -6,6 +6,9 @@ import _ from 'lodash';
class StyleGuideCtrl { class StyleGuideCtrl {
colors: any = []; colors: any = [];
theme: string; theme: string;
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
buttonSizes = ['btn-small', '', 'btn-large'];
buttonVariants = ['-', '-outline-'];
/** @ngInject **/ /** @ngInject **/
constructor($http) { constructor($http) {

2
public/app/partials/dashboard.html
View File

@ -100,7 +100,7 @@
<div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen"> <div ng-show='dashboardMeta.canEdit' class="row-fluid add-row-panel-hint" ng-hide="dashboard.meta.fullscreen">
<div class="span12" style="text-align:right;"> <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><i class="fa fa-plus"></i> ADD ROW</span>
</span> </span>
</div> </div>

16
public/sass/_variables.dark.scss
View File

@ -92,8 +92,8 @@ $modal-background: $black;
$code-tag-bg: #444; $code-tag-bg: #444;
// Lists // Lists
$grafanaListBackground: $dark-3; $grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%); $grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3; $grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black; $grafanaListBorderBottom: $black;
$grafanaListHighlight: #333; $grafanaListHighlight: #333;
@ -117,20 +117,20 @@ $table-border: $dark-3; // table and cell border
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-info-bg: lighten($purple, 3%); $btn-secondary-bg: $blue-dark;
$btn-info-bg-hl: darken($purple, 3%); $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-success-bg: lighten($green, 3%);
$btn-warning-bg: $brand-warning; $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: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%); $btn-danger-bg-hl: darken($red, 3%);
$btn-inverse-bg: $dark-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-inverse-text-color: $link-color;
$btn-link-color: $gray-3; $btn-link-color: $gray-3;
@ -226,7 +226,7 @@ $successText: #468847;
$successBackground: $btn-success-bg; $successBackground: $btn-success-bg;
$infoText: $blue-dark; $infoText: $blue-dark;
$infoBackground: $btn-info-bg; $infoBackground: $blue-dark;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------

10
public/sass/_variables.light.scss
View File

@ -31,7 +31,7 @@ $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #2AB2E4; $blue: #2AB2E4;
$blue-dark: #75CAEB; $blue-dark: #3CAAD6;
$green: #28B62C; $green: #28B62C;
$red: #FF4136; $red: #FF4136;
$yellow: #FF851B; $yellow: #FF851B;
@ -125,8 +125,8 @@ $scrollbarBorder: $gray-4;
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-info-bg: lighten($purple, 3%); $btn-secondary-bg: $blue-dark;
$btn-info-bg-hl: darken($purple, 3%); $btn-secondary-bg-hl: lighten($blue-dark, 4%);
$btn-success-bg: lighten($green, 3%); $btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%); $btn-success-bg-hl: darken($green, 3%);
@ -250,8 +250,8 @@ $successText: lighten($green, 10%);
$successBackground: $green; $successBackground: $green;
$successBorder: transparent; $successBorder: transparent;
$infoText: lighten($purple,10%); $infoText: $blue;
$infoBackground: $purple; $infoBackground: $blue-dark;
$infoBorder: transparent; $infoBorder: transparent;

10
public/sass/components/_buttons.scss
View File

@ -86,8 +86,8 @@
@include buttonBackground($btn-success-bg, $btn-success-bg-hl); @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
} }
// Info appears as a neutral blue // Info appears as a neutral blue
.btn-info { .btn-secondary {
@include buttonBackground($btn-info-bg, $btn-info-bg-hl); @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
} }
// Inverse appears as dark gray // Inverse appears as dark gray
.btn-inverse { .btn-inverse {
@ -100,10 +100,10 @@
@include button-outline-variant($btn-primary-bg); @include button-outline-variant($btn-primary-bg);
} }
.btn-outline-secondary { .btn-outline-secondary {
@include button-outline-variant($btn-inverse-bg); @include button-outline-variant($btn-secondary-bg);
} }
.btn-outline-info { .btn-outline-inverse {
@include button-outline-variant($btn-info-bg); @include button-outline-variant($btn-inverse-bg);
} }
.btn-outline-success { .btn-outline-success {
@include button-outline-variant($btn-success-bg); @include button-outline-variant($btn-success-bg);

4
public/sass/layout/_page.scss
View File

@ -18,6 +18,7 @@
} }
} }
$color-page-hero-bg: #2e2e2e;
.page-container { .page-container {
background-color: $page-bg; background-color: $page-bg;
position: relative; position: relative;
@ -26,6 +27,7 @@
margin-left: 0; margin-left: 0;
min-height: calc(100% - 54px); min-height: calc(100% - 54px);
padding-bottom: $spacer * 5; padding-bottom: $spacer * 5;
background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%);
} }
.page-header { .page-header {
@ -40,7 +42,7 @@
border-top: 0; border-top: 0;
border-right: 0; border-right: 0;
border-left: 0; border-left: 0;
border-bottom: 4px solid transparent; border-bottom: 2px solid transparent;
h1 { h1 {
font-style: italic; font-style: italic;

1
public/sass/pages/_styleguide.scss
View File

@ -16,6 +16,7 @@
.style-guide-button-list { .style-guide-button-list {
padding: $spacer; padding: $spacer;
button { button {
display: block;
margin: 0 $spacer $spacer 0; margin: 0 $spacer $spacer 0;
} }
} }