mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-09-16 14:56:38 +02:00
Redesign the login form, preload all web font fonts on front page
This commit is contained in:
DanyLE
Dany LE
parent
3c25d8b52e
commit
b026b96bf2
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
2
src/themes/system/bootstrap-icons.css
vendored
2
src/themes/system/bootstrap-icons.css
vendored
@ -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");
|
||||
}
|
||||
|
||||
|
||||
6
src/themes/system/font-awesome.css
vendored
6
src/themes/system/font-awesome.css
vendored
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user