From 7c3b8a7432c28b318f6a191b196e70dc93689c41 Mon Sep 17 00:00:00 2001 From: DanyLE Date: Fri, 9 Dec 2022 13:17:35 +0100 Subject: [PATCH] Add stack panel component + redesign MarketPlace UI - Continue improve UI elements - Add stack panel UI tag - Redesign MarketPlace UI to support mobile device --- Makefile | 3 +- d.ts/antos.d.ts | 58 ++++++++++++- src/core/gui.ts | 2 + src/core/tags/StackPanelTag.ts | 76 ++++++++++++++++ src/core/tags/TabContainerTag.ts | 12 ++- src/packages/MarketPlace/main.css | 105 ++++++++++++++++++----- src/packages/MarketPlace/main.ts | 40 ++++++--- src/packages/MarketPlace/scheme.html | 43 ++++++---- src/themes/antos_dark/afx-list-view.css | 10 ++- src/themes/antos_dark/afx-tab-bar.css | 4 +- src/themes/antos_light/afx-dock.css | 3 +- src/themes/antos_light/afx-list-view.css | 5 +- src/themes/antos_light/afx-tab-bar.css | 16 ++-- src/themes/system/afx-app-window.css | 10 +++ src/themes/system/afx-button.css | 4 +- src/themes/system/afx-label.css | 5 +- src/themes/system/afx-list-view.css | 13 ++- src/themes/system/afx-sys-panel.css | 4 +- 18 files changed, 332 insertions(+), 81 deletions(-) create mode 100644 src/core/tags/StackPanelTag.ts diff --git a/Makefile b/Makefile index 22c7fbd..63b8d36 100644 --- a/Makefile +++ b/Makefile @@ -41,7 +41,8 @@ tags = dist/core/tags/tag.js \ dist/core/tags/AppDockTag.js \ dist/core/tags/SystemPanelTag.js \ dist/core/tags/DesktopTag.js \ - dist/core/tags/StackMenuTag.js + dist/core/tags/StackMenuTag.js \ + dist/core/tags/StackPanelTag.js javascripts= dist/core/core.js \ dist/core/settings.js \ diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts index 0a61748..b02d41c 100644 --- a/d.ts/antos.d.ts +++ b/d.ts/antos.d.ts @@ -5329,11 +5329,11 @@ declare namespace OS { /** * Placeholder of the tab select event handle * - * @private + * @protected * @type {TagEventCallback} * @memberof TabContainerTag */ - private _ontabselect; + protected _ontabselect: TagEventCallback; /** *Creates an instance of TabContainerTag. * @memberof TabContainerTag @@ -5369,11 +5369,13 @@ declare namespace OS { */ get tabs(): TabContainerTabType[]; /** - * 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); + get selectedIndex(): number; /** * Setter: * @@ -8122,6 +8124,56 @@ declare namespace OS { } } } +declare namespace OS { + namespace GUI { + 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} + */ + class StackPanelTag extends TabContainerTag { + private _current_pannel_index; + /** + * Mount the tag and bind basic events + * + * @protected + * @memberof StackPanelTag + */ + protected mount(): void; + /** + * Set the tab select event handle + * + * @memberof StackPanelTag + */ + set ontabselect(f: TagEventCallback); + /** + * Navigate to the next panel + * + * @memberof StackPanelTag + */ + navigateNext(): void; + /** + * Navigate back to the previous panel + * + * @memberof StackPanelTag + */ + navigateBack(): void; + /** + * Navigate to a custom tab + * + * @memberof StackPanelTag + */ + private navigate; + } + } + } +} declare namespace OS { namespace GUI { namespace tag { diff --git a/src/core/gui.ts b/src/core/gui.ts index ac62728..e17c8bf 100644 --- a/src/core/gui.ts +++ b/src/core/gui.ts @@ -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); } diff --git a/src/core/tags/StackPanelTag.ts b/src/core/tags/StackPanelTag.ts new file mode 100644 index 0000000..e5854ee --- /dev/null +++ b/src/core/tags/StackPanelTag.ts @@ -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) { + } + /** + * 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); + } + } +} \ No newline at end of file diff --git a/src/core/tags/TabContainerTag.ts b/src/core/tags/TabContainerTag.ts index 03a9e85..fa07e34 100644 --- a/src/core/tags/TabContainerTag.ts +++ b/src/core/tags/TabContainerTag.ts @@ -45,11 +45,11 @@ namespace OS { /** * Placeholder of the tab select event handle * - * @private + * @protected * @type {TagEventCallback} * @memberof TabContainerTag */ - private _ontabselect: TagEventCallback; + protected _ontabselect: TagEventCallback; /** *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: diff --git a/src/packages/MarketPlace/main.css b/src/packages/MarketPlace/main.css index ff8c137..795c085 100644 --- a/src/packages/MarketPlace/main.css +++ b/src/packages/MarketPlace/main.css @@ -5,23 +5,7 @@ afx-app-window[data-id="marketplace-win"] afx-list-view[data-id='repo'] div.list afx-app-window[data-id="marketplace-win"] afx-vbox[data-id='container'] div[data-id="desc-container"]{ overflow-y: auto; - overflow-x: none; -} -afx-app-window[data-id="marketplace-win"] afx-vbox[data-id='container'] afx-hbox { - padding-left: 10px; -} -afx-app-window[data-id="marketplace-win"] afx-label[data-id='appname'] i.label-text{ - font-weight: bold; - font-size: 20px; - padding: 10px; -} - -afx-app-window[data-id="marketplace-win"] div[data-id='appname']:before { - content: "\f085"; - font-family: "FontAwesome"; - font-size: 25px; - font-style: normal; - margin-right: 10px; + overflow-x: hidden; } afx-app-window[data-id="marketplace-win"] p[data-id='app-desc'] { text-align: justify; @@ -38,9 +22,10 @@ afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] { padding-left:10px; display: table; margin: 0; + font-size: 13px; } -afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] { - border-bottom: 1px solid #afafaf; +afx-app-window[data-id="marketplace-win"] afx-tab-bar { + border-top: 1px solid #c3c3c3; } afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] input{ border: 0; @@ -48,13 +33,14 @@ afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] i } afx-app-window[data-id="marketplace-win"] div[data-id="searchicon"]:before{ content: "\f002"; - display: block; background-color:transparent; color:#afafaf; font-family: "FontAwesome"; - padding-top: 3px; - padding-left:3px; - /* font-size: 25px; */ + padding-left:5px; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; } afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] li{ padding:0; @@ -70,6 +56,10 @@ afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] span{ afx-app-window[data-id="marketplace-win"] span.info-header{ font-weight: bold; } +afx-app-window[data-id="marketplace-win"] span.info-detail +{ + word-break: break-word; +} afx-app-window[data-id="marketplace-win"] afx-label[data-id="vstat"] { font-size: 11px; color: chocolate; @@ -85,6 +75,75 @@ afx-app-window[data-id = "repository-dialog-win"] afx-list-view[data-id="repo-li } afx-app-window[data-id="marketplace-win"] afx-tab-bar[data-id="catlist"] i.label-text +{ + font-weight: bold; +} + +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] > div.list-container { + margin: 0 auto; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] > div.list-container > ul +{ + display: flex; + flex-flow: row wrap; + justify-content: center; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] > div.list-container > ul li{ + /*display: block;*/ + width: 90px; + text-align: center; + font-size: 40px; + /*justify-content: normal !important;*/ +} + +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] i{ + display: block; + width: 100%; +} + + +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] i.label-text{ + word-break: break-word; + font-size: 14px; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] i.icon-style { + width: 40px; + height: 40px; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] afx-label span +{ + flex-direction: column; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] > div.list-container > ul li:hover { + background-color: transparent; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"]> div.list-container > ul .afx-list-item:nth-child(even) li +{ + background-color: transparent; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li:hover +{ + background-color: #cecece; + color: #262626; + border-radius: 10px; +} +afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"] > div.list-container > ul .afx-list-item li.selected +{ + background-color: #116cd6; + color:white; + border-radius: 10px; +} + +afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="app-header"] afx-button button +{ + border-radius: 0; +} +afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="app-header"] +{ + border-radius: 0; + border-bottom: 1px solid #c3c3c3; +} +afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="app-header"] afx-button[data-id="appname"] i.label-text { font-weight: bold; } \ No newline at end of file diff --git a/src/packages/MarketPlace/main.ts b/src/packages/MarketPlace/main.ts index ba78be9..313f5fd 100644 --- a/src/packages/MarketPlace/main.ts +++ b/src/packages/MarketPlace/main.ts @@ -26,7 +26,7 @@ namespace OS { private applist: GUI.tag.ListViewTag; private catlist: GUI.tag.TabBarTag; private container: GUI.tag.VBoxTag; - private appname: GUI.tag.LabelTag; + private appname: GUI.tag.ButtonTag; private appdetail: HTMLUListElement; private appdesc: HTMLParagraphElement; private btinstall: GUI.tag.ButtonTag; @@ -39,6 +39,20 @@ namespace OS { } main(): void { + const stack_panel = this.find("stack-panel") as GUI.tag.StackPanelTag; + this.container = this.find("container") as GUI.tag.VBoxTag; + this.appname = this.find("appname") as GUI.tag.ButtonTag; + this.appdesc = this.find("app-desc") as HTMLParagraphElement; + this.appdetail = this.find("app-detail") as HTMLUListElement; + this.btinstall = this.find("bt-install") as GUI.tag.ButtonTag; + this.btremove = this.find("bt-remove") as GUI.tag.ButtonTag; + this.btexec = this.find("bt-exec") as GUI.tag.ButtonTag; + this.searchbox = this.find("searchbox") as HTMLInputElement; + + this.appname.onbtclick = (_) => { + this.applist.selected = -1; + stack_panel.navigateBack(); + } this.installdir = this.systemsetting.system.pkgpaths.user; // test repository this.apps_meta = {}; @@ -47,13 +61,15 @@ namespace OS { this.catlist = this.find("catlist") as GUI.tag.TabBarTag; this.applist.onlistselect = (e) => { const data = e.data.item.data; - return this.appDetail(data); + this.appDetail(data); + stack_panel.navigateNext(); }; this.catlist.ontabselect = (e) => { const selected = this.catlist.selected; if(selected < 0) return; + if(selected === 0) { return this.resetAppList(); @@ -93,14 +109,7 @@ namespace OS { this.applist.data = result; }; - this.container = this.find("container") as GUI.tag.VBoxTag; - this.appname = this.find("appname") as GUI.tag.LabelTag; - this.appdesc = this.find("app-desc") as HTMLParagraphElement; - this.appdetail = this.find("app-detail") as HTMLUListElement; - this.btinstall = this.find("bt-install") as GUI.tag.ButtonTag; - this.btremove = this.find("bt-remove") as GUI.tag.ButtonTag; - this.btexec = this.find("bt-exec") as GUI.tag.ButtonTag; - this.searchbox = this.find("searchbox") as HTMLInputElement; + $(this.container).css("visibility", "hidden"); this.btexec.onbtclick = (_e) => { const el = this.applist.selectedItem; @@ -173,14 +182,18 @@ namespace OS { switch (e.which) { case 37: return e.preventDefault(); + /* case 38: this.applist.selectPrev(); return e.preventDefault(); + */ case 39: return e.preventDefault(); + /* case 40: this.applist.selectNext(); return e.preventDefault(); + */ case 13: return e.preventDefault(); default: @@ -375,6 +388,8 @@ namespace OS { this.appname.text = d.name; const status = this.find("vstat") as GUI.tag.LabelTag; status.text = ""; + $(this.appdesc).empty(); + $(this.appdetail).empty(); if (d.description) { d.description .asFileHandle() @@ -391,8 +406,6 @@ namespace OS { ); return $(this.appdesc).empty(); }); - } else { - $(this.appdesc).empty(); } const pkgcache = this.systemsetting.system.packages; this.btinstall.text = "__(Install)"; @@ -423,7 +436,6 @@ namespace OS { $(this.btexec).hide(); } - $(this.appdetail).empty(); for (let k in d) { const v = d[k]; if (k !== "name" && k !== "description" && k !== "domel") { @@ -432,7 +444,7 @@ namespace OS { .append( $("").html(k) ) - .append($("").html(v)) + .append($("").html(v)) ); } } diff --git a/src/packages/MarketPlace/scheme.html b/src/packages/MarketPlace/scheme.html index e358ea7..23b4b09 100644 --- a/src/packages/MarketPlace/scheme.html +++ b/src/packages/MarketPlace/scheme.html @@ -1,20 +1,25 @@ - + - -
- - - - - - + + + + +
+ + + + + + + + - - -
- - - + + +
+ + +

@@ -24,5 +29,11 @@
- + + + + + + + \ No newline at end of file diff --git a/src/themes/antos_dark/afx-list-view.css b/src/themes/antos_dark/afx-list-view.css index 5653366..6440a21 100644 --- a/src/themes/antos_dark/afx-list-view.css +++ b/src/themes/antos_dark/afx-list-view.css @@ -23,11 +23,13 @@ afx-list-view.dropdown > div.list-container > ul{ background-color: #363636; border-top-left-radius: 0px; } - -afx-list-view.dropdown { - color: white; +afx-list-view.dropdown div.list-container > div > afx-label +{ border:1px solid #262626; border-radius: 3px; +} +afx-list-view.dropdown { + color: white; background-color: transparent; } @@ -51,7 +53,7 @@ afx-list-view div.button_container afx-button{ afx-list-view div.button_container afx-button button{ border-radius: 0; } -afx-list-view .afx-list-item li afx-label.description i.label-text +afx-list-view .afx-list-item li afx-label.description { font-size: 13px; padding-left: 10px; diff --git a/src/themes/antos_dark/afx-tab-bar.css b/src/themes/antos_dark/afx-tab-bar.css index 5b9f067..c860266 100644 --- a/src/themes/antos_dark/afx-tab-bar.css +++ b/src/themes/antos_dark/afx-tab-bar.css @@ -3,12 +3,12 @@ afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list { background-color: #464646; color:white; - border-bottom:1px solid #262626; + border-bottom:2px solid #116cd6; /* #262626;*/ } afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected { background-color: #464646; color:white; - border-right:1px solid #262626; + border-right:2px solid #116cd6; /* #262626;*/ } \ No newline at end of file diff --git a/src/themes/antos_light/afx-dock.css b/src/themes/antos_light/afx-dock.css index eb0c480..4ccb5ca 100644 --- a/src/themes/antos_light/afx-dock.css +++ b/src/themes/antos_light/afx-dock.css @@ -12,5 +12,6 @@ afx-apps-dock{ afx-apps-dock afx-button.selected > button { background-color: #2786F3; color: white; - border: 1px solid #dedede; + /* border: 1px solid #dedede;*/ + } \ No newline at end of file diff --git a/src/themes/antos_light/afx-list-view.css b/src/themes/antos_light/afx-list-view.css index 00099c7..a918bf5 100644 --- a/src/themes/antos_light/afx-list-view.css +++ b/src/themes/antos_light/afx-list-view.css @@ -27,9 +27,12 @@ afx-list-view.dropdown > div.list-container > ul{ afx-list-view.dropdown{ color: #414339; + background-color: transparent; +} +afx-list-view.dropdown div.list-container > div > afx-label +{ border:1px solid #a6a6a6; border-radius: 3px; - background-color: transparent; } afx-list-view ul.complex-content{ padding: 0; diff --git a/src/themes/antos_light/afx-tab-bar.css b/src/themes/antos_light/afx-tab-bar.css index cd9623c..cbe8bad 100644 --- a/src/themes/antos_light/afx-tab-bar.css +++ b/src/themes/antos_light/afx-tab-bar.css @@ -1,14 +1,18 @@ afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected { - background-color: #116cd6; - color:white; - border-bottom:1px solid #c3c3c3; + /*background-color: #116cd6; + color:white;*/ + background-color: #f5F5F5; + color: unset; + border-bottom:2px solid #116cd6; /* #c3c3c3;*/ } afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected { - background-color: #116cd6; - color:white; - border-right:1px solid #c3c3c3; + /*background-color: #116cd6; + color:white;*/ + background-color: #f5F5F5; + color: unset; + border-right:2px solid #116cd6; /* #c3c3c3;*/ } \ No newline at end of file diff --git a/src/themes/system/afx-app-window.css b/src/themes/system/afx-app-window.css index 49ed418..dfb50be 100644 --- a/src/themes/system/afx-app-window.css +++ b/src/themes/system/afx-app-window.css @@ -44,6 +44,16 @@ afx-app-window ul li.afx-window-title{ justify-content: center; } +afx-app-window ul li.afx-window-title afx-label span +{ + justify-content: flex-start; +} + +afx-app-window ul li.afx-window-title afx-label i.label-text +{ + white-space: nowrap; +} + afx-app-window div.afx-window-content { overflow: hidden; diff --git a/src/themes/system/afx-button.css b/src/themes/system/afx-button.css index 59fd5c0..b48009a 100644 --- a/src/themes/system/afx-button.css +++ b/src/themes/system/afx-button.css @@ -2,8 +2,8 @@ afx-button button{ outline: none; min-height: 35px; min-width: 40px; - padding-left: 5px; - padding-right: 5px; + padding-left: 10px; + padding-right: 10px; } afx-button i.icon-style { diff --git a/src/themes/system/afx-label.css b/src/themes/system/afx-label.css index d1bc879..93a0872 100644 --- a/src/themes/system/afx-label.css +++ b/src/themes/system/afx-label.css @@ -8,7 +8,10 @@ afx-label span { height: 100%; } afx-label i.label-text{ + margin-left: 3px; +} + +afx-label i{ font-weight: normal; font-style: normal; - margin-left: 3px; } \ No newline at end of file diff --git a/src/themes/system/afx-list-view.css b/src/themes/system/afx-list-view.css index ed22f20..d5a2907 100644 --- a/src/themes/system/afx-list-view.css +++ b/src/themes/system/afx-list-view.css @@ -99,11 +99,22 @@ afx-list-view.dropdown div.list-container div:before { position: absolute; right: 5px; } -afx-list-view.dropdown div.list-container div > afx-label{ +afx-list-view.dropdown div.list-container > div > afx-label{ padding-left:3px; + padding-right: 25px; + height: 100%; } +afx-list-view.dropdown div.list-container > div > afx-label span +{ + justify-content: flex-start; + white-space: nowrap; + overflow: hidden; +} + afx-list-view div.button_container afx-button button { min-width: 30px; min-height: 30px; + padding-left: 5px; + padding-right: 5px; } \ No newline at end of file diff --git a/src/themes/system/afx-sys-panel.css b/src/themes/system/afx-sys-panel.css index d3df655..563e83f 100644 --- a/src/themes/system/afx-sys-panel.css +++ b/src/themes/system/afx-sys-panel.css @@ -109,10 +109,10 @@ afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul } afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li{ /*display: block;*/ - width: 70px; + width: 90px; text-align: center; font-size: 40px; - justify-content: normal !important; + /*justify-content: normal !important;*/ } afx-sys-panel afx-list-view[data-id="applist"] i{