feat(electron): relocate pin to global menu

This commit is contained in:
Elian Doran 2024-12-01 03:02:03 +02:00
parent 01512152ea
commit bd890c49d5
No known key found for this signature in database
2 changed files with 22 additions and 112 deletions

View File

@ -143,6 +143,11 @@ const TPL = `
</div>
</span>
<li class="dropdown-item toggle-pin">
<span class="bx bx-pin"></span>
${t('title_bar_buttons.window-on-top')}
</li>
<div class="dropdown-divider zoom-container-separator"></div>
<li class="dropdown-item switch-to-mobile-version-button" data-trigger-command="switchToMobileVersion">
@ -294,6 +299,23 @@ export default class GlobalMenuWidget extends BasicWidget {
const isElectron = utils.isElectron();
this.$widget.find(".toggle-pin").toggle(isElectron);
if (isElectron) {
this.$widget.on("click", ".toggle-pin", (e) => {
const $el = $(e.target);
const remote = utils.dynamicRequire('@electron/remote');
const focusedWindow = remote.BrowserWindow.getFocusedWindow();
const isAlwaysOnTop = focusedWindow.isAlwaysOnTop()
if (isAlwaysOnTop) {
focusedWindow.setAlwaysOnTop(false)
$el.removeClass('active');
} else {
focusedWindow.setAlwaysOnTop(true);
$el.addClass('active');
}
});
}
this.$widget.find(".logout-button").toggle(!isElectron);
this.$widget.find(".logout-button-separator").toggle(!isElectron);

View File

@ -1,112 +0,0 @@
import BasicWidget from "./basic_widget.js";
import options from "../services/options.js";
import utils from "../services/utils.js";
import { t } from "../services/i18n.js";
const TPL = `
<div class="title-bar-buttons">
<style>
.title-bar-buttons {
flex-shrink: 0;
}
.title-bar-buttons div button {
border: none !important;
border-radius: 0;
background: none !important;
font-size: 150%;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.title-bar-buttons div:hover button {
background-color: var(--accented-background-color) !important;
}
.title-bar-buttons div {
display: inline-block;
height: 40px;
width: 40px;
}
.title-bar-buttons .top-btn.active{
background-color:var(--accented-background-color);
}
.title-bar-buttons .btn.focus, .title-bar-buttons .btn:focus {
box-shadow: none;
}
</style>
<!-- divs act as a hitbox for the buttons, making them clickable on corners -->
<div class="top-btn" title="${t("title_bar_buttons.window-on-top")}"><button class="btn bx bx-pin"></button></div>
<div class="minimize-btn"><button class="btn bx bx-minus"></button></div>
<div class="maximize-btn"><button class="btn bx bx-checkbox"></button></div>
<div class="close-btn"><button class="btn bx bx-x"></button></div>
</div>`;
export default class TitleBarButtonsWidget extends BasicWidget {
doRender() {
if (!utils.isElectron() || options.is('nativeTitleBarVisible')) {
return this.$widget = $('<div>');
}
this.$widget = $(TPL);
this.contentSized();
const $topBtn = this.$widget.find(".top-btn");
const $minimizeBtn = this.$widget.find(".minimize-btn");
const $maximizeBtn = this.$widget.find(".maximize-btn");
const $closeBtn = this.$widget.find(".close-btn");
// When the window is restarted, the window will not be reset when it is set to the top,
// so get the window status and set the icon background
setTimeout(() => {
const remote = utils.dynamicRequire('@electron/remote');
if (remote.BrowserWindow.getFocusedWindow()?.isAlwaysOnTop()) {
$topBtn.addClass('active');
}
}, 1000);
$topBtn.on('click', () => {
$topBtn.trigger('blur');
const remote = utils.dynamicRequire('@electron/remote');
const focusedWindow = remote.BrowserWindow.getFocusedWindow();
const isAlwaysOnTop = focusedWindow.isAlwaysOnTop()
if (isAlwaysOnTop) {
focusedWindow.setAlwaysOnTop(false)
$topBtn.removeClass('active');
} else {
focusedWindow.setAlwaysOnTop(true);
$topBtn.addClass('active');
}
});
$minimizeBtn.on('click', () => {
$minimizeBtn.trigger('blur');
const remote = utils.dynamicRequire('@electron/remote');
remote.BrowserWindow.getFocusedWindow().minimize();
});
$maximizeBtn.on('click', () => {
$maximizeBtn.trigger('blur');
const remote = utils.dynamicRequire('@electron/remote');
const focusedWindow = remote.BrowserWindow.getFocusedWindow();
if (focusedWindow.isMaximized()) {
focusedWindow.unmaximize();
} else {
focusedWindow.maximize();
}
});
$closeBtn.on('click', () => {
$closeBtn.trigger('blur');
const remote = utils.dynamicRequire('@electron/remote');
remote.BrowserWindow.getFocusedWindow().close();
});
}
}