Format custom menu plugin

This commit is contained in:
TC
2021-03-31 20:17:12 +02:00
parent 5671b99b7e
commit 36864b4c2f
3 changed files with 49 additions and 47 deletions

View File

@ -1,8 +1,8 @@
const { injectCSS } = require('../utils'); const { injectCSS } = require("../utils");
const { Menu } = require('electron'); const { Menu } = require("electron");
const path = require('path'); const path = require("path");
const electronLocalshortcut = require("electron-localshortcut"); const electronLocalshortcut = require("electron-localshortcut");
const config = require('../../config'); const config = require("../../config");
var { mainMenuTemplate } = require("../../menu"); var { mainMenuTemplate } = require("../../menu");
//override menu template for custom menu //override menu template for custom menu
@ -14,21 +14,21 @@ mainMenuTemplate = function (winHook) {
fixMenu(template); fixMenu(template);
//return as normal //return as normal
return template; return template;
} };
//win hook for fixing menu //win hook for fixing menu
let win; let win;
//check that menu doesn't get created twice //check that menu doesn't get created twice
let done = false; let done = false;
module.exports = winImport => { module.exports = (winImport) => {
win = winImport; win = winImport;
// css for custom scrollbar + disable drag area(was causing bugs) // css for custom scrollbar + disable drag area(was causing bugs)
injectCSS(win.webContents, path.join(__dirname, 'style.css')); injectCSS(win.webContents, path.join(__dirname, "style.css"));
win.on('ready-to-show', () => { win.on("ready-to-show", () => {
// (apparently ready-to-show is called twice) // (apparently ready-to-show is called twice)
if (done) { if (done) {
return return;
} }
done = true; done = true;
let template = mainMenuTemplate(win); let template = mainMenuTemplate(win);
@ -36,9 +36,9 @@ module.exports = winImport => {
Menu.setApplicationMenu(menu); Menu.setApplicationMenu(menu);
//register keyboard shortcut && hide menu if hideMenu is enabled //register keyboard shortcut && hide menu if hideMenu is enabled
if (config.get('options.hideMenu')) { if (config.get("options.hideMenu")) {
switchMenuVisibility(); switchMenuVisibility();
electronLocalshortcut.register(win, 'Esc', () => { electronLocalshortcut.register(win, "Esc", () => {
switchMenuVisibility(); switchMenuVisibility();
}); });
} }
@ -47,8 +47,8 @@ module.exports = winImport => {
let visible = true; let visible = true;
function switchMenuVisibility() { function switchMenuVisibility() {
visible=!visible; visible = !visible;
win.webContents.send('updateMenu',visible) win.webContents.send("updateMenu", visible);
} }
//go over each item in menu //go over each item in menu
@ -60,7 +60,7 @@ function fixMenu(template) {
fixMenu(item.submenu); fixMenu(item.submenu);
} }
//change onClick of checkbox+radio //change onClick of checkbox+radio
else if (item.type === 'checkbox' || item.type === 'radio') { else if (item.type === "checkbox" || item.type === "radio") {
let ogOnclick = item.click; let ogOnclick = item.click;
item.click = (itemClicked) => { item.click = (itemClicked) => {
ogOnclick(itemClicked); ogOnclick(itemClicked);
@ -107,5 +107,5 @@ function checkCheckbox(item) {
//check item //check item
item.checked = !item.checked; item.checked = !item.checked;
//update menu (closes it) //update menu (closes it)
win.webContents.send('updateMenu', true); win.webContents.send("updateMenu", true);
} }

View File

@ -1,15 +1,15 @@
const customTitlebar = require('custom-electron-titlebar'); const customTitlebar = require("custom-electron-titlebar");
const {remote, ipcRenderer} = require('electron'); const { remote, ipcRenderer } = require("electron");
module.exports = () => { module.exports = () => {
const myBar = new customTitlebar.Titlebar({ const myBar = new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#050505'), backgroundColor: customTitlebar.Color.fromHex("#050505"),
itemBackgroundColor: customTitlebar.Color.fromHex('#121212') itemBackgroundColor: customTitlebar.Color.fromHex("#121212"),
}); });
myBar.updateTitle(' '); myBar.updateTitle(" ");
document.title = 'Youtube Music'; document.title = "Youtube Music";
ipcRenderer.on('updateMenu', function (event, menu) { ipcRenderer.on("updateMenu", function (event, menu) {
if (menu) { if (menu) {
myBar.updateMenu(remote.Menu.getApplicationMenu()); myBar.updateMenu(remote.Menu.getApplicationMenu());
} else { } else {

View File

@ -1,21 +1,22 @@
/* increase font size for menu and menuItems */ /* increase font size for menu and menuItems */
.titlebar, .menubar-menu-container .action-label{ .titlebar,
font-size: 14px !important; .menubar-menu-container .action-label {
font-size: 14px !important;
} }
/* allow submenu's to show correctly */ /* allow submenu's to show correctly */
.menubar-menu-container{ .menubar-menu-container {
overflow-y: visible !important; overflow-y: visible !important;
} }
/* fixes scrollbar positioning relative to nav bar */ /* fixes scrollbar positioning relative to nav bar */
#nav-bar-background.ytmusic-app-layout { #nav-bar-background.ytmusic-app-layout {
right: 15px !important; right: 15px !important;
} }
/* remove window dragging for nav bar (conflict with titlebar drag) */ /* remove window dragging for nav bar (conflict with titlebar drag) */
ytmusic-nav-bar, ytmusic-nav-bar,
.tab-titleiron-icon, .tab-titleiron-icon,
ytmusic-pivot-bar-item-renderer { ytmusic-pivot-bar-item-renderer {
-webkit-app-region : unset; -webkit-app-region: unset;
} }
/* Move navBar downwards and make it opaque */ /* Move navBar downwards and make it opaque */
@ -28,34 +29,35 @@ ytmusic-search-box.ytmusic-nav-bar {
} }
.center-content.ytmusic-nav-bar { .center-content.ytmusic-nav-bar {
background: #030303; background: #030303;
} }
yt-page-navigation-progress, yt-page-navigation-progress,
#progress.yt-page-navigation-progress, #progress.yt-page-navigation-progress,
ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer, ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_]
#header.ytmusic-item-section-renderer,
ytmusic-header-renderer.ytmusic-search-page { ytmusic-header-renderer.ytmusic-search-page {
top: 90px !important; top: 90px !important;
} }
/* Custom scrollbar */ /* Custom scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
background-color: #030303; background-color: #030303;
-webkit-border-radius: 100px; -webkit-border-radius: 100px;
} }
/* hover effect for both scrollbar area, and scrollbar 'thumb' */ /* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover { ::-webkit-scrollbar:hover {
background-color: rgba(15, 15, 15, 0.699); background-color: rgba(15, 15, 15, 0.699);
} }
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */ /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical { ::-webkit-scrollbar-thumb:vertical {
background-clip: padding-box; background-clip: padding-box;
border: 2px solid rgba(0, 0, 0, 0); border: 2px solid rgba(0, 0, 0, 0);
background: rgb(49, 0, 0); background: rgb(49, 0, 0);
-webkit-border-radius: 100px; -webkit-border-radius: 100px;
} }
::-webkit-scrollbar-thumb:vertical:active { ::-webkit-scrollbar-thumb:vertical:active {
background: rgb(56, 0, 0); /* Some darker color when you click it */ background: rgb(56, 0, 0); /* Some darker color when you click it */
-webkit-border-radius: 100px; -webkit-border-radius: 100px;
} }