mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-10-31 13:01:31 +08:00
convert css grid design to flex based one
This commit is contained in:
zadam
parent
4f5b23fbf8
commit
613d5f93e8
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 * {
|
||||
|
||||
@ -125,52 +125,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="left-pane" class="hide-in-zen-mode">
|
||||
<div id="global-buttons">
|
||||
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
|
||||
<div style="display: flex; height: 100%;">
|
||||
<div id="left-pane" class="hide-in-zen-mode">
|
||||
<div id="global-buttons">
|
||||
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
|
||||
|
||||
<a id="collapse-tree-button" title="Collapse note tree" data-kb-action="CollapseTree" class="icon-action bx bx-layer-minus"></a>
|
||||
<a id="collapse-tree-button" title="Collapse note tree" data-kb-action="CollapseTree" class="icon-action bx bx-layer-minus"></a>
|
||||
|
||||
<a id="scroll-to-active-note-button" title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="icon-action bx bx-crosshair"></a>
|
||||
<a id="scroll-to-active-note-button" title="Scroll to active note" data-kb-action="ScrollToActiveNote" class="icon-action bx bx-crosshair"></a>
|
||||
|
||||
<a id="toggle-search-button" title="Search in notes" data-kb-action="SearchNotes" class="icon-action bx bx-search"></a>
|
||||
</div>
|
||||
<a id="toggle-search-button" title="Search in notes" data-kb-action="SearchNotes" class="icon-action bx bx-search"></a>
|
||||
</div>
|
||||
|
||||
<div id="search-box">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input name="search-text" id="search-text" class="form-control"
|
||||
placeholder="Search text, labels" autocomplete="off">
|
||||
<div id="search-box">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input name="search-text" id="search-text" class="form-control"
|
||||
placeholder="Search text, labels" autocomplete="off">
|
||||
|
||||
<div class="input-group-append">
|
||||
<button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
|
||||
<div class="input-group-append">
|
||||
<button id="do-search-button" class="btn btn-sm icon-button bx bx-search" title="Search (enter)"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
|
||||
<button id="save-search-button" class="btn btn-sm"
|
||||
title="This will create new saved search note under active note.">
|
||||
<span class="bx bx-save"></span> Save search</button>
|
||||
|
||||
<button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-results">
|
||||
<strong>Search results:</strong>
|
||||
|
||||
<div style="display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap;">
|
||||
<button id="save-search-button" class="btn btn-sm"
|
||||
title="This will create new saved search note under active note.">
|
||||
<span class="bx bx-save"></span> Save search</button>
|
||||
|
||||
<button id="close-search-button" class="btn btn-sm"><span class="bx bx-x"></span> Close search</button>
|
||||
<ul id="search-results-inner"></ul>
|
||||
</div>
|
||||
|
||||
<div id="tree"></div>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="search-results">
|
||||
<strong>Search results:</strong>
|
||||
|
||||
<ul id="search-results-inner"></ul>
|
||||
<div id="center-pane">
|
||||
<% include tabs.ejs %>
|
||||
</div>
|
||||
|
||||
<div id="tree"></div>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
|
||||
</div>
|
||||
|
||||
<% include tabs.ejs %>
|
||||
|
||||
<% include dialogs/about.ejs %>
|
||||
<% include dialogs/add_link.ejs %>
|
||||
<% include dialogs/attributes.ejs %>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="note-tab-row hide-in-hide-in-zen-mode">
|
||||
<div class="note-tab-row hide-in-zen-mode">
|
||||
<div class="note-tab-row-content"></div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -70,4 +70,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-title-attributes" tabindex="9999"></div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user