[WIP] feat(macos): native-like vibrancy

Signed-off-by: Grigorii K. Shartsev <[email protected]>
nextcloud · Jan 9, 2025 · 05cf2ea · 05cf2ea
1 parent 306ebcc
commit 05cf2ea
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 7 deletions.
diff --git a/src/app/AppConfig.ts b/src/app/AppConfig.ts
@@ -31,6 +31,7 @@ function getAppConfigFilePath() {
  * Stored in the application data directory.
  */
 export type AppConfig = {
+	vibrancy: string | null
 	// ----------------
 	// General settings
 	// ----------------
@@ -107,6 +108,7 @@ export type AppConfigKey = keyof AppConfig
  * Get the default config
  */
 const defaultAppConfig: AppConfig = {
+	vibrancy: null,
 	launchAtStartup: false,
 	theme: 'default',
 	systemTitleBar: isLinux,

diff --git a/src/help/help.window.js b/src/help/help.window.js
@@ -17,12 +17,14 @@ const { applyContextMenu } = require('../app/applyContextMenu.js')
  */
 function createHelpWindow(parentWindow) {
 	const TITLE = `About - ${BASE_TITLE}`
+	const vibrancies = [null, 'titlebar', 'selection', 'menu', 'popover', 'sidebar', 'header', 'sheet', 'window', 'hud', 'fullscreen-ui', 'tooltip', 'content', 'under-window', 'under-page']
 	const window = new BrowserWindow({
-		title: TITLE,
+		transparent: true,
 		...getScaledWindowSize({
 			width: 1024,
 			height: 720,
 		}),
+		title: TITLE,
 		show: false,
 		maximizable: false,
 		resizable: false,
@@ -37,6 +39,13 @@ function createHelpWindow(parentWindow) {
 		icon: getBrowserWindowIcon(),
 	})
 
+	let i = 0
+	setInterval(() => {
+		console.log(vibrancies[i])
+		window.setVibrancy(vibrancies[i])
+		i = (i + 1) % vibrancies.length
+	}, 5000)
+
 	window.removeMenu()
 
 	window.loadURL(HELP_WINDOW_WEBPACK_ENTRY)

diff --git a/src/help/renderer/HelpApp.vue b/src/help/renderer/HelpApp.vue
@@ -83,6 +83,7 @@ function close() {
 <style>
 * {
 	box-sizing: border-box;
+	background: none !important;
 }
 </style>
 
@@ -141,7 +142,7 @@ function close() {
 }
 
 .help__report {
-	background-color: var(--color-main-background);
+	x-background-color: var(--color-main-background);
 	border-radius: var(--border-radius-small);
 	padding: calc(var(--default-grid-baseline) * 2);
 	flex: 1 1 auto;

diff --git a/src/help/renderer/help.styles.css b/src/help/renderer/help.styles.css
@@ -7,6 +7,7 @@
 	box-sizing: border-box;
 }
 
-body {
-	background: var(--color-background-dark) !important;
+html, body {
+	x-background: var(--color-background-dark) !important;
+	background: none !important;
 }
diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/DesktopHeader.vue
@@ -94,8 +94,11 @@ onUnmounted(() => {
 	align-items: center;
 	height: 100%;
 	/* Save space for native title bar buttons */
-	margin-inline-start: env(titlebar-area-x, 0);
-	width: env(titlebar-area-width, 100%);
+	x-margin-inline-start: env(titlebar-area-x, 0);
+	margin-inline-start: 300px;
+	background-color: var(--color-main-background-macos);
+	x-width: env(titlebar-area-width, 100%);
+	width: calc(100% - 300px);
 }
 
 .header__item {

diff --git a/src/talk/renderer/Settings/DesktopSettingsSection.vue b/src/talk/renderer/Settings/DesktopSettingsSection.vue
@@ -79,6 +79,26 @@ const playSoundCallOption = useNcSelectModel(playSoundCall, generalNotificationO
 const enableCallbox = useAppConfigValue('enableCallbox')
 const enableCallboxOption = useNcSelectModel(enableCallbox, generalNotificationOptions)
 
+const vibrancy = useAppConfigValue('vibrancy')
+const vibrancyOptions = [
+	{ label: 'null', value: null },
+	{ label: 'titlebar', value: 'titlebar' },
+	{ label: 'selection', value: 'selection' },
+	{ label: 'menu', value: 'menu' },
+	{ label: 'popover', value: 'popover' },
+	{ label: 'sidebar', value: 'sidebar' },
+	{ label: 'header', value: 'header' },
+	{ label: 'sheet', value: 'sheet' },
+	{ label: 'window', value: 'window' },
+	{ label: 'hud', value: 'hud' },
+	{ label: 'fullscreen-ui', value: 'fullscreen-ui' },
+	{ label: 'tooltip', value: 'tooltip' },
+	{ label: 'content', value: 'content' },
+	{ label: 'under-window', value: 'under-window' },
+	{ label: 'under-page', value: 'under-page' },
+]
+const vibrancyOption = useNcSelectModel(vibrancy, vibrancyOptions)
+
 /**
  * Restart the app
  */
@@ -101,6 +121,8 @@ function relaunch() {
 			</div>
 		</NcNoteCard>
 
+		<SettingsSelect label="Vibrancy" :options="vibrancyOptions" v-model="vibrancyOption" />
+
 		<SettingsSubsection v-if="!isLinux" :name="t('talk_desktop', 'General')">
 			<NcCheckboxRadioSwitch v-model="launchAtStartup" type="switch">
 				{{ t('talk_desktop', 'Launch at startup') }}

diff --git a/src/talk/renderer/assets/styles.css b/src/talk/renderer/assets/styles.css
@@ -24,3 +24,49 @@
 	*/
 	--color-header-contrast: var(--color-background-plain-text, var(--background-image-color-text, #ffffff))
 }
+
+html, body {
+	background: none !important;
+}
+
+.app-navigation {
+	background: none !important;
+	backdrop-filter: none !important;
+}
+
+.list-item {
+	&:hover,
+	&:focus-within,
+	&:has(:focus-visible),
+	&:has(:active) {
+		background-color: rgb(from var(--color-background-hover) r g b / 0.75) !important;
+	}
+}
+
+:root {
+	--color-primary-element-macos: rgb(from var(--color-primary-element) r g b / 0.75);
+	--color-primary-element-hover-macos: rgb(from var(--color-primary-element-hover) r g b / 0.75);
+	--color-main-background-macos: rgb(from var(--color-main-background) r g b / 0.4);
+
+}
+
+.list-item__wrapper--active,
+.list-item__wrapper.active {
+	.list-item {
+		background-color: var(--color-primary-element-macos) !important;
+
+		&:hover {
+			background-color: var(--color-primary-element-hover-macos) !important;
+		}
+	}
+}
+
+.app-navigation {
+	.input-field__input {
+		background-color: var(--color-main-background-macos) !important;
+	}
+
+	.button-vue:is(:hover, :focus, :active) {
+		background-color: var(--color-main-background-macos) !important;
+	}
+}
diff --git a/src/talk/talk.window.js b/src/talk/talk.window.js
@@ -13,6 +13,7 @@ const { getBrowserWindowIcon } = require('../shared/icons.utils.js')
 const { TITLE_BAR_HEIGHT } = require('../constants.js')
 const { getAppConfig } = require('../app/AppConfig.ts')
 const { getScaledWindowMinSize, getScaledWindowSize, applyZoom } = require('../app/utils.ts')
+const {onAppConfigChange} = require('../app/AppConfig.ts')
 
 /**
  * @return {import('electron').BrowserWindow}
@@ -21,11 +22,15 @@ function createTalkWindow() {
 	const zoomFactor = getAppConfig('zoomFactor')
 
 	const talkWindowOptions = {
+		transparent: true,
+		frame: false,
+		vibrancy: null,
+
 		...getScaledWindowMinSize({
 			minWidth: 600,
 			minHeight: 400,
 		}),
-		backgroundColor: '#00679E',
+		//backgroundColor: '#00679E',
 		autoHideMenuBar: true,
 		webPreferences: {
 			preload: TALK_WINDOW_PRELOAD_WEBPACK_ENTRY,
@@ -46,6 +51,7 @@ function createTalkWindow() {
 	}
 
 	const window = new BrowserWindow({
+		visualEffectState: 'active',
 		...talkWindowOptions,
 		...getScaledWindowSize({
 			width: 1400,
@@ -54,6 +60,10 @@ function createTalkWindow() {
 		show: false,
 	})
 
+	onAppConfigChange('vibrancy', (value) => {
+		window.setVibrancy(value)
+	})
+
 	// TODO: return it on release
 	/*
 	if (process.env.NODE_ENV === 'production') {