dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 17:38:20 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

Loading animation is now based on the current context (global or application context)

Browse Source
This commit is contained in:
DanyLE 2022-05-24 15:39:58 +02:00
parent deae7bbc57
commit 8b23ebeeff
10 changed files with 145 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
d.ts/antos.d.ts vendored
View File

@ -2255,6 +2255,20 @@ declare namespace OS {
* @memberof BaseApplication
*/
appmenu: GUI.tag.MenuTag;
/**
* Loading animation check timeout
*
* @memberof BaseApplication
*/
private _loading_toh;
/**
* Store pending loading task
*
* @private
* @type {number[]}
* @memberof BaseApplication
*/
private _pending_task;
/**
*Creates an instance of BaseApplication.
* @param {string} name application name
@ -2446,6 +2460,14 @@ declare namespace OS {
* @memberof BaseApplication
*/
protected cleanup(e: BaseEvent): void;
/**
* Check if the loading tasks ended,
* if it the case, stop the animation
*
* @private
* @memberof BaseApplication
*/
private animation_check;
}
}
}
@ -10329,6 +10351,10 @@ declare namespace OS {
/**
* All running processes is stored in this variables
*/
/**
* Current active process ID
*/
var pidactive: number;
var processes: GenericObject<BaseModel[]>;
/**
* Create a new process of application or service
@ -10365,5 +10391,11 @@ declare namespace OS {
* @returns {void}
*/
function killAll(app: string, force: boolean): void;
/**
* Get the current active application
* @export
* @returns {BaseModel}
*/
function getActiveApp(): BaseModel;
}
}

55
src/core/BaseApplication.ts
View File

@ -70,6 +70,21 @@ namespace OS {
*/
appmenu: GUI.tag.MenuTag;
/**
* Loading animation check timeout
*
* @memberof BaseApplication
*/
private _loading_toh: any;
/**
* Store pending loading task
*
* @private
* @type {number[]}
* @memberof BaseApplication
*/
private _pending_task: number[];
/**
*Creates an instance of BaseApplication.
* @param {string} name application name
@ -83,6 +98,8 @@ namespace OS {
}
this.setting = setting.applications[this.name];
this.keycomb = {};
this._loading_toh = undefined;
this._pending_task = [];
}
/**
@ -104,6 +121,7 @@ namespace OS {
this.sysdock.selectedApp = this;
this.appmenu.pid = this.pid;
this.appmenu.items = this.baseMenu() || [];
OS.PM.pidactive = this.pid;
this.appmenu.onmenuselect = (
d: GUI.tag.MenuEventData
): void => {
@ -136,6 +154,26 @@ namespace OS {
this.applySetting(m.message as string);
}
});
this.subscribe("loading", (o: API.AnnouncementDataType<number>) => {
if(o.u_data != this.pid)
{
return;
}
this._pending_task.push(o.id);
this.trigger("loading", undefined);
});
this.subscribe("loaded", (o: API.AnnouncementDataType<number>) => {
const i = this._pending_task.indexOf(o.id);
if (i >= 0) {
this._pending_task.splice(i, 1);
}
if (this._pending_task.length === 0) {
// set time out
if(!this._loading_toh)
this._loading_toh = setTimeout(() => this.animation_check(),1000);
}
});
this.updateLocale(this.systemsetting.system.locale);
return this.loadScheme();
}
@ -446,6 +484,23 @@ namespace OS {
* @memberof BaseApplication
*/
protected cleanup(e: BaseEvent): void {}
/**
* Check if the loading tasks ended,
* if it the case, stop the animation
*
* @private
* @memberof BaseApplication
*/
private animation_check(): void {
if(this._pending_task.length === 0)
{
this.trigger("loaded", undefined);
}
if(this._loading_toh)
clearTimeout(this._loading_toh);
this._loading_toh = undefined;
}
}
BaseApplication.type = ModelType.Application;

6
src/core/core.ts
View File

