zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-21 16:16:04 +08:00
Code Issues 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 HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
import MermaidWidget from "../widgets/mermaid.js";
import NoteListWidget from "../widgets/note_list.js";
const MOBILE_CSS = `
<style>
@ -144,6 +145,7 @@ export default class MobileLayout {
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')
)
.child(new NoteListWidget())
.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 {
isEnabled() {
return super.isEnabled() && this.noteContext;
return super.isEnabled() && this.note;
}
constructor() {

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

@ -19,24 +19,51 @@ const WIDGET_TPL = `
font-size: smaller;
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>
<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>
<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 class="dropdown global-button">
<span title="Plugin buttons" class="bx bx-extension dropdown-toggle" data-toggle="dropdown"></span>
<div id="plugin-buttons" class="dropdown-menu dropdown-menu-right">
<p id="plugin-buttons-placeholder">No plugin buttons loaded yet.</p>
</div>
</div>
<div class="dropdown">
<a title="Global actions" class="icon-action bx bx-cog dropdown-toggle" data-toggle="dropdown"></a>
<div class="dropdown global-button">
<span title="Global actions" class="bx bx-cog dropdown-toggle" data-toggle="dropdown"></span>
<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>

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

@ -238,7 +238,8 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
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();
}