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

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

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

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

@@ -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>

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

@@ -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>

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

@@ -1,37 +1,24 @@
 /**
- * @author v.lugovksy
+ * @author p.maslava
- * created on 16.12.2015
+ * 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',
+      restrict: 'A',
-      replace: true,
+      template: function(el, attr) {
-      scope: {
+        var switcher = '<input type="checkbox"><div class="switcher '
-        ngModel: '='
+          + (attr.switchInput || '') +
-      },
+          '"><div class="handle-container"><span class="handle handle-on">ON</span>' +
-      template: function(el, attrs) {
+          '<span class="handle"></span><span class="handle handle-off">OFF</span></div></div>';
-        return '<div class="switch-container ' + (attrs.color || '') + '"><input type="checkbox" ng-model="ngModel"></div>';
+        return switcher
-      },
-      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();
-          });
-
-        });
       }
     };
   }

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

@@ -1,7 +1,7 @@
-<div ng-controller="SwitchPanelCtrl as switchPanelVm" class="switches clearfix">
+<label class="switcher-container" switch-input="primary"></label>
-  <switch color="primary" ng-model="switchPanelVm.switcherValues.primary"></switch>
+<label class="switcher-container" switch-input="success"></label>
-  <switch color="warning" ng-model="switchPanelVm.switcherValues.warning"></switch>
+<label class="switcher-container" switch-input="warning"></label>
-  <switch color="danger" ng-model="switchPanelVm.switcherValues.danger"></switch>
+<label class="switcher-container" switch-input="danger"></label>
-  <switch color="info" ng-model="switchPanelVm.switcherValues.info"></switch>
+<label class="switcher-container" switch-input="info"></label>
-  <switch color="success" ng-model="switchPanelVm.switcherValues.success"></switch>
+
-</div>
+

src/sass/app/_form.scss

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