@ -1275,11 +1275,11 @@ namespace OS {
* @param {string} p message string
*/
export function loading(q: number, p: string): void {
const data:API.AnnouncementDataType<boolean> = {} as API.AnnouncementDataType<boolean>;
const data:API.AnnouncementDataType<number> = {} as API.AnnouncementDataType<number>;
data.id = q;
data.message = p;
data.name = "OS";
data.u_data = true;
data.name = p;
data.u_data = PM.pidactive;
announcer.trigger("loading", data);
}

3
src/core/gui.ts
View File

@ -533,7 +533,9 @@ namespace OS {
*/
export function launch(app: string, args: AppArgumentsType[]): Promise<OS.PM.ProcessType> {
return new Promise(async (resolve, reject) => {
const pidactive = PM.pidactive;
try {
PM.pidactive = 0;
if (!application[app]) {
// first load it
await loadApp(app);
@ -565,6 +567,7 @@ namespace OS {
__("Unable to launch: {0}", app),
e
);
PM.pidactive = pidactive;
return reject(__e(e));
}

18
src/core/pm.ts
View File

@ -24,6 +24,10 @@ namespace OS {
/**
* All running processes is stored in this variables
*/
/**
* Current active process ID
*/
export var pidactive: number = 0;
export var processes: GenericObject<BaseModel[]> = {};
/**
* Create a new process of application or service
@ -159,5 +163,19 @@ namespace OS {
p.quit(force);
}
}
/**
* Get the current active application
* @export
* @returns {BaseModel}
*/
export function getActiveApp():BaseModel
{
if(PM.pidactive === 0)
{
return undefined;
}
return PM.appByPid(PM.pidactive);
}
}
}

1
src/core/tags/AppDockTag.ts
View File

@ -162,6 +162,7 @@ namespace OS {
}
this._selectedItem = el;
if (!el) {
PM.pidactive = 0;
return;
}
$(el.domel).addClass("selected");

8
src/core/tags/SystemPanelTag.ts
View File

@ -539,14 +539,18 @@ namespace OS {
announcer.observable.on("app-pinned", (_) => {
this.RefreshPinnedApp();
});
announcer.observable.on("loading", (o: API.AnnouncementDataType<boolean>) => {
announcer.observable.on("loading", (o: API.AnnouncementDataType<number>) => {
if(o.u_data != 0)
{
return;
}
this._pending_task.push(o.id);
if(!$(this.refs.panel).hasClass("loading"))
$(this.refs.panel).addClass("loading");
$(GUI.workspace).css("cursor", "wait");
});
announcer.observable.on("loaded", (o: API.AnnouncementDataType<boolean>) => {
announcer.observable.on("loaded", (o: API.AnnouncementDataType<number>) => {
const i = this._pending_task.indexOf(o.id);
if (i >= 0) {
this._pending_task.splice(i, 1);

10
src/core/tags/WindowTag.ts
View File

@ -331,6 +331,15 @@ namespace OS {
});
}
});
this.observable.on("loaded", ()=>{
$(this.refs.panel).removeClass("loading");
$(this).css("cursor", "auto");
});
this.observable.on("loading", ()=>{
if(!$(this.refs.panel).hasClass("loading"))
$(this.refs.panel).addClass("loading");
$(this).css("cursor", "wait");
});
this.enable_dragging();
this.enable_resize();
this.setsize({
@ -524,6 +533,7 @@ namespace OS {
children: [
{
el: "ul",
ref: 'panel',
class: "afx-window-top",
children: [
{

15
src/themes/system/afx-app-window.css
View File

@ -15,6 +15,21 @@ afx-app-window ul.afx-window-top{
width: 100%;
padding:0;
}
afx-app-window ul.loading::before{
background-color: orangered;
content: "";
position: absolute;
height: 2px;
width: 0%;
}
afx-app-window ul.loading::before {
right: 0;
top:0;
animation: sys-loading 1s linear infinite;
}
afx-app-window ul.afx-window-top li{
list-style: none;
}

2
src/themes/system/afx-sys-panel.css
View File

@ -52,7 +52,7 @@ afx-sys-panel > div.loading::before {
100% {
right: auto;
left: 100%;
width: 12.5%;
width: 0%;
}
}