More UI updates

sabhiram · Feb 13, 2015 · a93ec22 · a93ec22
1 parent 3a447a6
commit a93ec22
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 6 deletions.
diff --git a/app/public/app.css b/app/public/app.css
@@ -177,3 +177,25 @@ html, body {
     background: #28e602;
     color: black;
 }
+
+
+
+.rwc-password-entry-container {
+    position: absolute;
+
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    background: rgba(0,0,0,0.8);
+
+    -webkit-transition: all 0.3s ease;
+    -moz-transition:    all 0.3s ease;
+    -ms-transition:     all 0.3s ease;
+    -o-transition:      all 0.3s ease;
+    transition:         all 0.3s ease;
+}
+
+.rwc-password-entry-container.hide-me {
+    top: 100%;
+    opacity: 0;
+}
diff --git a/app/public/app.js b/app/public/app.js
@@ -20,10 +20,11 @@ app.controller("AppController", ["PiManager", "$scope", "$location", "$timeout",
 
     function(PiManager, $scope, $location, $timeout) {
         // Scope variable declaration
-        $scope.scan_results = [];
-        $scope.selected_cell = null;
-        $scope.scan_running = false;
-        $scope.network_passcode = "";
+        $scope.scan_results              = [];
+        $scope.selected_cell             = null;
+        $scope.scan_running              = false;
+        $scope.network_passcode          = "";
+        $scope.show_passcode_entry_field = false;
 
         // Scope function definitions
         $scope.rescan = function() {
@@ -43,6 +44,7 @@ app.controller("AppController", ["PiManager", "$scope", "$location", "$timeout",
             console.log("Change selection to: " + cell.ssid);
             $scope.network_passcode = "";
             $scope.selected_cell = cell;
+            $scope.show_passcode_entry_field = true;
         }
 
         $scope.orderScanResults = function(cell) {
@@ -89,3 +91,30 @@ app.service("PiManager", ["$http",
 
 );
 
+
+app.directive("rwcPasswordEntry", function($timeout) {
+    return {
+        restrict: "E",
+
+        scope: {
+            visible:  "=",    // Text binding for album name
+        },
+
+        replace: true,          // Use provided template (as opposed to static
+                                // content that the modal scope might define in the
+                                // DOM)
+        template: [
+            "<div class='rwc-password-entry-container' ng-class='{\"hide-me\": !visible}'>",
+            "</div>"
+        ].join("\n"),
+
+        // Link function to bind modal to the app
+        link: function(scope, element, attributes) {
+            // Set the toolbox visiblity to false
+            $timeout(function() {
+                console.log("About to hide");
+                scope.visible = false;
+            }, 2000);
+        },
+    };
+});
diff --git a/app/views/index.ejs b/app/views/index.ejs
@@ -36,17 +36,22 @@
             </div>
 
         </div>
-<!--
+
+        <!--
         <div class = "password_input"
              ng-class = "{ hidden: (selected_cell == null) }" >
             <input type        = "password"
                    placeholder = "Enter Network Passcode"
                    name        = "network_passcode"
                    ng-disabled = "selected_cell == null"
                    ng-model    = "network_passcode" required />
-        </div> -->
+        </div>
+        -->
     </div>
 
+    <rwc-password-entry
+        visible = "show_passcode_entry_field" />
+
     <!-- Scripts load last -->
     <script src="/external/angularjs/angular.min.js"></script>
     <script src="/app.js"></script>