IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 13:39:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

switch slider changes

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-11-20 09:39:56 +01:00
parent 571cfab923
commit f44e634da4
3 changed files with 71 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/core/components/switch.ts
View File

@ -1,7 +1,7 @@
import coreModule from 'app/core/core_module';
const template = `
<label for="check-{{ctrl.id}}" class="gf-form-switch-container pointer">
<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
<div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
{{ctrl.label}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
@ -16,8 +16,14 @@ const template = `
`;
const checkboxTemplate = `
<label for="check-{{ctrl.id}}" class="gf-form-check-container">
<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
<div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
{{ctrl.label}}
<info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
{{ctrl.tooltip}}
</info-popover>
</div>
<div class="gf-form-checkbox {{ctrl.switchClass}}" ng-if="ctrl.show">
<input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
<span class="gf-form-switch__checkbox"></span>
</div>

16
public/app/features/plugins/partials/ds_http_settings.html
View File

@ -71,15 +71,21 @@
<h3 class="page-heading">Auth</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-switch>
<gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
<gf-form-checkbox class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-checkbox>
<gf-form-checkbox class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth
headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11"
switch-class="max-width-6"></gf-form-checkbox>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10"
checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for
verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11"
switch-class="max-width-6"></gf-form-checkbox>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10"
checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
</div>
</div>

85
public/sass/components/_switch.scss
View File

@ -33,6 +33,57 @@ gf-form-switch[disabled] {
width: 0;
height: 0;
}
}
/* The slider */
.gf-form-switch__slider {
position: absolute;
top: 8px;
left: 16px;
right: 14px;
bottom: 10px;
background: $switch-slider-off-bg;
border-radius: 8px;
height: 16px;
width: 29px;
&::before {
position: absolute;
content: '';
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background: $switch-slider-color;
transition: 0.4s;
border-radius: 50%;
box-shadow: $switch-slider-shadow;
}
}
input:checked + .gf-form-switch__slider {
background: $switch-slider-on-bg;
}
input:checked + .gf-form-switch__slider::before {
transform: translateX(14px);
}
.gf-form-checkbox {
position: relative;
display: inline-block;
width: 50px;
height: $gf-form-input-height;
background: $switch-bg;
border: 1px solid $input-border-color;
border-left: none;
border-radius: $input-border-radius;
input {
opacity: 0;
width: 0;
height: 0;
}
&--transparent {
background: transparent;
@ -64,40 +115,6 @@ gf-form-switch[disabled] {
}
}
/* The slider */
.gf-form-switch__slider {
position: absolute;
top: 8px;
left: 16px;
right: 14px;
bottom: 10px;
background: $switch-slider-off-bg;
border-radius: 8px;
height: 16px;
width: 29px;
&::before {
position: absolute;
content: '';
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background: $switch-slider-color;
transition: 0.4s;
border-radius: 50%;
box-shadow: $switch-slider-shadow;
}
}
input:checked + .gf-form-switch__slider {
background: $switch-slider-on-bg;
}
input:checked + .gf-form-switch__slider::before {
transform: translateX(14px);
}
.gf-form-switch__checkbox {
position: absolute;
left: 16px;