From 649c7d942a3a0f1cbadfeef4c20e804668e6835c Mon Sep 17 00:00:00 2001 From: DanyLE Date: Wed, 1 Feb 2023 12:44:22 +0100 Subject: [PATCH] Update Label, Button and ListView - 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 --- d.ts/antos.d.ts | 21 +++++++++++ src/core/tags/ButtonTag.ts | 12 +++++++ src/core/tags/LabelTag.ts | 22 +++++++++++- src/core/tags/ListViewTag.ts | 56 ++++++++++++++++++++++------- src/themes/system/afx-list-view.css | 12 ++----- 5 files changed, 99 insertions(+), 24 deletions(-) diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts index 3ee1d56..867b285 100644 --- a/d.ts/antos.d.ts +++ b/d.ts/antos.d.ts @@ -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 * diff --git a/src/core/tags/ButtonTag.ts b/src/core/tags/ButtonTag.ts index df77f20..c480a14 100644 --- a/src/core/tags/ButtonTag.ts +++ b/src/core/tags/ButtonTag.ts @@ -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 diff --git a/src/core/tags/LabelTag.ts b/src/core/tags/LabelTag.ts index d60d306..781fd71 100644 --- a/src/core/tags/LabelTag.ts +++ b/src/core/tags/LabelTag.ts @@ -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" }, ], }, ]; diff --git a/src/core/tags/ListViewTag.ts b/src/core/tags/ListViewTag.ts index d63d790..4eb16b8 100644 --- a/src/core/tags/ListViewTag.ts +++ b/src/core/tags/ListViewTag.ts @@ -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); } diff --git a/src/themes/system/afx-list-view.css b/src/themes/system/afx-list-view.css index d5a2907..15a6e2d 100644 --- a/src/themes/system/afx-list-view.css +++ b/src/themes/system/afx-list-view.css @@ -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