mirror of
https://github.com/lxsang/antos-frontend.git
synced 2025-07-17 06:19:51 +02:00
Redesign the login form, preload all web font fonts on front page
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good
This commit is contained in:
@ -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>\
|
||||
`;
|
||||
}
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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();
|
||||
|
@ -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});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user