mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux(): checkbox now works in dark and white theme
This commit is contained in:
Torkel Ödegaard
parent
1dabd68327
commit
14326b626e
@ -45,6 +45,8 @@ func Register(r *macaron.Macaron) {
|
||||
r.Get("/admin/orgs/edit/:id", reqGrafanaAdmin, Index)
|
||||
r.Get("/admin/stats", reqGrafanaAdmin, Index)
|
||||
|
||||
r.Get("/styleguide", reqSignedIn, Index)
|
||||
|
||||
r.Get("/plugins", reqSignedIn, Index)
|
||||
r.Get("/plugins/:id/edit", reqSignedIn, Index)
|
||||
r.Get("/plugins/:id/page/:page", reqSignedIn, Index)
|
||||
|
||||
@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module';
|
||||
|
||||
var template = `
|
||||
<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()">
|
||||
<label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
|
||||
</div>
|
||||
@ -15,6 +15,11 @@ var template = `
|
||||
|
||||
export class SwitchCtrl {
|
||||
onChange: any;
|
||||
checked: any;
|
||||
|
||||
constructor() {
|
||||
console.log('property: ' + this.checked, this);
|
||||
}
|
||||
|
||||
internalOnChange() {
|
||||
return new Promise(resolve => {
|
||||
|
||||
@ -56,19 +56,19 @@
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">Title</span>
|
||||
<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>
|
||||
<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
|
||||
|
||||
<div class="gf-form">
|
||||
<button class="btn btn-inverse btn-mini" style="margin-right: 5px;" ng-click="dashboard.rows = _.without(dashboard.rows,row)">
|
||||
<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)">
|
||||
<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
|
||||
<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
@ -27,58 +27,59 @@
|
||||
|
||||
<form name="ctrl.editForm">
|
||||
<div class="gf-form-group">
|
||||
<div class="gf-form">
|
||||
<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>
|
||||
<info-popover offset="0px -95px">
|
||||
The name is used when you select the data source in panels.
|
||||
The <code>Default</code> data source is preselected in new
|
||||
panels.
|
||||
</info-popover>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<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>
|
||||
<info-popover offset="0px -130px">
|
||||
The name is used when you select the data source in panels.
|
||||
The <code>Default</code> data source is preselected in new
|
||||
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>
|
||||
<div class="gf-form">
|
||||
<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">
|
||||
<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>
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
|
||||
<rebuild-on-change property="ctrl.datasourceMeta.id">
|
||||
<plugin-component type="datasource-config-ctrl">
|
||||
</plugin-component>
|
||||
</rebuild-on-change>
|
||||
<div ng-if="ctrl.testing" style="margin-top: 25px">
|
||||
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
|
||||
<h5 ng-show="ctrl.testing.done">Test results</h5>
|
||||
<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">
|
||||
<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
|
||||
<h5 ng-show="ctrl.testing.done">Test results</h5>
|
||||
<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 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>
|
||||
<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()">
|
||||
Delete
|
||||
</button>
|
||||
<a class="btn btn-link" href="datasources">Cancel</a>
|
||||
</div>
|
||||
</button>
|
||||
<a class="btn btn-link" href="datasources">Cancel</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div ng-if="ctrl.tabIndex === 1" class="tab-content">
|
||||
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
|
||||
</div>
|
||||
<div ng-if="ctrl.tabIndex === 1" class="tab-content">
|
||||
<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -48,14 +48,17 @@ $critical: #ed2e18;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$body-bg: rgb(20,20,20);
|
||||
$page-bg: $dark-2;
|
||||
$body-color: $gray-4;
|
||||
$text-color: $gray-4;
|
||||
$text-color-strong: $white;
|
||||
$text-color-weak: $gray-2;
|
||||
$body-bg: rgb(20,20,20);
|
||||
$page-bg: $dark-2;
|
||||
$body-color: $gray-4;
|
||||
$text-color: $gray-4;
|
||||
$text-color-strong: $white;
|
||||
$text-color-weak: $gray-2;
|
||||
$text-color-faint: $gray-1;
|
||||
$text-color-emphasis: $gray-5;
|
||||
|
||||
$text-shadow-strong: 1px 1px 4px $black;
|
||||
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
||||
|
||||
// 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%);
|
||||
|
||||
@ -60,8 +60,12 @@ $body-color: $gray-1;
|
||||
$text-color: $gray-1;
|
||||
$text-color-strong: $white;
|
||||
$text-color-weak: $gray-1;
|
||||
$text-color-faint: $gray-3;
|
||||
$text-color-emphasis: $dark-5;
|
||||
|
||||
$text-shadow-strong: none;
|
||||
$text-shadow-faint: none;
|
||||
|
||||
// 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%);
|
||||
$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
|
||||
|
||||
@ -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 {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
>>>>>>> master
|
||||
.gf-form-btn {
|
||||
margin-right: $gf-form-margin;
|
||||
padding: $input-padding-y $input-padding-x;
|
||||
@ -160,15 +152,11 @@ $gf-form-margin: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
.gf-form-switch {
|
||||
margin-right: $gf-form-margin;
|
||||
}
|
||||
|
||||
||||||| merged common ancestors
|
||||
=======
|
||||
|
||||
.natural-language-input {
|
||||
&input[type="number"] {
|
||||
font-size: $font-size-base;
|
||||
@ -178,4 +166,3 @@ $gf-form-margin: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
>>>>>>> master
|
||||
|
||||
@ -50,40 +50,33 @@ $switch-height: 1.5rem;
|
||||
input + label:before {
|
||||
@include buttonBackground($input-bg, lighten($input-bg, 5%));
|
||||
color: $text-color;
|
||||
text-shadow: 1px 1px 4px rgb(45, 45, 45);
|
||||
text-shadow: $text-shadow-faint;
|
||||
}
|
||||
|
||||
input + label:after {
|
||||
@include buttonBackground($input-bg, lighten($input-bg, 5%));
|
||||
color: lighten(#FF8600, 10%);
|
||||
text-shadow: 1px 1px 4px rgb(25, 25, 25);
|
||||
color: lighten($orange, 10%);
|
||||
text-shadow: $text-shadow-strong;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input + label:before {
|
||||
//content: attr(data-off);
|
||||
font-family: 'FontAwesome';
|
||||
//content: "\f00c";
|
||||
|
||||
content: "\f096"; // square-o
|
||||
//content: "\f046"; // check-square-o
|
||||
color: darken($text-color-weak, 10%);
|
||||
transition: transform 0.4s;
|
||||
color: $text-color-faint;
|
||||
//transition: transform 0.4s;
|
||||
backface-visibility: hidden;
|
||||
text-shadow: 1px 1px 4px rgb(45, 45, 45);
|
||||
text-shadow: $text-shadow-faint;
|
||||
}
|
||||
|
||||
input + label:after {
|
||||
//@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
|
||||
//content: attr(data-on);
|
||||
//content: "\f00c";
|
||||
content: "\f046"; // check-square-o
|
||||
color: #FF8600;
|
||||
text-shadow: 1px 1px 4px rgb(25, 25, 25);
|
||||
color: $orange;
|
||||
text-shadow: $text-shadow-strong;
|
||||
|
||||
font-family: 'FontAwesome';
|
||||
transition: transform 0.4s;
|
||||
//transition: transform 0.4s;
|
||||
transform: rotateY(180deg);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user