Add features:

- add bootstrap icon font support
- classing applications by categories in start menu

src/core/settings.ts

@@ -529,6 +529,52 @@ namespace OS {
                 SCOPES: "https://www.googleapis.com/auth/drive",
             };
         }
+
+        if(!setting.applications.categories)
+        {
+            setting.applications.categories = [
+                {
+                    text: __("All"),
+                    iconclass: "bi bi-gear-wide"
+                },
+                {
+                    text: __("Media"),
+                    iconclass: "bi bi-disc"
+                },
+                {
+                    text: __("Development"),
+                    iconclass: "bi bi-hammer"
+                },
+                {
+                    text: __("Education"),
+                    iconclass: "fa fa-graduation-cap"
+                },
+                {
+                    text: __("Game"),
+                    iconclass: "fa fa-gamepad"
+                },
+                {
+                    text: __("Graphics"),
+                    iconclass: "bi bi-palette-fill"
+                },
+                {
+                    text: __("Network"),
+                    iconclass: "fa fa-globe"
+                },
+                {
+                    text: __("Office"),
+                    iconclass: "bi bi-building"
+                },
+                {
+                    text: __("System"),
+                    iconclass: "fa bi-gear-wide-connected"
+                },
+                {
+                    text: __("Utility"),
+                    iconclass: "bi bi-tools"
+                },
+            ]
+        }
     }
 
     // Register handle for application search

src/core/tags/SystemPanelTag.ts

