mirror of https://github.com/TriliumNext/Notes
widgetized standard toolbar
zadam
parent
209b1610f6
commit
f98a20928c
@ -0,0 +1,36 @@
|
|||||||
|
import BasicWidget from "./basic_widget.js";
|
||||||
|
import utils from "../services/utils.js";
|
||||||
|
import keyboardActionService from "../services/keyboard_actions.js";
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<div class="history-navigation">
|
||||||
|
<style>
|
||||||
|
.history-navigation {
|
||||||
|
margin: 0 15px 0 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<a title="Go to previous note." class="history-back-button icon-action bx bx-left-arrow-circle"></a>
|
||||||
|
|
||||||
|
<a title="Go to next note." class="history-forward-button icon-action bx bx-right-arrow-circle"></a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default class HistoryNavigationWidget extends BasicWidget {
|
||||||
|
render() {
|
||||||
|
if (!utils.isElectron()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
|
||||||
|
this.$widget.find(".history-back-button").on('click', window.history.back);
|
||||||
|
this.$widget.find(".history-forward-button").on('click', window.history.forward);
|
||||||
|
|
||||||
|
// FIXME: does not belong here
|
||||||
|
keyboardActionService.setGlobalActionHandler("BackInNoteHistory", window.history.back);
|
||||||
|
keyboardActionService.setGlobalActionHandler("ForwardInNoteHistory", window.history.forward);
|
||||||
|
|
||||||
|
return this.$widget;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import BasicWidget from "./basic_widget.js";
|
||||||
|
|
||||||
|
export default class HorizontalFlexContainer extends BasicWidget {
|
||||||
|
constructor(appContext, widgets) {
|
||||||
|
super(appContext);
|
||||||
|
|
||||||
|
this.childWidgets = widgets;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.$widget = $(`<div style="display: flex; flex-direction: row;">`);
|
||||||
|
|
||||||
|
for (const widget of this.childWidgets) {
|
||||||
|
this.$widget.append(widget.render());
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.$widget;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import BasicWidget from "./basic_widget.js";
|
||||||
|
import HistoryNavigationWidget from "./history_navigation.js";
|
||||||
|
import keyboardActionService from "../services/keyboard_actions.js";
|
||||||
|
import protectedSessionService from "../services/protected_session.js";
|
||||||
|
|
||||||
|
const JUMP_TO_NOTE = "../dialogs/jump_to_note.js";
|
||||||
|
const RECENT_CHANGES = "../dialogs/recent_changes.js";
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<div class="standard-top-widget">
|
||||||
|
<style>
|
||||||
|
.standard-top-widget {
|
||||||
|
background-color: var(--header-background-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standard-top-widget button {
|
||||||
|
padding: 1px 5px 1px 5px;
|
||||||
|
font-size: smaller;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standard-top-widget button.btn-sm .bx {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standard-top-widget button:hover {
|
||||||
|
border-color: var(--button-border-color) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div style="flex-grow: 100; display: flex;">
|
||||||
|
<button class="btn btn-sm jump-to-note-dialog-button" data-kb-action="JumpToNote">
|
||||||
|
<span class="bx bx-crosshair"></span>
|
||||||
|
Jump to note
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-sm recent-changes-button" data-kb-action="ShowRecentChanges">
|
||||||
|
<span class="bx bx-history"></span>
|
||||||
|
|
||||||
|
Recent changes
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-sm enter-protected-session-button"
|
||||||
|
title="Enter protected session to be able to find and view protected notes">
|
||||||
|
<span class="bx bx-log-in"></span>
|
||||||
|
|
||||||
|
Enter protected session
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-sm leave-protected-session-button"
|
||||||
|
title="Leave protected session so that protected notes are not accessible any more."
|
||||||
|
style="display: none;">
|
||||||
|
<span class="bx bx-log-out"></span>
|
||||||
|
|
||||||
|
Leave protected session
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="plugin-buttons"></div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
export default class StandardTopWidget extends BasicWidget {
|
||||||
|
render() {
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
|
||||||
|
const historyNavigationWidget = new HistoryNavigationWidget(this.appContext);
|
||||||
|
|
||||||
|
this.$widget.prepend(historyNavigationWidget.render());
|
||||||
|
|
||||||
|
const showJumpToNoteDialog = () => import(JUMP_TO_NOTE).then(d => d.showDialog());
|
||||||
|
this.$widget.find(".jump-to-note-dialog-button").on('click', showJumpToNoteDialog);
|
||||||
|
|
||||||
|
const showRecentChanges = () => import(RECENT_CHANGES).then(d => d.showDialog());
|
||||||
|
this.$widget.find(".recent-changes-button").on('click', showRecentChanges);
|
||||||
|
|
||||||
|
// FIXME
|
||||||
|
keyboardActionService.setGlobalActionHandler("JumpToNote", showJumpToNoteDialog);
|
||||||
|
keyboardActionService.setGlobalActionHandler("ShowRecentChanges", showRecentChanges);
|
||||||
|
|
||||||
|
this.$widget.find(".enter-protected-session-button").on('click', protectedSessionService.enterProtectedSession);
|
||||||
|
this.$widget.find(".leave-protected-session-button").on('click', protectedSessionService.leaveProtectedSession);
|
||||||
|
|
||||||
|
return this.$widget
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue