mirror of
https://github.com/zadam/trilium.git
synced 2025-03-04 19:13:37 +08:00
added icon to note title row
This commit is contained in:
parent
5eb850bf59
commit
378987e61c
6 changed files with 80 additions and 41 deletions
|
@ -1,6 +1,7 @@
|
|||
import server from '../services/server.js';
|
||||
import Attribute from './attribute.js';
|
||||
import noteAttributeCache from "../services/note_attribute_cache.js";
|
||||
import ws from "../services/ws.js";
|
||||
import options from "../services/options.js";
|
||||
|
||||
const LABEL = 'label';
|
||||
const RELATION = 'relation';
|
||||
|
@ -266,7 +267,7 @@ class NoteShort {
|
|||
return this.getAttributes(LABEL, name);
|
||||
}
|
||||
|
||||
getIcon(isFolder = false) {
|
||||
getIcon() {
|
||||
const iconClassLabels = this.getLabels('iconClass');
|
||||
const workspaceIconClass = this.getWorkspaceIconClass();
|
||||
|
||||
|
@ -280,7 +281,7 @@ class NoteShort {
|
|||
return "bx bx-chevrons-right";
|
||||
}
|
||||
else if (this.type === 'text') {
|
||||
if (isFolder) {
|
||||
if (this.isFolder()) {
|
||||
return "bx bx-folder";
|
||||
}
|
||||
else {
|
||||
|
@ -295,6 +296,34 @@ class NoteShort {
|
|||
}
|
||||
}
|
||||
|
||||
isFolder() {
|
||||
return this.type === 'search'
|
||||
|| this.getFilteredChildBranches().length > 0;
|
||||
}
|
||||
|
||||
getFilteredChildBranches() {
|
||||
let childBranches = this.getChildBranches();
|
||||
|
||||
if (!childBranches) {
|
||||
ws.logError(`No children for ${parentNote}. This shouldn't happen.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.is("hideIncludedImages_main")) {
|
||||
const imageLinks = this.getRelations('imageLink');
|
||||
|
||||
// image is already visible in the parent note so no need to display it separately in the book
|
||||
childBranches = childBranches.filter(branch => !imageLinks.find(rel => rel.value === branch.noteId));
|
||||
}
|
||||
|
||||
// we're not checking hideArchivedNotes since that would mean we need to lazy load the child notes
|
||||
// which would seriously slow down everything.
|
||||
// we check this flag only once user chooses to expand the parent. This has the negative consequence that
|
||||
// note may appear as folder but not contain any children when all of them are archived
|
||||
|
||||
return childBranches;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} [name] - relation name to filter
|
||||
* @returns {Attribute[]} all note's relations (attributes with type relation), including inherited ones
|
||||
|
|
|
@ -20,6 +20,7 @@ import SqlResultWidget from "../widgets/sql_result.js";
|
|||
import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js";
|
||||
import ImagePropertiesWidget from "../widgets/type_property_widgets/image_properties.js";
|
||||
import NotePropertiesWidget from "../widgets/type_property_widgets/note_properties.js";
|
||||
import NoteIconWidget from "../widgets/note_icon.js";
|
||||
|
||||
export default class DesktopExtraWindowLayout {
|
||||
constructor(customWidgets) {
|
||||
|
@ -42,8 +43,10 @@ export default class DesktopExtraWindowLayout {
|
|||
.filling()
|
||||
.child(new FlexContainer('column').id('center-pane').filling()
|
||||
.child(new FlexContainer('row').class('title-row')
|
||||
.css('align-items: center;')
|
||||
.cssBlock('.title-row > * { margin: 5px; }')
|
||||
.overflowing()
|
||||
.cssBlock('.title-row > * { margin: 5px 5px 0 5px; }')
|
||||
.child(new NoteIconWidget())
|
||||
.child(new NoteTitleWidget())
|
||||
.child(new NoteTypeWidget().hideInZenMode())
|
||||
.child(new NoteActionsWidget().hideInZenMode())
|
||||
|
|
|
@ -31,6 +31,7 @@ import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
|
|||
import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js";
|
||||
import ImagePropertiesWidget from "../widgets/type_property_widgets/image_properties.js";
|
||||
import NotePropertiesWidget from "../widgets/type_property_widgets/note_properties.js";
|
||||
import NoteIconWidget from "../widgets/note_icon.js";
|
||||
|
||||
const RIGHT_PANE_CSS = `
|
||||
<style>
|
||||
|
@ -153,8 +154,10 @@ export default class DesktopMainWindowLayout {
|
|||
)
|
||||
.child(new FlexContainer('column').id('center-pane')
|
||||
.child(new FlexContainer('row').class('title-row')
|
||||
.cssBlock('.title-row > * { margin: 5px 5px 0 5px; }')
|
||||
.css('align-items: center;')
|
||||
.cssBlock('.title-row > * { margin: 5px; }')
|
||||
.overflowing()
|
||||
.child(new NoteIconWidget())
|
||||
.child(new NoteTitleWidget())
|
||||
.child(new NoteTypeWidget().hideInZenMode())
|
||||
.child(new NoteActionsWidget().hideInZenMode())
|
||||
|
|
34
src/public/app/widgets/note_icon.js
Normal file
34
src/public/app/widgets/note_icon.js
Normal file
|
@ -0,0 +1,34 @@
|
|||
import TabAwareWidget from "./tab_aware_widget.js";
|
||||
import utils from "../services/utils.js";
|
||||
import protectedSessionHolder from "../services/protected_session_holder.js";
|
||||
import server from "../services/server.js";
|
||||
import SpacedUpdate from "../services/spaced_update.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="note-icon-container">
|
||||
<style>
|
||||
.note-icon-container {
|
||||
padding-top: 3px;
|
||||
padding-left: 7px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.note-icon-container span {
|
||||
font-size: 200%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span class="bx bx-archive"></span>
|
||||
</div>`;
|
||||
|
||||
export default class NoteIconWidget extends TabAwareWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$icon = this.$widget.find('span');
|
||||
this.contentSized();
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
this.$icon.removeClass().addClass(note.getIcon())
|
||||
}
|
||||
}
|
|
@ -9,11 +9,10 @@ const TPL = `
|
|||
<style>
|
||||
.note-title-container {
|
||||
flex-grow: 100;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.note-title-container input.note-title {
|
||||
font-size: 150%;
|
||||
font-size: 180%;
|
||||
border: 0;
|
||||
min-width: 5em;
|
||||
width: 100%;
|
||||
|
@ -42,6 +41,7 @@ export default class NoteTitleWidget extends TabAwareWidget {
|
|||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.contentSized();
|
||||
this.$noteTitle = this.$widget.find(".note-title");
|
||||
|
||||
this.$noteTitle.on('input', () => this.spacedUpdate.scheduleUpdate());
|
||||
|
|
|
@ -597,7 +597,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||
|
||||
const hideArchivedNotes = this.hideArchivedNotes;
|
||||
|
||||
let childBranches = this.getChildBranches(parentNote);
|
||||
let childBranches = parentNote.getFilteredChildBranches();
|
||||
|
||||
if (childBranches.length > MAX_SEARCH_RESULTS_IN_TREE) {
|
||||
childBranches = childBranches.slice(0, MAX_SEARCH_RESULTS_IN_TREE);
|
||||
|
@ -623,14 +623,12 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||
updateNode(node) {
|
||||
const note = treeCache.getNoteFromCache(node.data.noteId);
|
||||
const branch = treeCache.getBranch(node.data.branchId);
|
||||
|
||||
const isFolder = this.isFolder(note);
|
||||
const title = (branch.prefix ? (branch.prefix + " - ") : "") + note.title;
|
||||
|
||||
node.data.isProtected = note.isProtected;
|
||||
node.data.noteType = note.type;
|
||||
node.folder = isFolder;
|
||||
node.icon = note.getIcon(isFolder);
|
||||
node.folder = note.isFolder();
|
||||
node.icon = note.getIcon();
|
||||
node.extraClasses = this.getExtraClasses(note);
|
||||
node.title = utils.escapeHtml(title);
|
||||
|
||||
|
@ -653,7 +651,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||
|
||||
const title = (branch.prefix ? (branch.prefix + " - ") : "") + note.title;
|
||||
|
||||
const isFolder = this.isFolder(note);
|
||||
const isFolder = note.isFolder();
|
||||
|
||||
const node = {
|
||||
noteId: note.noteId,
|
||||
|
@ -678,34 +676,6 @@ export default class NoteTreeWidget extends TabAwareWidget {
|
|||
return node;
|
||||
}
|
||||
|
||||
isFolder(note) {
|
||||
return note.type === 'search'
|
||||
|| this.getChildBranches(note).length > 0;
|
||||
}
|
||||
|
||||
getChildBranches(parentNote) {
|
||||
let childBranches = parentNote.getChildBranches();
|
||||
|
||||
if (!childBranches) {
|
||||
ws.logError(`No children for ${parentNote}. This shouldn't happen.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.hideIncludedImages) {
|
||||
const imageLinks = parentNote.getRelations('imageLink');
|
||||
|
||||
// image is already visible in the parent note so no need to display it separately in the book
|
||||
childBranches = childBranches.filter(branch => !imageLinks.find(rel => rel.value === branch.noteId));
|
||||
}
|
||||
|
||||
// we're not checking hideArchivedNotes since that would mean we need to lazy load the child notes
|
||||
// which would seriously slow down everything.
|
||||
// we check this flag only once user chooses to expand the parent. This has the negative consequence that
|
||||
// note may appear as folder but not contain any children when all of them are archived
|
||||
|
||||
return childBranches;
|
||||
}
|
||||
|
||||
getExtraClasses(note) {
|
||||
utils.assertArguments(note);
|
||||
|
||||
|
|
Loading…
Reference in a new issue