update: use latest UI API on system applications

src/index.html

@@ -31,6 +31,9 @@
         <link rel="preload" href="resources/themes/system/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>
         <link rel="preload" href="resources/themes/system/fonts/bootstrap-icons.woff2" as="font" type="font/woff2" crossorigin>
         <link href="resources/themes/system/system.css" rel="stylesheet">
+        <!-- default theme-->
+        <link href="resources/themes/system/antos.css" rel="stylesheet">
+        
         <link id="ostheme" rel="stylesheet" href="">
         <script src="scripts/jquery-3.4.1.min.js"></script>
         <script src="scripts/antos.js"></script>

src/packages/Files/README.md

@@ -6,4 +6,5 @@ This application is included in the AntOS delivery as system application and
 cannot be removed/uinstalled by regular user
 
 ## Change logs
+- v0.1.8-b: use system css variables in theme
 - v0.1.7-b: fix - file grid view double click event hanling on diffent cells of a row

src/packages/Files/main.css

@@ -1,9 +1,6 @@
-/*afx-app-window[data-id ='files-app-window'] afx-list-view{
-    border-top:1px solid #A6A6A6;
-}*/
+
 afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']{
     border-right: 0;
-    /* border-top:1px solid #A6A6A6; */
     padding:0;
 }
 afx-app-window[data-id ='files-app-window'] afx-file-view afx-list-view i:before{
@@ -12,20 +9,37 @@ afx-app-window[data-id ='files-app-window'] afx-file-view afx-list-view i:before
     font-style: normal;
     text-align: center;
 }
-afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri'] li{
-    background-color: transparent;
+
+afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri'] li.selected {
+    background-color: var(--background-quaternary) !important;
+    color:var(--text-secondary) !important;
 }
-afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']   li.selected {
-    background-color: #cecece;
-    color:#414339;
-}
-afx-app-window[data-id ='files-app-window'] .afx-window-top{
-    border-bottom: 0;
-}
-afx-app-window[data-id ='files-app-window'] afx-vbox[data-id = "nav-bar"]{
-    background-color: #dfdfdf;
+
+afx-app-window[data-id ='files-app-window'] afx-file-view {
+    background-color: var(--background-tertiary);
 }
 
 afx-app-window[data-id ='files-app-window'] button{
     border-radius: 0;
+}
+afx-app-window[data-id ='files-app-window'] afx-tab-bar[data-id ='path-nav'] afx-list-view > div.list-container > ul li{
+    padding: 0;
+    padding-right: 7px;
+    padding-left: 7px;
+    border: 0;
+}
+
+afx-app-window[data-id ='files-app-window'] afx-hbox[data-id ='nav-bar'] {
+    border-bottom: 1px solid var(--border-primary);
+}
+
+afx-app-window[data-id ='files-app-window'] afx-tab-bar[data-id ='path-nav'] afx-list-view > div.list-container > ul li::before{
+    content: "\F27B";
+    font-family: "bootstrap-icons";
+    font-style: normal;
+    /* font-size: 41px; */
+    display: block;
+    position: absolute;
+    color: var(--text-secondary);
+    right: -7px
 }

src/packages/Files/main.ts

@@ -49,7 +49,7 @@ namespace OS {
 
 
             /**
-             *
+             * main entry point
              *
              * @returns
              * @memberof Files
@@ -179,7 +179,7 @@ namespace OS {
                 };
 
                 this.favo.onlistselect = (e) => {
-                    if(this.currdir.path == e.data.item.data.path)
+                    if(this.currdir.path.startsWith(e.data.item.data.path))
                     {
                         return;
                     }
@@ -209,10 +209,45 @@ namespace OS {
                             .catch((e) => reject(__e(e)));
                     });
                 };
+                const p_list = this.find<GUI.tag.TabBarTag>("path-nav");
+                p_list.ontabselect = (e) => {
+                    const handle: API.VFS.BaseFileHandle = e.data.item.data.handle;
+                    if(this.currdir.path == handle.path)
+                    {
+                        return;
+                    }
+                    this.view.path = handle.path;
+                }
                 this.view.onchdir = (e) => {
-                    const dir = e.data.path.asFileHandle();
+                    const dir = (e.data.path as string).asFileHandle();
                     this.currdir = dir;
-                    (this.scheme as GUI.tag.WindowTag).apptitle = dir.path;
+                    if(dir.genealogy)
+                    {
+                        (this.scheme as GUI.tag.WindowTag).apptitle = dir.filename;
+                    }
+                    else
+                    {
+                        (this.scheme as GUI.tag.WindowTag).apptitle = `${dir.protocol}://`;
+                    }
+                    // update the path-nav
+                    let base_vfs = `${dir.protocol}://`.asFileHandle();
+                    let segments = [{
+                        text: base_vfs.path,
+                        handle: base_vfs
+                    }]
+                    if(dir.genealogy)
+                    {
+                        
+                        segments = segments.concat(dir.genealogy.map((e)=> {
+                            base_vfs = `${base_vfs.path}/${e}`.asFileHandle();
+                            return {
+                                text: e,
+                                handle: base_vfs
+                            }
+                        }));
+                    }
+                    p_list.items = segments;
+                    p_list.scroll_to_end();
                     // update the current favo
                     const matched = this.favo.data.map((e,i) => {
                         return {
@@ -221,21 +256,11 @@ namespace OS {
                         }
                     })
                     .filter(e => {
-                        return e.path == dir.path
+                        return dir.path.startsWith(e.path as string);
                     });
-                    if(matched.length == 0)
-                    {
-                        this.favo.push({
-                            text: dir.basename,
-                            path: dir.path,
-                            description: {text: dir.path},
-                            selected: true,
-                            tag: "afx-dbline-list-item",
-                            iconclass: "fa fa-folder"
-                        }, true);
-                    }
-                    else
+                    if(matched.length != 0)
                     {
+                        //console.log(matched[0]);
                         this.favo.selected = matched[0].index;
                     }
                 }
@@ -326,6 +351,48 @@ namespace OS {
                     }
                 });
 
+                // register responsive event
+                this.morphon(GUI.RESPONSIVE.MEDIUM, (fulfilled:boolean) => {
+                    /**
+                     * If the Window is bigger than medium size, then
+                     * we enable the side bar
+                     * 
+                     * otherwise, use the top bar
+                     */
+                    const box = this.find("container") as GUI.tag.TileLayoutTag;
+                    const nav = this.find("nav-bar") as GUI.tag.TileLayoutTag;
+                    const fav = this.find("favouri") as GUI.tag.ListViewTag;
+                    const resizer = this.find("resizer") as GUI.tag.ResizerTag;
+                    if(fulfilled)
+                    {
+                        box.name = "hbox";
+                        box.dir = "row";
+
+                        nav.reversed = true;
+                        nav.name = "vbox";
+                        nav.dir = "column";
+
+                        fav.dropdown = false;
+
+                        resizer.dir = "hz";
+                        resizer.disable = false;
+                    }
+                    else
+                    {
+                        box.name = "vbox";
+                        box.dir = "column";
+
+                        nav.reversed = false;
+                        nav.name = "hbox";
+                        nav.dir = "row";
+
+                        fav.dropdown = true;
+
+                        resizer.dir = "ve";
+                        resizer.disable = true;
+                    }
+                });
+
                 // bind keyboard shortcut
                 this.bindKey("CTRL-F", () =>
                     this.actionFile(`${this.name}-mkf`)
@@ -495,6 +562,10 @@ namespace OS {
                     {
                         text: "__(View)",
                         nodes: [
+                            {
+                                text: "__(Toggle responsive)",
+                                dataid: `${this.name}-responsive`,
+                            },
                             {
                                 text: "__(Refresh)",
                                 dataid: `${this.name}-refresh`,
@@ -569,6 +640,10 @@ namespace OS {
                     case `${this.name}-refresh`:
                         this.view.path = this.currdir.path;
                         return;
+                    case `${this.name}-responsive`:
+                        const win = (this.scheme as GUI.tag.WindowTag);
+                        win.responsive = !win.responsive;
+                        return;
                     case `${this.name}-nav`:
                         this.setting.nav = data.checked;
                 }

src/packages/Files/package.json

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

src/packages/Files/scheme.html

@@ -1,12 +1,17 @@
-<afx-app-window data-id = "files-app-window" apptitle="Files" width="600" height="500">
-        <afx-vbox>
-            <afx-hbox data-height = "35" data-id = "nav-bar">
+<afx-app-window data-id = "files-app-window" apptitle="Files" width="600" height="500" responsive="true">
+        <afx-tile data-id="container" name="vbox" dir="column">
+            <afx-tile data-height = "35" min-width="120" data-width="180" data-id = "nav-bar" name="hbox" dir="row">
                 <afx-list-view data-id = "favouri" dropdown="true"></afx-list-view>
-                <div data-width = "2"></div>
-                <afx-button data-width = "40" data-id = "btback" iconclass = "fa fa-arrow-up"></afx-button>
-                <afx-button data-width = "40" data-id = "btgrid" iconclass = "fa fa-th"></afx-button>
-                <afx-button data-width = "40" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>
-            </afx-hbox>
-            <afx-file-view data-id = "fileview"></afx-file-view>           
-        </afx-vbox>
+            </afx-tile>
+            <afx-resizer data-id="resizer" dir="ve" disable="true" data-width="3" data-height="0"></afx-resizer>
+            <afx-vbox>
+                <afx-hbox data-width="120" data-height="35" data-id="nav-bar">
+                    <afx-tab-bar data-id = "path-nav" dir="horizontal" ></afx-tab-bar>
+                    <afx-button data-width = "40" data-id = "btback" iconclass = "fa fa-arrow-up"></afx-button>
+                    <afx-button data-width = "40"  data-id = "btgrid" iconclass = "fa fa-th"></afx-button>
+                    <afx-button data-width = "40"  data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>
+                </afx-hbox>
+                <afx-file-view data-id = "fileview"></afx-file-view>
+            </afx-vbox>           
+        </afx-tile>
     </afx-app-window>

src/packages/MarketPlace/README.md

@@ -5,6 +5,7 @@ This application is icluded in the AntOS delivery
 and cannot be removed/uinstalled by regular user
 
 ## Change logs
+- 0.2.8-b: use system css variables in theme
 - 0.2.7-b: only launch application
 - 0.2.6-b: improve install process
 - v0.2.5-b: add README.md

src/packages/MarketPlace/main.css

@@ -25,8 +25,8 @@ afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] {
     font-size: 13px;
 }
 afx-app-window[data-id="marketplace-win"] afx-tab-bar {
-    border-top: 1px solid #c3c3c3;
-    border-bottom: 1px solid #c3c3c3;
+    border-top: 1px solid var(--border-quaternary);
+    border-bottom: 1px solid var(--border-quaternary);
 }
 afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] input{
     border: 0;
@@ -35,7 +35,7 @@ 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";
     background-color:transparent;
-    color:#afafaf;
+    color: var(--text-disable);
     font-family: "FontAwesome";
     padding-left:5px;
     display: flex;
@@ -63,7 +63,7 @@ afx-app-window[data-id="marketplace-win"] span.info-detail
 }
 afx-app-window[data-id="marketplace-win"] afx-label[data-id="vstat"] {
     font-size: 11px;
-    color: chocolate;
+    color: var(--text-warning);
 }
 afx-app-window[data-id="marketplace-win"] p.stat {
     margin: 0;
@@ -124,14 +124,14 @@ afx-app-window[data-id="marketplace-win"] afx-list-view[data-id="applist"]> div.
 }
 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;
+    background-color: var(--item-bg-hover);
+    color: var(--text-primary);
     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;
+    background-color: var(--item-bg-active);
+    color:var(--text-tertiary);
     border-radius: 10px;
 }
 
@@ -142,7 +142,7 @@ afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="app-header"] afx-but
 afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="app-header"]
 {
     border-radius: 0;
-    border-bottom: 1px solid #c3c3c3;
+    border-bottom: 1px solid var(--border-quaternary);
 }
 afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="app-header"] afx-button[data-id="appname"] i.label-text
 {

src/packages/MarketPlace/package.json

@@ -7,7 +7,7 @@
         "author": "Xuan Sang LE",
         "email": "xsang.le@gmail.com"
     },
