diff --git a/src/app/pages/form/inputs/inputs.html b/src/app/pages/form/inputs/inputs.html index c7fb0be..13bd467 100644 --- a/src/app/pages/form/inputs/inputs.html +++ b/src/app/pages/form/inputs/inputs.html @@ -26,9 +26,15 @@ ba-panel-class="with-scroll">
+
-
+
+ +
+
+
+
'; }, 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(); - }); - + var input = $(elem).find('input'); + input.bootstrapSwitch({ + size: 'small', + onColor: attr.color }); + input.on('switchChange.bootstrapSwitch', function(event, state) { + scope.ngModel = state; + scope.$apply(); + }); + } }; } diff --git a/src/app/pages/form/inputs/widgets/switch/switch.html b/src/app/pages/form/inputs/widgets/oldSwitches/switch.html similarity index 82% rename from src/app/pages/form/inputs/widgets/switch/switch.html rename to src/app/pages/form/inputs/widgets/oldSwitches/switch.html index c8b0034..1a79779 100644 --- a/src/app/pages/form/inputs/widgets/switch/switch.html +++ b/src/app/pages/form/inputs/widgets/oldSwitches/switch.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js b/src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js new file mode 100644 index 0000000..275ce5f --- /dev/null +++ b/src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js @@ -0,0 +1,23 @@ +/** + * @author v.lugovsky + * created on 10.12.2016 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.form') + .controller('SwitchDemoPanelCtrl', SwitchDemoPanelCtrl); + + /** @ngInject */ + function SwitchDemoPanelCtrl() { + var vm = this; + vm.switches = { + s1: true, + s2: false, + s3: true, + s4: true, + s5: false + }; + } + +})(); diff --git a/src/app/pages/form/inputs/widgets/switches/switch.html b/src/app/pages/form/inputs/widgets/switches/switch.html new file mode 100644 index 0000000..571ac43 --- /dev/null +++ b/src/app/pages/form/inputs/widgets/switches/switch.html @@ -0,0 +1,9 @@ +
+ + + + + +
+ + diff --git a/src/app/theme/inputs/baSwitcher/baSwitcher.html b/src/app/theme/inputs/baSwitcher/baSwitcher.html new file mode 100644 index 0000000..56b58db --- /dev/null +++ b/src/app/theme/inputs/baSwitcher/baSwitcher.html @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/src/app/theme/inputs/baSwitcher/baSwitcher.js b/src/app/theme/inputs/baSwitcher/baSwitcher.js new file mode 100644 index 0000000..69ca69a --- /dev/null +++ b/src/app/theme/inputs/baSwitcher/baSwitcher.js @@ -0,0 +1,22 @@ +/** + * @author v.lugovsky + * created on 10.12.2016 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.theme.inputs') + .directive('baSwitcher', baSwitcher); + + /** @ngInject */ + function baSwitcher() { + return { + templateUrl: 'app/theme/inputs/baSwitcher/baSwitcher.html', + scope: { + switcherStyle: '@', + switcherValue: '=' + } + }; + } + +})(); diff --git a/src/app/theme/inputs/inputs.module.js b/src/app/theme/inputs/inputs.module.js new file mode 100644 index 0000000..bf0bd16 --- /dev/null +++ b/src/app/theme/inputs/inputs.module.js @@ -0,0 +1,10 @@ +/** + * @author v.lugovsky + * created on 10.12.2016 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.theme.inputs', []); + +})(); diff --git a/src/app/theme/theme.module.js b/src/app/theme/theme.module.js index adf34ba..49525c5 100644 --- a/src/app/theme/theme.module.js +++ b/src/app/theme/theme.module.js @@ -11,7 +11,8 @@ 'angular-chartist', 'angular.morris-chart', 'textAngular', - 'BlurAdmin.theme.components' + 'BlurAdmin.theme.components', + 'BlurAdmin.theme.inputs' ]); })(); diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss index d08e78f..24191cf 100644 --- a/src/sass/app/_form.scss +++ b/src/sass/app/_form.scss @@ -88,6 +88,79 @@ textarea.form-control { } } +@mixin setSwitcherColor($color) { + border: solid 1px $color; + .handle.handle-on { + background-color: $color; + } +} + +.switcher-container { + margin-right: 10px; + font-weight: normal; + 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; + width: 126px; + cursor: pointer; + transform: translate3d(-42px, 0, 0); + transition: transform .2s linear; + .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 { + transform: translate3d(0, 0, 0); + } + } + +} + + .switch-container { display: inline-block; &.primary { @@ -562,3 +635,4 @@ label.custom-input-danger { .sub-little-text { font-size: 12px; } +