mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
97 lines
3.3 KiB
JavaScript
97 lines
3.3 KiB
JavaScript
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;
|