refactor(form inputs): add css switches

src/app/pages/form/inputs/inputs.html

@@ -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 ng-include="'app/pages/form/inputs/widgets/switches/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/oldSwitches/switch.html'"></div>
+      </div>
+
     </div>
     <div class="col-md-6">
       <div

src/app/pages/form/inputs/widgets/oldSwitches/OldSwitchPanelCtrl.js

@@ -6,10 +6,10 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.form')
-      .controller('SwitchPanelCtrl', SwitchPanelCtrl);
+      .controller('OldSwitchPanelCtrl', OldSwitchPanelCtrl);
 
   /** @ngInject */
-  function SwitchPanelCtrl() {
+  function OldSwitchPanelCtrl() {
     var vm = this;
 
     vm.switcherValues = {

src/app/pages/form/inputs/widgets/oldSwitches/switch.directive.js

@@ -1,6 +1,7 @@
 /**
  * @author v.lugovksy
  * created on 16.12.2015
+ *
  */
 (function () {
   'use strict';
@@ -20,18 +21,16 @@
         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');
-          var input = $(elem).find('input');
+        input.bootstrapSwitch({
-          input.bootstrapSwitch({
+          size: 'small',
-            size: 'small',
+          onColor: attr.color
-            onColor: attr.color
-          });
-          input.on('switchChange.bootstrapSwitch', function(event, state) {
-            scope.ngModel = state;
-            scope.$apply();
-          });
-
         });
+        input.on('switchChange.bootstrapSwitch', function(event, state) {
+          scope.ngModel = state;
+          scope.$apply();
+        });
+
       }
     };
   }

src/app/pages/form/inputs/widgets/oldSwitches/switch.html

@@ -1,4 +1,4 @@
-<div ng-controller="SwitchPanelCtrl as switchPanelVm" class="switches clearfix">
+<div ng-controller="OldSwitchPanelCtrl 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>

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
+    };
+  }
+
+})();

src/app/pages/form/inputs/widgets/switches/switch.html

@@ -0,0 +1,9 @@
+<div ng-controller="SwitchDemoPanelCtrl as vm">
+  <ba-switcher switcher-style="primary" switcher-value="vm.switches.s1"></ba-switcher>
+  <ba-switcher switcher-style="success" switcher-value="vm.switches.s2"></ba-switcher>
+  <ba-switcher switcher-style="warning" switcher-value="vm.switches.s3"></ba-switcher>
+  <ba-switcher switcher-style="danger" switcher-value="vm.switches.s4"></ba-switcher>
+  <ba-switcher switcher-style="info" switcher-value="vm.switches.s5"></ba-switcher>
+</div>
+
+

src/app/theme/inputs/baSwitcher/baSwitcher.html

@@ -0,0 +1,10 @@
+<label class="switcher-container">
+  <input type="checkbox" ng-model="switcherValue">
+  <div class="switcher" ng-class="::switcherStyle">
+    <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>

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: '='
+      }
+    };
+  }
+
+})();

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', []);
+
+})();

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'
   ]);
 
 })();

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;
 }
+