added icon to note title row

This commit is contained in:
zadam 2021-02-13 20:07:08 +01:00
parent 5eb850bf59
commit 378987e61c
6 changed files with 80 additions and 41 deletions

View file

@ -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

View file

@ -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())

View file

@ -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())

View 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())
}
}

View file

@ -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());

View file

@ -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);