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

View File

@ -41,7 +41,8 @@ tags = dist/core/tags/tag.js \
dist/core/tags/AppDockTag.js \ dist/core/tags/AppDockTag.js \
dist/core/tags/SystemPanelTag.js \ dist/core/tags/SystemPanelTag.js \
dist/core/tags/DesktopTag.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 \ javascripts= dist/core/core.js \
dist/core/settings.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 * Placeholder of the tab select event handle
* *
* @private * @protected
* @type {TagEventCallback<TabContainerTabType>} * @type {TagEventCallback<TabContainerTabType>}
* @memberof TabContainerTag * @memberof TabContainerTag
*/ */
private _ontabselect; protected _ontabselect: TagEventCallback<TabContainerTabType>;
/** /**
*Creates an instance of TabContainerTag. *Creates an instance of TabContainerTag.
* @memberof TabContainerTag * @memberof TabContainerTag
@ -5369,11 +5369,13 @@ declare namespace OS {
*/ */
get tabs(): TabContainerTabType[]; get tabs(): TabContainerTabType[];
/** /**
* Select a tab by its index * Setter: Select a tab by its index
* Getter: Get the current selected index
* *
* @memberof TabContainerTag * @memberof TabContainerTag
*/ */
set selectedIndex(i: number); set selectedIndex(i: number);
get selectedIndex(): number;
/** /**
* Setter: * 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 { declare namespace OS {
namespace GUI { namespace GUI {
namespace tag { namespace tag {

View File

@ -164,6 +164,7 @@ namespace OS {
*/ */
export function clearTheme(): void { export function clearTheme(): void {
$("head link#ostheme").attr("href", ""); $("head link#ostheme").attr("href", "");
$("body").attr("theme", "");
} }
/** /**
@ -180,6 +181,7 @@ namespace OS {
} }
const path = `resources/themes/${name}/${name}.css`; const path = `resources/themes/${name}/${name}.css`;
$("head link#ostheme").attr("href", path); $("head link#ostheme").attr("href", path);
$("body").attr("theme", name);
} }

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

View File

@ -45,11 +45,11 @@ namespace OS {
/** /**
* Placeholder of the tab select event handle * Placeholder of the tab select event handle
* *
* @private * @protected
* @type {TagEventCallback<TabContainerTabType>} * @type {TagEventCallback<TabContainerTabType>}
* @memberof TabContainerTag * @memberof TabContainerTag
*/ */
private _ontabselect: TagEventCallback<TabContainerTabType>; protected _ontabselect: TagEventCallback<TabContainerTabType>;
/** /**
*Creates an instance of TabContainerTag. *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 * @memberof TabContainerTag
*/ */
set selectedIndex(i: number) { set selectedIndex(i: number) {
(this.refs.bar as TabBarTag).selected = i; (this.refs.bar as TabBarTag).selected = i;
} }
get selectedIndex(): number {
return (this.refs.bar as TabBarTag).selected as number;
}
/** /**
* Setter: * Setter:

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"]{ afx-app-window[data-id="marketplace-win"] afx-vbox[data-id='container'] div[data-id="desc-container"]{
overflow-y: auto; overflow-y: auto;
overflow-x: none; overflow-x: hidden;
}
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;
} }
afx-app-window[data-id="marketplace-win"] p[data-id='app-desc'] { afx-app-window[data-id="marketplace-win"] p[data-id='app-desc'] {
text-align: justify; text-align: justify;
@ -38,9 +22,10 @@ afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] {
padding-left:10px; padding-left:10px;
display: table; display: table;
margin: 0; margin: 0;
font-size: 13px;
} }
afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] { afx-app-window[data-id="marketplace-win"] afx-tab-bar {
border-bottom: 1px solid #afafaf; border-top: 1px solid #c3c3c3;
} }
afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] input{ afx-app-window[data-id="marketplace-win"] afx-hbox[data-id="search-container"] input{
border: 0; 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{ afx-app-window[data-id="marketplace-win"] div[data-id="searchicon"]:before{
content: "\f002"; content: "\f002";
display: block;
background-color:transparent; background-color:transparent;
color:#afafaf; color:#afafaf;
font-family: "FontAwesome"; font-family: "FontAwesome";
padding-top: 3px; padding-left:5px;
padding-left:3px; display: flex;
/* font-size: 25px; */ flex-direction: column;
justify-content: center;
height: 100%;
} }
afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] li{ afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] li{
padding:0; 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{ afx-app-window[data-id="marketplace-win"] span.info-header{
font-weight: bold; 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"] { afx-app-window[data-id="marketplace-win"] afx-label[data-id="vstat"] {
font-size: 11px; font-size: 11px;
color: chocolate; color: chocolate;
@ -88,3 +78,72 @@ afx-app-window[data-id="marketplace-win"] afx-tab-bar[data-id="catlist"] i.label
{ {
font-weight: bold; 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;
}

View File

@ -26,7 +26,7 @@ namespace OS {
private applist: GUI.tag.ListViewTag; private applist: GUI.tag.ListViewTag;
private catlist: GUI.tag.TabBarTag; private catlist: GUI.tag.TabBarTag;
private container: GUI.tag.VBoxTag; private container: GUI.tag.VBoxTag;
private appname: GUI.tag.LabelTag; private appname: GUI.tag.ButtonTag;
private appdetail: HTMLUListElement; private appdetail: HTMLUListElement;
private appdesc: HTMLParagraphElement; private appdesc: HTMLParagraphElement;
private btinstall: GUI.tag.ButtonTag; private btinstall: GUI.tag.ButtonTag;
@ -39,6 +39,20 @@ namespace OS {
} }
main(): void { 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; this.installdir = this.systemsetting.system.pkgpaths.user;
// test repository // test repository
this.apps_meta = {}; this.apps_meta = {};
@ -47,13 +61,15 @@ namespace OS {
this.catlist = this.find("catlist") as GUI.tag.TabBarTag; this.catlist = this.find("catlist") as GUI.tag.TabBarTag;
this.applist.onlistselect = (e) => { this.applist.onlistselect = (e) => {
const data = e.data.item.data; const data = e.data.item.data;
return this.appDetail(data); this.appDetail(data);
stack_panel.navigateNext();
}; };
this.catlist.ontabselect = (e) => { this.catlist.ontabselect = (e) => {
const selected = this.catlist.selected; const selected = this.catlist.selected;
if(selected < 0) if(selected < 0)
return; return;
if(selected === 0) if(selected === 0)
{ {
return this.resetAppList(); return this.resetAppList();
@ -93,14 +109,7 @@ namespace OS {
this.applist.data = result; 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.container).css("visibility", "hidden");
this.btexec.onbtclick = (_e) => { this.btexec.onbtclick = (_e) => {
const el = this.applist.selectedItem; const el = this.applist.selectedItem;
@ -173,14 +182,18 @@ namespace OS {
switch (e.which) { switch (e.which) {
case 37: case 37:
return e.preventDefault(); return e.preventDefault();
/*
case 38: case 38:
this.applist.selectPrev(); this.applist.selectPrev();
return e.preventDefault(); return e.preventDefault();
*/
case 39: case 39:
return e.preventDefault(); return e.preventDefault();
/*
case 40: case 40:
this.applist.selectNext(); this.applist.selectNext();
return e.preventDefault(); return e.preventDefault();
*/
case 13: case 13:
return e.preventDefault(); return e.preventDefault();
default: default:
@ -375,6 +388,8 @@ namespace OS {
this.appname.text = d.name; this.appname.text = d.name;
const status = this.find("vstat") as GUI.tag.LabelTag; const status = this.find("vstat") as GUI.tag.LabelTag;
status.text = ""; status.text = "";
$(this.appdesc).empty();
$(this.appdetail).empty();
if (d.description) { if (d.description) {
d.description d.description
.asFileHandle() .asFileHandle()
@ -391,8 +406,6 @@ namespace OS {
); );
return $(this.appdesc).empty(); return $(this.appdesc).empty();
}); });
} else {
$(this.appdesc).empty();
} }
const pkgcache = this.systemsetting.system.packages; const pkgcache = this.systemsetting.system.packages;
this.btinstall.text = "__(Install)"; this.btinstall.text = "__(Install)";
@ -423,7 +436,6 @@ namespace OS {
$(this.btexec).hide(); $(this.btexec).hide();
} }
$(this.appdetail).empty();
for (let k in d) { for (let k in d) {
const v = d[k]; const v = d[k];
if (k !== "name" && k !== "description" && k !== "domel") { if (k !== "name" && k !== "description" && k !== "domel") {
@ -432,7 +444,7 @@ namespace OS {
.append( .append(
$("<span class= 'info-header'>").html(k) $("<span class= 'info-header'>").html(k)
) )
.append($("<span>").html(v)) .append($("<span class = 'info-detail'>").html(v))
); );
} }
} }

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

View File

@ -23,11 +23,13 @@ afx-list-view.dropdown > div.list-container > ul{
background-color: #363636; background-color: #363636;
border-top-left-radius: 0px; border-top-left-radius: 0px;
} }
afx-list-view.dropdown div.list-container > div > afx-label
afx-list-view.dropdown { {
color: white;
border:1px solid #262626; border:1px solid #262626;
border-radius: 3px; border-radius: 3px;
}
afx-list-view.dropdown {
color: white;
background-color: transparent; background-color: transparent;
} }
@ -51,7 +53,7 @@ afx-list-view div.button_container afx-button{
afx-list-view div.button_container afx-button button{ afx-list-view div.button_container afx-button button{
border-radius: 0; 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; font-size: 13px;
padding-left: 10px; padding-left: 10px;

View File

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

View File

@ -12,5 +12,6 @@ afx-apps-dock{
afx-apps-dock afx-button.selected > button { afx-apps-dock afx-button.selected > button {
background-color: #2786F3; background-color: #2786F3;
color: white; color: white;
border: 1px solid #dedede; /* border: 1px solid #dedede;*/
} }

View File

@ -27,9 +27,12 @@ afx-list-view.dropdown > div.list-container > ul{
afx-list-view.dropdown{ afx-list-view.dropdown{
color: #414339; color: #414339;
background-color: transparent;
}
afx-list-view.dropdown div.list-container > div > afx-label
{
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
border-radius: 3px; border-radius: 3px;
background-color: transparent;
} }
afx-list-view ul.complex-content{ afx-list-view ul.complex-content{
padding: 0; padding: 0;

View File

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

View File

@ -44,6 +44,16 @@ afx-app-window ul li.afx-window-title{
justify-content: center; 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 afx-app-window div.afx-window-content
{ {
overflow: hidden; overflow: hidden;

View File

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

View File

@ -8,7 +8,10 @@ afx-label span {
height: 100%; height: 100%;
} }
afx-label i.label-text{ afx-label i.label-text{
font-weight: normal;
font-style: normal;
margin-left: 3px; margin-left: 3px;
} }
afx-label i{
font-weight: normal;
font-style: normal;
}

View File

@ -99,11 +99,22 @@ afx-list-view.dropdown div.list-container div:before {
position: absolute; position: absolute;
right: 5px; 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-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 afx-list-view div.button_container afx-button button
{ {
min-width: 30px; min-width: 30px;
min-height: 30px; min-height: 30px;
padding-left: 5px;
padding-right: 5px;
} }

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{ afx-sys-panel afx-list-view[data-id="applist"] > div.list-container > ul li{
/*display: block;*/ /*display: block;*/
width: 70px; width: 90px;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
justify-content: normal !important; /*justify-content: normal !important;*/
} }
afx-sys-panel afx-list-view[data-id="applist"] i{ afx-sys-panel afx-list-view[data-id="applist"] i{