From 87dad4eded55119f8fded51a8aba23615e00e51f Mon Sep 17 00:00:00 2001 From: DanyLE Date: Thu, 13 Jul 2023 20:40:40 +0200 Subject: [PATCH] update: use latest UI API on system applications --- src/index.html | 3 + src/packages/Files/README.md | 1 + src/packages/Files/main.css | 44 +++++---- src/packages/Files/main.ts | 109 +++++++++++++++++++---- src/packages/Files/package.json | 2 +- src/packages/Files/scheme.html | 25 +++--- src/packages/MarketPlace/README.md | 1 + src/packages/MarketPlace/main.css | 18 ++-- src/packages/MarketPlace/package.json | 2 +- src/packages/NotePad/README.md | 3 +- src/packages/NotePad/main.css | 2 +- src/packages/NotePad/package.json | 2 +- src/packages/Setting/README.md | 5 +- src/packages/Setting/main.css | 12 +-- src/packages/Setting/main.ts | 11 +++ src/packages/Setting/package.json | 2 +- src/packages/Setting/scheme.html | 4 +- src/packages/SystemReport/README.md | 5 +- src/packages/SystemReport/main.css | 5 +- src/packages/SystemReport/package.json | 2 +- src/packages/SystemReport/scheme.html | 2 +- src/packages/SystemServices/README.md | 9 ++ src/packages/SystemServices/main.css | 3 +- src/packages/SystemServices/package.json | 2 +- 24 files changed, 199 insertions(+), 75 deletions(-) diff --git a/src/index.html b/src/index.html index 34a8032..92de2a5 100644 --- a/src/index.html +++ b/src/index.html @@ -31,6 +31,9 @@ + + + diff --git a/src/packages/Files/README.md b/src/packages/Files/README.md index 102e5ec..66a6eb1 100644 --- a/src/packages/Files/README.md +++ b/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 \ No newline at end of file diff --git a/src/packages/Files/main.css b/src/packages/Files/main.css index 4881ac1..055c78b 100644 --- a/src/packages/Files/main.css +++ b/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 } \ No newline at end of file diff --git a/src/packages/Files/main.ts b/src/packages/Files/main.ts index 6c29ddd..66ee3a8 100644 --- a/src/packages/Files/main.ts +++ b/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("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; } diff --git a/src/packages/Files/package.json b/src/packages/Files/package.json index 8daad08..2418612 100644 --- a/src/packages/Files/package.json +++ b/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"], diff --git a/src/packages/Files/scheme.html b/src/packages/Files/scheme.html index 2b547eb..ae86361 100644 --- a/src/packages/Files/scheme.html +++ b/src/packages/Files/scheme.html @@ -1,12 +1,17 @@ - - - + + + -
- - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/src/packages/MarketPlace/README.md b/src/packages/MarketPlace/README.md index 0703bd0..b803e2e 100644 --- a/src/packages/MarketPlace/README.md +++ b/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 \ No newline at end of file diff --git a/src/packages/MarketPlace/main.css b/src/packages/MarketPlace/main.css index a9f542f..332ce40 100644 --- a/src/packages/MarketPlace/main.css +++ b/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 { diff --git a/src/packages/MarketPlace/package.json b/src/packages/MarketPlace/package.json index e2c9ec1..ee70b1d 100644 --- a/src/packages/MarketPlace/package.json +++ b/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"], diff --git a/src/packages/NotePad/README.md b/src/packages/NotePad/README.md index 858fc4f..ab635d5 100644 --- a/src/packages/NotePad/README.md +++ b/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 diff --git a/src/packages/NotePad/main.css b/src/packages/NotePad/main.css index 8017c6f..7a08d47 100644 --- a/src/packages/NotePad/main.css +++ b/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); } \ No newline at end of file diff --git a/src/packages/NotePad/package.json b/src/packages/NotePad/package.json index 5cebe1f..07fe8e1 100644 --- a/src/packages/NotePad/package.json +++ b/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": [ diff --git a/src/packages/Setting/README.md b/src/packages/Setting/README.md index 04a1632..0f41e1a 100644 --- a/src/packages/Setting/README.md +++ b/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 diff --git a/src/packages/Setting/main.css b/src/packages/Setting/main.css index 78131ee..abeace3 100644 --- a/src/packages/Setting/main.css +++ b/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); } \ No newline at end of file diff --git a/src/packages/Setting/main.ts b/src/packages/Setting/main.ts index 6591a4d..1967b6d 100644 --- a/src/packages/Setting/main.ts +++ b/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; diff --git a/src/packages/Setting/package.json b/src/packages/Setting/package.json index 07f89c8..006ef71 100644 --- a/src/packages/Setting/package.json +++ b/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"] diff --git a/src/packages/Setting/scheme.html b/src/packages/Setting/scheme.html index e682487..d681ad4 100644 --- a/src/packages/Setting/scheme.html +++ b/src/packages/Setting/scheme.html @@ -1,6 +1,6 @@ - + - +
diff --git a/src/packages/SystemReport/README.md b/src/packages/SystemReport/README.md index 7576791..b5760f7 100644 --- a/src/packages/SystemReport/README.md +++ b/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 diff --git a/src/packages/SystemReport/main.css b/src/packages/SystemReport/main.css index 6f0aed2..442e107 100644 --- a/src/packages/SystemReport/main.css +++ b/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; diff --git a/src/packages/SystemReport/package.json b/src/packages/SystemReport/package.json index 9ee901c..8e7a319 100644 --- a/src/packages/SystemReport/package.json +++ b/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": [] diff --git a/src/packages/SystemReport/scheme.html b/src/packages/SystemReport/scheme.html index 1d217f7..c5c7626 100644 --- a/src/packages/SystemReport/scheme.html +++ b/src/packages/SystemReport/scheme.html @@ -1,4 +1,4 @@ - + diff --git a/src/packages/SystemServices/README.md b/src/packages/SystemServices/README.md index e69de29..acf7e7e 100644 --- a/src/packages/SystemServices/README.md +++ b/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 \ No newline at end of file diff --git a/src/packages/SystemServices/main.css b/src/packages/SystemServices/main.css index 6032ea8..98351c9 100644 --- a/src/packages/SystemServices/main.css +++ b/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; diff --git a/src/packages/SystemServices/package.json b/src/packages/SystemServices/package.json index 7f7965f..217302c 100644 --- a/src/packages/SystemServices/package.json +++ b/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": []