dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-07-01 11:09:49 +02:00
Code Issues Projects Releases Wiki Activity

Add stack panel component + redesign MarketPlace UI

Browse Source 
- Continue improve UI elements
- Add stack panel UI tag
- Redesign MarketPlace UI to support mobile device
This commit is contained in:
DanyLE 2022-12-09 13:17:35 +01:00
parent 3f4bdea3ad
commit 7c3b8a7432
18 changed files with 332 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Makefile
View File

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

58
d.ts/antos.d.ts vendored
View File

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

2
src/core/gui.ts
View File

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

76
src/core/tags/StackPanelTag.ts Normal file
View File

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

12
src/core/tags/TabContainerTag.ts
View File

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

105
src/packages/MarketPlace/main.css
View File

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

40
src/packages/MarketPlace/main.ts
View File

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

43
src/packages/MarketPlace/scheme.html
View File

@ -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">
<div data-width="17" data-id="searchicon"></div>
<input data-id = "searchbox" ></input>
</afx-hbox>
<afx-tab-bar data-id = "catlist" data-height="45"></afx-tab-bar>
<afx-hbox>
<afx-list-view data-id = "applist" dropdown = "false" data-width="30%"></afx-list-view>
<afx-resizer data-width = "3" ></afx-resizer>
<afx-stack-panel data-id = "stack-panel" dir = "column" tabbarheight= "40">
<afx-vbox>
<afx-hbox data-height= "30" data-id="search-container">
<div data-width="17" data-id="searchicon"></div>
<input data-id = "searchbox" ></input>
</afx-hbox>
<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 = "50">
<div style = "text-align:left;">
<afx-button data-id = "bt-remove" text = "__(Uninstall)"></afx-button>
<afx-button data-id = "bt-exec" text = "__(Launch)"></afx-button>
<afx-button data-id = "bt-install" text = "__(Install)" ></afx-button>
<afx-hbox data-height = "35" data-id="app-header">
<afx-button data-id = "appname" iconclass = "bi bi-backspace-fill"></afx-button>
<div style = "display: flex;justify-content: end;">
<afx-button data-id = "bt-remove" text = "__(Uninstall)" iconclass = "bi bi-trash-fill"></afx-button>
<afx-button data-id = "bt-exec" text = "__(Launch)" iconclass = "fa fa-cog"></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>

10
src/themes/antos_dark/afx-list-view.css
View File

@ -23,11 +23,13 @@ afx-list-view.dropdown > div.list-container > ul{
background-color: #363636;
border-top-left-radius: 0px;
}
afx-list-view.dropdown {
color: white;
afx-list-view.dropdown div.list-container > div > afx-label
{
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;

4
src/themes/antos_dark/afx-tab-bar.css
View File

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

3
src/themes/antos_light/afx-dock.css
View File

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

5
src/themes/antos_light/afx-list-view.css
View File

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

16
src/themes/antos_light/afx-tab-bar.css
View File

@ -1,14 +1,18 @@
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: #116cd6;
color:white;
border-bottom:1px solid #c3c3c3;
/*background-color: #116cd6;
color:white;*/
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;
color:white;
border-right:1px solid #c3c3c3;
/*background-color: #116cd6;
color:white;*/
background-color: #f5F5F5;
color: unset;
border-right:2px solid #116cd6; /* #c3c3c3;*/
}

10
src/themes/system/afx-app-window.css
View File

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

4
src/themes/system/afx-button.css
View File

@ -2,8 +2,8 @@ afx-button button{
outline: none;
min-height: 35px;
min-width: 40px;
padding-left: 5px;
padding-right: 5px;
padding-left: 10px;
padding-right: 10px;
}
afx-button i.icon-style {

5
src/themes/system/afx-label.css
View File

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

13
src/themes/system/afx-list-view.css
View File

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

4
src/themes/system/afx-sys-panel.css
View File

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