Archive/opengoal-launcher
1
0
Fork 0
mirror of https://github.com/open-goal/launcher.git synced 2024-10-19 14:47:36 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated the settings page to use same layout as main page, removed bootstrap dependency

Browse source
This commit is contained in:
trippjoe 2022-04-03 14:48:55 -04:00
parent 259947334e
commit 13a75b93ab
7 changed files with 158 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
package-lock.json generated
View file

@ -12,7 +12,6 @@
"@terascope/fetch-github-release": "^0.8.7",
"7zip": "^0.0.6",
"async": "^3.2.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"electron-squirrel-startup": "^1.0.0",
"fs-extra": "^10.0.1"
@ -1432,18 +1431,6 @@
"dev": true,
"optional": true
},
"node_modules/bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
},
"peerDependencies": {
"@popperjs/core": "^2.10.2"
}
},
"node_modules/bootstrap-icons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
@ -8459,12 +8446,6 @@
"dev": true,
"optional": true
},
"bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"bootstrap-icons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",

3
package.json
View file

@ -56,7 +56,6 @@
"@terascope/fetch-github-release": "^0.8.7",
"7zip": "^0.0.6",
"async": "^3.2.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"electron-squirrel-startup": "^1.0.0",
"fs-extra": "^10.0.1"
@ -70,4 +69,4 @@
"@electron-forge/maker-zip": "^6.0.0-beta.63",
"electron": "17.2.0"
}
}
}

4
src/index.js
View file

@ -76,6 +76,10 @@ ipcMain.on('checkUpdates', fetchMasterRelease);
ipcMain.on('build', buildGame);
ipcMain.on('launch', launchGame);
ipcMain.on('load-main', () => {
mainWindow.loadFile(path.join(__dirname, '/pages/main/index.html'));
})
// opening the settings html page when navbar is selected
ipcMain.on('settings', () => {
mainWindow.loadFile(path.join(__dirname, '/pages/settings/settings.html'));

2
src/js/preload.js
View file

@ -3,7 +3,7 @@ const { contextBridge, ipcRenderer } = require("electron");
// Expose protected methods that allow the renderer process to use
contextBridge.exposeInMainWorld("electronAPI", {
send: (command) => {
let validCommands = ['getISO', 'checkUpdates', 'launch', 'build', 'settings', 'config', 'toggle-console'];
let validCommands = ['getISO', 'checkUpdates', 'launch', 'build', 'settings', 'config', 'toggle-console', 'load-main'];
if (validCommands.includes(command)) {
ipcRenderer.send(command);
}

2
src/pages/main/index.css
View file

@ -18,7 +18,7 @@ body{
grid-template-areas:
"sidenav body"
"sidenav body";
height: 100vh;
height: 100vh;
}
.background-container {

60
src/pages/settings/settings.html
View file

@ -5,53 +5,41 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="styles.css">
<script defer src="settings.js"></script>
<title>Settings</title>
</head>
<body>
<ul class="nav nav-tabs nav-justified justify-content-center mb-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button"
role="tab" aria-controls="general" aria-selected="true">General</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="links-tab" data-bs-toggle="tab" data-bs-target="#links" type="button" role="tab"
aria-controls="links" aria-selected="false">Links</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<div class="container">
<div class="row mb-3">
<button type="button" class="btn btn-success" onclick="send('checkUpdates')">Check for Updates</button>
</div>
<div class="row mb-3">
<button type="button" class="btn btn-success">Toggle Dynamic Backgrounds</button>
</div>
<div class="row">
<button type="button" class="btn btn-danger">Uninstall</button>
</div>
</div>
<div class="container">
<div class="background-container">
<div class="overlay"></div>
<img class="background" src="../../assets/images/backgrounds/jak1/settings.png">
</div>
<div class="tab-pane fade" id="links" role="tabpanel" aria-labelledby="links-tab">
<div class="container">
<div class="list-group">
<a href="https://github.com/open-goal/jak-project" target="_blank" rel="noopener noreferrer"
class="list-group-item list-group-item-action">OpenGOAL Github Repository</a>
<a href="https://open-goal.github.io/#/" target="_blank" rel="noopener noreferrer"
class="list-group-item list-group-item-action">OpenGOAL Documentation</a>
<a href="https://discord.gg/VZbXMHXzWv" target="_blank" rel="noopener noreferrer"
class="list-group-item list-group-item-action">Discord Server</a>
<div class="body">
</div>
<div class="sidenav">
<div class="actions">
<div class="general nav-item" data-tooltip="General">
<i class="bi bi-sliders2-vertical"></i>
</div>
<div class="links nav-item" data-tooltip="Links">
<i class="bi bi-link-45deg"></i>
</div>
<div class="Files nav-item" data-tooltip="Files">
<i class="bi bi-folder2"></i>
</div>
<div class="nav-4">
</div>
</div>
<div class="return nav-item" data-tooltip="Back">
<i class="bi bi-arrow-return-left" onclick="send('load-main')"></i>
</div>
</div>
</div>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

127
src/pages/settings/styles.css Normal file
View file

@ -0,0 +1,127 @@
:root {
--bg-blue: #1B202B;
}
body{
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
display: grid;
height: 100vh;
grid-template-columns: 0.10fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"sidenav body"
"sidenav body";
}
.body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". . ."
". . ."
". . .";
grid-area: body;
}
.sidenav {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 5fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"actions"
"return";
grid-area: sidenav;
background-color: var(--bg-blue);
opacity: 50%;
transition: 500ms ease;
}
.sidenav:hover {
opacity: 100%;
}
.actions {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"general"
"links"
"files"
"nav-4";
justify-items: center;
align-items: center;
grid-area: actions;
}
.return {
justify-self: center;
align-self: center;
grid-area: return;
}
.sidenav i {
font-size: 2em;
color: white;
}
.background-container {
z-index: -1;
position: absolute;
height: 100vh;
}
/* for image overlay use position: fixed, for video overlay use position: absolute */
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: whitesmoke;
width: 100%;
height: 100vh;
opacity: 0.35;
}
.background {
height: 100vh;
-webkit-user-drag: none;
}
/* sidenav tooltip */
.nav-item:before,
.nav-item::after {
--scale: 0;
position: absolute;
transform: translateX(55px) scale(var(--scale));
transition: 200ms ease;
transform-origin: left center;
}
.nav-item::before {
padding: .5rem;
width: max-content;
background: #333;
color: white;
content: attr(data-tooltip);
border-radius: .3rem;
text-align: center;
}
.nav-item:hover::before {
--scale: 1
}