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

mobile layout improvements

Browse Source
This commit is contained in:
zadam 2022-12-11 21:27:03 +01:00
parent dcfa9c4c0b
commit c1d4d3fc8a
4 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/layouts/mobile_layout.js
View File

@ -18,6 +18,7 @@ import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_butt
import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js"; import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js"; import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
import MermaidWidget from "../widgets/mermaid.js"; import MermaidWidget from "../widgets/mermaid.js";
import NoteListWidget from "../widgets/note_list.js";
const MOBILE_CSS = ` const MOBILE_CSS = `
<style> <style>
@ -144,6 +145,7 @@ export default class MobileLayout {
new NoteDetailWidget() new NoteDetailWidget()
.css('padding', '5px 20px 10px 0') .css('padding', '5px 20px 10px 0')
) )
.child(new NoteListWidget())
.child(new FilePropertiesWidget().css('font-size','smaller')) .child(new FilePropertiesWidget().css('font-size','smaller'))
) )
) )

2
src/public/app/widgets/buttons/edit_button.js
View File

@ -5,7 +5,7 @@ import protectedSessionHolder from "../../services/protected_session_holder.js";
export default class EditButton extends OnClickButtonWidget { export default class EditButton extends OnClickButtonWidget {
isEnabled() { isEnabled() {
return super.isEnabled() && this.noteContext; return super.isEnabled() && this.note;
} }
constructor() { constructor() {

45
src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
View File

@ -19,24 +19,51 @@ const WIDGET_TPL = `
font-size: smaller; font-size: smaller;
padding: 5px; padding: 5px;
} }
#global-buttons .global-button {
border: 1px solid transparent;
width: 60px;
height: 40px;
background: var(--button-background-color);
border-radius: var(--button-border-radius);
color: var(--button-text-color);
display: flex;
justify-content: space-around;
align-items: center;
}
#global-buttons .global-button > .bx {
font-size: 1.5em;
color: var(--button-text-color);
cursor: pointer;
}
#global-buttons .global-button:hover {
text-decoration: none;
border-color: var(--button-border-color);
}
</style> </style>
<a data-trigger-command="createNoteIntoInbox" title="New note" class="icon-action bx bx-folder-plus"></a> <button data-trigger-command="createNoteIntoInbox" title="New note" class="global-button">
<span class="bx bx-folder-plus"></span>
</button>
<button data-trigger-command="collapseTree" title="Collapse note tree" class="global-button">
<span class="bx bx-layer-minus">
</button>
<button data-trigger-command="scrollToActiveNote" title="Scroll to active note" class="global-button">
<span class="bx bx-crosshair"></span>
</button>
<a data-trigger-command="collapseTree" title="Collapse note tree" class="icon-action bx bx-layer-minus"></a> <div class="dropdown global-button">
<span title="Plugin buttons" class="bx bx-extension dropdown-toggle" data-toggle="dropdown"></span>
<a data-trigger-command="scrollToActiveNote" title="Scroll to active note" class="icon-action bx bx-crosshair"></a>
<div class="dropdown">
<a title="Plugin buttons" class="icon-action bx bx-extension dropdown-toggle" data-toggle="dropdown"></a>
<div id="plugin-buttons" class="dropdown-menu dropdown-menu-right"> <div id="plugin-buttons" class="dropdown-menu dropdown-menu-right">
<p id="plugin-buttons-placeholder">No plugin buttons loaded yet.</p> <p id="plugin-buttons-placeholder">No plugin buttons loaded yet.</p>
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown global-button">
<a title="Global actions" class="icon-action bx bx-cog dropdown-toggle" data-toggle="dropdown"></a> <span title="Global actions" class="bx bx-cog dropdown-toggle" data-toggle="dropdown"></span>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" data-trigger-command="switchToDesktopVersion"><span class="bx bx-laptop"></span> Switch to desktop version</a> <a class="dropdown-item" data-trigger-command="switchToDesktopVersion"><span class="bx bx-laptop"></span> Switch to desktop version</a>

3
src/public/app/widgets/note_tree.js
View File

@ -238,7 +238,8 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
this.reloadTreeFromCache(); this.reloadTreeFromCache();
}); });
froca.initializedPromise.then(() => this.initFancyTree()); // note tree starts initializing already during render which is atypical
Promise.all([options.initializedPromise, froca.initializedPromise]).then(() => this.initFancyTree());
this.setupNoteTitleTooltip(); this.setupNoteTitleTooltip();
} }