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

Update Label, Button and ListView

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 committed by Dany LE
parent b490ae9d42
commit 649c7d942a
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
*/
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
*
@ -5540,6 +5548,12 @@ declare namespace OS {
* @memberof LabelTag
*/
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
*
@ -6623,6 +6637,13 @@ declare namespace OS {
* @memberof ButtonTag
*/
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
*

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

@ -79,6 +79,18 @@ namespace OS {
$(this).attr("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

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

@ -38,6 +38,8 @@ namespace OS {
.css("display", "flex");
$(this.refs.iclass)
.css("flex-shrink",0);
$(this.refs.iclass_end)
.css("flex-shrink",0);
$(this.refs.i)
.css("flex-shrink",0);
$(this.refs.text)
@ -66,6 +68,7 @@ namespace OS {
this.iconclass = undefined;
this.text = undefined;
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
*
@ -163,7 +182,7 @@ namespace OS {
*/
set text(v: string | FormattedString) {
this._text = v;
if (v && v !== "") {
if (v) {
$(this.refs.text).show();
$(this.refs.text).html(v.__());
} else {
@ -217,6 +236,7 @@ namespace OS {
{ el: "i", ref: "iclass" },
{ el: "i", ref: "i", class: "icon-style" },
{ el: "i", ref: "text", class: "label-text" },
{ el: "i", ref: "iclass_end" },
],
},
];

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

@ -526,7 +526,15 @@ namespace OS {
* @memberof ListViewTag
*/
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
*
@ -579,6 +587,7 @@ namespace OS {
this.dropdown = false;
this.selected = -1;
this.dragndrop = false;
this._anchor = undefined;
this.itemtag = "afx-list-item";
$(this).addClass("afx-list-view");
}
@ -1241,9 +1250,20 @@ namespace OS {
.css("top", top + "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.btlist).hide();
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();
}
@ -1287,17 +1307,26 @@ namespace OS {
$(this.refs.mlist).hide();
return;
}
const desktoph = $(Ant.OS.GUI.workspace).outerHeight();
const offset =
$(this).offset().top + $(this.refs.mlist).outerHeight()*1.5;
if (offset > desktoph) {
$(this.refs.mlist).css(
"top",
`-${$(this.refs.mlist).outerHeight()}px`
);
const wheight = $(this).offset().top + $(this.refs.mlist).outerHeight()*1.5;
const position = $(this).position();
let offset = 0;
if(this._anchor)
{
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 {
$(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();
}
@ -1328,11 +1357,12 @@ namespace OS {
if (!this.dropdown) {
return;
}
const w = `${$(this).width()}px`;
const w = `${$(this).innerWidth()}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.current).css("width", w);
$(this.refs.current).css("width", "100%");
$(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{
overflow: visible;
position: absolute;
/*position: absolute;*/
}
afx-list-view.dropdown > div.list-container > div
{
@ -91,17 +91,9 @@ afx-list-view.dropdown > div.list-container > ul li{
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{
padding-left:3px;
padding-right: 25px;
padding-right: 5px;
height: 100%;
}
afx-list-view.dropdown div.list-container > div > afx-label span