dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 01:18:21 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4624,9 +4624,9 @@ declare namespace OS {
*/
set buttons(v: GenericObject<any>[]);
/**
* 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
@ -5155,8 +5155,8 @@ declare namespace OS {
* Setter:
*
* Set the tab bar direction:
* - `horizontal`: horizontal direction
* - `vertical`: vertical direction
* - `row`: horizontal direction
* - `column`: vertical direction
*
* Getter:
*
@ -5477,8 +5477,8 @@ declare 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:
*

2
src/core/gui.ts
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>

2
src/core/tags/FloatListTag.ts
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;

10
src/core/tags/ListViewTag.ts
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' });
}

22
src/core/tags/ResizerTag.ts
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);
}
});

15
src/core/tags/TabBarTag.ts
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' });
}

6
src/core/tags/TabContainerTag.ts
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" {

1
src/packages/Files/README.md
View File

@ -6,5 +6,6 @@ This application is included in the AntOS delivery as system application and
cannot be removed/uinstalled by regular user
## Change logs
- v0.1.9-b: use "column"/"row" for UI direction names
- v0.1.8-b: use system css variables in theme
- v0.1.7-b: fix - file grid view double click event hanling on diffent cells of a row

4
src/packages/Files/main.ts
View File

@ -374,7 +374,7 @@ namespace OS {
fav.dropdown = false;
resizer.dir = "hz";
resizer.dir = "row";
resizer.disable = false;
}
else
@ -388,7 +388,7 @@ namespace OS {
fav.dropdown = true;
resizer.dir = "ve";
resizer.dir = "column";
resizer.disable = true;
}
});

2
src/packages/Files/package.json
View File

@ -6,7 +6,7 @@
"author": "Xuan Sang LE",
"email": "xsang.le@gmail.com"
},
"version":"0.1.8-b",
"version":"0.1.9-b",
"category":"System",
"iconclass":"fa fa-hdd-o",
"mimes":["dir"],

4
src/packages/Files/scheme.html
View File

@ -3,10 +3,10 @@
<afx-tile data-height = "35" min-width="120" data-width="180" data-id = "nav-bar" name="hbox" dir="row">
<afx-list-view data-id = "favouri" dropdown="true"></afx-list-view>
</afx-tile>
<afx-resizer data-id="resizer" dir="ve" disable="true" data-width="3" data-height="0"></afx-resizer>
<afx-resizer data-id="resizer" dir="column" disable="true" data-width="3" data-height="0"></afx-resizer>
<afx-vbox>
<afx-hbox data-width="120" data-height="35" data-id="nav-bar">
<afx-tab-bar data-id = "path-nav" dir="horizontal" ></afx-tab-bar>
<afx-tab-bar data-id = "path-nav" dir="row" ></afx-tab-bar>
<afx-button data-width = "40" data-id = "btback" iconclass = "fa fa-arrow-up"></afx-button>
<afx-button data-width = "40" data-id = "btgrid" iconclass = "fa fa-th"></afx-button>
<afx-button data-width = "40" data-id = "btlist" iconclass = "fa fa-th-list"></afx-button>

9
src/themes/default/afx-resizer.css
View File

@ -1,13 +1,16 @@
afx-resizer.vertical {
afx-resizer[dir='column'] {
background-color: transparent;
border-top: 1px solid var(--border-primary);
cursor: row-resize;
}
afx-resizer.horizontal {
afx-resizer[dir='row'] {
background-color: transparent;
border-left: 1px solid var(--border-primary);
cursor: col-resize;
}
afx-resizer.horizontal:hover, afx-resizer.vertical:hover
afx-resizer[dir='row']:hover,
afx-resizer[dir='column']:hover
{
background-color: var(--item-bg-active);
}

4
src/themes/default/afx-tab-bar.css
View File

@ -1,12 +1,12 @@
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
afx-tab-bar[dir="row"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: var(--background-tertiary);
color:var(--text-primary);
border-bottom:2px solid var(--border-tertiary); /* #262626;*/
}
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
afx-tab-bar[dir="column"] afx-list-view > div.list-container > ul > afx-list-item > li.selected
{
background-color: var(--background-tertiary);
color:var(--text-primary);

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

@ -35,7 +35,7 @@ afx-list-view > div.list-container > ul li{
afx-list-view > div.list-container > ul afx-dbline-list-item li{
min-height: 40px;
}
.afx-list-view[dir='horizontal'] > div.list-container > ul
.afx-list-view[dir='row'] > div.list-container > ul
{
display: flex;
flex-direction: row;

4
src/themes/system/afx-tab-bar.css
View File

@ -16,12 +16,12 @@ afx-tab-bar afx-list-view > div.list-container > ul li
padding-right: 10px;
}
afx-tab-bar[dir="vertical"] afx-list-view > div.list-container
afx-tab-bar[dir="column"] afx-list-view > div.list-container
{
overflow: hidden;
}
afx-tab-bar[dir="horizontal"] afx-list-view > div.list-container
afx-tab-bar[dir="row"] afx-list-view > div.list-container
{
overflow: hidden;
}