Merge branch 'LeptitGeek-master'

R6n0 · Nov 12, 2017 · 039b864 · 039b864
2 parents 09933ff + a30352a
commit 039b864
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/assets/styles/onoffswitch.css b/assets/styles/onoffswitch.css
@@ -0,0 +1,32 @@
+.onoffswitch {
+    position: relative; width: 45px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    height: 20px; padding: 0; line-height: 20px;
+    border: 2px solid #E3E3E3; border-radius: 20px;
+    background-color: #FFFFFF;
+    transition: background-color 0.3s ease-in;
+}
+.onoffswitch-label:before {
+    content: "";
+    display: block; width: 20px; margin: 0px;
+    background: #FFFFFF;
+    position: absolute; top: 0; bottom: 0;
+    right: 23px;
+    border: 2px solid #E3E3E3; border-radius: 20px;
+    transition: all 0.3s ease-in 0s; 
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label {
+    background-color: #428BCA;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+   border-color: #428BCA;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label:before {
+    right: 0px; 
+}
diff --git a/tasks/pipeline.js b/tasks/pipeline.js
@@ -32,6 +32,8 @@ var cssFilesToInject = [
   'styles/device.css',
   'styles/weather.css',
   'styles/leaflet/leaflet.css',
+
+  'styles/onoffswitch.css',
 
   // all styles, disabled by default
   //'styles/**/*.css',

diff --git a/views/device/index.ejs b/views/device/index.ejs
@@ -85,10 +85,14 @@
                                                         </div>
                                                      </form>    
                                                     <!-- If the deviceType is not a sensor and is  a binary, display on/off button -->
-                                                    <button ng-show="!type.sensor && type.type == 'binary'" ng-click="vm.changeValue(type, !type.lastValue);" 
-                                                            class="btn {{ type.lastValue && 'btn-danger' || 'btn-success' }} btn-sm">
-                                                            {{type.lastValue && '<%= __('devices-types-off') %>' || '<%= __('devices-types-on') %>' }}
-                                                    </button>
+                                                     <!--<button ng-show="!type.sensor && type.type == 'binary'" ng-click="vm.changeValue(type, !type.lastValue);" 
+                                                             class="btn {{ type.lastValue && 'btn-danger' || 'btn-success' }} btn-sm"> 
+                                                             {{type.lastValue && '<%= __('devices-types-off') %>' || '<%= __('devices-types-on') %>' }} 
+                                                     </button>-->
+                                                     <div class="onoffswitch" ng-click="vm.changeValue(type, !type.lastValue);">
+                                                            <input type="checkbox" ng-show="!type.sensor && type.type == 'binary'" ng-model="type.lastValue" ng-true-value="1" ng-false-value="0" class="onoffswitch-checkbox" />
+                                                            <label class="onoffswitch-label" for="myonoffswitch" ng-show="!type.sensor && type.type == 'binary'"></label>
+                                                     </div>
                                                 </td>
                                                </tr>
                                         </tbody>
@@ -358,4 +362,4 @@
 
 
 
-
+
diff --git a/views/layout.ejs b/views/layout.ejs
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="/styles/device.css">
     <link rel="stylesheet" href="/styles/weather.css">
     <link rel="stylesheet" href="/styles/leaflet/leaflet.css">
+    <link rel="stylesheet" href="/styles/onoffswitch.css">
     <!--STYLES END-->
 
     <style>