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 34 additions and 39 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,16 +27,17 @@ ...@@ -27,16 +27,17 @@
<form name="ctrl.editForm"> <form name="ctrl.editForm">
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Name</span> <span class="gf-form-label width-7">Name</span>
<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required> <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
<info-popover offset="0px -95px"> <info-popover offset="0px -130px">
The name is used when you select the data source in panels. The name is used when you select the data source in panels.
The <code>Default</code> data source is preselected in new The <code>Default</code> data source is preselected in new
panels. panels.
</info-popover> </info-popover>
</div>
<editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox> <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
</div> </div>
<div class="gf-form"> <div class="gf-form">
......
public/sass/_variables.dark.scss
...@@ -54,8 +54,11 @@ $body-color: $gray-4; ...@@ -54,8 +54,11 @@ $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