gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 19:49:01 +01:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

button changes and book properties

Browse Source
This commit is contained in:
zadam 2021-05-27 23:17:13 +02:00
parent 614b1bdbaf
commit 7fcf90437a
10 changed files with 167 additions and 3202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bin/build-server.sh
View File

@ -1,7 +1,7 @@
#!/usr/bin/env bash
PKG_DIR=dist/trilium-linux-x64-server
NODE_VERSION=14.16.1
NODE_VERSION=14.17.0
if [ "$1" != "DONTCOPY" ]
then

2
src/public/app/layouts/desktop_layout.js
View File

@ -34,6 +34,7 @@ import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js";
import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js";
import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js";
export default class DesktopLayout {
constructor(customWidgets) {
@ -102,6 +103,7 @@ export default class DesktopLayout {
new CollapsibleSectionContainer()
.section(new SearchDefinitionWidget())
.section(new BasicPropertiesWidget())
.section(new BookPropertiesWidget())
.section(new NotePropertiesWidget())
.section(new FilePropertiesWidget())
.section(new ImagePropertiesWidget())

61
src/public/app/services/note_list_renderer.js
View File

@ -132,30 +132,6 @@ const TPL = `
}
</style>
<div class="btn-group floating-button" style="right: 20px; top: 10px;">
<button type="button"
class="collapse-all-button btn icon-button bx bx-layer-minus"
title="Collapse all notes"></button>
&nbsp;
<button type="button"
class="expand-children-button btn icon-button bx bx-move-vertical"
title="Expand all children"></button>
&nbsp;
<button type="button"
class="list-view-button btn icon-button bx bx-menu"
title="List view"></button>
&nbsp;
<button type="button"
class="grid-view-button btn icon-button bx bx-grid-alt"
title="Grid view"></button>
</div>
<div class="note-list-wrapper">
<div class="note-list-pager"></div>
@ -202,26 +178,6 @@ class NoteListRenderer {
this.$noteList.addClass(this.viewType + '-view');
this.$noteList.find('.list-view-button').on('click', () => this.toggleViewType('list'));
this.$noteList.find('.grid-view-button').on('click', () => this.toggleViewType('grid'));
this.$noteList.find('.expand-children-button').on('click', async () => {
if (!this.parentNote.hasLabel('expanded')) {
await attributeService.addLabel(this.parentNote.noteId, 'expanded');
}
await this.renderList();
});
this.$noteList.find('.collapse-all-button').on('click', async () => {
// owned is important - we shouldn't remove inherited expanded labels
for (const expandedAttr of this.parentNote.getOwnedLabels('expanded')) {
await attributeService.removeAttributeById(this.parentNote.noteId, expandedAttr.attributeId);
}
await this.renderList();
});
this.showNotePath = showNotePath;
}
@ -235,23 +191,6 @@ class NoteListRenderer {
return new Set(includedLinks.map(rel => rel.value));
}
async toggleViewType(type) {
if (type !== 'list' && type !== 'grid') {
throw new Error(`Invalid view type ${type}`);
}
this.viewType = type;
this.$noteList
.removeClass('grid-view')
.removeClass('list-view')
.addClass(this.viewType + '-view');
await attributeService.setLabel(this.parentNote.noteId, 'viewType', type);
await this.renderList();
}
async renderList() {
if (this.noteIds.length === 0) {
this.$noteList.hide();

14
src/public/app/widgets/containers/collapsible_section_container.js
View File

@ -62,6 +62,10 @@ const TPL = `
.section-button-container .bx {
padding: 5px;
font-size: 150%;
position: relative;
top: -3px;
margin-right: 5px;
}
.section-body {
@ -207,4 +211,14 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
refreshSectionContainerCommand() {
this.refreshWithNote(this.note, true);
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
// note type influences the list of available sections the most
// check for type is so that we don't update on each title rename
this.lastNoteType = this.note.type;
this.refresh();
}
}
}

8
src/public/app/widgets/note_list.js
View File

@ -92,4 +92,12 @@ export default class NoteListWidget extends NoteContextAwareWidget {
this.refresh();
}
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId && attr.name === 'viewType')) {
this.shownNoteId = null; // force render
this.checkRenderStatus();
}
}
}

48
src/public/app/widgets/note_tree.js
View File

