Add stack panel component + redesign MarketPlace UI

- Continue improve UI elements
- Add stack panel UI tag
- Redesign MarketPlace UI to support mobile device

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 \

d.ts/antos.d.ts

@@ -5329,11 +5329,11 @@ declare namespace OS {
                 /**
                  * Placeholder of the tab select event handle
                  *
-                 * @private
+                 * @protected
                  * @type {TagEventCallback<TabContainerTabType>}
                  * @memberof TabContainerTag
                  */
-                private _ontabselect;
+                protected _ontabselect: TagEventCallback<TabContainerTabType>;
                 /**
                  *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<TabContainerTabType>);
+                /**
+                 * 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 {

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);
         }
 
 

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<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);
+        }
+    }
+}

src/core/tags/TabContainerTag.ts

@@ -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:

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;
+    overflow-x: hidden;
-}
-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;
 }
 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"] {
+afx-app-window[data-id="marketplace-win"] afx-tab-bar {
-    border-bottom: 1px solid #afafaf;
+    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:5px;
-    padding-left:3px;
+    display: flex;
-    /* font-size: 25px; */
+    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;
 }

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(
                                     $("<span class= 'info-header'>").html(k)
                                 )
-                                .append($("<span>").html(v))
+                                .append($("<span class = 'info-detail'>").html(v))
                         );
                     }
                 }

src/packages/MarketPlace/scheme.html

@@ -1,20 +1,25 @@
-<afx-app-window data-id = "marketplace-win" apptitle="MarketPlace" width="650" height="400">
+<afx-app-window data-id = "marketplace-win" apptitle="MarketPlace" width="650" height="500">
     <afx-vbox >
-        <afx-hbox data-height= "23" data-id="search-container">
+        <afx-stack-panel data-id = "stack-panel" dir = "column" tabbarheight= "40">
-            <div data-width="17" data-id="searchicon"></div>
+
-            <input data-id = "searchbox" ></input>
+            <afx-vbox>
-        </afx-hbox>
+                <afx-hbox data-height= "30" data-id="search-container">
-        <afx-tab-bar data-id = "catlist" data-height="45"></afx-tab-bar>
+                    <div data-width="17" data-id="searchicon"></div>
-        <afx-hbox>
+                    <input data-id = "searchbox" ></input>
-            <afx-list-view data-id = "applist" dropdown = "false" data-width="30%"></afx-list-view>
+                </afx-hbox>
-            <afx-resizer data-width = "3" ></afx-resizer>
+                <afx-tab-bar data-id = "catlist" data-height="45"></afx-tab-bar>
+                <afx-list-view data-id = "applist" dropdown = "false"></afx-list-view>
+            </afx-vbox>
+
+            <afx-hbox>
+            
             <afx-vbox data-id = "container">
-                    <afx-label data-id = "appname" data-height = "45"></afx-label>
+                    <afx-hbox data-height = "35" data-id="app-header">
-                    <afx-hbox data-height = "50">
+                        <afx-button data-id = "appname" iconclass = "bi bi-backspace-fill"></afx-button>
-                        <div style = "text-align:left;">
+                        <div style = "display: flex;justify-content: end;">
-                            <afx-button data-id = "bt-remove" text = "__(Uninstall)"></afx-button>
+                            <afx-button data-id = "bt-remove" text = "__(Uninstall)" iconclass = "bi bi-trash-fill"></afx-button>
-                            <afx-button data-id = "bt-exec" text = "__(Launch)"></afx-button>
+                            <afx-button data-id = "bt-exec" text = "__(Launch)" iconclass = "fa fa-cog"></afx-button>
-                            <afx-button data-id = "bt-install" text = "__(Install)" ></afx-button>
+                            <afx-button data-id = "bt-install" text = "__(Install)" iconclass = "bi bi-cloud-download-fill" ></afx-button>
                             <p class="stat"><afx-label data-id="vstat"></afx-label></p>
                         </div>
                     </afx-hbox>
@@ -24,5 +29,11 @@
                     </div>
             </afx-vbox>
         </afx-hbox>
-    </afx-vbox>
+
+        </afx-stack-panel>
+
+        
+        
+        
+    </afx-hbox>
 </afx-app-window>

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 div.list-container > div > afx-label
-afx-list-view.dropdown {
+{
-    color: white;
     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;

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;*/
 }

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;*/
+   
 }

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;

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;
+    /*background-color: #116cd6;
-    color:white;
+    color:white;*/
-    border-bottom:1px solid #c3c3c3;
+    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;
+    /*background-color: #116cd6;
-    color:white;
+    color:white;*/
-    border-right:1px solid #c3c3c3;
+    background-color: #f5F5F5;
+    color: unset;
+    border-right:2px solid #116cd6; /* #c3c3c3;*/
 }

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;

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-left: 10px;
-    padding-right: 5px;
+    padding-right: 10px;
 }
 
 afx-button i.icon-style {

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;
 }

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;
 }

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{