Add the Theme setting and other functions for it
This commit is contained in:
KorbsStudio
parent
8a7703ddd5
commit
be542c747c
11 changed files with 269 additions and 19 deletions
|
|
@ -31,5 +31,4 @@ import '../styles/splash.scss'
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -5,6 +5,8 @@ A template replacement for FalixNodes Desktop.
|
|||
|
||||
___
|
||||
|
||||
<button data-color-mode-switch>Toggle COLOR MODE 💡</button>
|
||||
|
||||
## What was FalixNodes Desktop?
|
||||
FalixNodes Desktop was developed by Korbs Studio, a FalixNodes Limited contractor. It was intended for its desktop customers to use FalixNodes more quickly and conveniently by allowing them to easily access both the client and game panels presented by FalixNodes. The capabilities of how the software works have progressed over time, and improved performance and security practices have been put in place to make the customer experience more efficient and trustworthy.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
import SettingCard from '../../components/settings/card.astro'
|
||||
|
||||
import Theme from '../../components/settings/appearance/theme.astro'
|
||||
|
||||
import '../../styles/settings.scss'
|
||||
---
|
||||
|
||||
<div class="tab-header">
|
||||
<h1>Settings</h1>
|
||||
</div>
|
||||
|
||||
<SettingCard Title="Appearance">
|
||||
<Theme />
|
||||
</SettingCard>
|
||||
11
astro/components/settings/appearance/theme.astro
Normal file
11
astro/components/settings/appearance/theme.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<div class="option">
|
||||
<div class="option-meta">
|
||||
<h2>Theme</h2>
|
||||
<p>Select how you would like the interface to look. You can either select a theme or choose the auto option to sync with your operating system's theme. </p>
|
||||
</div>
|
||||
<div class="theme">
|
||||
<button id="auto" class="theme" onclick="Theme('Auto')"><p>Auto</p></button>
|
||||
<button id="light" class="theme" onclick="Theme('Light')"><p>Light</p></button>
|
||||
<button id="dark" class="theme" onclick="Theme('Dark')"><p>Dark</p></button>
|
||||
</div>
|
||||
</div>
|
||||
13
astro/components/settings/card.astro
Normal file
13
astro/components/settings/card.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
const {Title, Description} = Astro.props
|
||||
---
|
||||
|
||||
<div class="setting">
|
||||
<div class="setting-header">
|
||||
<h1>{Title}</h1>
|
||||
<p>{Description}</p>
|
||||
</div>
|
||||
<div class="setting-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
---
|
||||
import Splash from '../components/Splash.astro'
|
||||
import Sidebar from '../components/Sidebar.astro'
|
||||
|
||||
// Tabs
|
||||
import Dashboard from '../components/pages/Dashboard.md'
|
||||
import Tab2 from '../components/pages/Tab2.astro'
|
||||
import Tab3 from '../components/pages/Tab3.astro'
|
||||
|
|
@ -8,11 +10,12 @@ import Tab3A from '../components/pages/Tab3A.astro'
|
|||
import Tab4 from '../components/pages/Tab4.astro'
|
||||
import Settings from '../components/pages/Settings.astro'
|
||||
|
||||
// Stylesheets
|
||||
import '../styles/index.scss'
|
||||
import '../styles/notification.scss'
|
||||
---
|
||||
|
||||
<script src="./navigation.js" crossoarigin="anonymous"></script>
|
||||
<script src="./scripts/navigation.js" crossoarigin="anonymous"></script>
|
||||
<script src="./scripts/theme.js" crossoarigin="anonymous"></script>
|
||||
<script defer src="./font-awesome-6.3.0/js/all.js"></script>
|
||||
|
||||
<div class="content">
|
||||
|
|
|
|||
|
|
@ -7,13 +7,67 @@
|
|||
--TabActiveText: black;
|
||||
}
|
||||
|
||||
///////////////////////////////////////////
|
||||
// Theme: Auto | Light | Dark ///
|
||||
///////////////////////////////////////////
|
||||
|
||||
// The "Auto" theme does appear to work
|
||||
// on Linux, tested on GNOME 43 and KDE 2.27.
|
||||
// The "Auto" option is disabled for Linux.
|
||||
|
||||
html.theme-auto { // Auto
|
||||
@media (prefers-color-scheme: light) {
|
||||
--SidebarBackground: rgb(239 240 241 / 75%);
|
||||
--ContentBackground: #EFF0F1;
|
||||
|
||||
--TextColor: black;
|
||||
--CardBackground: white;
|
||||
|
||||
--WebviewControlsColor: white;
|
||||
--WebViewControlBackground: #EFF0F1;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--SidebarBackground: rgba(35, 35, 35, 0.75);
|
||||
--ContentBackground: #232323;
|
||||
|
||||
--TextColor: white;
|
||||
--CardBackground: #282828;
|
||||
|
||||
--WebviewControlsColor: white;
|
||||
--WebViewControlBackground: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
html.theme-light { // Light
|
||||
--SidebarBackground: rgb(239 240 241 / 75%);
|
||||
--ContentBackground: #EFF0F1;
|
||||
|
||||
--TextColor: black;
|
||||
--CardBackground: white;
|
||||
|
||||
--WebviewControlsColor: white;
|
||||
--WebViewControlBackground: #EFF0F1;
|
||||
}
|
||||
|
||||
html.theme-dark { // Dark
|
||||
--SidebarBackground: rgba(35, 35, 35, 0.75);
|
||||
--ContentBackground: #232323;
|
||||
|
||||
--TextColor: white;
|
||||
--CardBackground: #282828;
|
||||
|
||||
--WebviewControlsColor: white;
|
||||
--WebViewControlBackground: #232323;
|
||||
}
|
||||
|
||||
///////////////////////////////////////////
|
||||
|
||||
* {outline: none}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
color: white;
|
||||
color: var(--TextColor);
|
||||
font-family: arial;
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +105,7 @@ body {
|
|||
padding: 0px 20px;
|
||||
display: grid;
|
||||
grid-template-rows: 50px auto auto;
|
||||
background: rgb(35 35 35 / 75%);
|
||||
background: var(--SidebarBackground);
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -74,7 +128,7 @@ body {
|
|||
}
|
||||
li {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
color: var(--TextColor);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
|
|
@ -85,7 +139,7 @@ body {
|
|||
svg {margin: 0px 16px}
|
||||
}
|
||||
li:hover {
|
||||
background: rgba(51, 51, 51, 0.5);
|
||||
background: rgb(255 255 255 / 10%);
|
||||
}
|
||||
li.active {
|
||||
background: var(--TabActiveBackground);
|
||||
|
|
@ -101,11 +155,11 @@ body {
|
|||
width: calc(100% - 280px);
|
||||
max-width: calc(100% - 280px);
|
||||
height: 100%;
|
||||
background: #232323;
|
||||
background: var(--ContentBackground);
|
||||
.page {
|
||||
display: none;
|
||||
&.active {display: block}
|
||||
background: #232323;
|
||||
background: var(--ContentBackground);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -114,12 +168,12 @@ body {
|
|||
// Webview Navigation
|
||||
/// Top Bar
|
||||
.webview-navigation#TopBar {
|
||||
background: black;
|
||||
background: var(--ContentBackground);
|
||||
padding: 6px;
|
||||
cursor: default;
|
||||
button {
|
||||
color: white;
|
||||
background: #202020;
|
||||
fill: var(--WebviewControlsColor);
|
||||
background: var(--WebViewControlBackground);
|
||||
border: none;
|
||||
aspect-ratio: 1;
|
||||
width: 32px;
|
||||
|
|
@ -145,8 +199,8 @@ body {
|
|||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
color: white;
|
||||
background: #232323;
|
||||
fill: var(--WebviewControlsColor);
|
||||
background: var(--WebViewControlBackground);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
margin-left: 6px;
|
||||
|
|
@ -156,6 +210,6 @@ body {
|
|||
}
|
||||
}
|
||||
button:hover {
|
||||
background: #4b4b4b;
|
||||
background: var(--WebViewControlBackground);
|
||||
}
|
||||
}
|
||||
98
astro/styles/settings.scss
Normal file
98
astro/styles/settings.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
// Settings
|
||||
/// Global
|
||||
.tab-header {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.setting {
|
||||
background: var(--CardBackground);
|
||||
border: 1px rgb(255 255 255 / 10%) solid;
|
||||
border-radius: 6px;
|
||||
padding: 12px 6px 12px 12px;
|
||||
margin: 0px 32px 24px 32px;
|
||||
h1, h2, p {
|
||||
margin: 0px;
|
||||
cursor: default;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.setting-header {
|
||||
border-bottom: 1px rgba(255, 255, 255, 0.1) solid;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
margin: -12px -6px 12px -12px;
|
||||
padding: 14px 32px 6px 32px;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
.setting-content {
|
||||
.option {
|
||||
display: grid;
|
||||
grid-template-columns: 360px auto;
|
||||
grid-gap: 32px;
|
||||
border-bottom: 1px rgb(255 255 255 / 10%) solid;
|
||||
padding: 32px;
|
||||
.option-meta {
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: rgb(145 145 145);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Appearance
|
||||
/// Theme
|
||||
[os="Linux"] .theme #auto {display: none !important}
|
||||
.theme {
|
||||
button {
|
||||
background: #181818;
|
||||
border: 1px rgb(255 255 255 / 10%) solid;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
aspect-ratio: 1;
|
||||
width: 84px;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
transition: 0.3s border;
|
||||
p {
|
||||
margin: 96px 0px -32px 0px;
|
||||
color: gray;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
}
|
||||
button:hover {
|
||||
border: 1px white solid;
|
||||
transition: 0.3s border;
|
||||
p {
|
||||
color: white;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
}
|
||||
.theme-active::before {
|
||||
content: "";
|
||||
background: var(--TabActiveBackground);
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
margin: 50px 0px 0px 10px;
|
||||
border-radius: 50px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
}
|
||||
button#auto {background-image: url(/public/images/settings/theme/Auto.png)}
|
||||
button#light {background-image: url(/public/images/settings/theme/Light.png)}
|
||||
button#dark {background-image: url(/public/images/settings/theme/Dark.png)}
|
||||
|
|
@ -22,8 +22,8 @@ log.transports.console.format = '\x1b[34m[electron]:\x1b[37m'
|
|||
console.log = log.log
|
||||
|
||||
// Use the correct icon depending on the operating system
|
||||
if /* If macOS */ (process.platform == 'darwin') {global.AppIcon = 'public/images/icons/app/macOS.icns' }
|
||||
else if /* If Windows */ (process.platform == 'win32') {global.AppIcon = 'public/images/icons/app/Windows.png' }
|
||||
if /* If macOS */ (process.platform === 'darwin') {global.AppIcon = 'public/images/icons/app/macOS.icns' }
|
||||
else if /* If Windows */ (process.platform === 'win32') {global.AppIcon = 'public/images/icons/app/Windows.png' }
|
||||
else /* If Linux */ {global.AppIcon = 'public/images/icons/app/Linux.png' }
|
||||
|
||||
function createWindow () {
|
||||
|
|
@ -54,12 +54,18 @@ function createWindow () {
|
|||
// Doc: https://www.electronjs.org/docs/latest/api/browser-window#showing-the-window-gracefully
|
||||
mainWindow.once('ready-to-show', () => {mainWindow.show()})
|
||||
|
||||
// Set Platform Class
|
||||
if /* If macOS */ (process.platform === 'darwin') { mainWindow.webContents.executeJavaScript(`document.querySelector('html').setAttribute('os', 'Mac')`) }
|
||||
else if /* If Windows */ (process.platform === 'win32') { mainWindow.webContents.executeJavaScript(`document.querySelector('html').setAttribute('os', 'Windows')`) }
|
||||
else /* If Linux */ { mainWindow.webContents.executeJavaScript(`document.querySelector('html').setAttribute('os', 'Linux')`) }
|
||||
|
||||
// Pushy - Pushy Notification System (PNS)
|
||||
mainWindow.webContents.on('did-finish-load', () => {Pushy.listen()})
|
||||
Pushy.register({ appId: process.env.PushyAppId }).then((deviceToken) => {}).catch((error) => {console.log('Pushy registration error: ' + error.message)})
|
||||
|
||||
setTimeout(() => {
|
||||
Pushy.setNotificationListener((data) => {
|
||||
new Notification({ title: data.title, body: data.message }).show()
|
||||
if(process.env.NotificationType === 'Native') {
|
||||
new Notification({ title: data.title, body: data.message }).show()
|
||||
}
|
||||
|
|
@ -69,7 +75,7 @@ function createWindow () {
|
|||
`)
|
||||
}
|
||||
})
|
||||
}, 10000) // If this is triggered too soon, the notifications won't work.
|
||||
}, 5000) // If this is triggered too soon, the notifications won't work.
|
||||
|
||||
if (Pushy.isRegistered()) {Pushy.subscribe('AppName').then(() => {}).catch((error) => {console.error(error)})}
|
||||
|
||||
|
|
|
|||
0
public/navigation.js → public/scripts/navigation.js
Executable file → Normal file
0
public/navigation.js → public/scripts/navigation.js
Executable file → Normal file
49
public/scripts/theme.js
Normal file
49
public/scripts/theme.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
let AppTheme = localStorage.getItem('AppTheme')
|
||||
if (AppTheme == null) {Theme('Dark')} else {Theme(AppTheme)}
|
||||
|
||||
function Theme(theme) {
|
||||
if (theme === 'Auto') {
|
||||
document.querySelector('html').setAttribute('class', 'theme-auto')
|
||||
setTimeout(() => {ThemeIsAuto()}, 200)
|
||||
} else if (theme === 'Light') {
|
||||
document.querySelector('html').setAttribute('class', 'theme-light')
|
||||
setTimeout(() => {ThemeIsLight()}, 200)
|
||||
} else if (theme === 'Dark') {
|
||||
document.querySelector('html').setAttribute('class', 'theme-dark')
|
||||
setTimeout(() => {ThemeIsDark()}, 200)
|
||||
}
|
||||
localStorage.setItem('AppTheme', theme)
|
||||
}
|
||||
|
||||
function ThemeIsReset() {
|
||||
document.querySelector(".theme #auto").setAttribute('class', 'theme')
|
||||
document.querySelector(".theme #auto").style.border = '1px rgba(255, 255, 255, 0.1) solid'
|
||||
document.querySelector(".theme #auto > p").style.color = 'gray'
|
||||
|
||||
document.querySelector(".theme #light").setAttribute('class', 'theme')
|
||||
document.querySelector(".theme #light").style.border = '1px rgba(255, 255, 255, 0.1) solid'
|
||||
document.querySelector(".theme #light > p").style.color = 'gray'
|
||||
|
||||
document.querySelector(".theme #dark").setAttribute('class', 'theme')
|
||||
document.querySelector(".theme #dark").style.border = '1px rgba(255, 255, 255, 0.1) solid'
|
||||
document.querySelector(".theme #dark > p").style.color = 'gray'
|
||||
}
|
||||
|
||||
function ThemeIsAuto() {
|
||||
ThemeIsReset()
|
||||
document.querySelector(".theme #auto").setAttribute('class', 'theme theme-active')
|
||||
document.querySelector(".theme #auto").style.border = '1px var(--TabActiveBackground) solid'
|
||||
document.querySelector(".theme #auto > p").style.color = 'var(--TabActiveBackground)'
|
||||
}
|
||||
function ThemeIsLight() {
|
||||
ThemeIsReset()
|
||||
document.querySelector(".theme #light").setAttribute('class', 'theme theme-active')
|
||||
document.querySelector(".theme #light").style.border = '1px var(--TabActiveBackground) solid'
|
||||
document.querySelector(".theme #light > p").style.color = 'var(--TabActiveBackground)'
|
||||
}
|
||||
function ThemeIsDark() {
|
||||
ThemeIsReset()
|
||||
document.querySelector(".theme #dark").setAttribute('class', 'theme theme-active')
|
||||
document.querySelector(".theme #dark").style.border = '1px var(--TabActiveBackground) solid'
|
||||
document.querySelector(".theme #dark > p").style.color = 'var(--TabActiveBackground)'
|
||||
}
|
||||
Reference in a new issue