fix positioning

This commit is contained in:
SpikeHD 2022-04-20 18:16:36 -07:00
parent d5736b490d
commit c81c6b7a2d
6 changed files with 48 additions and 6 deletions

View File

@ -31,7 +31,7 @@
"alwaysOnTop": false,
"icon": "/resources/icons/appIcon.png",
"enableInspector": true,
"borderless": false,
"borderless": true,
"maximize": false,
"hidden": false,
"resizable": false,

View File

@ -1,6 +1,6 @@
{
"name": "GrassClipper",
"version": "1.0.0",
"version": "0.2.0",
"repository": "https://github.com/Grasscutters/GrassClipper.git",
"author": "SpikeHD <spikegdofficial@gmail.com>",
"license": "Apache-2.0",

View File

@ -3,10 +3,15 @@
<head>
<link rel="stylesheet" type="text/css" href="style/index.css" />
<script src="js/neutralino.js"></script>
<script src="js/windowDrag.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="controlBar">
<span id="titleSection">
GrassClipper
<span id="version">0.2.0</span>
</span>
<div id="minBtn" onclick="minimizeWin()">
<img src="icons/min.svg" alt="Minimize" />
</div>

View File

@ -114,9 +114,11 @@ async function launchPrivate() {
}
function minimizeWin() {
console.log('min')
Neutralino.window.minimize()
}
function closeWin() {
console.log('close')
Neutralino.app.exit()
}

View File

@ -0,0 +1,21 @@
// https://stackoverflow.com/questions/67971689/positioning-the-borderless-window-in-neutralino-js
// had to use this since the in-built function breaks the close and minimize buttons
let dragging = false, posX, posY;
let draggable;
document.addEventListener('DOMContentLoaded', () => {
draggable = document.getElementById('controlBar');
draggable.onmousedown = function (e) {
posX = e.pageX, posY = e.pageY;
dragging = true;
}
draggable.onmouseup = function (e) {
dragging = false;
}
document.onmousemove = function (e) {
if (dragging) Neutralino.window.move(e.screenX - posX, e.screenY - posY);
}
})

View File

@ -1,3 +1,5 @@
html { user-select: none; }
body {
overflow: hidden;
height: 85vh;
@ -8,6 +10,7 @@ body {
#controlBar {
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
top: 0;
left: 0;
@ -20,11 +23,12 @@ body {
#controlBar div {
color: #c3c3c3;
width: 20px;
height: 80%;
vertical-align: middle;
text-align: center;
padding: 0px 6px;
margin: 0px 2px;
padding-top: 4px;
padding-top: 6px;
}
#controlBar div:hover {
@ -32,10 +36,20 @@ body {
background-color: #353535;
}
#titleSection {
color: white;
padding-left: 8px;
}
#version {
display: inline-block;
color: #434343;
}
#controlBar div img {
/* https://codepen.io/sosuke/pen/Pjoqqp */
filter: invert(95%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(88%) contrast(81%);
height: 70%;
height: 60%;
vertical-align: middle;
}
@ -132,7 +146,7 @@ body {
/* Move the first official button to the position on the png */
#firstHalf button {
position: relative;
transform: translate(115px, 480px);
transform: translate(140px, 500px);
width: 300px;
height: 60px;
}
@ -167,7 +181,7 @@ body {
/* Move the second private button the near-bottom */
#secondControlContainer {
position: relative;
transform: translate(115px, 436px);
transform: translate(115px, 456px);
width: 300px;
height: 60px;
}