GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-02-02 19:11:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

highlight grabbed window header

Browse Source
This commit is contained in:
Devaev Maxim
2018-08-17 07:44:37 +03:00
parent eaea72275e
commit 5b20016039
3 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
kvmd/web/css/vars.css
View File

@@ -26,6 +26,7 @@
--normal-border: thin solid var(--border-color-normal); --normal-border: thin solid var(--border-color-normal);
--black-border: thin solid black; --black-border: thin solid black;
--intensive-border: 2px solid var(--border-color-intensive); --intensive-border: 2px solid var(--border-color-intensive);
--thin-intensive-border: thin solid var(--border-color-intensive);
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4); --micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); --small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

10
kvmd/web/css/windows.css
View File

@@ -23,12 +23,13 @@ div.window-header {
width: 100%; width: 100%;
padding: 0; padding: 0;
height: 20px; height: 20px;
font-size: 0.8em;
color: var(--fg-color-dark);
border-bottom: var(--normal-border); border-bottom: var(--normal-border);
} }
div.window-grab { div.window-grab {
overflow: hidden; overflow: hidden;
font-size: 0.8em;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
@@ -36,7 +37,12 @@ div.window-grab {
height: 20px; height: 20px;
cursor: move; cursor: move;
padding: 3px 0 2px 20px; padding: 3px 0 2px 20px;
color: var(--fg-color-dark); }
div.window-header-grabbed {
color: var(--fg-color-intensive);
background-color: var(--bg-color-intensive);
border-bottom: var(--thin-intensive-border);
} }
button.window-button-close { button.window-button-close {

8
kvmd/web/js/ui.js
View File

@@ -155,6 +155,9 @@ function Ui(hid) {
}; };
var __makeWindowMovable = function(el_window) { var __makeWindowMovable = function(el_window) {
var el_header = el_window.querySelector(".window-header");
var el_grab = el_window.querySelector(".window-header .window-grab");
var prev_pos = {x: 0, y: 0}; var prev_pos = {x: 0, y: 0};
function startMoving(event) { function startMoving(event) {
@@ -164,6 +167,8 @@ function Ui(hid) {
event.preventDefault(); event.preventDefault();
if (!event.touches || event.touches.length === 1) { if (!event.touches || event.touches.length === 1) {
el_header.classList.add("window-header-grabbed");
prev_pos = getEventPosition(event); prev_pos = getEventPosition(event);
document.onmousemove = doMoving; document.onmousemove = doMoving;
@@ -192,6 +197,8 @@ function Ui(hid) {
} }
function stopMoving() { function stopMoving() {
el_header.classList.remove("window-header-grabbed");
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
@@ -211,7 +218,6 @@ function Ui(hid) {
el_window.setAttribute("data-centered", ""); el_window.setAttribute("data-centered", "");
el_window.onclick = () => __raiseWindow(el_window); el_window.onclick = () => __raiseWindow(el_window);
var el_grab = el_window.querySelector(".window-header .window-grab");
el_grab.onmousedown = startMoving; el_grab.onmousedown = startMoving;
el_grab.ontouchstart = startMoving; el_grab.ontouchstart = startMoving;
}; };