@@ -53,6 +53,16 @@ namespace OS {
                  */
                 private _cb: (e: JQuery.MouseEventBase) => void;
 
+
+                /**
+                 * Place holder for system app list
+                 *
+                 * @private
+                 * @type {GenericObject<any>[]}
+                 * @memberof SystemPanelTag
+                 */
+                private app_list: GenericObject<any>[];
+
                 /**
                  *Creates an instance of SystemPanelTag.
                  * @memberof SystemPanelTag
@@ -66,6 +76,7 @@ namespace OS {
                     this._view = false;
                     this._pending_task = [];
                     this._loading_toh = undefined;
+                    this.app_list= [];
                 }
 
                 /**
@@ -131,6 +142,8 @@ namespace OS {
                  */
                 private search(e: JQuery.KeyboardEventBase): void {
                     const applist = this.refs.applist as ListViewTag;
+                    const catlist = this.refs.catlist as ListViewTag;
+                    catlist.selected = 0;
                     switch (e.which) {
                         case 27:
                             // escape key
@@ -153,7 +166,9 @@ namespace OS {
                             var text = (this.refs.search as HTMLInputElement)
                                 .value;
                             if (!(text.length >= 3)) {
-                                return this.refreshAppList();
+                                (this.refs.applist as ListViewTag).data = this.app_list;
+                                (this.refs.applist as ListViewTag).selected = -1;
+                                return;
                             }
                             var result = Ant.OS.API.search(text);
                             if (result.length === 0) {
@@ -232,9 +247,24 @@ namespace OS {
                                     ],
                                 },
                                 {
-                                    el: "afx-list-view",
-                                    id: "applist",
-                                    ref: "applist",
+                                    el: "afx-hbox",
+                                    children: [
+                                        {
+                                            el: "afx-list-view",
+                                            id: "catlist",
+                                            ref: "catlist",
+                                            width:"40%"
+                                        },
+                                        {
+                                            el: "afx-resizer",
+                                            width: 3,
+                                        },
+                                        {
+                                            el: "afx-list-view",
+                                            id: "applist",
+                                            ref: "applist",
+                                        }
+                                    ]
                                 },
                                 {
                                     el: "afx-hbox",
@@ -274,19 +304,22 @@ namespace OS {
                  * @memberof SystemPanelTag
                  */
                 private refreshAppList(): void {
+                    let catlist_el = (this.refs.catlist as tag.ListViewTag);
                     let k: string, v: API.PackageMetaType;
-                    const list = [];
+                    const catlist = new Set();
+                    this.app_list = [];
                     for (k in Ant.OS.setting.system.packages) {
                         v = Ant.OS.setting.system.packages[k];
                         if (v && v.app) {
-                            list.push(v);
+                            this.app_list.push(v);
+                            catlist.add(v.category.__());
                         }
                     }
                     for (k in Ant.OS.setting.system.menu) {
                         v = Ant.OS.setting.system.menu[k];
-                        list.push(v);
+                        this.app_list.push(v);
                     }
-                    list.sort(function (a, b) {
+                    this.app_list.sort(function (a, b) {
                         if (a.text < b.text) {
                             return -1;
                         } else if (a.text > b.text) {
@@ -295,7 +328,26 @@ namespace OS {
                             return 0;
                         }
                     });
-                    (this.refs.applist as ListViewTag).data = list;
+                    // build up the category menu
+                    const cat_list_data = [];
+                    cat_list_data.push(OS.setting.applications.categories[0]);
+                    (OS.setting.applications.categories as Array<GenericObject<any>>)
+                        .forEach((v) =>{
+                            if(catlist.has(v.text.__()))
+                            {
+                                cat_list_data.push(v);
+                                catlist.delete(v.text.__());
+                            }
+                        })
+                    // put the remainder to the data
+                    catlist.forEach((c) => {
+                        cat_list_data.push({
+                            text: c,
+                            iconclass: "bi bi-gear-wide"
+                        });
+                    });
+                    catlist_el.data = cat_list_data;
+                    catlist_el.selected = 0;
                 }
 
                 /**
@@ -438,7 +490,22 @@ namespace OS {
                             return this.toggle(false);
                         }
                     });
-                    Ant.OS.announcer.trigger("syspanelloaded", undefined);
+                    const catlist = (this.refs.catlist as tag.ListViewTag);
+                    catlist.onlistselect = (e) => {
+                        const applist = (this.refs.applist as ListViewTag);
+                        if(catlist.selected === 0)
+                        {
+                            applist.data = this.app_list;
+                        }
+                        else
+                        {
+                            // filter app by data
+                            applist.data = this.app_list.filter((el) =>{
+                                return el.category.__() === e.data.item.data.text.__();
+                            })
+                        }
+                        applist.selected = -1;
+                    };
                     $(this.refs.overlay)
                         .css("left", 0)
                         .css("top", `${$(this.refs.panel).height()}px`)
@@ -488,6 +555,7 @@ namespace OS {
                         }
                     });
                     this.RefreshPinnedApp();
+                    Ant.OS.announcer.trigger("syspanelloaded", undefined);
                 }
             }
 

src/core/tags/tag.ts

@@ -159,19 +159,19 @@ namespace OS {
              * `data-width` of the element, not to be confused with
              * the `width` attribute of the DOM element
              *
-             * @type {number}
+             * @type {number|string}
              * @memberof TagLayoutType
              */
-            width?: number;
+            width?: number|string;
 
             /**
              ** `data-height` of the element, not to be confused with
              * the `height` attribute of the DOM element
              *
-             * @type {number}
+             * @type {number|string}
              * @memberof TagLayoutType
              */
-            height?: number;
+            height?: number|string;
         }
 
         /**

src/packages/CodePad/package.json

@@ -7,8 +7,8 @@
         "email": "xsang.le@gmail.com",
         "licences": "GPLv3"
     },
-    "version":"0.1.3-b",
-    "category":"Developments",
+    "version":"0.1.4-b",
+    "category":"Development",
     "iconclass":"fa fa-pencil-square-o",
     "mimes":[
         "text/.*",

src/packages/Files/package.json

@@ -6,7 +6,7 @@
         "author": "Xuan Sang LE",
         "email": "xsang.le@gmail.com"
     },
-    "version":"0.1.1-a",
+    "version":"0.1.2-a",
     "category":"System",
     "iconclass":"fa fa-hdd-o",
     "mimes":["dir"],

src/themes/antos_dark/afx-sys-panel.css

@@ -46,15 +46,17 @@ afx-sys-panel afx-overlay
 {
     background-color: #363636;
     border: 1px solid #262626;
-    width: 250px;
 }
-afx-sys-panel afx-list-view[data-id="applist"]
+afx-sys-panel afx-list-view[data-id="applist"],
+afx-sys-panel afx-list-view[data-id="catlist"],
+afx-sys-panel afx-resizer
 {
     border-top: 1px solid #262626;
     border-bottom: 1px solid #262626;
 }
 
-afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li
+afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li,
+afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li
 {
     padding-top: 5px;
     padding-bottom: 5px;
@@ -65,18 +67,27 @@ afx-sys-panel afx-hbox[data-id="btlist"]  afx-button button
 {
     border: 0;
     border-left: 1px solid #262626;
+    border-top: 1px solid #262626;
 }
 
-afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover{
+afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover,
+afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li:hover
+{
     background-color: #cecece;
     color: #262626;
 }
-afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected
+afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected,
+afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li.selected
+
 {
     background-color: #116cd6;
     color:white;
 }
 
+afx-sys-panel afx-list-view[data-id="catlist"] .label-text {
+    font-weight: bold;
+}
+
 afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header {
     font-weight: bold;
 

src/themes/antos_light/afx-sys-panel.css

@@ -46,15 +46,17 @@ afx-sys-panel afx-overlay
 {
     background-color: #e7e7e7;
     border: 1px solid #9c9C9C;
-    width: 250px;
 }
-afx-sys-panel afx-list-view[data-id="applist"]
+afx-sys-panel afx-list-view[data-id="applist"],
+afx-sys-panel afx-list-view[data-id="catlist"],
+afx-sys-panel afx-resizer
 {
     border-top: 1px solid #afafaf;
     border-bottom: 1px solid #afafaf;
 }
 
-afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li
+afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li,
+afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li
 {
     padding-top: 5px;
     padding-bottom: 5px;
@@ -65,17 +67,27 @@ afx-sys-panel afx-hbox[data-id="btlist"]  afx-button button
 {
     border: 0;
     border-left: 1px solid #afafaf;
+    border-top: 1px solid #afafaf;
 }
 
-afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover{
+afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li:hover,
+afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li:hover
+
+{
     background-color: #cecece;
 }
-afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected
+afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li.selected,
+afx-sys-panel afx-list-view[data-id="catlist"] > div.list-container > ul li.selected
 {
     background-color: #116cd6;
     color:white;
 }
 
+
+afx-sys-panel afx-list-view[data-id="catlist"] .label-text {
+    font-weight: bold;
+}
+
 afx-sys-panel afx-list-view[data-id="applist"] afx-label.search-header {
     font-weight: bold;
 

src/themes/system/afx-sys-panel.css

@@ -10,6 +10,10 @@ afx-sys-panel > div{
      position:absolute;
 }
 
+afx-sys-panel afx-overlay
+{
+    width: 400px;
+}
 afx-sys-panel > div.loading::before{
     background-color: orangered;
     content: "";