Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Title bar option improvements + native title bar option for mac #854

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
12 changes: 7 additions & 5 deletions src/main/mainWindow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -389,11 +389,11 @@ function createMainWindow() {
removeSettingsListeners();
removeVencordSettingsListeners();

const { staticTitle, transparencyOption, enableMenu, customTitleBar } = Settings.store;
const { staticTitle, transparencyOption, enableMenu, titleBar } = Settings.store;

const { frameless, transparent } = VencordSettings.store;

const noFrame = frameless === true || customTitleBar === true;
const noFrame = frameless === true || titleBar === "hidden";

const win = (mainWin = new BrowserWindow({
show: false,
Expand All @@ -419,18 +419,20 @@ function createMainWindow() {
backgroundMaterial: transparencyOption
}),
// Fix transparencyOption for custom discord titlebar
...(customTitleBar &&
...(titleBar === "custom" &&
transparencyOption &&
transparencyOption !== "none" && {
transparent: true
}),
...(staticTitle && { title: "Vesktop" }),
...(process.platform === "darwin" && getDarwinOptions()),
...(process.platform === "darwin" && titleBar !== "shown" && getDarwinOptions()), // Show/Hide titlebar depending on settings on Mac
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getDarwinOptions() is responsible for more than just the titlebar so this will break various features

...getWindowBoundsOptions(),
autoHideMenuBar: enableMenu
}));
win.setMenuBarVisibility(false);
if (process.platform === "darwin" && customTitleBar) win.setWindowButtonVisibility(false);
if (process.platform === "darwin" && titleBar === "custom") {
win.setWindowButtonVisibility(false); // Hide the traffic lights
}

win.on("close", e => {
const useTray = !isDeckGameMode && Settings.store.minimizeToTray !== false && Settings.store.tray !== false;
Expand Down
2 changes: 1 addition & 1 deletion src/main/utils/popout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const DEFAULT_POPOUT_OPTIONS: BrowserWindowConstructorOptions = {
backgroundColor: "#2f3136",
minWidth: MIN_POPOUT_WIDTH,
minHeight: MIN_POPOUT_HEIGHT,
frame: Settings.store.customTitleBar !== true,
frame: Settings.store.titleBar !== "custom",
titleBarStyle: process.platform === "darwin" ? "hidden" : undefined,
trafficLightPosition:
process.platform === "darwin"
Expand Down
17 changes: 8 additions & 9 deletions src/renderer/components/settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { isMac, isWindows } from "renderer/utils";
import { AutoStartToggle } from "./AutoStartToggle";
import { DiscordBranchPicker } from "./DiscordBranchPicker";
import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
import { TitleBarPicker } from "./TitleBarPicker";
import { VencordLocationPicker } from "./VencordLocationPicker";
import { WindowsTransparencyControls } from "./WindowsTransparencyControls";

Expand All @@ -39,13 +40,8 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
defaultValue: true
}
],
"User Interface": [
{
key: "customTitleBar",
title: "Discord Titlebar",
description: "Use Discord's custom title bar instead of the native system one. Requires a full restart.",
defaultValue: isWindows
},
"Title Bar": [
TitleBarPicker,
{
key: "staticTitle",
title: "Static Title",
Expand All @@ -57,8 +53,11 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
title: "Enable Menu Bar",
description: "Enables the application menu bar. Press ALT to toggle visibility.",
defaultValue: false,
disabled: () => Settings.store.customTitleBar ?? isWindows
},
invisible: () => isMac,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how come?

disabled: () => Settings.store.titleBar === "custom" || isWindows
}
],
"User Interface": [
{
key: "splashTheming",
title: "Splash theming",
Expand Down
36 changes: 36 additions & 0 deletions src/renderer/components/settings/TitleBarPicker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/*
* SPDX-License-Identifier: GPL-3.0
* Vesktop, a desktop app aiming to give you a snappier Discord Experience
* Copyright (c) 2023 Vendicated and Vencord contributors
*/

import { Margins } from "@vencord/types/utils";
import { Forms, Select } from "@vencord/types/webpack/common";
import { isMac, isWindows } from "renderer/utils";

import { SettingsComponent } from "./Settings";

export const TitleBarPicker: SettingsComponent = ({ settings }) => {
return (
<>
<Forms.FormText className={Margins.bottom8}>
Customize apps title bar. Pick Discord if you want to use Discord's custom title bar. Requires a full
restart
</Forms.FormText>
Comment on lines +16 to +19
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't think this should be necessary if you just label the options better


<Select
placeholder="Hidden"
options={[
...(isMac ? [{ label: "Hidden", value: "hidden", default: isMac }] : []),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this is what this setting means?

Suggested change
...(isMac ? [{ label: "Hidden", value: "hidden", default: isMac }] : []),
...(isMac ? [{ label: "Hidden with inset traffic light buttons", value: "hidden", default: isMac }] : []),

{ label: "Native", value: "shown" },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{ label: "Native", value: "shown" },
{ label: "Native System Titlebar", value: "shown" },

{ label: "Discord", value: "custom", default: isWindows }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{ label: "Discord", value: "custom", default: isWindows }
{ label: "Custom Discord titlebar", value: "custom", default: isWindows }

]}
closeOnSelect={true}
select={v => (settings.titleBar = v)}
isSelected={v => v === settings.titleBar}
serialize={s => s}
/>
<Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
</>
);
};
2 changes: 1 addition & 1 deletion src/renderer/patches/platformClass.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ addPatch({
],

getPlatformClass() {
if (Settings.store.customTitleBar) return "platform-win";
if (Settings.store.titleBar !== "hidden") return "platform-win";
if (isMac) return "platform-osx";
return "platform-web";
}
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/patches/windowsTitleBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Settings } from "renderer/settings";

import { addPatch } from "./shared";

if (Settings.store.customTitleBar)
if (Settings.store.titleBar === "custom")
addPatch({
patches: [
{
Expand Down
2 changes: 1 addition & 1 deletion src/shared/settings.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface Settings {
appBadge?: boolean;
disableMinSize?: boolean;
clickTrayToShowHide?: boolean;
customTitleBar?: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when changing settings names, old settings should be migrated to the new key so users won't have their choice reset. you will likely have to do this in the main process so it applies immediately

titleBar?: "hidden" | "shown" | "custom";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the values are kinda misleading

Suggested change
titleBar?: "hidden" | "shown" | "custom";
titleBar?: "inset" | "system" | "discord";


splashTheming?: boolean;
splashColor?: string;
Expand Down