dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2025-02-21 17:32:47 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

Allow window horizotal and vertical resize

Browse Source
This commit is contained in:
lxsang 2021-04-01 18:44:00 +02:00
parent 1a132178c3
commit ac76a5f967
3 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
release/antos-1.2.0.tar.gz
View File

Binary file not shown.

86
src/core/tags/WindowTag.ts
View File

@ -189,9 +189,13 @@ namespace OS {
if (v) { if (v) {
$(this.refs["maxbt"]).show(); $(this.refs["maxbt"]).show();
$(this.refs["grip"]).show(); $(this.refs["grip"]).show();
$(this.refs["grip_bottom"]).show();
$(this.refs["grip_right"]).show();
} else { } else {
$(this.refs["maxbt"]).hide(); $(this.refs["maxbt"]).hide();
$(this.refs["grip"]).hide(); $(this.refs["grip"]).hide();
$(this.refs["grip_bottom"]).hide();
$(this.refs["grip_right"]).hide();
} }
} }
get resizable(): boolean { get resizable(): boolean {
@ -396,37 +400,55 @@ namespace OS {
* @memberof WindowTag * @memberof WindowTag
*/ */
private enable_resize(): void { private enable_resize(): void {
$(this.refs["grip"]) const offset = { top: 0, left: 0 };
.css("user-select", "none") let target = undefined;
.css("cursor", "default") const mouse_move_hdl = (e) => {
.css("position", "absolute") let w = $(this).width();
.css("bottom", "0") let h = $(this).height();
.css("right", "0") if(target != this.refs.grip_bottom)
.css("cursor", "nwse-resize"); {
w += e.clientX - offset.left;
$(this.refs["grip"]).on("mousedown", (e) => { }
e.preventDefault(); if(target != this.refs.grip_right)
const offset = { top: 0, left: 0 }; {
h += e.clientY - offset.top;
}
w = w < 100 ? 100 : w;
h = h < 100 ? 100 : h;
offset.top = e.clientY; offset.top = e.clientY;
offset.left = e.clientX; offset.left = e.clientX;
$(window).on("mousemove", (e) => { this._isMaxi = false;
let w = $(this).width() + e.clientX - offset.left; this.setsize({ w, h });
let h = $(this).height() + e.clientY - offset.top; }
w = w < 100 ? 100 : w; const mouse_up_hdl = (e) => {
h = h < 100 ? 100 : h; $(window).off("mousemove", mouse_move_hdl);
offset.top = e.clientY; return $(window).off("mouseup", mouse_up_hdl);
offset.left = e.clientX; }
this._isMaxi = false; $(this.refs["grip"]).on("mousedown", (e) => {
this.setsize({ w, h }); e.preventDefault();
}); offset.top = e.clientY;
offset.left = e.clientX;
$(window).on("mouseup", function (e) { target = this.refs.grip;
$(window).off("mousemove", null); $(window).on("mousemove", mouse_move_hdl);
return $(window).off("mouseup", null); $(window).on("mouseup", mouse_up_hdl);
}); });
$(this.refs.grip_bottom).on("mousedown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip_bottom;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
});
$(this.refs.grip_right).on("mousedown", (e) => {
e.preventDefault();
offset.top = e.clientY;
offset.left = e.clientX;
target = this.refs.grip_right;
$(window).on("mousemove", mouse_move_hdl);
$(window).on("mouseup", mouse_up_hdl);
}); });
} }
/** /**
* Maximize the window or restore its previous width, height, * Maximize the window or restore its previous width, height,
* and position * and position
@ -521,6 +543,16 @@ namespace OS {
ref: "grip", ref: "grip",
class: "afx-window-grip", class: "afx-window-grip",
}, },
{
el: "div",
ref: "grip_bottom",
class: "afx-window-grip-bottom",
},
{
el: "div",
ref: "grip_right",
class: "afx-window-grip-right",
},
], ],
}, },
]; ];

27
src/themes/system/afx-app-window.css
View File

@ -33,5 +33,32 @@ afx-app-window div.afx-window-content
afx-app-window div.afx-window-grip{ afx-app-window div.afx-window-grip{
height: 10px; height: 10px;
width: 10px; width: 10px;
user-select:none;
position: absolute;
bottom: 0;
right: 0;
cursor: nwse-resize;
background-color: transparent;
}
afx-app-window div.afx-window-grip-bottom{
height: 3px;
user-select:none;
position: absolute;
bottom: -1px;
left: 0;
right: 10px;
cursor: ns-resize;
background-color: transparent;
}
afx-app-window div.afx-window-grip-right{
width: 3px;
user-select:none;
position: absolute;
bottom: 10px;
right: -1px;
top: 0;
cursor: ew-resize;
background-color: transparent; background-color: transparent;
} }