-    "version":"0.2.7-b",
+    "version":"0.2.8-b",
     "category":"System",
     "iconclass":"fa  fa-shopping-bag",
     "mimes":["none"],

src/packages/NotePad/README.md

@@ -6,4 +6,5 @@ It has very barebone features: open/edit/save text file.
 Text/Code editor with fancy features can be optionally installed via the Market Place
 
 ## Change logs
--v0.1.1-b: update README
+- v0.1.2-b: use system css variables in theme
+- v0.1.1-b: update README

src/packages/NotePad/main.css

@@ -3,5 +3,5 @@ afx-app-window[data-id="NotePad"] textarea[data-id="editor"]
     margin: 0;
     padding:10px;
     border: 0;
-    background-color: transparent;
+    background-color: var(--background-tertiary);
 }

src/packages/NotePad/package.json

@@ -7,7 +7,7 @@
         "author": "Xuan Sang LE",
         "email": "mrsang@iohub.dev"
     },
-    "version": "0.1.1-b",
+    "version": "0.1.2-b",
     "category": "Utility",
     "iconclass": "bi bi-pen",
     "mimes": [

src/packages/Setting/README.md

@@ -10,5 +10,6 @@ In case of system anormaly after the modification, the system settings can be re
 by simply removing the setting file
 
 ## Change logs
--v0.1.2-b: minor bug fix on UI
--v0.1.2-b: add README
+- v0.1.4-b: use system css variables in theme
+- v0.1.2-b: minor bug fix on UI
+- v0.1.2-b: add README

src/packages/Setting/main.css

@@ -5,13 +5,13 @@ afx-app-window[data-id = "setting-window"] afx-label.header i.label-text{
 /*APPEARANCE*/
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] div[data-id = "wp-preview"]{
     display: block;
-    border:1px solid #cbcbcb;
+    border:1px solid var(--border-quaternary);
     border-radius: 10px;
 }
 
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-list-view[data-id="wplist"]
 {
-    border:1px solid #cbcbcb;
+    border:1px solid var(--border-quaternary);
 }
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-resizer{
     border:0;
@@ -20,7 +20,7 @@ afx-app-window[data-id = "setting-window"] afx-hbox[data-id="appearance"] afx-re
 /*VFS*/
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="vfs"] afx-list-view[data-id="mplist"]
 {
-    border: 1px solid #cbcbcb;
+    border: 1px solid var(--border-quaternary);
 }
 
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="vfs"] afx-button.btnsel button{
@@ -31,15 +31,15 @@ afx-app-window[data-id = "setting-window"] afx-hbox[data-id="vfs"] afx-button.bt
 /*LANGUAGES*/
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="locale"] afx-list-view[data-id="lglist"]
 {
-    border: 1px solid #cbcbcb;
+    border: 1px solid var(--border-quaternary);
 }
 /*STARTUP*/
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="startup"] afx-list-view
 {
-    border: 1px solid #cbcbcb;
+    border: 1px solid var(--border-quaternary);
 }
 
 afx-app-window[data-id = "setting-window"] afx-hbox[data-id="app-services"] afx-list-view
 {
-    border: 1px solid #cbcbcb;
+    border: 1px solid var(--border-quaternary);
 }

