OSDN Git Service

added better colors to background of login screen, fixed minor errors
authorJohn-Anthony Elenis <johnanthonyelenis@gmail.com>
Wed, 21 Aug 2019 23:41:28 +0000 (19:41 -0400)
committerJohn-Anthony Elenis <johnanthonyelenis@gmail.com>
Wed, 21 Aug 2019 23:41:28 +0000 (19:41 -0400)
index.html
js/theme.js

index bd4b0a7..dc5bedf 100644 (file)
@@ -3,12 +3,14 @@
 <head>
 <link rel="stylesheet" href="css/materialize.min.css">
     <style>
-               #splash-screen {
+  #splash-screen {
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 999;
                overflow: hidden;
+    background:-webkit-radial-gradient(center, ellipse cover,
+      #9e9e9e 0%, #757575  100%);
        }
        .clock {
                display: none;
          display: flex;
     min-height: 100vh;
     flex-direction: column;
-    background-color: white;
+    background-color: #37474f;
+    background:-webkit-radial-gradient(center, ellipse cover,
+      rgba(55,71,79,1) 0%, rgba(38,50,56,1) 100%);
+    color: white;
     overflow: hidden;
  }
   main {
          flex: 1 0 auto;
   }
+  input {
+    color: white;
+  }
+  .caret {
+    fill: grey !important;
+  }
   .power-button {
-    fill: black;
+    fill: white;
   }
   .power-button:hover {
     fill: #01579b;
 <script src="js/theme.js"></script>
 
 <body>
-               <!-- Debug Console -->
-    <div id="console" class="row">
-        <div class="col s3">
-          <div class="row">
-            <div class="switch">
-              <label>
-                <input type="checkbox" checked="true">
-                <span class="lever"></span>
-                Auto
-              </label>
-            </div>
-          </div>
-
-          <div class="row">
-            <div class="input-field col ">
-              <input id="inputEvent" >
-              <label for="inputEvent">Event</label>
-            </div>
-            <a id="buttonTrigger" class="waves-effect waves-light btn">Trigger</a>
-          </div>
-
-        </div>
-        <div class="col s9">
-          <div contentEditable="true" class="terminal"></div>
-        </div>
-    </div>
-<!-- End Debug Console -->
-
   <div id="splash-screen">
     <!--TODO autogenerate this content -->
     <img class="splash-screen-img" src="images/splash-screen.jpg">
   </footer>
 <script>
 
-const log = new logger();
+// hide enverything until fully loaded
+$("body").append(`<div id="block" style="position: absolute;background-color: black;
+width: 100%; height: 100vh; z-index:9999;"></div>`);
+
+// pass true to logger to show
+const log = new logger(true);
 
 // create singleton
 const greeter = new LoginManager();
@@ -306,6 +294,8 @@ $(greeter).ready(function() {
        }).on("inactive", function() {
                $(".active-appear").fadeOut();
        });
+
+  setTimeout(() => $("#block").remove(), 100);
 });
 
 
index 369e350..ecec846 100644 (file)
@@ -50,7 +50,35 @@ const  DEF_OPT =
 
 
 class logger {
-       constructor() {
+       constructor(show=false) {
+               if (show) $("body").prepend(`   <!-- Debug Console -->
+                   <div id="console" class="row">
+                       <div class="col s3">
+                         <div class="row">
+                           <div class="switch">
+                             <label>
+                               <input type="checkbox" checked="true">
+                               <span class="lever"></span>
+                               Auto
+                             </label>
+                           </div>
+                         </div>
+
+                         <div class="row">
+                           <div class="input-field col ">
+                             <input id="inputEvent" >
+                             <label for="inputEvent">Event</label>
+                           </div>
+                           <a id="buttonTrigger" class="waves-effect waves-light btn">Trigger</a>
+                         </div>
+
+                       </div>
+                       <div class="col s9">
+                         <div contentEditable="true" class="terminal"></div>
+                       </div>
+                   </div>
+               <!-- End Debug Console -->`);
+
                window.onerror = (e) => {
                    this.error(e);
                };
@@ -155,18 +183,22 @@ var centerImage =  function($img) {
 class LoginManager {
        constructor() {
                this.use_splash = true;
+
                $(document).ready(() => {
                        this._init();
                });
        }
 
        _init() {
-                               this.lightdm = typeof (lightdm) == "undefined" ? {} : lightdm;
+               this.lightdm = typeof(lightdm) == "undefined" ? {} : lightdm;
 
                if (this.use_splash) {
                        this.splash = new SplashScreen();
                }
-               $(this).trigger("ready");
+               $(this.splash).on("ready", () => {
+                                       $(this).trigger("ready");
+               });
+
        }
 
 
@@ -195,8 +227,8 @@ class LoginManager {
          window.show_prompt = auth_cb;
                window.authentication_complete = auth_complete_cb;
 
-               if (typeof this.lightdm.authenticate != "function") {
-                       log.error("lighdm does not contain authenticate");
+               if (!this.lightdm.authenticate) {
+                       log.error("lightdm does not contain authenticate");
                        $(this).trigger("deny");
                        return;
                }