diff --git a/index.js b/index.js
index aa1beca..83c31e6 100644
--- a/index.js
+++ b/index.js
@@ -3,11 +3,14 @@ const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
createWindow();
+ // This event works on macOS only.
+ // If the user clicks on app's icon on the dock and there are no open windows, create one.
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
+// If all windows are closed and we're not running macOS, quit the app.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
diff --git a/static/assets/css/keyboard.css b/static/assets/css/keyboard.css
index ec8e5e6..75f4e7a 100644
--- a/static/assets/css/keyboard.css
+++ b/static/assets/css/keyboard.css
@@ -19,7 +19,7 @@
.display {
grid-column: span 4;
- color: white;
+ color: var(--text-color);
font-size: 3rem;
display: flex;
justify-content: flex-end;
@@ -40,7 +40,7 @@
/* Vertically centered */
font-size: 2.5rem;
white-space: nowrap;
- color: white;
+ color: var(--text-color);
}
.display-text {
@@ -56,7 +56,7 @@
background-color: var(--button-primary);
border: none;
border-radius: 50%;
- color: white;
+ color: var(--text-color);
font-size: 1.25rem;
display: flex;
justify-content: center;
@@ -74,7 +74,7 @@
}
.button.settings {
- background-color: var(--button-settings);
+ background-color: var(--button-primary);
border-radius: 50%;
}
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 19c2941..70af150 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -1,12 +1,11 @@
:root {
font-size: 18px;
- --theme-bg: rgb(24, 24, 24);
+ --theme-bg: #181818;
--text-color: white;
- --button-primary: rgb(81, 81, 81);
- --button-secondary: rgb(243, 134, 51);
- --button-settings: rgb(72, 72, 72);
+ --button-primary: #515151;
+ --button-secondary: #f38633;
}
body {
@@ -21,7 +20,7 @@ body {
overflow: hidden;
}
-button {
+.calculator button {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
@@ -64,11 +63,11 @@ button {
}
.history-container span {
- color: rgba(255, 255, 255, 0.6);
+
}
.history-container span strong {
- color: white;
+ color: var(--text-color);
}
body.history-open .history-container {
@@ -95,6 +94,7 @@ body.history-open .calculator {
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
+ padding: 0 1rem;
z-index: 150;
@@ -107,4 +107,63 @@ body.settings-open .settings-container {
body.settings-open .calculator {
transform: translateY(-80%);
+}
+
+.settings-container span {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.5rem;
+ font-size: 0.9rem;
+}
+
+input[type=color] {
+ border-radius: 50%;
+ height: 1.5rem;
+ width: 1.5rem;
+ border: solid 1px rgb(128, 128, 128);
+ outline: none;
+ -webkit-appearance: none;
+ cursor: pointer;
+}
+
+input[type=color]::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+input[type=color]::-webkit-color-swatch {
+ border: none;
+ border-radius: 50%;
+}
+
+.settings-container button {
+ font-family: "IBM Plex", sans-serif;
+ font-optical-sizing: auto;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 0.85rem;
+
+ color: var(--text-color);
+ padding: 0.4rem 0.8rem;
+ border: none;
+ background-color: var(--button-primary);
+ /* border: solid 1px rgb(128, 128, 128); */
+ border-radius: 10px;
+
+ cursor: pointer;
+
+ transition: background-color 0.3s, transform 0.1s;
+}
+
+.settings-container button:hover {
+ background-color: var(--button-secondary);
+}
+
+.settings-container button:active {
+ transform: scale(0.9);
+}
+
+.settings-container .container {
+ display: flex;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/static/assets/js/calculator-logic.js b/static/assets/js/calculator-logic.js
index 2a47c1a..b4f58a7 100644
--- a/static/assets/js/calculator-logic.js
+++ b/static/assets/js/calculator-logic.js
@@ -1,3 +1,5 @@
+// This file is responsible for all calculator animations and logic.
+
const buttons = document.querySelectorAll('.button');
const displayText = document.querySelector('.display-text');
let currentInput = '';
@@ -124,7 +126,6 @@ function toggleHistory() {
if ($('body').hasClass('history-open')) { // If the history was just opened
// Animate it's elements
- console.log('a')
anime({
targets: '.history-container span',
translateY: [-100, 0],
diff --git a/static/assets/js/colors.js b/static/assets/js/colors.js
new file mode 100644
index 0000000..010142c
--- /dev/null
+++ b/static/assets/js/colors.js
@@ -0,0 +1,19 @@
+// This file manages the themes and color settings
+
+// This is a helper function for updating the UI colors in CSS
+function setUIColors(background, text, buttonPrimary, buttonSecondary) {
+ document.body.style.setProperty('--theme-bg', background);
+ document.body.style.setProperty('--text-color', text);
+ document.body.style.setProperty('--button-primary', buttonPrimary);
+ document.body.style.setProperty('--button-secondary', buttonSecondary);
+}
+
+// This function uses setUIColors to update the actual theme colors according to color input fields.
+function applyUIColors() {
+ const background = document.getElementById('background').value;
+ const text = document.getElementById('text').value;
+ const buttonPrimary = document.getElementById('button-primary').value;
+ const buttonSecondary = document.getElementById('button-secondary').value;
+
+ setUIColors(background, text, buttonPrimary, buttonSecondary);
+}
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 5d38301..a50670f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -51,12 +51,16 @@
+