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

left pane sizing taking effect

Browse Source
This commit is contained in:
azivner
2018-09-06 11:54:04 +02:00
parent ff086569f2
commit c95e409b5e
6 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/public/javascripts/dialogs/options.js
View File

@@ -51,6 +51,7 @@ addTabHandler((function() {
const $leftPaneMinWidth = $("#left-pane-min-width"); const $leftPaneMinWidth = $("#left-pane-min-width");
const $leftPaneWidthPercent = $("#left-pane-width-percent"); const $leftPaneWidthPercent = $("#left-pane-width-percent");
const $html = $("html"); const $html = $("html");
const $container = $("#container");
function optionsLoaded(options) { function optionsLoaded(options) {
$themeSelect.val(options.theme); $themeSelect.val(options.theme);
@@ -80,15 +81,27 @@ addTabHandler((function() {
zoomService.setZoomFactorAndSave(newZoomFactor); zoomService.setZoomFactorAndSave(newZoomFactor);
}); });
function resizeLeftPanel() {
const leftPanePercent = parseInt($leftPaneWidthPercent.val());
const rightPanePercent = 100 - leftPanePercent;
const leftPaneMinWidth = $leftPaneMinWidth.val();
$container.css("grid-template-columns", `minmax(${leftPaneMinWidth}px, ${leftPanePercent}fr) ${rightPanePercent}fr`);
}
$leftPaneMinWidth.change(function() { $leftPaneMinWidth.change(function() {
const newMinWidth = $(this).val(); const newMinWidth = $(this).val();
resizeLeftPanel();
server.put('options/leftPaneMinWidth/' + newMinWidth); server.put('options/leftPaneMinWidth/' + newMinWidth);
}); });
$leftPaneWidthPercent.change(function() { $leftPaneWidthPercent.change(function() {
const newWidthPercent = $(this).val(); const newWidthPercent = $(this).val();
resizeLeftPanel();
server.put('options/leftPaneWidthPercent/' + newWidthPercent); server.put('options/leftPaneWidthPercent/' + newWidthPercent);
}); });

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

@@ -6,7 +6,6 @@
grid-template-areas: "header header" grid-template-areas: "header header"
"left-pane title" "left-pane title"
"left-pane note-detail"; "left-pane note-detail";
grid-template-columns: 29% 69.5%;
grid-template-rows: auto grid-template-rows: auto
auto auto
1fr; 1fr;

5
src/routes/api/options.js
View File

@@ -9,10 +9,7 @@ const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInt
'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent']; 'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent'];
async function getOptions() { async function getOptions() {
const options = await sql.getMap("SELECT name, value FROM options WHERE name IN (" return await optionService.getOptionsMap(ALLOWED_OPTIONS);
+ ALLOWED_OPTIONS.map(x => '?').join(",") + ")", ALLOWED_OPTIONS);
return options;
} }
async function updateOption(req) { async function updateOption(req) {

7
src/routes/index.js
View File

@@ -7,8 +7,13 @@ const config = require('../services/config');
const optionService = require('../services/options'); const optionService = require('../services/options');
async function index(req, res) { async function index(req, res) {
const options = await optionService.getOptionsMap();
res.render('index', { res.render('index', {
theme: await optionService.getOption('theme'), theme: options.theme,
leftPaneMinWidth: parseInt(options.leftPaneMinWidth),
leftPaneWidthPercent: parseInt(options.leftPaneWidthPercent),
rightPaneWidthPercent: 100 - parseInt(options.leftPaneWidthPercent),
sourceId: await sourceIdService.generateSourceId(), sourceId: await sourceIdService.generateSourceId(),
maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"), maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
instanceName: config.General ? config.General.instanceName : null, instanceName: config.General ? config.General.instanceName : null,

22
src/services/options.js
View File

@@ -1,3 +1,5 @@
const utils = require('./utils');
async function getOption(name) { async function getOption(name) {
const option = await require('./repository').getOption(name); const option = await require('./repository').getOption(name);
@@ -31,8 +33,26 @@ async function createOption(name, value, isSynced) {
}).save(); }).save();
} }
async function getOptions(allowedOptions) {
let options = await require('./repository').getEntities("SELECT * FROM options ORDER BY name");
if (allowedOptions) {
options = options.filter(opt => allowedOptions.includes(opt.name));
}
return options;
}
async function getOptionsMap(allowedOptions) {
const options = await getOptions(allowedOptions);
return utils.toObject(options, opt => [opt.name, opt.value]);
}
module.exports = { module.exports = {
getOption, getOption,
setOption, setOption,
createOption createOption,
getOptions,
getOptionsMap
}; };

2
src/views/index.ejs
View File

@@ -5,7 +5,7 @@
<title>Trilium Notes</title> <title>Trilium Notes</title>
</head> </head>
<body> <body>
<div id="container" style="display:none;"> <div id="container" style="display:none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) <%= rightPaneWidthPercent %>fr">
<div id="header" class="hide-toggle"> <div id="header" class="hide-toggle">
<div id="history-navigation" style="display: none;"> <div id="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action" <a id="history-back-button" title="Go to previous note." class="icon-action"