Skip to content

N
nexpie-grafana-theme
Commit 14326b62 by Torkel Ödegaard
Options

ux(): checkbox now works in dark and white theme

parent 1dabd683
Showing with 81 additions and 86 deletions
pkg/api/api.go
...@@ -45,6 +45,8 @@ func Register(r *macaron.Macaron) { ...@@ -45,6 +45,8 @@ func Register(r *macaron.Macaron) {
r.Get("/admin/orgs/edit/:id", reqGrafanaAdmin, Index) r.Get("/admin/orgs/edit/:id", reqGrafanaAdmin, Index)
r.Get("/admin/stats", reqGrafanaAdmin, Index) r.Get("/admin/stats", reqGrafanaAdmin, Index)
r.Get("/styleguide", reqSignedIn, Index)
r.Get("/plugins", reqSignedIn, Index) r.Get("/plugins", reqSignedIn, Index)
r.Get("/plugins/:id/edit", reqSignedIn, Index) r.Get("/plugins/:id/edit", reqSignedIn, Index)
r.Get("/plugins/:id/page/:page", reqSignedIn, Index) r.Get("/plugins/:id/page/:page", reqSignedIn, Index)
......
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';
var template = ` var template = `
<label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label> <label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
<div class="gf-form-switch {{ctrl.switchClass}}" > <div class="gf-form-switch {{ctrl.switchClass}}">
<input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()"> <input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<label for="check-{{$id}}" data-on="Yes" data-off="No"></label> <label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
</div> </div>
...@@ -15,6 +15,11 @@ var template = ` ...@@ -15,6 +15,11 @@ var template = `
export class SwitchCtrl { export class SwitchCtrl {
onChange: any; onChange: any;
checked: any;
constructor() {
console.log('property: ' + this.checked, this);
}
internalOnChange() { internalOnChange() {
return new Promise(resolve => { return new Promise(resolve => {
......
public/app/features/dashboard/partials/settings.html
...@@ -56,19 +56,19 @@ ...@@ -56,19 +56,19 @@
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label">Title</span> <span class="gf-form-label">Title</span>
<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input> <input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
<editor-checkbox text="Show title" model="row.showTitle"></editor-checkbox>
</div> </div>
<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<button class="btn btn-inverse btn-mini" style="margin-right: 5px;" ng-click="dashboard.rows = _.without(dashboard.rows,row)"> <button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
<i class="fa fa-trash"></i>
</button>
<button class="btn btn-inverse btn-mini" ng-hide="$first" style="margin-right: 5px;" ng-click="_.move(dashboard.rows,$index,$index-1)">
<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i> <i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
</button> </button>
<button class="btn btn-inverse btn-mini" ng-hide="$last" style="margin-right: 5px;" ng-click="_.move(dashboard.rows,$index,$index+1)"> <button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i> <i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
</button> </button>
<button class="btn btn-inverse gf-form-btn" click="dashboard.rows = _.without(dashboard.rows,row)">
<i class="fa fa-trash"></i>
</button>
</div> </div>
</div> </div>
</div> </div>
......
public/app/features/plugins/partials/ds_edit.html
...@@ -27,58 +27,59 @@ ...@@ -27,58 +27,59 @@
<form name="ctrl.editForm"> <form name="ctrl.editForm">
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form-inline">
<span class="gf-form-label width-7">Name</span> <div class="gf-form">
<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required> <span class="gf-form-label width-7">Name</span>
<info-popover offset="0px -95px"> <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
The name is used when you select the data source in panels. <info-popover offset="0px -130px">
The <code>Default</code> data source is preselected in new The name is used when you select the data source in panels.
panels. The <code>Default</code> data source is preselected in new
</info-popover> panels.
</info-popover>
</div>
<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div>
<editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox> <div class="gf-form">
</div> <span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
</div>
</div>
</div>
<div class="gf-form"> <rebuild-on-change property="ctrl.datasourceMeta.id">
<span class="gf-form-label width-7">Type</span> <plugin-component type="datasource-config-ctrl">
<div class="gf-form-select-wrapper"> </plugin-component>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select> </rebuild-on-change>
</div>
</div>
</div>
<rebuild-on-change property="ctrl.datasourceMeta.id"> <div ng-if="ctrl.testing" style="margin-top: 25px">
<plugin-component type="datasource-config-ctrl"> <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
</plugin-component> <h5 ng-show="ctrl.testing.done">Test results</h5>
</rebuild-on-change> <div class="alert-{{ctrl.testing.status}} alert">
<div class="alert-title">{{ctrl.testing.title}}</div>
<div ng-bind='ctrl.testing.message'></div>
</div>
</div>
<div ng-if="ctrl.testing" style="margin-top: 25px"> <div class="gf-form-button-row">
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5> <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
<h5 ng-show="ctrl.testing.done">Test results</h5> <button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
<div class="alert-{{ctrl.testing.status}} alert"> <button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
<div class="alert-title">{{ctrl.testing.title}}</div> Test Connection
<div ng-bind='ctrl.testing.message'></div> </button>
</div>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
<button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
Test Connection
</button>
<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()"> <button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
Delete Delete
</button> </button>
<a class="btn btn-link" href="datasources">Cancel</a> <a class="btn btn-link" href="datasources">Cancel</a>
</div> </div>
</form> </form>
</div> </div>
<div ng-if="ctrl.tabIndex === 1" class="tab-content"> <div ng-if="ctrl.tabIndex === 1" class="tab-content">
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list> <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
</div> </div>
</div> </div>
public/sass/_variables.dark.scss
...@@ -48,14 +48,17 @@ $critical: #ed2e18; ...@@ -48,14 +48,17 @@ $critical: #ed2e18;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: rgb(20,20,20); $body-bg: rgb(20,20,20);
$page-bg: $dark-2; $page-bg: $dark-2;
$body-color: $gray-4; $body-color: $gray-4;
$text-color: $gray-4; $text-color: $gray-4;
$text-color-strong: $white; $text-color-strong: $white;
$text-color-weak: $gray-2; $text-color-weak: $gray-2;
$text-color-faint: $gray-1;
$text-color-emphasis: $gray-5; $text-color-emphasis: $gray-5;
$text-shadow-strong: 1px 1px 4px $black;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%); $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
......
public/sass/_variables.light.scss
...@@ -60,8 +60,12 @@ $body-color: $gray-1; ...@@ -60,8 +60,12 @@ $body-color: $gray-1;
$text-color: $gray-1; $text-color: $gray-1;
$text-color-strong: $white; $text-color-strong: $white;
$text-color-weak: $gray-1; $text-color-weak: $gray-1;
$text-color-faint: $gray-3;
$text-color-emphasis: $dark-5; $text-color-emphasis: $dark-5;
$text-shadow-strong: none;
$text-shadow-faint: none;
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%); $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); $page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
......
public/sass/components/_gf-form.scss
...@@ -141,18 +141,10 @@ $gf-form-margin: 0.25rem; ...@@ -141,18 +141,10 @@ $gf-form-margin: 0.25rem;
} }
} }
<<<<<<< HEAD
||||||| merged common ancestors
.gf-form-select-wrapper + .gf-form-select-wrapper {
margin-left: $gf-form-label-margin;
}
=======
.gf-form--v-stretch { .gf-form--v-stretch {
align-items: stretch; align-items: stretch;
} }
>>>>>>> master
.gf-form-btn { .gf-form-btn {
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
...@@ -160,15 +152,11 @@ $gf-form-margin: 0.25rem; ...@@ -160,15 +152,11 @@ $gf-form-margin: 0.25rem;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
} }
<<<<<<< HEAD
.gf-form-switch { .gf-form-switch {
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
} }
||||||| merged common ancestors
=======
.natural-language-input { .natural-language-input {
&input[type="number"] { &input[type="number"] {
font-size: $font-size-base; font-size: $font-size-base;
...@@ -178,4 +166,3 @@ $gf-form-margin: 0.25rem; ...@@ -178,4 +166,3 @@ $gf-form-margin: 0.25rem;
} }
} }
>>>>>>> master
public/sass/components/_switch.scss
...@@ -50,40 +50,33 @@ $switch-height: 1.5rem; ...@@ -50,40 +50,33 @@ $switch-height: 1.5rem;
input + label:before { input + label:before {
@include buttonBackground($input-bg, lighten($input-bg, 5%)); @include buttonBackground($input-bg, lighten($input-bg, 5%));
color: $text-color; color: $text-color;
text-shadow: 1px 1px 4px rgb(45, 45, 45); text-shadow: $text-shadow-faint;
} }
input + label:after { input + label:after {
@include buttonBackground($input-bg, lighten($input-bg, 5%)); @include buttonBackground($input-bg, lighten($input-bg, 5%));
color: lighten(#FF8600, 10%); color: lighten($orange, 10%);
text-shadow: 1px 1px 4px rgb(25, 25, 25); text-shadow: $text-shadow-strong;
} }
} }
input + label:before { input + label:before {
//content: attr(data-off);
font-family: 'FontAwesome'; font-family: 'FontAwesome';
//content: "\f00c";
content: "\f096"; // square-o content: "\f096"; // square-o
//content: "\f046"; // check-square-o color: $text-color-faint;
color: darken($text-color-weak, 10%); //transition: transform 0.4s;
transition: transform 0.4s;
backface-visibility: hidden; backface-visibility: hidden;
text-shadow: 1px 1px 4px rgb(45, 45, 45); text-shadow: $text-shadow-faint;
} }
input + label:after { input + label:after {
//@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
//content: attr(data-on);
//content: "\f00c";
content: "\f046"; // check-square-o content: "\f046"; // check-square-o
color: #FF8600; color: $orange;
text-shadow: 1px 1px 4px rgb(25, 25, 25); text-shadow: $text-shadow-strong;
font-family: 'FontAwesome'; font-family: 'FontAwesome';
transition: transform 0.4s; //transition: transform 0.4s;
transform: rotateY(180deg); transform: rotateY(180deg);
backface-visibility: hidden; backface-visibility: hidden;
} }
......
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