refactor(form inputs): add css switches
TNDRM
parent
f807e79697
commit
c20c56b269
|
|
@ -26,9 +26,15 @@
|
|||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/form/inputs/widgets/checkboxesRadios.html'"></div>
|
||||
</div>
|
||||
|
||||
<div ba-panel ba-panel-title="On/Off Switches" ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/form/inputs/widgets/switch/switch.html'"></div>
|
||||
</div>
|
||||
|
||||
<div ba-panel ba-panel-title="Old On/Off Switches (Deprecated)" ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/form/inputs/widgets/oldSwitch/switch.html'"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.form')
|
||||
.directive('switch', switchDirective);
|
||||
|
||||
/** @ngInject */
|
||||
function switchDirective($timeout) {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
replace: true,
|
||||
scope: {
|
||||
ngModel: '='
|
||||
},
|
||||
template: function(el, attrs) {
|
||||
return '<div class="switch-container ' + (attrs.color || '') + '"><input type="checkbox" ng-model="ngModel"></div>';
|
||||
},
|
||||
link: function (scope, elem, attr) {
|
||||
$timeout(function(){
|
||||
var input = $(elem).find('input');
|
||||
input.bootstrapSwitch({
|
||||
size: 'small',
|
||||
onColor: attr.color
|
||||
});
|
||||
input.on('switchChange.bootstrapSwitch', function(event, state) {
|
||||
scope.ngModel = state;
|
||||
scope.$apply();
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<div ng-controller="SwitchPanelCtrl as switchPanelVm" class="switches clearfix">
|
||||
<switch color="primary" ng-model="switchPanelVm.switcherValues.primary"></switch>
|
||||
<switch color="warning" ng-model="switchPanelVm.switcherValues.warning"></switch>
|
||||
<switch color="danger" ng-model="switchPanelVm.switcherValues.danger"></switch>
|
||||
<switch color="info" ng-model="switchPanelVm.switcherValues.info"></switch>
|
||||
<switch color="success" ng-model="switchPanelVm.switcherValues.success"></switch>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
<label class="switcher-container">
|
||||
<input type="checkbox">
|
||||
<div class="switcher primary">
|
||||
<div class="handle-container">
|
||||
<span class="handle handle-on">ON</span>
|
||||
<span class="handle"></span>
|
||||
<span class="handle handle-off">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switcher-container">
|
||||
<input type="checkbox">
|
||||
<div class="switcher success">
|
||||
<div class="handle-container">
|
||||
<span class="handle handle-on">ON</span>
|
||||
<span class="handle"></span>
|
||||
<span class="handle handle-off">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switcher-container">
|
||||
<input type="checkbox">
|
||||
<div class="switcher warning">
|
||||
<div class="handle-container">
|
||||
<span class="handle handle-on">ON</span>
|
||||
<span class="handle"></span>
|
||||
<span class="handle handle-off">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switcher-container">
|
||||
<input type="checkbox">
|
||||
<div class="switcher danger">
|
||||
<div class="handle-container">
|
||||
<span class="handle handle-on">ON</span>
|
||||
<span class="handle"></span>
|
||||
<span class="handle handle-off">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="switcher-container">
|
||||
<input type="checkbox">
|
||||
<div class="switcher info">
|
||||
<div class="handle-container">
|
||||
<span class="handle handle-on">ON</span>
|
||||
<span class="handle"></span>
|
||||
<span class="handle handle-off">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
|
@ -1,37 +1,24 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
* @author p.maslava
|
||||
* created on 30.11.2016
|
||||
* @deprecated
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.form')
|
||||
.directive('switch', switchDirective);
|
||||
.directive('switchInput', switchDirective);
|
||||
|
||||
/** @ngInject */
|
||||
function switchDirective($timeout) {
|
||||
function switchDirective() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
replace: true,
|
||||
scope: {
|
||||
ngModel: '='
|
||||
},
|
||||
template: function(el, attrs) {
|
||||
return '<div class="switch-container ' + (attrs.color || '') + '"><input type="checkbox" ng-model="ngModel"></div>';
|
||||
},
|
||||
link: function (scope, elem, attr) {
|
||||
$timeout(function(){
|
||||
var input = $(elem).find('input');
|
||||
input.bootstrapSwitch({
|
||||
size: 'small',
|
||||
onColor: attr.color
|
||||
});
|
||||
input.on('switchChange.bootstrapSwitch', function(event, state) {
|
||||
scope.ngModel = state;
|
||||
scope.$apply();
|
||||
});
|
||||
|
||||
});
|
||||
restrict: 'A',
|
||||
template: function(el, attr) {
|
||||
var switcher = '<input type="checkbox"><div class="switcher '
|
||||
+ (attr.switchInput || '') +
|
||||
'"><div class="handle-container"><span class="handle handle-on">ON</span>' +
|
||||
'<span class="handle"></span><span class="handle handle-off">OFF</span></div></div>';
|
||||
return switcher
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div ng-controller="SwitchPanelCtrl as switchPanelVm" class="switches clearfix">
|
||||
<switch color="primary" ng-model="switchPanelVm.switcherValues.primary"></switch>
|
||||
<switch color="warning" ng-model="switchPanelVm.switcherValues.warning"></switch>
|
||||
<switch color="danger" ng-model="switchPanelVm.switcherValues.danger"></switch>
|
||||
<switch color="info" ng-model="switchPanelVm.switcherValues.info"></switch>
|
||||
<switch color="success" ng-model="switchPanelVm.switcherValues.success"></switch>
|
||||
</div>
|
||||
<label class="switcher-container" switch-input="primary"></label>
|
||||
<label class="switcher-container" switch-input="success"></label>
|
||||
<label class="switcher-container" switch-input="warning"></label>
|
||||
<label class="switcher-container" switch-input="danger"></label>
|
||||
<label class="switcher-container" switch-input="info"></label>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,78 @@ textarea.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
@mixin setSwitcherColor($color) {
|
||||
border: solid 1px $color;
|
||||
.handle.handle-on {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.switcher-container {
|
||||
margin-right: 10px;
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.switcher {
|
||||
&.primary {
|
||||
@include setSwitcherColor($primary);
|
||||
}
|
||||
&.success {
|
||||
@include setSwitcherColor($success);
|
||||
}
|
||||
&.warning {
|
||||
@include setSwitcherColor($warning);
|
||||
}
|
||||
&.danger {
|
||||
@include setSwitcherColor($danger);
|
||||
}
|
||||
&.info {
|
||||
@include setSwitcherColor($primary-light);
|
||||
}
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 84px;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* this fixes the overflow:hidden in Chrome */
|
||||
-webkit-transform: translateZ(0);
|
||||
/* Hide default HTML checkbox */
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.handle-container {
|
||||
position: relative;
|
||||
margin-left: 0px;
|
||||
width: 126px;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
.handle {
|
||||
width: 42px;
|
||||
float: left;
|
||||
line-height: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
&.handle-off {
|
||||
background: $border;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input:checked + .switcher {
|
||||
border: solid 1px $border;
|
||||
.handle-container {
|
||||
margin-left: -42px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.switch-container {
|
||||
display: inline-block;
|
||||
&.primary {
|
||||
|
|
@ -562,3 +634,4 @@ label.custom-input-danger {
|
|||
.sub-little-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue