UI improvement + use lastest boostrap icon
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good

- Update bootstrap icons to latest
- Redesign system tray for services monitoring
- Improve UI + bug fix on default packages
This commit is contained in:
DanyLE
2023-01-01 02:44:15 +01:00
parent 64359dfec1
commit 91dd755250
18 changed files with 620 additions and 151 deletions

View File

@ -55,10 +55,10 @@ namespace OS {
/**
* Text of the service shown in the system tray
*
* @type {string}
* @type {string | FormattedString}
* @memberof BaseService
*/
text: string;
text: string | FormattedString;
/**
* Reference to the menu entry DOM element attached
@ -79,13 +79,6 @@ namespace OS {
*/
private timer: number;
/**
* Reference to the system tray menu
*
* @type {HTMLElement}
* @memberof BaseService
*/
holder: HTMLElement;
/**
* Placeholder for service select callback
@ -108,7 +101,6 @@ namespace OS {
this.iconclass = "fa fa-paper-plane-o";
this.text = "";
this.timer = undefined;
this.holder = undefined;
this.onmenuselect = (d) => {
return this.awake(d);
};
@ -140,7 +132,9 @@ namespace OS {
* @memberof BaseService
*/
update(): void {
(this.domel as GUI.tag.MenuEntryTag).data = this;
if(!this.domel)
return;
(this.domel as GUI.tag.ListViewItemTag).data = this;
}
/**
@ -153,17 +147,6 @@ namespace OS {
return application[this.name].meta;
}
/**
* Attach the service to a menu element
* such as the system tray menu
*
* @param {HTMLElement} h
* @memberof BaseService
*/
attach(h: HTMLElement): void {
this.holder = h;
}
/**
* Set the callback that will be called periodically
* after a period of time.

View File

@ -535,7 +535,7 @@ namespace OS {
setting.system.repositories = [
{
text: "Github",
url: "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/packages.json"
url: "https://raw.githubusercontent.com/lxsang/antosdk-apps/2.0.x/packages.json"
}
]
}

View File

@ -178,14 +178,16 @@ namespace OS {
});
$(this.refs.item).on("click",(e) => {
this._onclick({ id: this.aid, data: this });
this._onclick({ id: this.aid, data: this, originalEvent: e });
e.stopPropagation();
});
$(this.refs.item).on("dblclick",(e) => {
this._ondbclick({ id: this.aid, data: this });
this._ondbclick({ id: this.aid, data: this, originalEvent: e });
e.stopPropagation();
});
$(this.refs.btcl).on("click",(e) => {
this._onclose({ id: this.aid, data: this });
this._onclose({ id: this.aid, data: this, originalEvent: e });
e.preventDefault();
e.stopPropagation();
});

View File

@ -38,6 +38,23 @@ namespace OS {
* @memberof SystemPanelTag
*/
private _pending_task: number[];
/**
* Flag indicate where the selected application shall be openned
*
* @private
* @type {boolean}
* @memberof SystemPanelTag
*/
private _prevent_open: boolean;
/**
* Store the current attached service
*
* @private
* @type {number[]}
* @memberof SystemPanelTag
*/
private _services: application.BaseService[];
/**
* Loading animation check timeout
@ -77,6 +94,8 @@ namespace OS {
this._pending_task = [];
this._loading_toh = undefined;
this.app_list= [];
this._services = [];
this._prevent_open = false;
}
/**
@ -105,8 +124,7 @@ namespace OS {
* @memberof SystemPanelTag
*/
attachservice(s: application.BaseService) {
(this.refs.systray as MenuTag).unshift(s);
return s.attach(this.refs.systray);
this._services.unshift(s);
}
/**
@ -118,14 +136,16 @@ namespace OS {
* @memberof SystemPanelTag
*/
private open(): void {
if(this._prevent_open)
{
this._prevent_open = false;
return;
}
const applist = this.refs.applist as ListViewTag;
const el = applist.selectedItem;
if (!el) {
return;
}
if (!el.data || el.data.dataid === "header") {
return;
}
this.toggle(false);
// launch the app or open the file
Ant.OS.GUI.openWith(el.data as AppArgumentsType);
@ -149,11 +169,13 @@ namespace OS {
return this.toggle(false);
case 37:
this._prevent_open = true;
applist.selectPrev();
return e.preventDefault();
case 38:
return e.preventDefault();
case 39:
this._prevent_open = true;
applist.selectNext();
return e.preventDefault();
case 40:
@ -187,9 +209,8 @@ namespace OS {
* @memberof SystemPanelTag
*/
detachservice(s: application.BaseService): void {
(this.refs.systray as MenuTag).delete(
s.domel as MenuEntryTag
);
const index = this._services.indexOf(s);
this._services.splice(index, 1);
}
/**
@ -216,7 +237,7 @@ namespace OS {
id: "sysdock"
},
{
el: "afx-menu",
el: "afx-button",
id: "systray",
ref: "systray",
class: "afx-panel-os-stray",
@ -394,6 +415,18 @@ namespace OS {
clearTimeout(this._loading_toh);
this._loading_toh = undefined;
}
private show_systray(): void
{
const ctxmenu = $("#contextmenu")[0] as tag.StackMenuTag;
ctxmenu.hide();
ctxmenu.nodes = this._services;
$(ctxmenu)
.css("right", 0)
.css("bottom", $(this).height());
ctxmenu.show();
}
/**
* Mount the tag bind some basic event
*
@ -401,6 +434,7 @@ namespace OS {
* @memberof SystemPanelTag
*/
protected mount(): void {
const systray = this.refs.systray as GUI.tag.ButtonTag;
(this.refs.osmenu as ButtonTag).set(this._osmenu);
this._cb = (e) => {
if (
@ -410,7 +444,6 @@ namespace OS {
return this.toggle(false);
}
};
$(this.refs.systray).css("z-index", 1000000);
(this.refs.btscreen as ButtonTag).set({
iconclass: "fa fa-tv",
onbtclick: (e) => {
@ -450,9 +483,9 @@ namespace OS {
return this.search(e);
});
$(this.refs.applist).on("click", (e) => {
(this.refs.applist as ListViewTag).onlistselect = (_) => {
return this.open();
});
};
Ant.OS.GUI.bindKey("CTRL- ", (e) => {
if (this._view === false) {
return this.toggle(true);
@ -479,19 +512,27 @@ namespace OS {
$(this.refs.overlay)
.hide();
this.refs.osmenu.contextmenuHandle = (e, m) => { };
this.refs.systray.contextmenuHandle = (e, m) => { };
systray.contextmenuHandle = (e, m) => { };
this.refs.panel.contextmenuHandle = (e, m) => { };
announcer.on("loading", (o: API.AnnouncementDataType<number>) => {
if(o.u_data != 0)
{
return;
}
this._pending_task.push(o.id);
if(!$(this.refs.panel).hasClass("loading"))
if(this._pending_task.length == 0)
{
$(this.refs.panel).addClass("loading");
systray.iconclass = "fa-spin fa fa-cog";
}
this._pending_task.push(o.id);
$(GUI.workspace).css("cursor", "wait");
});
systray.iconclass = "bi bi-sliders";
systray.onbtclick = (e) => {
e.data.stopPropagation();
this.show_systray();
};
announcer.on("loaded", (o: API.AnnouncementDataType<number>) => {
const i = this._pending_task.indexOf(o.id);
if (i >= 0) {
@ -499,6 +540,7 @@ namespace OS {
}
if (this._pending_task.length === 0) {
// set time out
systray.iconclass = "bi bi-sliders";
if(!this._loading_toh)
this._loading_toh = setTimeout(() => this.animation_check(),1000);
}

View File

@ -217,6 +217,13 @@ namespace OS {
* @memberof TagEventType
*/
data: T;
/**
* Original event if any
*
* @type {any}
* @memberof TagEventType
*/
originalEvent?: any;
}
/**