diff --git a/src/core/gui.ts b/src/core/gui.ts index 44d19be..4a37f0c 100644 --- a/src/core/gui.ts +++ b/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 = `\ -
-

Welcome to AntOS, please login

- - - -
-
+ + + + +
+ +
+ + + + + +
AntOS v[ANTOS_VERSION]
\ `; } diff --git a/src/core/tags/AppDockTag.ts b/src/core/tags/AppDockTag.ts index af0ade2..dfdf23f 100644 --- a/src/core/tags/AppDockTag.ts +++ b/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(); }); diff --git a/src/core/tags/InputTag.ts b/src/core/tags/InputTag.ts index 5c09820..3dd055a 100644 --- a/src/core/tags/InputTag.ts +++ b/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(); diff --git a/src/core/tags/TabBarTag.ts b/src/core/tags/TabBarTag.ts index e4579bb..ca6d38a 100644 --- a/src/core/tags/TabBarTag.ts +++ b/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}); }); } diff --git a/src/core/tags/TileLayoutTags.ts b/src/core/tags/TileLayoutTags.ts index 3d4456c..ffc32ef 100644 --- a/src/core/tags/TileLayoutTags.ts +++ b/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; diff --git a/src/index.html b/src/index.html index 716d417..500fb88 100644 --- a/src/index.html +++ b/src/index.html @@ -23,6 +23,12 @@ AntOS webOS + + + + + + diff --git a/src/themes/system/antos.css b/src/themes/system/antos.css index 4786173..5ed7d6b 100644 --- a/src/themes/system/antos.css +++ b/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; } diff --git a/src/themes/system/bootstrap-icons.css b/src/themes/system/bootstrap-icons.css index add9409..27dc88f 100644 --- a/src/themes/system/bootstrap-icons.css +++ b/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"); } diff --git a/src/themes/system/font-awesome.css b/src/themes/system/font-awesome.css index cdb4a09..e90eba2 100644 --- a/src/themes/system/font-awesome.css +++ b/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; }