gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-06 15:34:26 +01:00
Code Issues Actions 30 Packages Projects Releases Wiki Activity

feat(mobile): display editor toolbar only when focused

Browse Source
This commit is contained in:
Elian Doran 2025-01-02 01:21:30 +02:00
parent 795f715852
commit 3913088451
No known key found for this signature in database
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
View File

@ -23,6 +23,11 @@ const TPL = `\
} }
body.mobile .classic-toolbar-widget { body.mobile .classic-toolbar-widget {
display: none;
}
body.mobile .classic-toolbar-widget.visible {
display: block;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;

32
src/public/app/widgets/type_widgets/editable_text.js
View File

@ -41,41 +41,41 @@ const TPL = `
padding-top: 10px; padding-top: 10px;
height: 100%; height: 100%;
} }
body.mobile .note-detail-editable-text { body.mobile .note-detail-editable-text {
padding-left: 4px; padding-left: 4px;
} }
.note-detail-editable-text a:hover { .note-detail-editable-text a:hover {
cursor: pointer; cursor: pointer;
} }
.note-detail-editable-text a[href^="http://"], .note-detail-editable-text a[href^="https://"] { .note-detail-editable-text a[href^="http://"], .note-detail-editable-text a[href^="https://"] {
cursor: text !important; cursor: text !important;
} }
.note-detail-editable-text *:not(figure, .include-note, hr):first-child { .note-detail-editable-text *:not(figure, .include-note, hr):first-child {
margin-top: 0 !important; margin-top: 0 !important;
} }
.note-detail-editable-text h2 { font-size: 1.6em; } .note-detail-editable-text h2 { font-size: 1.6em; }
.note-detail-editable-text h3 { font-size: 1.4em; } .note-detail-editable-text h3 { font-size: 1.4em; }
.note-detail-editable-text h4 { font-size: 1.2em; } .note-detail-editable-text h4 { font-size: 1.2em; }
.note-detail-editable-text h5 { font-size: 1.1em; } .note-detail-editable-text h5 { font-size: 1.1em; }
.note-detail-editable-text h6 { font-size: 1.0em; } .note-detail-editable-text h6 { font-size: 1.0em; }
body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); } body.heading-style-markdown .note-detail-editable-text h2::before { content: "##\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); } body.heading-style-markdown .note-detail-editable-text h3::before { content: "###\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); } body.heading-style-markdown .note-detail-editable-text h4:not(.include-note-title)::before { content: "####\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); } body.heading-style-markdown .note-detail-editable-text h5::before { content: "#####\\2004"; color: var(--muted-text-color); }
body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); } body.heading-style-markdown .note-detail-editable-text h6::before { content: "######\\2004"; color: var(--muted-text-color); }
body.heading-style-underline .note-detail-editable-text h2 { border-bottom: 1px solid var(--main-border-color); } body.heading-style-underline .note-detail-editable-text h2 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-editable-text h3 { border-bottom: 1px solid var(--main-border-color); } body.heading-style-underline .note-detail-editable-text h3 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-editable-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); } body.heading-style-underline .note-detail-editable-text h4:not(.include-note-title) { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-editable-text h5 { border-bottom: 1px solid var(--main-border-color); } body.heading-style-underline .note-detail-editable-text h5 { border-bottom: 1px solid var(--main-border-color); }
body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px solid var(--main-border-color); } body.heading-style-underline .note-detail-editable-text h6 { border-bottom: 1px solid var(--main-border-color); }
.note-detail-editable-text-editor { .note-detail-editable-text-editor {
padding-top: 10px; padding-top: 10px;
border: 0 !important; border: 0 !important;
@ -108,7 +108,7 @@ function buildListOfLanguages() {
/** /**
* The editor can operate into two distinct modes: * The editor can operate into two distinct modes:
* *
* - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph). * - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph).
* - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works. * - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works.
*/ */
@ -204,9 +204,19 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
} else { } else {
$classicToolbarWidget = $("body").find(".classic-toolbar-widget"); $classicToolbarWidget = $("body").find(".classic-toolbar-widget");
} }
$classicToolbarWidget.empty(); $classicToolbarWidget.empty();
$classicToolbarWidget[0].appendChild(editor.ui.view.toolbar.element); $classicToolbarWidget[0].appendChild(editor.ui.view.toolbar.element);
if (utils.isMobile()) {
this.$editor.on("focus", (e) => {
$classicToolbarWidget.addClass("visible");
});
this.$editor.on("focusout", (e) => {
$classicToolbarWidget.removeClass("visible");
});
}
} }
editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate()); editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate());