dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 09:28: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>[]); 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} * @type {string}
* @memberof ListViewTag * @memberof ListViewTag
@ -5155,8 +5155,8 @@ declare namespace OS {
* Setter: * Setter:
* *
* Set the tab bar direction: * Set the tab bar direction:
* - `horizontal`: horizontal direction * - `row`: horizontal direction
* - `vertical`: vertical direction * - `column`: vertical direction
* *
* Getter: * Getter:
* *
@ -5477,8 +5477,8 @@ declare namespace OS {
* Setter: * Setter:
* *
* Set resize direction, two possible values: * Set resize direction, two possible values:
* - `hz` - horizontal direction, resize by width * - `row` - horizontal direction, resize by width
* - `ve` - vertical direction, resize by height * - `column` - vertical direction, resize by height
* *
* Getter: * Getter:
* *

2
src/core/gui.ts
View File

@ -1267,7 +1267,7 @@ namespace OS {
schemes.ws = `\ schemes.ws = `\
<afx-sys-panel id = "syspanel"></afx-sys-panel> <afx-sys-panel id = "syspanel"></afx-sys-panel>
<div id = "workspace"> <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> <afx-notification id="sys_notification" ></afx-notification>
</div> </div>
<afx-stack-menu id="contextmenu" data-id="contextmenu" context="true" style="display:none;"></afx-stack-menu> <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`); .css("left", `${cleft}px`);
const w = $(e).width(); const w = $(e).width();
const h = $(e).height(); const h = $(e).height();
if (this.dir === "vertical") { if (this.dir === "column") {
ctop += h + 20; ctop += h + 20;
if (ctop + h > gh) { if (ctop + h > gh) {
ctop = 20; 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} * @type {string}
* @memberof ListViewTag * @memberof ListViewTag
@ -787,7 +787,7 @@ namespace OS {
set dir(v: string) { set dir(v: string) {
if(this.dropdown) if(this.dropdown)
{ {
$(this).attr("dir", "vertical"); $(this).attr("dir", "column");
} }
else else
{ {
@ -1357,7 +1357,7 @@ namespace OS {
*/ */
scroll_to_end() scroll_to_end()
{ {
if(this.dir == "vertical") if(this.dir == "column")
{ {
this.refs.mlist.scrollTo({ top: this.refs.mlist.scrollHeight, behavior: 'smooth' }); this.refs.mlist.scrollTo({ top: this.refs.mlist.scrollHeight, behavior: 'smooth' });
} }
@ -1374,7 +1374,7 @@ namespace OS {
*/ */
scroll_to_start() scroll_to_start()
{ {
if(this.dir == "vertical") if(this.dir == "column")
{ {
this.refs.mlist.scrollTo({ top: 0, behavior: 'smooth' }); this.refs.mlist.scrollTo({ top: 0, behavior: 'smooth' });
} }

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

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

15
src/core/tags/TabBarTag.ts
View File

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

6
src/core/tags/TabContainerTag.ts
View File

@ -133,13 +133,13 @@ namespace OS {
return; return;
} }
(this.refs.wrapper as TileLayoutTag).dir = v; (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 else
{ {
(this.refs.bar as TabBarTag).dir = "horizontal"; (this.refs.bar as TabBarTag).dir = "row";
} }
} }
get dir(): "row" | "column" { 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 cannot be removed/uinstalled by regular user
## Change logs ## 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.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 - 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; fav.dropdown = false;
resizer.dir = "hz"; resizer.dir = "row";
resizer.disable = false; resizer.disable = false;
} }
else else
@ -388,7 +388,7 @@ namespace OS {
fav.dropdown = true; fav.dropdown = true;
resizer.dir = "ve"; resizer.dir = "column";
resizer.disable = true; resizer.disable = true;
} }
}); });

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

@ -6,7 +6,7 @@
"author": "Xuan Sang LE", "author": "Xuan Sang LE",
"email": "xsang.le@gmail.com" "email": "xsang.le@gmail.com"
}, },
"version":"0.1.8-b", "version":"0.1.9-b",
"category":"System", "category":"System",
"iconclass":"fa fa-hdd-o", "iconclass":"fa fa-hdd-o",
"mimes":["dir"], "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-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-list-view data-id = "favouri" dropdown="true"></afx-list-view>
</afx-tile> </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-vbox>
<afx-hbox data-width="120" data-height="35" data-id="nav-bar"> <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 = "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 = "btgrid" iconclass = "fa fa-th"></afx-button>
<afx-button data-width = "40" data-id = "btlist" iconclass = "fa fa-th-list"></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; background-color: transparent;
border-top: 1px solid var(--border-primary); border-top: 1px solid var(--border-primary);
cursor: row-resize;
} }
afx-resizer.horizontal { afx-resizer[dir='row'] {
background-color: transparent; background-color: transparent;
border-left: 1px solid var(--border-primary); 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); 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); background-color: var(--background-tertiary);
color:var(--text-primary); color:var(--text-primary);
border-bottom:2px solid var(--border-tertiary); /* #262626;*/ 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); background-color: var(--background-tertiary);
color:var(--text-primary); 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{ afx-list-view > div.list-container > ul afx-dbline-list-item li{
min-height: 40px; min-height: 40px;
} }
.afx-list-view[dir='horizontal'] > div.list-container > ul .afx-list-view[dir='row'] > div.list-container > ul
{ {
display: flex; display: flex;
flex-direction: row; 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; 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; 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; overflow: hidden;
} }