commit 9e00ce9692351c1b6636eb4732345bde2c9f5b35
author Michael Davis <michael.s.davis@ibm.com> Thu Mar 09 18:31:02 2017 -0600
committer Patrick Williams <patrick@stwcx.xyz> Wed Sep 20 12:41:10 2017 -0500
tree c98783e3aacb94a8e5651eddf55c732c227a4742
parent ea5241a9d0847297c812b6c83c6b13de2873f181

unit-id: improvements to toggle style

Change-Id: I5882e03015aa7f6b28b9d208169a8f24b002c5f9
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

src/js/controllers.js

diff --git a/src/js/controllers.js b/src/js/controllers.js
index b9490e6..e19f2e9 100644
--- a/src/js/controllers.js
+++ b/src/js/controllers.js
@@ -46,7 +46,7 @@
     //@TODO: call api and get proper state
     $scope.toggleState = function(){
         dataService.server_state = (dataService.server_state == 'On') ? 'Off': 'On';
-    }
+    };
 
     $scope.togglePower = function(){
         var method = (dataService.server_state == 'On') ? 'chassisPowerOff' : 'chassisPowerOn';

src/js/directives.js

diff --git a/src/js/directives.js b/src/js/directives.js
index a6cb77a..79224f0 100644
--- a/src/js/directives.js
+++ b/src/js/directives.js
@@ -28,7 +28,7 @@
             $scope.logout = function(){
                 userModel.logout();
                 $location.path('/logout');
-            }
+            };
 
             $scope.refresh = function(){
                 console.log("--refresh status--");
@@ -47,7 +47,8 @@
         },
         'controller': ['$scope', 'dataService', function($scope, dataService){
             $scope.$watch('showNavigation', function(){
-                var padingTop = 0;
+                var paddingTop = 0;
+                $scope.toggle = false;
                 $scope.firstLevel = 'overview';
                 $scope.secondLevel = 'system_overview';
                 if($scope.showNavigation){
@@ -56,6 +57,7 @@
                 dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
                 $scope.navStyle = {'top': paddingTop + 'px'};
             });
+
         }]
     };
  })

src/scss/elements/_toggle-switch.scss

diff --git a/src/scss/elements/_toggle-switch.scss b/src/scss/elements/_toggle-switch.scss
index 4c0faea..6ea5054 100644
--- a/src/scss/elements/_toggle-switch.scss
+++ b/src/scss/elements/_toggle-switch.scss
@@ -14,8 +14,10 @@
 
 .toggle-switch {
   position: absolute;
-  margin-left: -9999px;
-  visibility: hidden;
+  left: 20px;
+  height: 1px;
+  width: 1px;
+  opacity: 0;
 }
 .toggle-switch + label {
   display: block;
@@ -36,6 +38,10 @@
   @include borderRadius;
   @include marginTransition;
 }
+
+input.toggle-switch__round-flat:focus + label {
+  box-shadow: 0 0 4px 4px $darkbg__accent;
+}
 input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
   display: block;
   position: absolute;

src/unit-id.html

diff --git a/src/unit-id.html b/src/unit-id.html
index 7586516..cb05e26 100644
--- a/src/unit-id.html
+++ b/src/unit-id.html
@@ -1,4 +1,4 @@
-
+<div id="uid-switch">
     <div class="row column">
         <h1>Unit ID Indicator</h1>
     </div>
@@ -10,8 +10,8 @@
     <div class="row column">
         <div class="btm-border-grey">
             <div class="switch inline">
-                <input id="toggle__round" class="toggle-switch toggle-switch__round-flat" type="checkbox" tabindex="0">
-                <label for="toggle__round"></label>
+                <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox" tabindex="0">
+                <label for="toggle__switch-round" tabindex="0"></label>
             </div>
             <div class="uid-switch__label inline">
                 <p>Unit ID indicator is <span class="uid-switch__status">off</span></p>
@@ -19,14 +19,9 @@
             </div>
         </div>
     </div>
-
-<script src="js/app.min.js"></script>
-
+</div>
 <!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
 <script>
-    $('.toggle-switch').on('click', function(){
-        console.log($(this).parents('.row'));
-       $(this).parents('.row').find('.uid-switch__status').html('on');
-    });
+
 </script>