Skip to content

Commit 02d8dc4

Browse files
vorlievorlie
committed
Enhance UI with new branding, update settings layout, and add new themes
1 parent 3cd3066 commit 02d8dc4

File tree

6 files changed

+134
-27
lines changed

6 files changed

+134
-27
lines changed

‎index.html‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
</head>
1010
<body>
1111
<div class="titlebar" style="app-region: drag;">
12-
<h2 class="titlebar-h1" style="app-region: drag;">Iota's Notepad</h2>
12+
<div class="titlebar-branding" style="app-region: drag;">
13+
<img src="assets/icon.png" alt="Iota's Notepad" class="titlebar-icon" style="app-region: drag;">
14+
<h2 class="titlebar-h2" style="app-region: drag;">Iota's Notepad</h2>
15+
</div>
1316
<div class="titlebar-actions" style="app-region: no-drag;">
1417
<button title="Exports a selected note from the modal list" class="button" onclick="openExportModal()">Export</button>
1518
<input type="file" accept=".txt" id="importNotesInput" style="display:none" onchange="importNotes(event)">
@@ -59,27 +62,33 @@ <h2 class="modal-h2">Click on an item to export</h2>
5962
</div>
6063
</div>
6164
<div id="settingsModal" class="modal">
62-
<div class="modal-content">
65+
<div class="modal-content settings-modal-content">
6366
<span class="close" onclick="closeSettingsModal()">&times;</span>
6467
<div style="display: flex; justify-content: space-between;">
6568
<div class="settings-section">
6669
<h2 class="modal-h2">Settings</h2>
67-
<label for="timeFormat">Time Format:</label>
68-
<select id="timeFormat" class="dropdown">
69-
<option value="12">12-hour</option>
70-
<option value="24">24-hour</option>
71-
</select>
72-
<label for="themeFlavor">Theme Flavor:</label>
73-
<select id="themeFlavor" class="dropdown" onchange="loadTheme(this.value)">
74-
<option value="mocha">Mocha</option>
75-
<option value="mochaMica">Mocha (Mica)</option>
76-
<!-- <option value="latte">Latte</option> -->
77-
<!-- Commented because i have no idea how to make the window controls symbol colors change based on contrast -->
78-
<option value="frappe">Frappe</option>
79-
<option value="frappeMica">Frappe (Mica)</option>
80-
<option value="macchiato">Macchiato</option>
81-
<option value="macchiatoMica">Macchiato (Mica)</option>
82-
</select>
70+
<div class="settings-inputs">
71+
<p class="settings-label">Time Format:</p>
72+
<select id="timeFormat" class="dropdown settings-dropdown">
73+
<option value="12">12-hour</option>
74+
<option value="24">24-hour</option>
75+
</select>
76+
</div>
77+
<div class="settings-inputs">
78+
<p class="settings-label">Theme Flavor:</p>
79+
<select id="themeFlavor" class="dropdown settings-dropdown" onchange="loadTheme(this.value)">
80+
<option value="mocha">Mocha</option>
81+
<option value="mochaMica">Mocha (Mica)</option>
82+
<!-- <option value="latte">Latte</option> -->
83+
<!-- Commented because i have no idea how to make the window controls symbol colors change based on contrast -->
84+
<option value="frappe">Frappe</option>
85+
<option value="frappeMica">Frappe (Mica)</option>
86+
<option value="macchiato">Macchiato</option>
87+
<option value="macchiatoMica">Macchiato (Mica)</option>
88+
<option value="clearDark">Clear Dark</option>
89+
<option value="clearDarkMica">Clear Dark (Mica)</option>
90+
</select>
91+
</div>
8392
<div class="settings-buttons">
8493
<button class="settings-button" onclick="document.getElementById('importThemeInput').click()">Import theme</button>
8594
<input type="file" accept=".json" id="importThemeInput" style="display:none" onchange="importTheme(event)">
@@ -90,10 +99,12 @@ <h2 class="modal-h2">Settings</h2>
9099
<div class="divider"></div>
91100
<div class="about-section">
92101
<h2 class="modal-h2">About</h2>
93-
<p id="appVersion">Version: </p>
94-
<p id="electronVersion">Electron Version: </p>
95-
<p id="nodeVersion">Node.js Version: </p>
96-
<p id="chromeVersion">Chrome Version: </p>
102+
<div class="about-versions">
103+
<p id="appVersion" class="version">Version: </p>
104+
<p id="electronVersion" class="version">Electron Version: </p>
105+
<p id="nodeVersion" class="version">Node.js Version: </p>
106+
<p id="chromeVersion" class="version">Chrome Version: </p>
107+
</div>
97108
<button class="about-button" onclick="checkForUpdates()">Check for Updates</button>
98109
<button class="about-button" id="open-dev-tools" onclick="window.API.openDevTools()">Open DevTools</button>
99110
</div>

