update: use latest UI API on system applications

This commit is contained in:
DanyLE 2023-07-13 20:40:40 +02:00 committed by Dany LE
parent e6bf4d5352
commit 87dad4eded
24 changed files with 199 additions and 75 deletions

View File

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

View File

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

View File

@ -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: #cecece;
color:#414339;
background-color: var(--background-quaternary) !important;
color:var(--text-secondary) !important;
}
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
}

View File

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

View File

@ -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"],

View File

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

View File

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

View File

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

View File

@ -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"],

View File

@ -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.2-b: use system css variables in theme
- v0.1.1-b: update README

View File

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

View File

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

View File

@ -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.4-b: use system css variables in theme
- v0.1.2-b: minor bug fix on UI
- v0.1.2-b: add README

View File

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

View File

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

View File

@ -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"]

View File

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

View File

@ -3,5 +3,6 @@
Provide system wise notification service (Push Notification)
## Change logs
- 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

View File

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

View File

@ -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": []

View File

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

View File

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

View File

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

View File

@ -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": []