fix: use row/column as common directives for all UI horizontal/vertical direction

This commit is contained in:
DanyLE
2023-07-14 11:02:33 +02:00
committed by Dany LE
parent 3d09a20512
commit 3e201bfbba
15 changed files with 50 additions and 49 deletions

View File

@ -1267,7 +1267,7 @@ namespace OS {
schemes.ws = `\
<afx-sys-panel id = "syspanel"></afx-sys-panel>
<div id = "workspace">
<afx-desktop id = "desktop" dir="vertical" ></afx-desktop>
<afx-desktop id = "desktop" dir="column" ></afx-desktop>
<afx-notification id="sys_notification" ></afx-notification>
</div>
<afx-stack-menu id="contextmenu" data-id="contextmenu" context="true" style="display:none;"></afx-stack-menu>

View File

@ -169,7 +169,7 @@ namespace OS {
.css("left", `${cleft}px`);
const w = $(e).width();
const h = $(e).height();
if (this.dir === "vertical") {
if (this.dir === "column") {
ctop += h + 20;
if (ctop + h > gh) {
ctop = 20;

View File

@ -777,9 +777,9 @@ namespace OS {
}
}
/**
* Getter: Get list direction: horizontal or vertical (default)
* Getter: Get list direction: row or column (default)
*
* Setter: Get list direction: horizontal or vertical
* Setter: Get list direction: row or column
*
* @type {string}
* @memberof ListViewTag
@ -787,7 +787,7 @@ namespace OS {
set dir(v: string) {
if(this.dropdown)
{
$(this).attr("dir", "vertical");
$(this).attr("dir", "column");
}
else
{
@ -1357,7 +1357,7 @@ namespace OS {
*/
scroll_to_end()
{
if(this.dir == "vertical")
if(this.dir == "column")
{
this.refs.mlist.scrollTo({ top: this.refs.mlist.scrollHeight, behavior: 'smooth' });
}
@ -1374,7 +1374,7 @@ namespace OS {
*/
scroll_to_start()
{
if(this.dir == "vertical")
if(this.dir == "column")
{
this.refs.mlist.scrollTo({ top: 0, behavior: 'smooth' });
}

View File

@ -92,8 +92,8 @@ namespace OS {
* Setter:
*
* Set resize direction, two possible values:
* - `hz` - horizontal direction, resize by width
* - `ve` - vertical direction, resize by height
* - `row` - horizontal direction, resize by width
* - `column` - vertical direction, resize by height
*
* Getter:
*
@ -105,18 +105,14 @@ namespace OS {
let att: string;
$(this).attr("dir", v);
$(this).off("pointerdown", null);
if (v === "hz") {
$(this).css("cursor", "col-resize");
$(this).addClass("horizontal");
if (v === "row") {
if (this._resizable_el) {
att = $(this._resizable_el).attr("min-width");
if (att) {
this._minsize = parseInt(att);
}
}
} else if (v === "ve") {
$(this).css("cursor", "row-resize");
$(this).addClass("vertical");
} else if (v === "column") {
if (this._resizable_el) {
att = $(this._resizable_el).attr("min-height");
if (att) {
@ -192,11 +188,11 @@ namespace OS {
return;
}
if (tagname === "AFX-HBOX") {
this.dir = "hz";
this.dir = "row";
} else if (tagname === "AFX-VBOX") {
this.dir = "ve";
this.dir = "column";
} else {
this.dir = "hz";
this.dir = "row";
}
}
@ -235,9 +231,9 @@ namespace OS {
if (!this._resizable_el) {
return;
}
if (this.dir === "hz") {
if (this.dir === "row") {
return this.horizontalResize(evt as JQuery.MouseEventBase);
} else if (this.dir === "ve") {
} else if (this.dir === "column") {
return this.verticalResize(evt as JQuery.MouseEventBase);
}
});

View File

@ -64,7 +64,7 @@ namespace OS {
*/
protected init(): void {
this.selected = -1;
this.dir = "horizontal";
this.dir = "row";
this._previous_touch = {x: 0, y:0};
}
@ -95,8 +95,8 @@ namespace OS {
* Setter:
*
* Set the tab bar direction:
* - `horizontal`: horizontal direction
* - `vertical`: vertical direction
* - `row`: horizontal direction
* - `column`: vertical direction
*
* Getter:
*
@ -109,6 +109,7 @@ namespace OS {
if (!v) {
return;
}
console.log("direction is", v);
(this.refs.list as ListViewTag).dir = v;
}
get dir(): string {
@ -233,7 +234,7 @@ namespace OS {
const offset = {x:0, y:0};
offset.x = this._previous_touch.x - e.touches[0].pageX ;
offset.y = this._previous_touch.y - e.touches[0].pageY;
if(this.dir == "horizontal")
if(this.dir == "row")
{
el.scrollLeft += offset.x;
}
@ -245,7 +246,7 @@ namespace OS {
this._previous_touch.y = e.touches[0].pageY;
}, {passive: true});
el.addEventListener("wheel", (evt)=>{
if(this.dir == "horizontal")
if(this.dir == "row")
{
el.scrollLeft += (evt as WheelEvent).deltaY;
}
@ -265,7 +266,7 @@ namespace OS {
scroll_to_end()
{
const list_container = $(".list-container", this.refs.list)[0];
if(this.dir == "vertical")
if(this.dir == "column")
{
list_container.scrollTo({ top: list_container.scrollHeight, behavior: 'smooth' });
}
@ -283,7 +284,7 @@ namespace OS {
scroll_to_start()
{
const list_container = $(".list-container", this.refs.list)[0];
if(this.dir == "vertical")
if(this.dir == "column")
{
list_container.scrollTo({ top: 0, behavior: 'smooth' });
}

View File

@ -133,13 +133,13 @@ namespace OS {
return;
}
(this.refs.wrapper as TileLayoutTag).dir = v;
if(v === "row")
if(v == "row")
{
(this.refs.bar as TabBarTag).dir = "vertical";
(this.refs.bar as TabBarTag).dir = "column";
}
else
{
(this.refs.bar as TabBarTag).dir = "horizontal";
(this.refs.bar as TabBarTag).dir = "row";
}
}
get dir(): "row" | "column" {