‎index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ app.on('ready', () => {
2828

2929
mainWindow.setTitleBarOverlay({
3030
color: 'rgba(0, 0, 0, 0)', // Transparent background
31-
symbolColor: 'rgba(205, 214, 244, 1)', // Symbol color
31+
symbolColor: 'rgba(255, 255, 255, 1)', // Symbol color
3232
height: 48
3333
});
34-
mainWindow.setMinimumSize(1000, 600);
34+
mainWindow.setMinimumSize(1200, 700);
3535

3636
//Menu.setApplicationMenu(null);
3737

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "iotas-notepad",
3-
"version": "1.1.9",
3+
"version": "1.1.10",
44
"main": "index.js",
55
"scripts": {
66
"electron": "electron .",

‎preload.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ contextBridge.exposeInMainWorld('API', {
1010
node: () => process.versions.node,
1111
chrome: () => process.versions.chrome,
1212
electron: () => process.versions.electron,
13-
iotanotepad: () => "1.1.9"
13+
iotanotepad: () => "1.1.10"
1414
},
1515
});

‎src/globals.css‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@
115115
--modal-content-border: 1px solid var(--color-border);
116116
--modal-content-width: 80%;
117117
--modal-content-max-width: 600px;
118+
--modal-content-settings-max-width: 700px;
118119

119120
--modal-close-color: var(--color-text);
120121
--modal-close-font-size: 28px;
@@ -169,13 +170,25 @@ body {
169170
align-items: var(--titlebar-align-items);
170171
}
171172

173+
.titlebar-branding {
174+
display: var(--titlebar-display);
175+
align-items: var(--titlebar-align-items);
176+
}
177+
178+
.titlebar-icon {
179+
margin-right: 10px;
180+
width: 30px;
181+
height: 30px;
182+
border-radius: 25%;
183+
}
184+
172185
.titlebar-actions {
173186
margin-right: var(--titlebar-actions-margin-right);
174187
display: var(--titlebar-display);
175188
align-items: var(--titlebar-align-items);
176189
}
177190

178-
.titlebar-h1{
191+
.titlebar-h2{
179192
margin: 0;
180193
}
181194

@@ -243,6 +256,23 @@ body {
243256
color: var(--dropdown-color);
244257
}
245258

259+
.settings-inputs {
260+
display: flex;
261+
align-items: center;
262+
margin-bottom: 5px;
263+
margin: 0;
264+
}
265+
266+
.settings-inputs .settings-label {
267+
margin: 0;
268+
margin-right: 10px;
269+
}
270+
271+
.settings-dropdown {
272+
flex: 1;
273+
margin-top: 8px;
274+
}
275+
246276
.header-h2 {
247277
margin: 0;
248278
}
@@ -419,6 +449,10 @@ body {
419449
overflow: hidden;
420450
}
421451

452+
.settings-modal-content {
453+
max-width: var(--modal-content-settings-max-width) !important;
454+
}
455+
422456
.modal .button {
423457
background-color: var(--button-bg-color);
424458
color: var(--button-color);
@@ -458,6 +492,24 @@ body {
458492
background-color: var(--button-bg-color-hover);
459493
}
460494

495+
.settings-buttons{
496+
border-top: var(--sidebar-border-right);
497+
padding-top: 10px;
498+
margin-top: 10px;
499+
}
500+
501+
.about-versions{
502+
border-bottom: var(--sidebar-border-right);
503+
padding-bottom: 10px;
504+
margin-bottom: 10px;
505+
}
506+
507+
.about-versions .version{
508+
font-size: 14px;
509+
margin: 0;
510+
color: var(--color-placeholder);
511+
}
512+
461513
.modal-h2{
462514
margin: 0px 0px 10px 0px;
463515
}

‎src/script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,50 @@ const defaultThemes = {
138138
'--color-button-download': '#8caaee',
139139
'--color-button-download-hover': '#b5bfe2',
140140
'--color-button-download-text': '#303446'
141+
},
142+
clearDark:{
143+
'--color-bg-dark': '#000000',
144+
'--color-bg-dark-alpha': '#000000',
145+
'--color-bg-darker': '#0a0a0a',
146+
'--color-bg-darker-alpha': '#0a0a0a',
147+
'--color-bg-medium': '#1a1a1a',
148+
'--color-bg-medium-alpha': '#1a1a1a',
149+
'--color-bg-light': '#2a2a2a',
150+
'--color-bg-light-alpha': '#2a2a2a',
151+
'--color-border': '#3a3a3a',
152+
'--color-text': '#e0e0e0',
153+
'--color-placeholder': '#a0a0a0',
154+
'--color-hover': '#242424',
155+
'--color-hover-light': '#3a3a3a',
156+
'--color-close-hover': '#ff4a4a',
157+
'--color-scrollbar-bg': '#1a1a1a',
158+
'--color-scrollbar-thumb': '#3a3a3a',
159+
'--color-scrollbar-thumb-hover': '#5a5a5a',
160+
'--color-button-download': '#4a90e2',
161+
'--color-button-download-hover': '#357ab8',
162+
'--color-button-download-text': '#ffffff'
163+
},
164+
clearDarkMica: {
165+
'--color-bg-dark': '#000000',
166+
'--color-bg-dark-alpha': '#00000070',
167+
'--color-bg-darker': '#0a0a0a',
168+
'--color-bg-darker-alpha': '#0a0a0a70',
169+
'--color-bg-medium': '#1a1a1a',
170+
'--color-bg-medium-alpha': '#1a1a1a70',
171+
'--color-bg-light': '#2a2a2a',
172+
'--color-bg-light-alpha': '#2a2a2a70',
173+
'--color-border': '#3a3a3a',
174+
'--color-text': '#e0e0e0',
175+
'--color-placeholder': '#a0a0a0',
176+
'--color-hover': '#242424',
177+
'--color-hover-light': '#3a3a3a',
178+
'--color-close-hover': '#ff4a4a',
179+
'--color-scrollbar-bg': '#1a1a1a',
180+
'--color-scrollbar-thumb': '#3a3a3a',
181+
'--color-scrollbar-thumb-hover': '#5a5a5a',
182+
'--color-button-download': '#4a90e2',
183+
'--color-button-download-hover': '#357ab8',
184+
'--color-button-download-text': '#ffffff'
141185
}
142186
};
143187

0 commit comments

Comments
 (0)