mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-11-16 01:38:21 +01:00
Update Label, Button and ListView
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good
- 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
parent
eea1f18777
commit
5ced9bd1a8
21
d.ts/antos.d.ts
vendored
21
d.ts/antos.d.ts
vendored
@ -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
|
||||
*
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user