Redesign the login form, preload all web font fonts on front page

src/core/gui.ts

@@ -977,29 +977,33 @@ namespace OS {
                     .replace("[ANTOS_VERSION]", OS.VERSION.version_string)
             );
             $("#wrapper").append(scheme);
-            $("#btlogin").on("click", async function () {
+            $("#login_form")[0].uify(undefined);
+            ($("#btlogin")[0] as tag.ButtonTag).onbtclick = async function () {
                 const data: API.UserLoginType = {
                     username: $("#txtuser").val() as string,
                     password: $("#txtpass").val() as string,
                 };
+                const err_label = $("#login_error")[0] as tag.LabelTag;
                 try {
                     const d = await API.handle.login(data);
                     if (d.error) {
-                        return $("#login_error").html(d.error as string);
+                        err_label.iconclass = "bi bi-exclamation-diamond-fill";
+                        return err_label.text = d.error as string;
                     }
                     return startAntOS(d.result);
                 } catch (e) {
-                    return $("#login_error").html("Login: server error");
+                    err_label.iconclass = "bi bi-bug-fill";
+                    return err_label.text = __("Login: server error");
+                }
+            };
+            ($("#txtpass")[0] as tag.InputTag).on("keyup", function (e) {
+                if (e.which === 13) {
+                    return $("#btlogin button").trigger("click");
                 }
             });
-            $("#txtpass").on("keyup", function (e) {
+            ($("#txtuser")[0] as tag.InputTag).on("keyup",function (e) {
                 if (e.which === 13) {
-                    return $("#btlogin").trigger("click");
-                }
-            });
-            $("#txtuser").keyup(function (e) {
-                if (e.which === 13) {
-                    return $("#btlogin").trigger("click");
+                    return $("#btlogin button").trigger("click");
                 }
             });
         }
@@ -1107,13 +1111,19 @@ namespace OS {
 `;
 
         schemes.login = `\
-<div id = "login_form">
-    <p>Welcome to AntOS, please login</p>
-    <input id = "txtuser" type = "text" value = "demo" ></input>
-    <input id = "txtpass" type = "password" value = "demo" ></input>
-    <button id = "btlogin">Login</button>
-    <div id = "login_error"></div>
-</div>
+<afx-vbox id = "login_form">
+    <afx-label data-height="35" text="Welcome to AntOS, please login"></afx-label>
+    <afx-vbox padding = "10">
+        <afx-input data-height="52" id = "txtuser" type = "text" value = "demo" label="User name"></afx-input>
+        <div data-height="10"></div>
+        <afx-input data-height="52" id = "txtpass" type = "password" value = "demo" label="Password"></afx-input>
+        <div data-height="10"></div>
+        <afx-hbox>
+            <afx-label id = "login_error"></afx-label>
+            <afx-button id = "btlogin" text="Login" iconclass = "bi bi-box-arrow-in-right" data-width="content"></afx-button>
+        </afx-hbox>
+    </afx-vbox>
+</afx-vbox>
 <div id = "antos_build_id"><a href="${OS.REPOSITORY}/tree/[ANTOS_BUILD_ID]">AntOS v[ANTOS_VERSION]</div>\
 `;
     }

src/core/tags/AppDockTag.ts

@@ -415,21 +415,21 @@ namespace OS {
                         this.items[index].app.trigger("focus");
                     });
 
-                    $(this).on("touchstart", e => {
+                    this.addEventListener("touchstart", e => {
                         this._previous_touch.x = e.touches[0].pageX;
                         this._previous_touch.y = e.touches[0].pageY;
-                    });
-                    $(this).on("touchmove", e => {
+                    }, { passive: true});
+                    this.addEventListener("touchmove", e => {
                         const offset = {x:0, y:0};
                         offset.x = this._previous_touch.x - e.touches[0].pageX ;
                         offset.y = this._previous_touch.y - e.touches[0].pageY; 
                         (this as any).scrollLeft += offset.x;
                         this._previous_touch.x = e.touches[0].pageX;
                         this._previous_touch.y = e.touches[0].pageY;
-                    });
-                    $(this).on("wheel", (evt)=>{
-                        (this as any).scrollLeft += (evt.originalEvent as WheelEvent).deltaY;
-                    });
+                    }, { passive: true});
+                    this.addEventListener("wheel", (evt)=>{
+                        (this as any).scrollLeft += (evt as WheelEvent).deltaY;
+                    },{ passive: true});
                     announcer.on("app-pinned", (_) => {
                         this.refresh_pinned_app();
                     });

src/core/tags/InputTag.ts

@@ -205,10 +205,10 @@ namespace OS {
                  */
                 protected calibrate(): void
                 {
-                    $(this.refs.area)
+                    /*$(this.refs.area)
                         .css("width", "100%");
                     $(this.refs.input)
-                        .css("width", "100%");
+                        .css("width", "100%");*/
                     if(this.verbose)
                     {
                         $(this.refs.area).show();

src/core/tags/TabBarTag.ts

@@ -225,11 +225,11 @@ namespace OS {
                     
                     const list_container = $(".list-container", this.refs.list);
                     list_container.each((i,el) => {
-                        $(el).on("touchstart", e => {
+                        el.addEventListener("touchstart", e => {
                             this._previous_touch.x = e.touches[0].pageX;
                             this._previous_touch.y = e.touches[0].pageY;
-                        });
-                        $(el).on("touchmove", e => {
+                        }, {passive: true});
+                        el.addEventListener("touchmove", e => {
                             const offset = {x:0, y:0};
                             offset.x = this._previous_touch.x - e.touches[0].pageX ;
                             offset.y = this._previous_touch.y - e.touches[0].pageY; 
@@ -243,17 +243,17 @@ namespace OS {
                             }
                             this._previous_touch.x = e.touches[0].pageX;
                             this._previous_touch.y = e.touches[0].pageY;
-                        });
-                        $(el).on("wheel", (evt)=>{
+                        }, {passive: true});
+                        el.addEventListener("wheel", (evt)=>{
                             if(this.dir == "horizontal")
                             {
-                                el.scrollLeft += (evt.originalEvent as WheelEvent).deltaY;
+                                el.scrollLeft += (evt as WheelEvent).deltaY;
                             }
                             else
                             {
-                                el.scrollTop += (evt.originalEvent as WheelEvent).deltaY;
+                                el.scrollTop += (evt as WheelEvent).deltaY;
                             }
-                        });
+                        }, {passive: true});
                     });
                 }
 

src/core/tags/TileLayoutTags.ts

@@ -161,21 +161,26 @@ namespace OS {
                             $(this).css("height", "100%");
                             let attv = $(this).attr("data-width");
                             let dw = 0;
-                            if (attv && attv !== "grow") {
-                                if (attv[attv.length - 1] === "%") {
-                                    dw =
-                                        (parseInt(attv.slice(0, -1)) *
-                                            avaiWidth) /
-                                        100;
-                                } else {
-                                    dw = parseInt(attv);
-                                }
-                                $(this).css("width", `${dw}px`);
-                                ocwidth += dw;
-                            } else {
+                            if (!attv || attv == "grow") {
                                 $(this).css("flex-grow", "1");
                                 auto_width.push(this);
+                                return;
                             }
+                            if(attv == "content")
+                            {
+                                ocwidth += $(this).width();
+                                return;
+                            }
+                            if (attv[attv.length - 1] === "%") {
+                                dw =
+                                    (parseInt(attv.slice(0, -1)) *
+                                        avaiWidth) /
+                                    100;
+                            } else {
+                                dw = parseInt(attv);
+                            }
+                            $(this).css("width", `${dw}px`);
+                            ocwidth += dw;
                         });
 
                     const csize = (avaiWidth - ocwidth) / auto_width.length;
@@ -183,7 +188,7 @@ namespace OS {
                         $.each(auto_width, (i, v) =>
                             $(v).css("width", `${csize}px`)
                         );
-                    }
+                    } 
                 }
 
                 /**
@@ -204,21 +209,26 @@ namespace OS {
                             let dh = 0;
                             $(this).css("width", "100%");
                             let attv = $(this).attr("data-height");
-                            if (attv && attv !== "grow") {
-                                if (attv[attv.length - 1] === "%") {
-                                    dh =
-                                        (parseInt(attv.slice(0, -1)) *
-                                            avaiheight) /
-                                        100;
-                                } else {
-                                    dh = parseInt(attv);
-                                }
-                                $(this).css("height", `${dh}px`);
-                                ocheight += dh;
-                            } else {
+                            if (!attv || attv == "grow") {
                                 $(this).css("flex-grow", "1");
                                 auto_height.push(this);
+                                return;
                             }
+                            if(attv == "content")
+                            {
+                                 ocheight += $(this).height();
+                                return;
+                            }
+                            if (attv[attv.length - 1] === "%") {
+                                dh =
+                                    (parseInt(attv.slice(0, -1)) *
+                                        avaiheight) /
+                                    100;
+                            } else {
+                                dh = parseInt(attv);
+                            }
+                            $(this).css("height", `${dh}px`);
+                            ocheight += dh;
                         });
 
                     const csize = (avaiheight - ocheight) / auto_height.length;

src/index.html

@@ -23,6 +23,12 @@
         <title>AntOS webOS</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="preload" href="resources/themes/system/fonts/ubuntu-regular-webfont.woff2" as="font" type="font/woff2" crossorigin>
+        <link rel="preload" href="resources/themes/system/fonts/ubuntu-italic-webfont.woff2" as="font" type="font/woff2" crossorigin>
+        <link rel="preload" href="resources/themes/system/fonts/ubuntu-bolditalic-webfont.woff2" as="font" type="font/woff2" crossorigin>
+        <link rel="preload" href="resources/themes/system/fonts/ubuntu-bold-webfont.woff2" as="font" type="font/woff2" crossorigin>
+        <link rel="preload" href="resources/themes/system/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>
+        <link rel="preload" href="resources/themes/system/fonts/bootstrap-icons.woff2" as="font" type="font/woff2" crossorigin>
         <link href="resources/themes/system/system.css" rel="stylesheet">
         <link id="ostheme" rel="stylesheet" href="">
         <script src="scripts/jquery-3.4.1.min.js"></script>

src/themes/system/antos.css

@@ -78,6 +78,7 @@ input {
     font-size: 14px;
     height: 35px;
     font-family: "Ubuntu";
+    outline: none;
 }
 
 textarea {
@@ -87,8 +88,7 @@ textarea {
 
 #login_form{
     width:300px;
-    height: 180px;
-    display: block;
+    height: 215px;
     border:1px solid #262626;
     border-radius: 6px;
     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
@@ -98,52 +98,56 @@ textarea {
     right: 0;
     bottom: 0;
     left: 0;
-    font-family:Verdana, Geneva, Tahoma, sans-serif;
-    font-size: 13px;
-    text-align: center;
     background-color: #363636;
     color: white;
 } 
 
-#login_form p{
-    display: inline-block;
-    /* background-color:#dfdfdf; */
+#login_form > div > afx-label
+{
     border-bottom: 1px solid #262626;
-    padding:10px;
-    width: calc(100% - 20px);
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
-    font-weight: bold;
     margin:0;
-    
 }
-#login_form input {
-    width: 250px;
-    outline: none;
-    margin-top:10px;
-    border-radius: 6px;
-    box-sizing: border-box;
+#login_form > div > afx-label .label-text
+{
+    text-align: center;
+    font-weight: bold;
+}
+#login_form afx-input afx-label
+{
     font-size: 13px;
-    padding: 5px;
-    color: white;
-    border: 1px solid #262626;
+    color: #bb86fc;
     background-color: #464646;
 }
+
+#login_form afx-input input
+{
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid #262626;
+    background-color: #464646;
+    color: white;
+}
+#login_form afx-input input:focus
+{
+    border-bottom: 1px solid #bb86fc;
+}
+
+
 #login_form button{
-    margin-top:10px;
-    width: 250px;
-    height: 30px;
-    background-color: #464646;
-    border: 1px solid #262626;
-    color: white;
-    border-radius: 6px;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    font-size: 13px;
-    padding:5px;
     outline: none;
+    min-height: 35px;
+    min-width: 40px;
+    padding-left: 10px;
+    padding-right: 10px;
+    border: 1px solid #262626;
+    background-color: #464646;
+    color: white;
+    border-radius: 3px;
+    font-family: "Ubuntu";
 }
-#login_error{
-    padding:3px;
+#login_error {
     color:chocolate;
     font-weight: normal;
 }

src/themes/system/bootstrap-icons.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "bootstrap-icons";
-  src: url("./fonts/bootstrap-icons.woff2?a74547b2f0863226942ff8ded57db345") format("woff2"),
+  src: url("./fonts/bootstrap-icons.woff2") format("woff2"),
 url("./fonts/bootstrap-icons.woff?a74547b2f0863226942ff8ded57db345") format("woff");
 }
 

src/themes/system/font-awesome.css

@@ -6,8 +6,10 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
-  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+  src: url('fonts/fontawesome-webfont.woff2') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
+  /*src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
+  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+ */
   font-weight: normal;
   font-style: normal;
 }