gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

resizing sidebar in options

Browse Source
This commit is contained in:
zadam 2019-08-19 23:02:19 +02:00
parent 04209182c1
commit 9888850c22
10 changed files with 94 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
db/migrations/0138__sidebar_sizing.sql Normal file
View File

@ -0,0 +1,5 @@
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('sidebarMinWidth', '350', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('sidebarWidthPercent', '25', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);

1
package.json
View File

@ -77,7 +77,6 @@
"xml2js": "0.4.19"
},
"devDependencies": {
"devtron": "1.4.0",
"electron": "6.0.2",
"electron-builder": "21.2.0",
"electron-compile": "6.4.4",

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

@ -349,4 +349,43 @@ addTabHandler((async function () {
});
return {};
})());
addTabHandler((function() {
const $sidebarMinWidth = $("#sidebar-min-width");
const $sidebarWidthPercent = $("#sidebar-width-percent");
async function optionsLoaded(options) {
$sidebarMinWidth.val(options.sidebarMinWidth);
$sidebarWidthPercent.val(options.sidebarWidthPercent);
}
function resizeSidebar() {
const sidebarWidthPercent = parseInt($sidebarWidthPercent.val());
const sidebarMinWidth = $sidebarMinWidth.val();
// need to find them dynamically since they change
const $sidebar = $(".note-detail-sidebar");
console.log("Resizing to ", sidebarWidthPercent, sidebarMinWidth);
$sidebar.css("width", sidebarWidthPercent + '%');
$sidebar.css("min-width", sidebarMinWidth + 'px');
}
$sidebarMinWidth.change(async function() {
await server.put('options/sidebarMinWidth/' + $(this).val());
resizeSidebar();
});
$sidebarWidthPercent.change(async function() {
await server.put('options/sidebarWidthPercent/' + $(this).val());
resizeSidebar();
});
return {
optionsLoaded
};
})());

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

@ -102,7 +102,7 @@ ul.fancytree-container {
.note-detail-sidebar {
min-width: 350px;
max-width: 350px;
width: 50%;
overflow: auto;
padding-top: 12px;
padding-left: 7px;

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

@ -15,6 +15,8 @@ const ALLOWED_OPTIONS = [
'syncProxy',
'leftPaneMinWidth',
'leftPaneWidthPercent',
'sidebarMinWidth',
'sidebarWidthPercent',
'hoistedNoteId',
'mainFontSize',
'treeFontSize',

2
src/routes/index.js
View File

@ -21,6 +21,8 @@ async function index(req, res) {
leftPaneMinWidth: parseInt(options.leftPaneMinWidth),
leftPaneWidthPercent: parseInt(options.leftPaneWidthPercent),
rightPaneWidthPercent: 100 - parseInt(options.leftPaneWidthPercent),
sidebarMinWidth: parseInt(options.sidebarMinWidth),
sidebarWidthPercent: parseInt(options.sidebarWidthPercent),
mainFontSize: parseInt(options.mainFontSize),
treeFontSize: parseInt(options.treeFontSize),
detailFontSize: parseInt(options.detailFontSize),

2
src/services/app_info.js
View File

@ -4,7 +4,7 @@ const build = require('./build');
const packageJson = require('../../package');
const {TRILIUM_DATA_DIR} = require('./data_dir');
const APP_DB_VERSION = 137;
const APP_DB_VERSION = 138;
const SYNC_VERSION = 10;
const CLIPPER_PROTOCOL_VERSION = "1.0";

16
src/views/dialogs/options/appearance.ejs
View File

@ -70,13 +70,25 @@
<div class="col-6">
<label for="left-pane-min-width">Left pane minimum width (in pixels)</label>
<input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
<div class="input-group">
<input type="number" class="form-control" id="left-pane-min-width" min="100" max="2000" step="1"/>
<div class="input-group-append">
<span class="input-group-text">px</span>
</div>
</div>
</div>
<div class="col-6">
<label for="left-pane-min-width">Left pane width percent of window size</label>
<input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
<div class="input-group">
<input type="number" class="form-control" id="left-pane-width-percent" min="0" max="99" step="1"/>
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
</div>
</div>

30
src/views/dialogs/options/sidebar.ejs
View File

@ -1,3 +1,31 @@
<div id="options-sidebar" class="tab-pane">
Hi!
<h3>Sidebar sizing</h3>
<div class="form-group row">
<div class="col-6">
<label for="sidebar-min-width">Sidebar minimum width (in pixels)</label>
<div class="input-group">
<input type="number" class="form-control" id="sidebar-min-width" min="100" max="2000" step="1"/>
<div class="input-group-append">
<span class="input-group-text">px</span>
</div>
</div>
</div>
<div class="col-6">
<label for="left-pane-min-width">Sidebar width percent of the detail pane</label>
<div class="input-group">
<input type="number" class="form-control" id="sidebar-width-percent" min="0" max="70" step="1"/>
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
</div>
</div>
<p>Sidebar width is calculated from the percent of the detail pane, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width sidebar, set minimum width to the desired width and set percent to 0.</p>
</div>

2
src/views/sidebar.ejs
View File

@ -1,4 +1,4 @@
<div class="note-detail-sidebar">
<div class="note-detail-sidebar" style="width: <%= sidebarWidthPercent %>%; min-width: <%= sidebarMinWidth %>px">
<div style="text-align: center; margin-bottom: 10px;">
<button class="hide-sidebar-button" style="background: none; border: none;">hide sidebar <span class="jam jam-chevron-right"></span></button>
</div>