@ -36,26 +36,33 @@ const TPL = `
padding-bottom: 35px;
padding-top: 5px;
}
.collapse-tree-button {
position: absolute;
bottom: 10px;
right: 80px;
button.tree-floating-button {
font-size: 1.5em;
padding: 2px;
max-height: 34px;
color: var(--button-text-color);
border-radius: var(--button-border-radius);
border: 1px solid transparent;
z-index: 100;
position: absolute;
bottom: 13px;
}
button.tree-floating-button:hover {
border: 1px solid var(--button-border-color);
}
.collapse-tree-button {
right: 100px;
}
.scroll-to-active-note-button {
position: absolute;
bottom: 10px;
right: 45px;
z-index: 100;
right: 55px;
}
.tree-settings-button {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 100;
}
.tree-settings-popup {
@ -65,16 +72,23 @@ const TPL = `
border: 1px solid var(--main-border-color);
padding: 20px;
z-index: 1000;
width: 320px;
width: 340px;
border-radius: 10px;
}
</style>
<button class="btn btn-sm icon-button bx bx-layer-minus collapse-tree-button" title="Collapse note tree" data-trigger-command="collapseTree"></button>
<div class="tree"></div>
<button class="btn btn-sm icon-button bx bx-crosshair scroll-to-active-note-button" title="Scroll to active note" data-trigger-command="scrollToActiveNote"></button>
<button class="tree-floating-button bx bx-layer-minus collapse-tree-button"
title="Collapse note tree"
data-trigger-command="collapseTree"></button>
<button class="btn btn-sm icon-button bx bx-cog tree-settings-button" title="Tree settings"></button>
<button class="tree-floating-button bx bx-crosshair scroll-to-active-note-button"
title="Scroll to active note"
data-trigger-command="scrollToActiveNote"></button>
<button class="tree-floating-button bx bx-cog tree-settings-button"
title="Tree settings"></button>
<div class="tree-settings-popup">
<div class="form-check">
@ -107,8 +121,6 @@ const TPL = `
<button class="btn btn-sm btn-primary save-tree-settings-button" type="submit">Save & apply changes</button>
</div>
<div class="tree"></div>
</div>
`;

2
src/public/app/widgets/type_property_widgets/basic_properties.js
View File

@ -6,7 +6,7 @@ const TPL = `
<div class="basic-properties-widget">
<style>
.basic-properties-widget {
padding: 12px;
padding: 12px 12px 6px 12px;
display: flex;
align-items: baseline;
}

106
src/public/app/widgets/type_property_widgets/book_properties.js Normal file
View File

@ -0,0 +1,106 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import server from "../../services/server.js";
import attributeService from "../../services/attributes.js";
const TPL = `
<div class="book-properties-widget">
<style>
.book-properties-widget {
padding: 12px 12px 6px 12px;
display: flex;
}
.book-properties-widget > * {
margin-right: 15px;
}
</style>
<div style="display: flex; align-items: baseline">
<span style="white-space: nowrap">View type:&nbsp; &nbsp;</span>
<select class="view-type-select form-control form-control-sm">
<option value="grid">Grid</option>
<option value="list">List</option>
</select>
</div>
<button type="button"
class="collapse-all-button btn btn-sm"
title="Collapse all notes">
<span class="bx bx-layer-minus"></span>
Collapse
</button>
<button type="button"
class="expand-children-button btn btn-sm"
title="Expand all children">
<span class="bx bx-move-vertical"></span>
Expand
</button>
</div>
`;
export default class BookPropertiesWidget extends NoteContextAwareWidget {
static getType() { return "book-properties"; }
isEnabled() {
return this.note && this.note.type === 'book';
}
getTitle() {
return {
show: this.isEnabled(),
activate: true,
title: 'Book Properties',
icon: 'bx bx-book'
};
}
doRender() {
this.$widget = $(TPL);
this.overflowing();
this.$viewTypeSelect = this.$widget.find('.view-type-select');
this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));
this.$expandChildrenButton = this.$widget.find('.expand-children-button');
this.$expandChildrenButton.on('click', async () => {
if (!this.note.hasLabel('expanded')) {
await attributeService.addLabel(this.noteId, 'expanded');
}
});
this.$collapseAllButton = this.$widget.find('.collapse-all-button');
this.$collapseAllButton.on('click', async () => {
// owned is important - we shouldn't remove inherited expanded labels
for (const expandedAttr of this.note.getOwnedLabels('expanded')) {
await attributeService.removeAttributeById(this.noteId, expandedAttr.attributeId);
}
});
}
async refreshWithNote(note) {
const viewType = this.note.getLabelValue('viewType') || 'grid';
this.$viewTypeSelect.val(viewType);
this.$expandChildrenButton.toggle(viewType === 'list');
this.$collapseAllButton.toggle(viewType === 'list');
}
async toggleViewType(type) {
if (type !== 'list' && type !== 'grid') {
throw new Error(`Invalid view type ${type}`);
}
await attributeService.setLabel(this.noteId, 'viewType', type);
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId && attr.name === 'viewType')) {
this.refresh();
}
}
}

3111
src/public/stylesheets/allure.css
View File

File diff suppressed because it is too large Load Diff

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

@ -269,12 +269,6 @@ div.ui-tooltip {
opacity: 0.4;
}
button.icon-button {
font-size: 1.5em;
padding: 2px;
max-height: 34px;
}
.ck.ck-block-toolbar-button {
transform: translateX(7px);
color: var(--muted-text-color);
@ -893,14 +887,15 @@ ul.fancytree-container li {
.button-widget .bx {
font-size: 120%;
display: inline-block;
position: relative;
padding: 15px 15px;
cursor: pointer;
}
#launcher-pane .button-widget .bx {
font-size: 150%;
display: inline-block;
position: relative;
padding: 15px 15px;
cursor: pointer;
}
.button-widget:hover .bx {