mirror of
https://github.com/lxsang/antos-frontend.git
synced 2025-07-27 11:19:47 +02:00
Add stack panel component + redesign MarketPlace UI
- Continue improve UI elements - Add stack panel UI tag - Redesign MarketPlace UI to support mobile device
This commit is contained in:
DanyLE
@ -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;
|
||||
}
|
||||
@ -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))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user