Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +08:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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 $leftPaneWidthPercent = $("#left-pane-width-percent");
const $html = $("html");
const $container = $("#container");
function optionsLoaded(options) {
$themeSelect.val(options.theme);
@ -80,15 +81,27 @@ addTabHandler((function() {
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() {
const newMinWidth = $(this).val();
resizeLeftPanel();
server.put('options/leftPaneMinWidth/' + newMinWidth);
});
$leftPaneWidthPercent.change(function() {
const newWidthPercent = $(this).val();
resizeLeftPanel();
server.put('options/leftPaneWidthPercent/' + newWidthPercent);
});

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

@ -6,7 +6,6 @@
grid-template-areas: "header header"
"left-pane title"
"left-pane note-detail";
grid-template-columns: 29% 69.5%;
grid-template-rows: auto
auto
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'];
async function getOptions() {
const options = await sql.getMap("SELECT name, value FROM options WHERE name IN ("
+ ALLOWED_OPTIONS.map(x => '?').join(",") + ")", ALLOWED_OPTIONS);
return options;
return await optionService.getOptionsMap(ALLOWED_OPTIONS);
}
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');
async function index(req, res) {
const options = await optionService.getOptionsMap();
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(),
maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
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) {
const option = await require('./repository').getOption(name);
@ -31,8 +33,26 @@ async function createOption(name, value, isSynced) {
}).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 = {
getOption,
setOption,
createOption
createOption,
getOptions,
getOptionsMap
};

2
src/views/index.ejs
View File

@ -5,7 +5,7 @@
<title>Trilium Notes</title>
</head>
<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="history-navigation" style="display: none;">
<a id="history-back-button" title="Go to previous note." class="icon-action"