dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 17:38:20 +01:00
Code Issues 1 Actions 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 committed by Dany LE
parent d5d6a16a85
commit 1a6ece4e7c
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{