dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2025-02-22 09:52:47 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

Update Label, Button and ListView
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good
Details

Browse Source 
- Label and Button now can set icon on both left and right side of the text
- Fix ListView dropdown bug, and allow the dropdown list to positioned correctly based on its nearest anchored element
This commit is contained in:
DanyLE 2023-02-01 12:44:22 +01:00
parent eea1f18777
commit 5ced9bd1a8
5 changed files with 99 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4422,6 +4422,14 @@ declare namespace OS {
* @memberof ListViewTag * @memberof ListViewTag
*/ */
private _selectedItems; private _selectedItems;
/**
* The anchor element that the list view positioned on
* This is helpful when rendering dropdown list
* @private
* @type{HTMLElement}
* @memberof ListViewTag
*/
private _anchor;
/** /**
* Data placeholder of the list * Data placeholder of the list
* *
@ -5540,6 +5548,12 @@ declare namespace OS {
* @memberof LabelTag * @memberof LabelTag
*/ */
set iconclass(v: string); set iconclass(v: string);
/**
* Set the CSS class of the label icon on the right side
*
* @memberof LabelTag
*/
set iconclass$(v: string);
/** /**
* Setter: Set the text of the label * Setter: Set the text of the label
* *
@ -6623,6 +6637,13 @@ declare namespace OS {
* @memberof ButtonTag * @memberof ButtonTag
*/ */
set iconclass(v: string); set iconclass(v: string);
/**
* Set the icon class on the right side of the button, this property
* allows to style the button icon using CSS
*
* @memberof ButtonTag
*/
set iconclass$(v: string);
/** /**
* Setter: Set the text of the button * Setter: Set the text of the button
* *

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

@ -80,6 +80,18 @@ namespace OS {
(this.refs.label as LabelTag).iconclass = v; (this.refs.label as LabelTag).iconclass = v;
} }
/**
* Set the icon class on the right side of the button, this property
* allows to style the button icon using CSS
*
* @memberof ButtonTag
*/
set iconclass$(v: string) {
$(this).attr("iconclass_end", v);
(this.refs.label as LabelTag).iconclass$ = v;
}
/** /**
* Setter: Set the text of the button * Setter: Set the text of the button
* *

22
src/core/tags/LabelTag.ts
View File

@ -38,6 +38,8 @@ namespace OS {
.css("display", "flex"); .css("display", "flex");
$(this.refs.iclass) $(this.refs.iclass)
.css("flex-shrink",0); .css("flex-shrink",0);
$(this.refs.iclass_end)
.css("flex-shrink",0);
$(this.refs.i) $(this.refs.i)
.css("flex-shrink",0); .css("flex-shrink",0);
$(this.refs.text) $(this.refs.text)
@ -66,6 +68,7 @@ namespace OS {
this.iconclass = undefined; this.iconclass = undefined;
this.text = undefined; this.text = undefined;
this.selectable = false; this.selectable = false;
this.iconclass$ = undefined;
} }
/** /**
@ -154,6 +157,22 @@ namespace OS {
} }
} }
/**
* Set the CSS class of the label icon on the right side
*
* @memberof LabelTag
*/
set iconclass$(v: string) {
$(this).attr("iconclass_end", v);
$(this.refs.iclass_end).removeClass();
if (v) {
$(this.refs.iclass_end).addClass(v);
$(this.refs.iclass_end).show();
} else {
$(this.refs.iclass_end).hide();
}
}
/** /**
* Setter: Set the text of the label * Setter: Set the text of the label
* *
@ -163,7 +182,7 @@ namespace OS {
*/ */
set text(v: string | FormattedString) { set text(v: string | FormattedString) {
this._text = v; this._text = v;
if (v && v !== "") { if (v) {
$(this.refs.text).show(); $(this.refs.text).show();
$(this.refs.text).html(v.__()); $(this.refs.text).html(v.__());
} else { } else {
@ -217,6 +236,7 @@ namespace OS {
{ el: "i", ref: "iclass" }, { el: "i", ref: "iclass" },
{ el: "i", ref: "i", class: "icon-style" }, { el: "i", ref: "i", class: "icon-style" },
{ el: "i", ref: "text", class: "label-text" }, { el: "i", ref: "text", class: "label-text" },
{ el: "i", ref: "iclass_end" },
], ],
}, },
]; ];

52
src/core/tags/ListViewTag.ts
View File

