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

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

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

@ -2255,6 +2255,20 @@ declare namespace OS {
* @memberof BaseApplication * @memberof BaseApplication
*/ */
appmenu: GUI.tag.MenuTag; 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. *Creates an instance of BaseApplication.
* @param {string} name application name * @param {string} name application name
@ -2446,6 +2460,14 @@ declare namespace OS {
* @memberof BaseApplication * @memberof BaseApplication
*/ */
protected cleanup(e: BaseEvent): void; 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 * All running processes is stored in this variables
*/ */
/**
* Current active process ID
*/
var pidactive: number;
var processes: GenericObject<BaseModel[]>; var processes: GenericObject<BaseModel[]>;
/** /**
* Create a new process of application or service * Create a new process of application or service
@ -10365,5 +10391,11 @@ declare namespace OS {
* @returns {void} * @returns {void}
*/ */
function killAll(app: string, force: boolean): void; function killAll(app: string, force: boolean): void;
/**
* Get the current active application
* @export
* @returns {BaseModel}
*/
function getActiveApp(): BaseModel;
} }
} }

View File

@ -70,6 +70,21 @@ namespace OS {
*/ */
appmenu: GUI.tag.MenuTag; 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. *Creates an instance of BaseApplication.
* @param {string} name application name * @param {string} name application name
@ -83,6 +98,8 @@ namespace OS {
} }
this.setting = setting.applications[this.name]; this.setting = setting.applications[this.name];
this.keycomb = {}; this.keycomb = {};
this._loading_toh = undefined;
this._pending_task = [];
} }
/** /**
@ -104,6 +121,7 @@ namespace OS {
this.sysdock.selectedApp = this; this.sysdock.selectedApp = this;
this.appmenu.pid = this.pid; this.appmenu.pid = this.pid;
this.appmenu.items = this.baseMenu() || []; this.appmenu.items = this.baseMenu() || [];
OS.PM.pidactive = this.pid;
this.appmenu.onmenuselect = ( this.appmenu.onmenuselect = (
d: GUI.tag.MenuEventData d: GUI.tag.MenuEventData
): void => { ): void => {
@ -136,6 +154,26 @@ namespace OS {
this.applySetting(m.message as string); 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); this.updateLocale(this.systemsetting.system.locale);
return this.loadScheme(); return this.loadScheme();
} }
@ -446,6 +484,23 @@ namespace OS {
* @memberof BaseApplication * @memberof BaseApplication
*/ */
protected cleanup(e: BaseEvent): void {} 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; BaseApplication.type = ModelType.Application;

View File

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

View File

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

View File

@ -24,6 +24,10 @@ namespace OS {
/** /**
* All running processes is stored in this variables * All running processes is stored in this variables
*/ */
/**
* Current active process ID
*/
export var pidactive: number = 0;
export var processes: GenericObject<BaseModel[]> = {}; export var processes: GenericObject<BaseModel[]> = {};
/** /**
* Create a new process of application or service * Create a new process of application or service
@ -159,5 +163,19 @@ namespace OS {
p.quit(force); 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);
}
} }
} }

View File

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

View File

@ -539,14 +539,18 @@ namespace OS {
announcer.observable.on("app-pinned", (_) => { announcer.observable.on("app-pinned", (_) => {
this.RefreshPinnedApp(); 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); this._pending_task.push(o.id);
if(!$(this.refs.panel).hasClass("loading")) if(!$(this.refs.panel).hasClass("loading"))
$(this.refs.panel).addClass("loading"); $(this.refs.panel).addClass("loading");
$(GUI.workspace).css("cursor", "wait"); $(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); const i = this._pending_task.indexOf(o.id);
if (i >= 0) { if (i >= 0) {
this._pending_task.splice(i, 1); this._pending_task.splice(i, 1);

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_dragging();
this.enable_resize(); this.enable_resize();
this.setsize({ this.setsize({
@ -524,6 +533,7 @@ namespace OS {
children: [ children: [
{ {
el: "ul", el: "ul",
ref: 'panel',
class: "afx-window-top", class: "afx-window-top",
children: [ children: [
{ {

View File

@ -15,6 +15,21 @@ afx-app-window ul.afx-window-top{
width: 100%; width: 100%;
padding:0; 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{ afx-app-window ul.afx-window-top li{
list-style: none; list-style: none;
} }

View File

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