src/packages/Setting/main.ts

@@ -130,6 +130,17 @@ namespace OS {
                             );
                         });
                 };
+                this.morphon(GUI.RESPONSIVE.MEDIUM, (fulfilled:boolean) => {
+
+                    if(fulfilled)
+                    {
+                        containter.dir = "row";
+                    }
+                    else
+                    {
+                        containter.dir = "column";
+                    }
+                });
             }
         }
         Setting.singleton = true;

src/packages/Setting/package.json

@@ -6,7 +6,7 @@
         "author": "Xuan Sang LE",
         "email": "xsang.le@gmail.com"
     },
-    "version":"0.1.3-b",
+    "version":"0.1.4-b",
     "category":"System",
     "iconclass":"fa fa-wrench",
     "mimes":["none"]

src/packages/Setting/scheme.html

@@ -1,6 +1,6 @@
-<afx-app-window data-id = "setting-window" apptitle="Setting" width="600" height="500">
+<afx-app-window data-id = "setting-window" apptitle="Setting" width="600" height="500" responsive="true">
    <afx-vbox>
-        <afx-tab-container data-id = "container" dir = "column" tabbarheight= "40">
+        <afx-tab-container data-id = "container" dir = "column" tabbarheight= "40" tabbarwidth="160">
 
             <afx-hbox tabname="__(Appearance)" data-id="appearance" iconclass = "fa fa-paint-brush">
                 <div data-width="10"></div>

