Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 18:36:30 +01:00
Code Issues Packages Projects Releases Activity

allow user to choose theme during initial setup

Browse Source
This commit is contained in:
zadam
2019-08-11 10:28:49 +02:00
parent de4733e848
commit 963ed32ce4
9 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -3102,9 +3102,9 @@
"integrity": "sha512-PcW2a0tyTuPHz3tWyYqtK6r1fZ3gp+3Sop8Ph+ZYN81Ob5rwmbHEzaqs10N3BEsaGTkh/ooniXK+WwszGlc2+Q=="
},
"electron": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/electron/-/electron-6.0.0.tgz",
"integrity": "sha512-JVHj0dYtvVFrzVk1TgvrdXJSyLpdvlWNLhtG8ItYZsyg9XbCOQ9OoPfgLm04FjMzKMzEl4YIN0PfGC02MTx3PQ==",
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/electron/-/electron-6.0.1.tgz",
"integrity": "sha512-XY69rI5IThIxsOS2BD+1ZkHE9hqkm4xN5a3WQFSmFRr2by4q5CnIe9vXmptlouGPTLs3tb7ySX/+K9CvH3szvg==",
"dev": true,
"requires": {
"@types/node": "^10.12.18",
@@ -3642,9 +3642,9 @@
}
},
"electron-context-menu": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-0.13.0.tgz",
"integrity": "sha512-a98UDykOn+tiyb2mQEz710ZNWj/L85wHv6jRUJFE9GNLSaRH5I5BR022RYoWInLTj1Mns66vh9SueyMPWc+aTQ==",
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-0.14.0.tgz",
"integrity": "sha512-7PuDz0Z3Eebhg/OS3JfPqHrQYl5ApokT/05PPUbNELk0EHBfFZwVcVneOJ05SlaGagK1bfQIXf75WSZt/K23VA==",
"requires": {
"cli-truncate": "^2.0.0",
"electron-dl": "^1.2.0",

4
package.json
View File

@@ -31,7 +31,7 @@
"dayjs": "1.8.15",
"debug": "4.1.1",
"ejs": "2.6.2",
"electron-context-menu": "0.13.0",
"electron-context-menu": "0.14.0",
"electron-debug": "3.0.1",
"electron-dl": "1.14.0",
"electron-find": "1.0.6",
@@ -78,7 +78,7 @@
},
"devDependencies": {
"devtron": "1.4.0",
"electron": "6.0.0",
"electron": "6.0.1",
"electron-builder": "21.2.0",
"electron-compile": "6.4.4",
"electron-installer-debian": "2.0.0",

17
src/public/javascripts/setup.js
View File

@@ -23,6 +23,19 @@ function SetupModel() {
this.password1 = ko.observable();
this.password2 = ko.observable();
this.theme = ko.observable("white");
this.theme.subscribe(function(newTheme) {
const $body = $("body");
for (const clazz of Array.from($body[0].classList)) { // create copy to safely iterate over while removing classes
if (clazz.startsWith("theme-")) {
$body.removeClass(clazz);
}
}
$body.addClass("theme-" + newTheme);
});
this.syncServerHost = ko.observable();
this.syncProxy = ko.observable();
@@ -45,6 +58,7 @@ function SetupModel() {
const username = this.username();
const password1 = this.password1();
const password2 = this.password2();
const theme = this.theme();
if (!username) {
showAlert("Username can't be empty");
@@ -64,7 +78,8 @@ function SetupModel() {
// not using server.js because it loads too many dependencies
$.post('/api/setup/new-document', {
username: username,
password: password1
password: password1,
theme: theme
}).then(() => {
window.location.replace("/");
});

16
src/public/stylesheets/style.css
View File

@@ -8,18 +8,6 @@ body {
on the last line of the editor. */
position: fixed;
width: 100%;
background-color: var(--main-background-color);
color: var(--main-text-color);
font-family: var(--main-font-family);
}
a, a:visited, a:hover {
color: var(--link-color);
}
input, select, textarea {
color: var(--input-text-color) !important;
background: var(--input-background-color) !important;
}
button.btn, button.btn-sm {
@@ -31,10 +19,6 @@ button.btn, button.btn-sm {
color: var(--muted-text-color) !important;
}
table td, table th {
color: var(--main-text-color);
}
button.close {
color: var(--main-text-color);
}

19
src/public/stylesheets/themes.css
View File

@@ -175,4 +175,23 @@ body {
--ck-color-link-default: var(--link-color);
--ck-color-table-focused-cell-background: var(--more-accented-background-color);
}
body {
background-color: var(--main-background-color);
color: var(--main-text-color);
font-family: var(--main-font-family);
}
a, a:visited, a:hover {
color: var(--link-color);
}
input, select, textarea {
color: var(--input-text-color) !important;
background: var(--input-background-color) !important;
}
table td, table th {
color: var(--main-text-color);
}

4
src/routes/api/setup.js
View File

@@ -14,9 +14,9 @@ async function getStatus() {
}
async function setupNewDocument(req) {
const { username, password } = req.body;
const { username, password, theme } = req.body;
await sqlInit.createInitialDatabase(username, password);
await sqlInit.createInitialDatabase(username, password, theme);
}
async function setupSyncFromServer(req) {

8
src/services/options_init.js
View File

@@ -28,7 +28,7 @@ async function initSyncedOptions(username, password) {
await passwordEncryptionService.setDataKey(password, utils.randomSecureToken(16), true);
}
async function initNotSyncedOptions(initialized, startNotePath = 'root', syncServerHost = '', syncProxy = '') {
async function initNotSyncedOptions(initialized, startNotePath = 'root', opts = {}) {
await optionService.createOption('openTabs', JSON.stringify([
{
notePath: startNotePath,
@@ -45,14 +45,14 @@ async function initNotSyncedOptions(initialized, startNotePath = 'root', syncSer
await optionService.createOption('lastSyncedPush', 0, false);
await optionService.createOption('zoomFactor', 1.0, false);
await optionService.createOption('theme', 'white', false);
await optionService.createOption('theme', opts.theme || 'white', false);
await optionService.createOption('leftPaneMinWidth', '350', false);
await optionService.createOption('leftPaneWidthPercent', '20', false);
await optionService.createOption('syncServerHost', syncServerHost, false);
await optionService.createOption('syncServerHost', opts.syncServerHost || '', false);
await optionService.createOption('syncServerTimeout', 5000, false);
await optionService.createOption('syncProxy', syncProxy, false);
await optionService.createOption('syncProxy', opts.syncProxy || '', false);
await optionService.createOption('mainFontSize', '100', false);
await optionService.createOption('treeFontSize', '100', false);

6
src/services/sql_init.js
View File

@@ -79,7 +79,7 @@ async function initDbConnection() {
});
}
async function createInitialDatabase(username, password) {
async function createInitialDatabase(username, password, theme) {
log.info("Creating initial database ...");
if (await isDbInitialized()) {
@@ -123,7 +123,7 @@ async function createInitialDatabase(username, password) {
await optionsInitService.initDocumentOptions();
await optionsInitService.initSyncedOptions(username, password);
await optionsInitService.initNotSyncedOptions(true, startNoteId);
await optionsInitService.initNotSyncedOptions(true, startNoteId, { theme });
await require('./sync_table').fillAllSyncRows();
});
@@ -145,7 +145,7 @@ async function createDatabaseForSync(options, syncServerHost = '', syncProxy = '
await sql.transactional(async () => {
await sql.executeScript(schema);
await require('./options_init').initNotSyncedOptions(false, 'root', syncServerHost, syncProxy);
await require('./options_init').initNotSyncedOptions(false, 'root', { syncServerHost, syncProxy });
// document options required for sync to kick off
for (const opt of options) {

21
src/views/setup.ejs
View File

@@ -49,6 +49,26 @@
<label for="password2">Repeat password</label>
<input type="password" class="form-control" data-bind="value: password2" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Theme</label>
<div style="display: flex; justify-content: space-around;">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="theme" id="theme-white" value="white" data-bind="checked: theme" checked>
<label class="form-check-label" for="theme-white">white</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="theme" id="theme-dark" value="dark" data-bind="checked: theme">
<label class="form-check-label" for="theme-dark">dark</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="theme" id="theme-black" value="black" data-bind="checked: theme">
<label class="form-check-label" for="theme-black">black</label>
</div>
</div>
<p style="font-size: smaller;margin-top: 10px;"><em>Theme can be later changed in Options -> Appearance.</em></p>
</div>
<button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
@@ -137,5 +157,6 @@
<script src="libraries/knockout.min.js"></script>
<script src="javascripts/setup.js" crossorigin type="module"></script>
<link href="stylesheets/themes.css" rel="stylesheet">
</body>
</html>