@ -527,6 +527,14 @@ namespace OS {
*/ */
private _selectedItems: ListViewItemTag[]; private _selectedItems: ListViewItemTag[];
/**
* The anchor element that the list view positioned on
* This is helpful when rendering dropdown list
* @private
* @type{HTMLElement}
* @memberof ListViewTag
*/
private _anchor: HTMLElement;
/** /**
* Data placeholder of the list * Data placeholder of the list
* *
@ -579,6 +587,7 @@ namespace OS {
this.dropdown = false; this.dropdown = false;
this.selected = -1; this.selected = -1;
this.dragndrop = false; this.dragndrop = false;
this._anchor = undefined;
this.itemtag = "afx-list-item"; this.itemtag = "afx-list-item";
$(this).addClass("afx-list-view"); $(this).addClass("afx-list-view");
} }
@ -1241,9 +1250,20 @@ namespace OS {
.css("top", top + "px") .css("top", top + "px")
.css("left", left + "px"); .css("left", left + "px");
}; };
const label = (this.refs.drlabel as LabelTag);
label.iconclass$ = "bi bi-chevron-down";
label.text = "";
$(this.refs.drlabel).css("display", "inline-block"); $(this.refs.drlabel).css("display", "inline-block");
$(this.refs.btlist).hide(); $(this.refs.btlist).hide();
this.observable.on("resize", (e) => this.calibrate()); this.observable.on("resize", (e) => this.calibrate());
let anchor = $(this).parent();
while (anchor && anchor.css('position') === 'static') {
anchor = anchor.parent();
}
if(anchor && anchor[0])
{
this._anchor = anchor[0];
}
return this.calibrate(); return this.calibrate();
} }
@ -1289,15 +1309,24 @@ namespace OS {
} }
const desktoph = $(Ant.OS.GUI.workspace).outerHeight(); const desktoph = $(Ant.OS.GUI.workspace).outerHeight();
const offset = const wheight = $(this).offset().top + $(this.refs.mlist).outerHeight()*1.5;
$(this).offset().top + $(this.refs.mlist).outerHeight()*1.5; const position = $(this).position();
if (offset > desktoph) { let offset = 0;
$(this.refs.mlist).css( if(this._anchor)
"top", {
`-${$(this.refs.mlist).outerHeight()}px` offset = $(this._anchor).scrollTop();
); }
if (wheight > desktoph) {
const ypos = offset + position.top - $(this.refs.mlist).outerHeight();
$(this.refs.mlist)
.css("top",`${ypos}px`)
.css("left", `${position.left}px`);
} else { } else {
$(this.refs.mlist).css("top", "98%"); const ypos = offset + $(this).position().top + $(this.refs.container).outerHeight();
$(this.refs.mlist)
.css("top", `${ypos}px`)
.css("left", `${position.left}px`);
} }
$(this.refs.mlist).show(); $(this.refs.mlist).show();
} }
@ -1328,11 +1357,12 @@ namespace OS {
if (!this.dropdown) { if (!this.dropdown) {
return; return;
} }
const w = `${$(this).width()}px`; const w = `${$(this).innerWidth()}px`;
const h = `${$(this).outerHeight()}px`; const h = `${$(this).outerHeight()}px`;
$(this.refs.container).css("width", w); $(this.refs.container).css("width", "100%");
$(this.refs.container).css("height", h); $(this.refs.container).css("height", h);
$(this.refs.current).css("width", w);
$(this.refs.current).css("width", "100%");
$(this.refs.mlist).css("width", w); $(this.refs.mlist).css("width", w);
} }

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

@ -67,7 +67,7 @@ afx-list-view.dropdown {
} }
afx-list-view.dropdown > div.list-container{ afx-list-view.dropdown > div.list-container{
overflow: visible; overflow: visible;
position: absolute; /*position: absolute;*/
} }
afx-list-view.dropdown > div.list-container > div afx-list-view.dropdown > div.list-container > div
{ {
@ -91,17 +91,9 @@ afx-list-view.dropdown > div.list-container > ul li{
width:100%; width:100%;
} }
afx-list-view.dropdown div.list-container div:before {
content: "\f107";
font-family: "FontAwesome";
font-size: 16px;
font-style: normal;
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-left:3px;
padding-right: 25px; padding-right: 5px;
height: 100%; height: 100%;
} }
afx-list-view.dropdown div.list-container > div > afx-label span afx-list-view.dropdown div.list-container > div > afx-label span