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

This commit is contained in:
DanyLE
2022-12-16 11:45:33 +01:00
committed by Dany LE
parent 3c25d8b52e
commit b026b96bf2
9 changed files with 127 additions and 95 deletions

View File

@ -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>\
`;
}

View File

@ -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();
});

View File

@ -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();

View File

@ -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});
});
}

View File

@ -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;