feat(in-app-menu): add toggle-menu

This commit is contained in:
JellyBrick
2023-10-07 22:16:54 +09:00
parent 0bcfdbf39c
commit d45ca960b4
4 changed files with 35 additions and 18 deletions

View File

@ -2,8 +2,9 @@ import { ipcRenderer, Menu } from 'electron';
import { createPanel } from './menu/panel';
import logo from '../../assets/youtube-music.svg';
import logo from '../../assets/menu.svg';
import { isEnabled } from '../../config/plugins';
import config from '../../config';
function $<E extends Element = Element>(selector: string) {
return document.querySelector<E>(selector);
@ -12,11 +13,28 @@ function $<E extends Element = Element>(selector: string) {
const isMacOS = navigator.userAgent.includes('Macintosh');
export default () => {
let hideMenu = config.get('options.hideMenu');
const titleBar = document.createElement('title-bar');
const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
logo.classList.add('title-bar-icon');
const logoClick = () => {
hideMenu = !hideMenu;
let visibilityStyle: string;
if (hideMenu) {
visibilityStyle = 'hidden';
} else {
visibilityStyle = 'visible';
}
const menus = document.querySelectorAll<HTMLElement>('menu-button');
menus.forEach((menu) => {
menu.style.visibility = visibilityStyle;
});
};
logo.onclick = logoClick;
ipcRenderer.on('toggleMenu', logoClick);
if (!isMacOS) titleBar.appendChild(logo);
document.body.appendChild(titleBar);
@ -47,6 +65,9 @@ export default () => {
menu.append(menuItem.label);
titleBar.appendChild(menu);
if (hideMenu) {
menu.style.visibility = 'hidden';
}
});
};
updateMenu();

View File

@ -29,7 +29,7 @@ export const createPanel = (
} else {
const nativeImageIcon = typeof item.icon === 'string' ? nativeImage.createFromPath(item.icon) : item.icon;
const iconURL = nativeImageIcon?.toDataURL();
if (iconURL) iconWrapper.style.background = `url(${iconURL})`;
}
};
@ -37,7 +37,7 @@ export const createPanel = (
const radioGroups: [MenuItem, HTMLElement][] = [];
items.map((item) => {
if (item.type === 'separator') return panel.appendChild(document.createElement('menu-separator'));
const menu = document.createElement('menu-item');
const iconWrapper = document.createElement('menu-icon');
@ -48,7 +48,7 @@ export const createPanel = (
menu.addEventListener('click', async () => {
await ipcRenderer.invoke('menu-event', item.commandId);
const menuItem = await ipcRenderer.invoke('get-menu-by-id', item.commandId) as MenuItem | null;
if (menuItem) {
updateIconState(iconWrapper, menuItem);
@ -64,7 +64,7 @@ export const createPanel = (
}
}
});
if (item.type === 'radio') {
radioGroups.push([item, iconWrapper]);
}