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, "alwaysOnTop": false,
"icon": "/resources/icons/appIcon.png", "icon": "/resources/icons/appIcon.png",
"enableInspector": true, "enableInspector": true,
"borderless": false, "borderless": true,
"maximize": false, "maximize": false,
"hidden": false, "hidden": false,
"resizable": false, "resizable": false,

View File

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

View File

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

View File

@ -114,9 +114,11 @@ async function launchPrivate() {
} }
function minimizeWin() { function minimizeWin() {
console.log('min')
Neutralino.window.minimize() Neutralino.window.minimize()
} }
function closeWin() { function closeWin() {
console.log('close')
Neutralino.app.exit() 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 { body {
overflow: hidden; overflow: hidden;
height: 85vh; height: 85vh;
@ -8,6 +10,7 @@ body {
#controlBar { #controlBar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -20,11 +23,12 @@ body {
#controlBar div { #controlBar div {
color: #c3c3c3; color: #c3c3c3;
width: 20px; width: 20px;
height: 80%;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
padding: 0px 6px; padding: 0px 6px;
margin: 0px 2px; margin: 0px 2px;
padding-top: 4px; padding-top: 6px;
} }
#controlBar div:hover { #controlBar div:hover {
@ -32,10 +36,20 @@ body {
background-color: #353535; background-color: #353535;
} }
#titleSection {
color: white;
padding-left: 8px;
}
#version {
display: inline-block;
color: #434343;
}
#controlBar div img { #controlBar div img {
/* https://codepen.io/sosuke/pen/Pjoqqp */ /* https://codepen.io/sosuke/pen/Pjoqqp */
filter: invert(95%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(88%) contrast(81%); filter: invert(95%) sepia(0%) saturate(18%) hue-rotate(153deg) brightness(88%) contrast(81%);
height: 70%; height: 60%;
vertical-align: middle; vertical-align: middle;
} }
@ -132,7 +146,7 @@ body {
/* Move the first official button to the position on the png */ /* Move the first official button to the position on the png */
#firstHalf button { #firstHalf button {
position: relative; position: relative;
transform: translate(115px, 480px); transform: translate(140px, 500px);
width: 300px; width: 300px;
height: 60px; height: 60px;
} }
@ -167,7 +181,7 @@ body {
/* Move the second private button the near-bottom */ /* Move the second private button the near-bottom */
#secondControlContainer { #secondControlContainer {
position: relative; position: relative;
transform: translate(115px, 436px); transform: translate(115px, 456px);
width: 300px; width: 300px;
height: 60px; height: 60px;
} }