diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js index b5f9e352b..3c934b170 100644 --- a/src/public/javascripts/services/entrypoints.js +++ b/src/public/javascripts/services/entrypoints.js @@ -112,10 +112,21 @@ function registerEntrypoints() { keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward); } + let zenModeActive = false; + // hide (toggle) everything except for the note content for zen mode const toggleZenMode = () => { - $(".hide-in-zen-mode").toggle(); - $("#container").toggleClass("zen-mode"); + if (!zenModeActive) { + $(".hide-in-zen-mode").addClass("hidden-by-zen-mode"); + $("#container").addClass("zen-mode"); + zenModeActive = true; + } + else { + // not hiding / showing explicitly since element might be hidden also for other reasons + $(".hide-in-zen-mode").removeClass("hidden-by-zen-mode"); + $("#container").removeClass("zen-mode"); + zenModeActive = false; + } }; $("#toggle-zen-mode-button").on('click', toggleZenMode); diff --git a/src/public/javascripts/services/tab_context.js b/src/public/javascripts/services/tab_context.js index b2a8b94aa..71fa6392a 100644 --- a/src/public/javascripts/services/tab_context.js +++ b/src/public/javascripts/services/tab_context.js @@ -11,9 +11,45 @@ import protectedSessionService from "./protected_session.js"; import optionsService from "./options.js"; import linkService from "./link.js"; import Sidebar from "./sidebar.js"; +import libraryLoader from "./library_loader.js"; +import noteAutocompleteService from "./note_autocomplete.js"; const $tabContentsContainer = $("#note-tab-container"); +const mentionSetup = { + feeds: [ + { + marker: '@', + feed: queryText => { + return new Promise((res, rej) => { + noteAutocompleteService.autocompleteSource(queryText, rows => { + if (rows.length === 1 && rows[0].title === 'No results') { + rows = []; + } + + for (const row of rows) { + row.text = row.name = row.noteTitle; + row.id = '@' + row.text; + row.link = '#' + row.path; + } + + res(rows); + }); + }); + }, + itemRenderer: item => { + const itemElement = document.createElement('span'); + + itemElement.classList.add('mentions-item'); + itemElement.innerHTML = `${item.highlightedTitle} `; + + return itemElement; + }, + minimumCharacters: 0 + } + ] +}; + const componentClasses = { 'empty': "./note_detail_empty.js", 'text': "./note_detail_text.js", @@ -67,6 +103,7 @@ class TabContext { 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.$attributesEditor = this.$tabContent.find(".note-title-attributes"); this.noteChangeDisabled = false; this.isNoteChanged = false; this.attributes = new Attributes(this); @@ -113,6 +150,16 @@ class TabContext { this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer); await this.initComponent(); + + await libraryLoader.requireLibrary(libraryLoader.CKEDITOR); + + await BalloonEditor.create(this.$attributesEditor[0], { + placeholder: "type attributes here, e.g. @rock @year=2019", + mention: mentionSetup, + removePlugins: ['Autoformat'], + blockToolbar: [], + toolbar: [] + }); } async initComponent(disableAutoBook = false) { diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index d7db31d7d..88036196e 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -6,29 +6,19 @@ body { margin: 0 auto; /* center */ height: 100vh; - display: grid; - grid-template-areas: "header header" - "left-pane tabs" - "left-pane tab-container"; - grid-template-rows: auto - auto - 1fr; - - justify-content: center; - grid-gap: 0; + display: flex; + flex-direction: column; } -#container.zen-mode { - grid-template-areas: - "tab-container" !important; - grid-template-rows: auto - auto - !important; - grid-template-columns: 1fr !important; +.hidden-by-zen-mode { + display: none !important; +} + +#center-pane { + display: flex; } #note-tab-container { - grid-area: tab-container; min-height: 0; padding-left: 10px; } @@ -49,13 +39,11 @@ body { } #left-pane { - grid-area: left-pane; display: flex; flex-direction: column; } #header { - grid-area: header; background-color: var(--header-background-color); display: flex; align-items: center; @@ -210,7 +198,6 @@ body { background: var(--main-background-color); border-radius: 5px 5px 0 0; overflow: hidden; - grid-area: tabs; margin-top: 5px; } .note-tab-row * { diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 467b1b4ef..e31287082 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -125,52 +125,56 @@ -
-
- +
+
+
+ - + - + - -
+ +
-