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

This commit is contained in:
DanyLE 2022-12-16 11:45:33 +01:00
parent 7c19269d8f
commit 890271958c
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;

View File

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

View File

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

View File

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

View File

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