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:
parent
c1d4d3fc8a
commit
23322455a3
6 changed files with 64 additions and 147 deletions
src/public/app
layouts
services
widgets
buttons
containers
mobile_widgets
|
@ -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())
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -263,6 +263,8 @@ export default class GlobalMenuWidget extends BasicWidget {
|
|||
}
|
||||
|
||||
async updateVersionStatus() {
|
||||
await options.initializedPromise;
|
||||
|
||||
if (options.get("checkForUpdates") !== 'true') {
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -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())
|
||||
|
|
|
@ -15,6 +15,8 @@ export default class LauncherContainer extends FlexContainer {
|
|||
}
|
||||
|
||||
async load() {
|
||||
await froca.initializedPromise;
|
||||
|
||||
this.children = [];
|
||||
|
||||
const visibleLaunchersRoot = await froca.getNote('lbVisibleLaunchers', true);
|
||||
|
|
|
@ -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;
|
Loading…
Reference in a new issue