src/packages/SystemReport/README.md

@@ -3,5 +3,6 @@
 Provide system wise notification service (Push Notification)
 
 ## Change logs
--v0.1.3-b: Rename from Syslog to SystemReport, move all services to SystemServices package
--v0.1.2-b: add README
+- v0.1.4-b: use system css variables in theme
+- v0.1.3-b: Rename from Syslog to SystemReport, move all services to SystemServices package
+- v0.1.2-b: add README

src/packages/SystemReport/main.css

@@ -8,7 +8,7 @@ afx-app-window[data-id ='SystemReport'] .afx-bug-list-item-error {
 }
 
 afx-app-window[data-id ='SystemReport'] .afx-bug-list-item-error i::before {
-    color: chocolate;
+    color: var(--text-error);
 }
 afx-app-window[data-id ='SystemReport'] .afx-bug-list-item-time{
     display: block;
@@ -19,10 +19,11 @@ afx-app-window[data-id ='SystemReport'] .afx-bug-list-item-time i.label-text{
     font-style: italic;
 }
 
+/*
 afx-app-window[data-id ='SystemReport'] afx-bug-list-item li.selected {
     background-color: #116cd6;
     color: white;
-}
+}*/
 
 afx-app-window[data-id ='SystemReport'] pre {
     padding: 10px;

src/packages/SystemReport/package.json

@@ -8,7 +8,7 @@
         "email": "xsang.le@gmail.com",
         "licences": "GPLv3"
     },
-    "version": "0.1.3-b",
+    "version": "0.1.4-b",
     "category": "System",
     "iconclass": "fa fa-bug",
     "mimes": []

src/packages/SystemReport/scheme.html

@@ -1,4 +1,4 @@
-<afx-app-window data-id="SystemReport"  width='600' height='450' apptitle = "__(System error log)" >
+<afx-app-window data-id="SystemReport"  width='600' height='450' apptitle = "__(System error log)" responsive="true">
     <afx-hbox>
         <afx-list-view data-id = "loglist" data-width="200"> </afx-list-view>
         <afx-resizer data-width = "2" ></afx-resizer>

src/packages/SystemServices/README.md

@@ -0,0 +1,9 @@
+## System services
+
+
+Basic services:
+- Push notification
+- Calendar service
+
+### change logs
+- 0.1.1-a: use system css variables in theme

src/packages/SystemServices/main.css

@@ -15,7 +15,8 @@ afx-list-view[data-id = "notifylist"]
     padding:0;
 }
 afx-list-view[data-id = "notifylist"] > div.list-container > ul li{
-    border:1px solid #464646;
+    border:1px solid var(--border-quaternary);
+    background-color: var(--item-bg-odd);
     border-radius: 3px;
     margin-bottom: 5px;
     -ms-word-break: break-all;

src/packages/SystemServices/package.json

@@ -8,7 +8,7 @@
         "email": "xsang.le@gmail.com",
         "licences": "GPLv3"
     },
-    "version": "0.1.0-a",
+    "version": "0.1.1-a",
     "category": "System",
     "iconclass": "fa fa-cog",
     "mimes": []