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

widget ordering WIP

Browse Source
This commit is contained in:
zadam 2019-08-22 20:58:43 +02:00
parent 4b9415a619
commit 8ab2c924c4
8 changed files with 110 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
db/migrations/0140__widget_config.sql
View File

@ -1,2 +1,14 @@
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('', '1', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
VALUES ('noteInfoWidget', '{"enabled":true,"expanded":true,"position":10}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('attributesWidget', '{"enabled":true,"expanded":true,"position":20}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('linkMapWidget', '{"enabled":true,"expanded":true,"position":30}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('noteRevisionsWidget', '{"enabled":true,"expanded":true,"position":40}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);
INSERT INTO options (name, value, utcDateCreated, utcDateModified, isSynced)
VALUES ('whatLinksHereWidget', '{"enabled":false,"expanded":true,"position":50}', '2018-07-29T18:31:00.874Z', '2018-07-29T18:31:00.874Z', 0);

113
src/public/javascripts/dialogs/options/sidebar.js
View File

@ -7,53 +7,8 @@ export default class SidebarOptions {
this.$sidebarMinWidth = $("#sidebar-min-width");
this.$sidebarWidthPercent = $("#sidebar-width-percent");
this.$showSidebarInNewTab = $("#show-sidebar-in-new-tab");
this.$widgetsActive = $("#widgets-active");
this.$widgetsInactive = $("#widgets-inactive");
const widgets = {
attributes: 'Attributes',
linkMap: 'Link map',
noteInfo: 'Note info',
noteRevisions: 'Note revisions',
whatLinksHere: 'What links here'
};
for (const widgetName in widgets) {
const $widgetTitle = $('<div class="widget-title">')
.attr('data-widget-name', widgetName)
.append($("<span>").addClass("handle jam jam-move"))
.append($("<span>").text(widgets[widgetName]));
const $expandedCheckbox = $('<div class="expansion-conf">')
.attr("title", "If checked, the widget will be by default expanded (opened)")
.append($('<input type="checkbox">')
.attr('id', 'widget-exp-' + widgetName))
.append("&nbsp;")
.append($("<label>")
.attr("for", 'widget-exp-' + widgetName)
.text(" expanded"));
const $el = $('<div>')
.addClass("list-group-item")
.append($widgetTitle)
.append($expandedCheckbox);
this.$widgetsActive.append($el);
}
libraryLoader.requireLibrary(libraryLoader.SORTABLE).then(() => {
new Sortable(this.$widgetsActive[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
new Sortable(this.$widgetsInactive[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
});
this.$widgetsEnabled = $("#widgets-enabled");
this.$widgetsDisabled = $("#widgets-disabled");
this.$sidebarMinWidth.change(async () => {
await server.put('options/sidebarMinWidth/' + this.$sidebarMinWidth.val());
@ -86,6 +41,70 @@ export default class SidebarOptions {
else {
this.$showSidebarInNewTab.removeAttr("checked");
}
const widgets = [
{name: 'attributes', title: 'Attributes'},
{name: 'linkMap', title: 'Link map'},
{name: 'noteInfo', title: 'Note info'},
{name: 'noteRevisions', title: 'Note revisions'},
{name: 'whatLinksHere', title: 'What links here'}
].map(widget => {
widget.option = this.parseJsonSafely(options[widget.name + 'Widget']) || {
enabled: true,
expanded: true,
position: 100
};
return widget;
});
widgets.sort((a, b) => a.option.position - b.option.position);
for (const {name, title, option} of widgets) {
const $widgetTitle = $('<div class="widget-title">')
.attr('data-widget-name', name)
.append($("<span>").addClass("handle jam jam-move"))
.append($("<span>").text(title));
const $expandedCheckbox = $('<div class="expansion-conf">')
.attr("title", "If checked, the widget will be by default expanded (opened)")
.append($(`<input type="checkbox"${option.expanded ? ' checked' : ''}>`)
.attr('id', 'widget-exp-' + name))
.append("&nbsp;")
.append($("<label>")
.attr("for", 'widget-exp-' + name)
.text(" expanded"));
const $el = $('<div>')
.addClass("list-group-item")
.append($widgetTitle)
.append($expandedCheckbox);
(option.enabled ? this.$widgetsEnabled : this.$widgetsDisabled).append($el);
}
libraryLoader.requireLibrary(libraryLoader.SORTABLE).then(() => {
new Sortable(this.$widgetsEnabled[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
new Sortable(this.$widgetsDisabled[0], {
group: 'widgets',
handle: '.handle',
animation: 150
});
});
}
parseJsonSafely(str) {
try {
return JSON.parse(str);
}
catch (e) {
return null;
}
}
resizeSidebar() {

14
src/public/javascripts/services/options_init.js
View File

@ -32,10 +32,22 @@ async function getOption(name) {
return options[name];
}
async function getJsonOption(name) {
const option = await getOption(name);
try {
return JSON.parse(option);
}
catch (e) {
return null;
}
}
export default {
// use addLoadListener() which will be called also on refreshes
optionsReady,
addLoadListener,
loadOptions,
getOption
getOption,
getJsonOption
}

8
src/public/javascripts/widgets/standard_widget.js
View File

@ -31,7 +31,7 @@ class StandardWidget {
this.$bodyWrapper = this.$widget.find('.body-wrapper');
this.$bodyWrapper.attr('id', widgetId);
if (state && state.visible) {
if (state && state.expanded) {
this.$bodyWrapper.collapse("show");
}
@ -60,7 +60,7 @@ class StandardWidget {
getMaxHeight() { return null; }
async renderBody() {
if (!this.isVisible() || this.rendered) {
if (!this.isExpanded() || this.rendered) {
return;
}
@ -72,14 +72,14 @@ class StandardWidget {
/** for overriding */
async doRenderBody() {}
isVisible() {
isExpanded() {
return this.$bodyWrapper.hasClass("show");
}
getWidgetState() {
return {
name: this.widgetName,
visible: this.isVisible()
expanded: this.isExpanded()
};
}

4
src/public/stylesheets/desktop.css
View File

@ -354,10 +354,12 @@ body {
}
#widgets-configuration .list-group-item {
background: transparent;
background: var(--more-accented-background-color);
font-size: larger;
display: flex;
justify-content: space-between;
padding-bottom: 2px;
border-radius: 10px;
}
#widgets-configuration .handle {

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

@ -23,7 +23,12 @@ const ALLOWED_OPTIONS = [
'treeFontSize',
'detailFontSize',
'openTabs',
'hideTabRowForOneTab'
'hideTabRowForOneTab',
'noteInfoWidget',
'attributesWidget',
'linkMapWidget',
'noteRevisionsWidget',
'whatLinksHereWidget'
];
async function getOptions() {

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 = 139;
const APP_DB_VERSION = 140;
const SYNC_VERSION = 10;
const CLIPPER_PROTOCOL_VERSION = "1.0";

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

@ -41,12 +41,12 @@
<h4>Widgets</h4>
<div id="widgets-configuration" class="row">
<h5 class="col-6">Active widgets</h5>
<h5 class="col-6">Enabled widgets</h5>
<h5 class="col-6">Inactive widgets</h5>
<h5 class="col-6">Disabled widgets</h5>
<div id="widgets-active" class="list-group col"></div>
<div id="widgets-enabled" class="list-group col"></div>
<div id="widgets-inactive" class="list-group col"></div>
<div id="widgets-disabled" class="list-group col"></div>
</div>
</div>