dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2025-07-17 06:19:51 +02:00
Code Issues 1 Actions Projects Releases Wiki Activity

Add stack panel component + redesign MarketPlace UI

Browse Source 
- Continue improve UI elements
- Add stack panel UI tag
- Redesign MarketPlace UI to support mobile device
This commit is contained in:
DanyLE
2022-12-09 13:17:35 +01:00
parent 3f4bdea3ad
commit 7c3b8a7432
18 changed files with 332 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/gui.ts
View File

@ -164,6 +164,7 @@ namespace OS {
*/
export function clearTheme(): void {
$("head link#ostheme").attr("href", "");
$("body").attr("theme", "");
}
/**
@ -180,6 +181,7 @@ namespace OS {
}
const path = `resources/themes/${name}/${name}.css`;
$("head link#ostheme").attr("href", path);
$("body").attr("theme", name);
}

76
src/core/tags/StackPanelTag.ts Normal file
View File

@ -0,0 +1,76 @@
namespace OS {
export namespace GUI {
export namespace tag {
/**
* A stack pannel allows to navigate back and forth between pannels
* (container widget). Each container widget in the stack should be
* composed inside a [[HBoxTag]]
*
*
* @export
* @class StackPanelTag
* @extends {AFXTag}
*/
export class StackPanelTag extends TabContainerTag {
private _current_pannel_index: number;
/**
* Mount the tag and bind basic events
*
* @protected
* @memberof StackPanelTag
*/
protected mount(): void {
this._current_pannel_index = -1;
super.mount();
this.observable.one("mounted", (id) => {
this.tabbarheight = 0;
$(this.refs.bar).hide();
this.navigateNext();
});
}
/**
* Set the tab select event handle
*
* @memberof StackPanelTag
*/
set ontabselect(f: TagEventCallback<TabContainerTabType>) {
}
/**
* Navigate to the next panel
*
* @memberof StackPanelTag
*/
navigateNext(): void
{
if(this._current_pannel_index >= this.tabs.length)
return;
this._current_pannel_index++;
this.navigate();
}
/**
* Navigate back to the previous panel
*
* @memberof StackPanelTag
*/
navigateBack(): void
{
if(this._current_pannel_index <= 0)
return;
this._current_pannel_index--;
this.navigate()
}
/**
* Navigate to a custom tab
*
* @memberof StackPanelTag
*/
private navigate()
{
this.selectedIndex = this._current_pannel_index;
}
}
define("afx-stack-panel", StackPanelTag);
}
}
}

12
src/core/tags/TabContainerTag.ts
View File

@ -45,11 +45,11 @@ namespace OS {
/**
* Placeholder of the tab select event handle
*
* @private
* @protected
* @type {TagEventCallback<TabContainerTabType>}
* @memberof TabContainerTag
*/
private _ontabselect: TagEventCallback<TabContainerTabType>;
protected _ontabselect: TagEventCallback<TabContainerTabType>;
/**
*Creates an instance of TabContainerTag.
@ -102,13 +102,17 @@ namespace OS {
}
/**
* Select a tab by its index
*
* Setter: Select a tab by its index
* Getter: Get the current selected index
*
* @memberof TabContainerTag
*/
set selectedIndex(i: number) {
(this.refs.bar as TabBarTag).selected = i;
}
get selectedIndex(): number {
return (this.refs.bar as TabBarTag).selected as number;
}
/**
* Setter: