gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 09:58:32 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

tab row widgetizing

Browse Source
This commit is contained in:
zadam 2020-01-12 19:05:09 +01:00
parent f25d735b9d
commit 9d81bf030d
14 changed files with 389 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config-sample.ini
View File

@ -8,7 +8,7 @@ instanceName=
[Network]
# host setting is relevant only for web deployments - set the host on which the server will listen
# host=0.0.0.0
# port setting is relevant only for web deployments, desktop builds run on random free port
# port setting is relevant only for web deployments, desktop builds run on a fixed port (changeable with TRILIUM_PORT environment variable)
port=8080
# true for TLS/SSL/HTTPS (secure), false for HTTP (unsecure).
https=false

4
src/public/javascripts/desktop.js
View File

@ -3,7 +3,7 @@ import contextMenu from './services/tree_context_menu.js';
import link from './services/link.js';
import ws from './services/ws.js';
import noteDetailService from './services/note_detail.js';
import noteType from './services/note_type.js';
import noteType from './widgets/note_type.js';
import protectedSessionService from './services/protected_session.js';
import protectedSessionHolder from './services/protected_session_holder.js';
import searchNotesService from './services/search_notes.js';
@ -21,7 +21,7 @@ import bundle from "./services/bundle.js";
import treeCache from "./services/tree_cache.js";
import libraryLoader from "./services/library_loader.js";
import hoistedNoteService from './services/hoisted_note.js';
import noteTypeService from './services/note_type.js';
import noteTypeService from './widgets/note_type.js';
import linkService from './services/link.js';
import noteAutocompleteService from './services/note_autocomplete.js';
import macInit from './services/mac_init.js';

146
src/public/javascripts/services/app_context.js
View File

@ -2,13 +2,12 @@ import GlobalButtonsWidget from "../widgets/global_buttons.js";
import SearchBoxWidget from "../widgets/search_box.js";
import SearchResultsWidget from "../widgets/search_results.js";
import NoteTreeWidget from "../widgets/note_tree.js";
import tabRow from "./tab_row.js";
import treeService from "./tree.js";
import noteDetailService from "./note_detail.js";
import TabContext from "./tab_context.js";
import server from "./server.js";
import keyboardActionService from "./keyboard_actions.js";
import contextMenuService from "./context_menu.js";
import TabRowWidget from "./tab_row.js";
class AppContext {
constructor() {
@ -16,6 +15,30 @@ class AppContext {
/** @type {TabContext[]} */
this.tabContexts = [];
this.tabsChangedTaskId = null;
/** @type {TabRowWidget} */
this.tabRow = null;
}
showWidgets() {
const $leftPane = $("#left-pane");
this.tabRow = new TabRowWidget(this);
$("#tab-row-container").append(this.tabRow.render());
this.noteTreeWidget = new NoteTreeWidget(this);
this.widgets = [
new GlobalButtonsWidget(this),
new SearchBoxWidget(this),
new SearchResultsWidget(this),
this.noteTreeWidget
];
for (const widget of this.widgets) {
const $widget = widget.render();
$leftPane.append($widget);
}
}
trigger(name, data) {
@ -31,7 +54,7 @@ class AppContext {
/** @returns {TabContext} */
getActiveTabContext() {
const activeTabEl = tabRow.activeTabEl;
const activeTabEl = this.tabRow.activeTabEl;
if (!activeTabEl) {
return null;
@ -115,25 +138,6 @@ class AppContext {
}
}
showWidgets() {
const $leftPane = $("#left-pane");
this.noteTreeWidget = new NoteTreeWidget(this);
this.widgets = [
new GlobalButtonsWidget(this),
new SearchBoxWidget(this),
new SearchResultsWidget(this),
this.noteTreeWidget
];
for (const widget of this.widgets) {
const $widget = widget.render();
$leftPane.append($widget);
}
}
/**
* @return {NoteTreeWidget}
*/
@ -144,7 +148,7 @@ class AppContext {
getTab(newTab, state) {
if (!this.getActiveTabContext() || newTab) {
// if it's a new tab explicitly by user then it's in background
const ctx = new TabContext(tabRow, state);
const ctx = new TabContext(this.tabRow, state);
this.tabContexts.push(ctx);
return ctx;
@ -174,16 +178,16 @@ class AppContext {
}
async openEmptyTab() {
const ctx = new TabContext(tabRow);
const ctx = new TabContext(this.tabRow);
this.tabContexts.push(ctx);
await tabRow.activateTab(ctx.$tab[0]);
await this.tabRow.activateTab(ctx.$tab[0]);
}
async filterTabs(noteId) {
for (const tc of this.tabContexts) {
if (tc.notePath && !tc.notePath.split("/").includes(noteId)) {
await tabRow.removeTab(tc.$tab[0]);
await this.tabRow.removeTab(tc.$tab[0]);
}
}
@ -197,7 +201,7 @@ class AppContext {
async saveOpenTabs() {
const openTabs = [];
for (const tabEl of tabRow.tabEls) {
for (const tabEl of this.tabRow.tabEls) {
const tabId = tabEl.getAttribute('data-tab-id');
const tabContext = appContext.getTabContexts().find(tc => tc.tabId === tabId);
@ -229,81 +233,63 @@ class AppContext {
this.tabsChangedTaskId = setTimeout(() => this.saveOpenTabs(), 1000);
}
newTabListener() {
this.openEmptyTab();
}
async activeTabChangedListener({tabEl}) {
const tabId = tabEl.getAttribute('data-tab-id');
await this.showTab(tabId);
}
async tabRemoveListener({tabEl}) {
const tabId = tabEl.getAttribute('data-tab-id');
this.tabContexts.filter(nc => nc.tabId === tabId)
.forEach(tc => tc.remove());
this.tabContexts = this.tabContexts.filter(nc => nc.tabId !== tabId);
if (this.tabContexts.length === 0) {
this.openEmptyTab();
}
this.openTabsChanged();
}
tabReorderListener() {
this.openTabsChanged();
}
}
const appContext = new AppContext();
tabRow.addListener('newTab', () => appContext.openEmptyTab());
tabRow.addListener('activeTabChange', async ({ detail }) => {
const tabId = detail.tabEl.getAttribute('data-tab-id');
await appContext.showTab(tabId);
});
tabRow.addListener('tabRemove', async ({ detail }) => {
const tabId = detail.tabEl.getAttribute('data-tab-id');
appContext.tabContexts.filter(nc => nc.tabId === tabId)
.forEach(tc => tc.remove());
appContext.tabContexts = appContext.tabContexts.filter(nc => nc.tabId !== tabId);
if (appContext.tabContexts.length === 0) {
appContext.openEmptyTab();
}
});
tabRow.addListener('activeTabChange', () => appContext.openTabsChanged());
tabRow.addListener('tabRemove', () => appContext.openTabsChanged());
tabRow.addListener('tabReorder', () => appContext.openTabsChanged());
keyboardActionService.setGlobalActionHandler('OpenNewTab', () => {
appContext.openEmptyTab();
});
keyboardActionService.setGlobalActionHandler('CloseActiveTab', () => {
if (tabRow.activeTabEl) {
tabRow.removeTab(tabRow.activeTabEl);
if (this.tabRow.activeTabEl) {
this.tabRow.removeTab(this.tabRow.activeTabEl);
}
});
keyboardActionService.setGlobalActionHandler('ActivateNextTab', () => {
const nextTab = tabRow.nextTabEl;
const nextTab = this.tabRow.nextTabEl;
if (nextTab) {
tabRow.activateTab(nextTab);
this.tabRow.activateTab(nextTab);
}
});
keyboardActionService.setGlobalActionHandler('ActivatePreviousTab', () => {
const prevTab = tabRow.previousTabEl;
const prevTab = this.tabRow.previousTabEl;
if (prevTab) {
tabRow.activateTab(prevTab);
this.tabRow.activateTab(prevTab);
}
});
$(tabRow.el).on('contextmenu', '.note-tab', e => {
e.preventDefault();
const tab = $(e.target).closest(".note-tab");
contextMenuService.initContextMenu(e, {
getContextMenuItems: () => {
return [
{title: "Close all tabs", cmd: "removeAllTabs", uiIcon: "empty"},
{title: "Close all tabs except for this", cmd: "removeAllTabsExceptForThis", uiIcon: "empty"}
];
},
selectContextMenuItem: (e, cmd) => {
if (cmd === 'removeAllTabs') {
tabRow.removeAllTabs();
} else if (cmd === 'removeAllTabsExceptForThis') {
tabRow.removeAllTabsExceptForThis(tab[0]);
}
}
});
});
export default appContext;

2
src/public/javascripts/services/note_detail.js
View File

@ -4,10 +4,8 @@ import server from './server.js';
import ws from "./ws.js";
import treeCache from "./tree_cache.js";
import NoteFull from "../entities/note_full.js";
import contextMenuService from "./context_menu.js";
import treeUtils from "./tree_utils.js";
import tabRow from "./tab_row.js";
import keyboardActionService from "./keyboard_actions.js";
import appContext from "./app_context.js";
const $tabContentsContainer = $("#note-tab-container");

118
src/public/javascripts/services/tab_context.js
View File

@ -3,13 +3,8 @@ import protectedSessionHolder from "./protected_session_holder.js";
import server from "./server.js";
import bundleService from "./bundle.js";
import Attributes from "./attributes.js";
import treeUtils from "./tree_utils.js";
import utils from "./utils.js";
import NoteTypeContext from "./note_type.js";
import noteDetailService from "./note_detail.js";
import protectedSessionService from "./protected_session.js";
import optionsService from "./options.js";
import linkService from "./link.js";
import Sidebar from "./sidebar.js";
import appContext from "./app_context.js";
@ -36,7 +31,7 @@ optionsService.addLoadListener(options => {
class TabContext {
/**
* @param {TabRow} tabRow
* @param {TabRowWidget} tabRow
* @param {object} state
*/
constructor(tabRow, state = {}) {
@ -61,13 +56,8 @@ class TabContext {
$tabContentsContainer.append(this.$tabContent);
this.$noteTitle = this.$tabContent.find(".note-title");
this.$noteTitleRow = this.$tabContent.find(".note-title-row");
this.$notePathList = this.$tabContent.find(".note-path-list");
this.$notePathCount = this.$tabContent.find(".note-path-count");
this.$noteDetailComponents = this.$tabContent.find(".note-detail-component");
this.$scriptArea = this.$tabContent.find(".note-detail-script-area");
this.$savedIndicator = this.$tabContent.find(".saved-indicator");
this.noteChangeDisabled = false;
this.isNoteChanged = false;
this.attributes = new Attributes(this);
@ -78,41 +68,10 @@ class TabContext {
};
this.sidebar = new Sidebar(this, sidebarState);
this.noteType = new NoteTypeContext(this);
}
this.components = {};
this.$noteTitle.on('input', () => {
if (!this.note) {
return;
}
this.noteChanged();
this.note.title = this.$noteTitle.val();
this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
treeService.setNoteTitle(this.note.noteId, this.note.title);
this.setTitleBar();
});
if (utils.isDesktop()) {
// keyboard plugin is not loaded in mobile
utils.bindElShortcut(this.$noteTitle, 'return', () => {
this.getComponent().focus();
return false; // to not propagate the enter into the editor (causes issues with codemirror)
});
}
this.$protectButton = this.$tabContent.find(".protect-button");
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$tabContent.find(".unprotect-button");
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
await this.initComponent();
}
@ -156,8 +115,6 @@ class TabContext {
this.noteChangeDisabled = true;
try {
this.$noteTitle.val(this.note.title);
await this.renderComponent();
} finally {
this.noteChangeDisabled = false;
@ -177,12 +134,6 @@ class TabContext {
}
}, 5000);
this.showPaths();
if (utils.isDesktop()) {
this.noteType.update();
}
bundleService.executeRelationBundles(this.note, 'runOnNoteView', this);
// after loading new note make sure editor is scrolled to the top
@ -281,12 +232,7 @@ class TabContext {
this.$tabContent.addClass(utils.getNoteTypeClass(this.note.type));
this.$tabContent.addClass(utils.getMimeTypeClass(this.note.mime));
this.$noteTitleRow.show(); // might be hidden from empty detail
this.$tabContent.toggleClass("protected", this.note.isProtected);
this.$protectButton.toggleClass("active", this.note.isProtected);
this.$protectButton.prop("disabled", this.note.isProtected);
this.$unprotectButton.toggleClass("active", !this.note.isProtected);
this.$unprotectButton.prop("disabled", !this.note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
}
getComponent() {
@ -349,12 +295,11 @@ class TabContext {
protectedSessionHolder.touchProtectedSession();
}
this.$savedIndicator.fadeIn();
// FIXME trigger "noteSaved" event so that title indicator is triggered
this.eventReceived('noteSaved');
// run async
bundleService.executeRelationBundles(this.note, 'runOnNoteChange', this);
this.eventReceived('noteSaved');
}
async saveNoteIfChanged() {
@ -372,65 +317,10 @@ class TabContext {
this.isNoteChanged = true;
// FIMXE: trigger noteChanged event
this.$savedIndicator.fadeOut();
}
async addPath(notePath, isCurrent) {
const title = await treeUtils.getNotePathTitle(notePath);
const noteLink = await linkService.createNoteLink(notePath, {title});
noteLink
.addClass("no-tooltip-preview")
.addClass("dropdown-item");
if (isCurrent) {
noteLink.addClass("current");
}
this.$notePathList.append(noteLink);
}
async showPaths() {
if (this.note.noteId === 'root') {
// root doesn't have any parent, but it's still technically 1 path
this.$notePathCount.html("1 path");
this.$notePathList.empty();
await this.addPath('root', true);
}
else {
const parents = await this.note.getParentNotes();
this.$notePathCount.html(parents.length + " path" + (parents.length > 1 ? "s" : ""));
this.$notePathList.empty();
const pathSegments = this.notePath.split("/");
const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
for (const parentNote of parents) {
const parentNotePath = await treeService.getSomeNotePath(parentNote);
// this is to avoid having root notes leading '/'
const notePath = parentNotePath ? (parentNotePath + '/' + this.note.noteId) : this.note.noteId;
const isCurrent = activeNoteParentNoteId === parentNote.noteId;
await this.addPath(notePath, isCurrent);
}
const cloneLink = $("<div>")
.addClass("dropdown-item")
.append(
$('<button class="btn btn-sm">')
.text('Clone note to new location...')
.on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([this.note.noteId])))
);
this.$notePathList.append(cloneLink);
}
}
async remove() {
if (this.$tabContent) {
// sometimes there are orphan autocompletes after closing the tab

56
src/public/javascripts/services/tab_row.js
View File

File diff suppressed because one or more lines are too long

219
src/public/javascripts/widgets/note_title.js Normal file
View File

@ -0,0 +1,219 @@
import TabAwareWidget from "./tab_aware_widget.js";
import treeService from "../services/tree.js";
import utils from "../services/utils.js";
import protectedSessionService from "../services/protected_session.js";
import treeUtils from "../services/tree_utils.js";
import linkService from "../services/link.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
import NoteTypeWidget from "./note_type.js";
const TPL = `
<style>
.note-title-row {
flex-grow: 0;
flex-shrink: 0;
padding-top: 2px;
}
.note-title {
margin-left: 15px;
margin-right: 10px;
font-size: 150%;
border: 0;
width: 5em;
flex-grow: 100;
}
</style>
<div class="note-title-row">
<div style="display: flex; align-items: center;">
<div class="dropdown hide-in-zen-mode">
<button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="note-path-count">1 path</span>
<span class="caret"></span>
</button>
<ul class="note-path-list dropdown-menu" aria-labelledby="note-path-list-button">
</ul>
</div>
<input autocomplete="off" value="" class="note-title" tabindex="1">
<span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
<div class="hide-in-zen-mode" style="display: flex; align-items: center;">
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>
<div class="btn-group btn-group-xs">
<button type="button"
class="btn btn-sm icon-button bx bx-check-shield protect-button"
title="Protected note can be viewed and edited only after entering password">
</button>
<button type="button"
class="btn btn-sm icon-button bx bx-shield unprotect-button"
title="Not protected note can be viewed without entering password">
</button>
</div>
&nbsp; &nbsp;
<div style="display: flex;">
<!-- note type here -->
<div class="dropdown note-actions">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
Note actions
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
<a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
<a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
<a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
<kbd data-kb-action="ShowNoteSource"></kbd>
Note source
</a>
<a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
<a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
<a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
export default class NoteTitleWidget extends TabAwareWidget {
constructor(appContext) {
super(appContext);
this.tree = null;
}
async doRender($widget) {
$widget.append($(TPL));
this.$noteTitle = this.$tabContent.find(".note-title");
this.$noteTitleRow = this.$tabContent.find(".note-title-row");
this.$notePathList = this.$tabContent.find(".note-path-list");
this.$notePathCount = this.$tabContent.find(".note-path-count");
this.$protectButton = this.$tabContent.find(".protect-button");
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$tabContent.find(".unprotect-button");
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
this.$savedIndicator = this.$tabContent.find(".saved-indicator");
this.noteType = new NoteTypeWidget(this);
this.$noteTitle.on('input', () => {
if (!this.note) {
return;
}
// FIXME event not used
this.trigger(`activeNoteChanged`);
this.note.title = this.$noteTitle.val();
this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
treeService.setNoteTitle(this.note.noteId, this.note.title);
this.setTitleBar();
});
if (utils.isDesktop()) {
// keyboard plugin is not loaded in mobile
utils.bindElShortcut(this.$noteTitle, 'return', () => {
this.getComponent().focus();
return false; // to not propagate the enter into the editor (causes issues with codemirror)
});
}
}
async activeTabChanged() {
const note = this.tabContext.note;
this.$noteTitle.val(this.note.title);
this.$protectButton.toggleClass("active", note.isProtected);
this.$protectButton.prop("disabled", note.isProtected);
this.$unprotectButton.toggleClass("active", !note.isProtected);
this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
await this.showPaths();
}
async showPaths() {
const note = this.tabContext.note;
if (note.noteId === 'root') {
// root doesn't have any parent, but it's still technically 1 path
this.$notePathCount.html("1 path");
this.$notePathList.empty();
await this.addPath('root', true);
}
else {
const parents = await note.getParentNotes();
this.$notePathCount.html(parents.length + " path" + (parents.length > 1 ? "s" : ""));
this.$notePathList.empty();
const pathSegments = this.notePath.split("/");
const activeNoteParentNoteId = pathSegments[pathSegments.length - 2]; // we know this is not root so there must be a parent
for (const parentNote of parents) {
const parentNotePath = await treeService.getSomeNotePath(parentNote);
// this is to avoid having root notes leading '/'
const notePath = parentNotePath ? (parentNotePath + '/' + note.noteId) : note.noteId;
const isCurrent = activeNoteParentNoteId === parentNote.noteId;
await this.addPath(notePath, isCurrent);
}
const cloneLink = $("<div>")
.addClass("dropdown-item")
.append(
$('<button class="btn btn-sm">')
.text('Clone note to new location...')
.on('click', () => import("../dialogs/clone_to.js").then(d => d.showDialog([note.noteId])))
);
this.$notePathList.append(cloneLink);
}
}
async addPath(notePath, isCurrent) {
const title = await treeUtils.getNotePathTitle(notePath);
const noteLink = await linkService.createNoteLink(notePath, {title});
noteLink
.addClass("no-tooltip-preview")
.addClass("dropdown-item");
if (isCurrent) {
noteLink.addClass("current");
}
this.$notePathList.append(noteLink);
}
noteSavedListener() {
this.$savedIndicator.fadeIn();
}
}

54
src/public/javascripts/services/note_type.js → src/public/javascripts/widgets/note_type.js
View File

@ -1,7 +1,8 @@
import treeService from './tree.js';
import noteDetailService from './note_detail.js';
import server from './server.js';
import mimeTypesService from './mime_types.js';
import treeService from '../services/tree.js';
import noteDetailService from '../services/note_detail.js';
import server from '../services/server.js';
import mimeTypesService from '../services/mime_types.js';
import TabAwareWidget from "./tab_aware_widget.js";
const NOTE_TYPES = [
{ type: "file", title: "File", selectable: false },
@ -15,20 +16,37 @@ const NOTE_TYPES = [
{ type: "code", mime: 'text/plain', title: "Code", selectable: true }
];
export default class NoteTypeContext {
/**
* @param {TabContext} ctx
*/
constructor(ctx) {
this.ctx = ctx;
const TPL = `
<style>
.note-type-dropdown {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
ctx.$tabContent.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
<div class="dropdown note-type">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
Type: <span class="note-type-desc"></span>
<span class="caret"></span>
</button>
<div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
</div>
`;
this.$noteTypeDropdown = ctx.$tabContent.find(".note-type-dropdown");
this.$noteTypeButton = ctx.$tabContent.find(".note-type-button");
this.$noteTypeDesc = ctx.$tabContent.find(".note-type-desc");
this.$executeScriptButton = ctx.$tabContent.find(".execute-script-button");
this.$renderButton = ctx.$tabContent.find('.render-button');
export default class NoteTypeWidget extends TabAwareWidget {
async doRender($widget) {
$widget.append($(TPL));
$widget.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown());
this.$noteTypeDropdown = $widget.find(".note-type-dropdown");
this.$noteTypeButton = $widget.find(".note-type-button");
this.$noteTypeDesc = $widget.find(".note-type-desc");
this.$executeScriptButton = $widget.find(".execute-script-button");
this.$renderButton = $widget.find('.render-button');
return $widget;
}
async update() {
@ -41,6 +59,10 @@ export default class NoteTypeContext {
this.$renderButton.toggle(this.ctx.note.type === 'render');
}
async activeTabChanged() {
this.update();
}
/** actual body is rendered lazily on note-type button click */
async renderDropdown() {
this.$noteTypeDropdown.empty();

19
src/public/javascripts/widgets/tab_aware_widget.js Normal file
View File

@ -0,0 +1,19 @@
import BasicWidget from "./basic_widget.js";
export default class TabAwareWidget extends BasicWidget {
constructor(appContext) {
super(appContext);
/** @var {TabContext} */
this.tabContext = null;
}
// to override
activeTabChanged() {}
activeTabChangedListener() {
this.tabContext = this.appContext.getActiveTabContext();
this.activeTabChanged();
}
}

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

@ -175,21 +175,6 @@ body {
border-color: var(--button-border-color);
}
.note-title-row {
flex-grow: 0;
flex-shrink: 0;
padding-top: 2px;
}
.note-title {
margin-left: 15px;
margin-right: 10px;
font-size: 150%;
border: 0;
width: 5em;
flex-grow: 100;
}
.note-tab-row {
box-sizing: border-box;
position: relative;

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

@ -381,12 +381,6 @@ div.ui-tooltip {
border-right: none;
}
.note-type-dropdown {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
.cm-matchhighlight {
background-color: #eeeeee
}

2
src/views/center.ejs
View File

@ -2,8 +2,6 @@
<div id="note-tab-container">
<div class="note-tab-content note-tab-content-template">
<div class="note-detail-content">
<% include title.ejs %>
<div class="note-detail-script-area"></div>
<table class="note-detail-promoted-attributes"></table>

4
src/views/desktop.ejs
View File

@ -85,9 +85,7 @@
</div>
</div>
<div class="note-tab-row">
<div class="note-tab-row-content"></div>
</div>
<div id="tab-row-container"></div>
<div id="title-bar-buttons" style="display: none;">
<button class="btn icon-action bx bx-minus" id="minimize-btn"></button>

71
src/views/title.ejs
View File

@ -1,71 +0,0 @@
<div class="note-title-row">
<div style="display: flex; align-items: center;">
<div class="dropdown hide-in-zen-mode">
<button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="note-path-count">1 path</span>
<span class="caret"></span>
</button>
<ul class="note-path-list dropdown-menu" aria-labelledby="note-path-list-button">
</ul>
</div>
<input autocomplete="off" value="" class="note-title" tabindex="1">
<span class="saved-indicator hide-in-zen-mode bx bx-check" title="All changes have been saved"></span>
<div class="hide-in-zen-mode" style="display: flex; align-items: center;">
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>
<div class="btn-group btn-group-xs">
<button type="button"
class="btn btn-sm icon-button bx bx-check-shield protect-button"
title="Protected note can be viewed and edited only after entering password">
</button>
<button type="button"
class="btn btn-sm icon-button bx bx-shield unprotect-button"
title="Not protected note can be viewed without entering password">
</button>
</div>
&nbsp; &nbsp;
<div style="display: flex;">
<div class="dropdown note-type">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle note-type-button">
Type: <span class="note-type-desc"></span>
<span class="caret"></span>
</button>
<div class="note-type-dropdown dropdown-menu dropdown-menu-right"></div>
</div>
<div class="dropdown note-actions">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
Note actions
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item show-note-revisions-button" data-bind="css: { disabled: type() == 'file' || type() == 'image' }">Revisions</a>
<a class="dropdown-item show-attributes-button"><kbd data-kb-action="ShowAttributes"></kbd> Attributes</a>
<a class="dropdown-item show-link-map-button"><kbd data-kb-action="ShowLinkMap"></kbd> Link map</a>
<a class="dropdown-item show-source-button" data-bind="css: { disabled: type() != 'text' && type() != 'code' && type() != 'relation-map' && type() != 'search' }">
<kbd data-kb-action="ShowNoteSource"></kbd>
Note source
</a>
<a class="dropdown-item import-files-button">Import files</a>
<a class="dropdown-item export-note-button" data-bind="css: { disabled: type() != 'text' }">Export note</a>
<a class="dropdown-item print-note-button"><kbd data-kb-action="PrintActiveNote"></kbd> Print note</a>
<a class="dropdown-item show-note-info-button"><kbd data-kb-action="ShowNoteInfo"></kbd> Note info</a>
</div>
</div>
</div>
</div>
</div>
</div>