gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 19:19:03 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

zoom buttons in main menu, closes #2894

Browse Source
This commit is contained in:
zadam 2022-09-14 23:28:29 +02:00
parent 135064a18f
commit e7ef1b86cc
1 changed files with 64 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/public/app/widgets/buttons/global_menu.js
View File

@ -35,13 +35,31 @@ const TPL = `
bottom: -30px; bottom: -30px;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
} }
.update-to-latest-version-button { .update-to-latest-version-button {
display: none; display: none;
} }
.global-menu .zoom-buttons a {
display: inline-block;
border: 1px solid var(--button-border-color);
border-radius: 3px;
padding: 3px;
margin-left: 3px;
color: var(--button-text-color);
background-color: var(--button-background-color);
}
.global-menu .zoom-buttons a:hover {
text-decoration: none;
}
.global-menu .zoom-state {
margin-left: 5px;
margin-right: 5px;
}
</style> </style>
<button type="button" data-toggle="dropdown" data-placement="right" <button type="button" data-toggle="dropdown" data-placement="right"
@ -92,10 +110,29 @@ const TPL = `
<kbd data-command="reloadFrontendApp"></kbd> <kbd data-command="reloadFrontendApp"></kbd>
</a> </a>
<span class="zoom-container dropdown-item" style="display: flex; flex-direction: row; justify-content: space-between;">
<div>
<span class="bx bx-empty"></span>
Zoom
</div>
<div class="zoom-buttons">
<a data-trigger-command="toggleFullscreen" title="Toggle fullscreen" class="bx bx-expand-alt"></a>
&nbsp;
<a data-trigger-command="zoomOut" title="Zoom out" class="bx bx-minus"></a>
<span class="zoom-state"></span>
<a data-trigger-command="zoomIn" title="Zoom in" class="bx bx-plus"></a>
</div>
</span>
<a class="dropdown-item" data-trigger-command="toggleFullscreen"> <a class="dropdown-item" data-trigger-command="toggleFullscreen">
<span class="bx bx-empty"></span> <span class="bx bx-empty"></span>
Toggle fullscreen Toggle fullscreen
<kbd data-command="toggleFullscreen"></kbd> <kbd ></kbd>
</a> </a>
<a class="dropdown-item" data-trigger-command="showHelp"> <a class="dropdown-item" data-trigger-command="showHelp">
@ -145,9 +182,13 @@ export default class GlobalMenuWidget extends BasicWidget {
this.$widget.find(".open-dev-tools-button").toggle(isElectron); this.$widget.find(".open-dev-tools-button").toggle(isElectron);
this.$widget.find(".switch-to-mobile-version-button").toggle(!isElectron); this.$widget.find(".switch-to-mobile-version-button").toggle(!isElectron);
this.$widget.on('click', '.dropdown-item', e => {
if ($(e.target).parent(".zoom-buttons")) {
return;
}
this.$widget.on('click', '.dropdown-item', this.$widget.find("[data-toggle='dropdown']").dropdown('toggle');
() => this.$widget.find("[data-toggle='dropdown']").dropdown('toggle')); });
this.$widget.find(".global-menu-button-update-available").append( this.$widget.find(".global-menu-button-update-available").append(
this.updateAvailableWidget.render() this.updateAvailableWidget.render()
@ -155,11 +196,30 @@ export default class GlobalMenuWidget extends BasicWidget {
this.$updateToLatestVersionButton = this.$widget.find(".update-to-latest-version-button"); this.$updateToLatestVersionButton = this.$widget.find(".update-to-latest-version-button");
if (!utils.isElectron()) {
this.$widget.find(".zoom-container").hide();
}
this.$zoomState = this.$widget.find(".zoom-state");
this.$widget.on('show.bs.dropdown', () => this.updateZoomState());
this.$widget.find(".zoom-buttons").on("click",
// delay to wait for the actual zoom change
() => setTimeout(() => this.updateZoomState(), 300)
);
this.updateVersionStatus(); this.updateVersionStatus();
setInterval(() => this.updateVersionStatus(), 8 * 60 * 60 * 1000); setInterval(() => this.updateVersionStatus(), 8 * 60 * 60 * 1000);
} }
updateZoomState() {
const zoomFactor = utils.dynamicRequire('electron').webFrame.getZoomFactor();
const zoomPercent = Math.round(zoomFactor * 100);
this.$zoomState.text(zoomPercent + "%");
}
async updateVersionStatus() { async updateVersionStatus() {
if (options.get("checkForUpdates") !== 'true') { if (options.get("checkForUpdates") !== 'true') {
return; return;