1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-02-20 13:03:05 +08:00

mobile layout now has launchbar

This commit is contained in:
zadam 2022-12-11 22:26:18 +01:00
parent c1d4d3fc8a
commit 23322455a3
6 changed files with 64 additions and 147 deletions
src/public/app

View file

@ -3,7 +3,6 @@ import NoteTitleWidget from "../widgets/note_title.js";
import NoteDetailWidget from "../widgets/note_detail.js";
import QuickSearchWidget from "../widgets/quick_search.js";
import NoteTreeWidget from "../widgets/note_tree.js";
import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_buttons.js";
import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
@ -19,6 +18,9 @@ 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";
import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
import LauncherContainer from "../widgets/containers/launcher_container.js";
import RootContainer from "../widgets/containers/root_container.js";
const MOBILE_CSS = `
<style>
@ -40,7 +42,7 @@ kbd {
color: var(--main-text-color);
}
.quick-search {
margin: 55px 0px 0px 0px;
margin: 0;
}
.quick-search .dropdown-menu {
max-width: 350px;
@ -103,53 +105,60 @@ span.fancytree-expander {
export default class MobileLayout {
getRootWidget(appContext) {
return new FlexContainer('row').cssBlock(MOBILE_CSS)
return new RootContainer()
.setParent(appContext)
.id('root-widget')
.css('height', '100%')
.child(new ScreenContainer("tree", 'column')
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
.css("max-height", "100%")
.css('padding-left', 0)
.css('contain', 'content')
.child(new MobileGlobalButtonsWidget())
.child(new QuickSearchWidget())
.child(new NoteTreeWidget()
.cssBlock(FANCYTREE_CSS)))
.child(new ScreenContainer("detail", "column")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
.css('max-height', '100%')
.child(new FlexContainer('row').contentSized()
.css('font-size', 'larger')
.css('align-items', 'center')
.child(new MobileDetailMenuWidget().contentSized())
.child(new NoteTitleWidget()
.contentSized()
.css("position: relative;")
.css("top: 5px;")
)
.child(new CloseDetailButtonWidget().contentSized()))
.child(new FloatingButtons()
.child(new EditButton())
.child(new RelationMapButtons())
.child(new MermaidExportButton())
.child(new BacklinksWidget())
.child(new HideFloatingButtonsButton())
)
.child(new MermaidWidget())
.child(
new ScrollingContainer()
.filling()
.contentSized()
.child(
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')
)
.child(new NoteListWidget())
.child(new FilePropertiesWidget().css('font-size','smaller'))
)
.cssBlock(MOBILE_CSS)
.child(new FlexContainer("column")
.id("launcher-pane")
.css("width", "53px")
.child(new GlobalMenuWidget())
.child(new LauncherContainer())
)
.child(new ProtectedSessionPasswordDialog())
.child(new ConfirmDialog());
.child(new FlexContainer("row")
.filling()
.child(new ScreenContainer("tree", 'column')
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
.css("max-height", "100%")
.css('padding-left', 0)
.css('contain', 'content')
.child(new QuickSearchWidget())
.child(new NoteTreeWidget()
.cssBlock(FANCYTREE_CSS)))
.child(new ScreenContainer("detail", "column")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
.css('max-height', '100%')
.child(new FlexContainer('row').contentSized()
.css('font-size', 'larger')
.css('align-items', 'center')
.child(new MobileDetailMenuWidget().contentSized())
.child(new NoteTitleWidget()
.contentSized()
.css("position: relative;")
.css("top: 5px;")
)
.child(new CloseDetailButtonWidget().contentSized()))
.child(new FloatingButtons()
.child(new EditButton())
.child(new RelationMapButtons())
.child(new MermaidExportButton())
.child(new BacklinksWidget())
.child(new HideFloatingButtonsButton())
)
.child(new MermaidWidget())
.child(
new ScrollingContainer()
.filling()
.contentSized()
.child(
new NoteDetailWidget()
.css('padding', '5px 20px 10px 0')
)
.child(new NoteListWidget())
.child(new FilePropertiesWidget().css('font-size','smaller'))
)
)
.child(new ProtectedSessionPasswordDialog())
.child(new ConfirmDialog())
);
}
}

View file

@ -111,7 +111,7 @@ async function reportError(method, url, status, response) {
throw new ValidationError(response);
}
const message = "Error when calling " + method + " " + url + ": " + status + " - " + responseText;
const message = "Error when calling " + method + " " + url + ": " + status + " - " + response;
toastService.showError(message);
toastService.throwError(message);
}

View file

@ -263,6 +263,8 @@ export default class GlobalMenuWidget extends BasicWidget {
}
async updateVersionStatus() {
await options.initializedPromise;
if (options.get("checkForUpdates") !== 'true') {
return;
}

View file

@ -33,7 +33,7 @@ export default class LauncherWidget extends BasicWidget {
const launcherType = note.getLabelValue("launcherType");
if (launcherType === 'command') {
this.innerWidget = this.initCommandWidget(note)
this.innerWidget = this.initCommandLauncherWidget(note)
.class("launcher-button");
} else if (launcherType === 'note') {
this.innerWidget = new NoteLauncher(note)
@ -56,7 +56,7 @@ export default class LauncherWidget extends BasicWidget {
this.child(this.innerWidget);
}
initCommandWidget(note) {
initCommandLauncherWidget(note) {
return new CommandButtonWidget()
.title(note.title)
.icon(note.getIcon())

View file

@ -15,6 +15,8 @@ export default class LauncherContainer extends FlexContainer {
}
async load() {
await froca.initializedPromise;
this.children = [];
const visibleLaunchersRoot = await froca.getNote('lbVisibleLaunchers', true);

View file

@ -1,96 +0,0 @@
import BasicWidget from "../basic_widget.js";
import protectedSessionHolder from "../../services/protected_session_holder.js";
const WIDGET_TPL = `
<div id="global-buttons">
<style>
#global-buttons {
display: flex;
flex-shrink: 0;
justify-content: space-around;
padding: 0px 0 3px 0;
font-size: larger;
position: absolute;
top: 8px;
width: 100%;
}
#plugin-buttons-placeholder {
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>
<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>
<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 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>
<a class="dropdown-item" data-trigger-command="enterProtectedSession"><span class="bx bx-shield-quarter"></span> Enter protected session</a>
<a class="dropdown-item" data-trigger-command="leaveProtectedSession"><span class="bx bx-check-shield"></span> Leave protected session</a>
<a class="dropdown-item" data-trigger-command="logout"><span class="bx bx-log-out"></span> Logout</a>
</div>
</div>
</div>
`;
class MobileGlobalButtonsWidget extends BasicWidget {
doRender() {
this.$widget = $(WIDGET_TPL);
this.updateSettings();
}
protectedSessionStartedEvent() {
this.updateSettings();
}
updateSettings() {
const protectedSession = protectedSessionHolder.isProtectedSessionAvailable();
this.$widget.find('[data-trigger-command="enterProtectedSession"]').toggle(!protectedSession);
this.$widget.find('[data-trigger-command="leaveProtectedSession"]').toggle(protectedSession);
}
}
export default MobileGlobalButtonsWidget;