wip

Author: ShGKme

src/app/AppConfig.ts

@@ -31,7 +31,6 @@ function getAppConfigFilePath() {
  * Stored in the application data directory.
  */
 export type AppConfig = {
-	vibrancy: string | null
 	// ----------------
 	// General settings
 	// ----------------
@@ -108,7 +107,6 @@ export type AppConfigKey = keyof AppConfig
  * Get the default config
  */
 const defaultAppConfig: AppConfig = {
-	vibrancy: null,
 	launchAtStartup: false,
 	theme: 'default',
 	systemTitleBar: isLinux,

src/talk/renderer/DesktopHeader.vue

@@ -68,7 +68,7 @@ onUnmounted(() => {
 
 			<div class="spacer" />
 
-			<div class="header__item" data-theme-dark>
+			<div class="header__item" :data-theme-dark="!OS.isMac ? true : undefined">
 				<MainMenu />
 			</div>
 
@@ -95,10 +95,18 @@ onUnmounted(() => {
 	height: 100%;
 	/* Save space for native title bar buttons */
 	x-margin-inline-start: env(titlebar-area-x, 0);
-	margin-inline-start: 300px;
+	margin-inline-start: calc(300px - 1px);
 	background-color: var(--color-main-background-macos);
 	x-width: env(titlebar-area-width, 100%);
-	width: calc(100% - 300px);
+	width: calc(100% - 300px + 1);
+	border-inline-start: 1px solid var(--color-border-macos);
+	border-block-end: 1px solid var(--color-border-macos);
+	transition: margin-inline-start var(--animation-quick) ease;
+}
+
+body:has(#app-navigation-vue[aria-hidden="true"]) .header__inner {
+	margin-inline-start: 0;
+	border-inline-start: none;
 }
 
 .header__item {

src/talk/renderer/Settings/DesktopSettingsSection.vue

@@ -79,26 +79,6 @@ 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
  */
@@ -121,8 +101,6 @@ 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') }}

src/talk/renderer/assets/styles.css

@@ -29,9 +29,22 @@ html, body {
 	background: none !important;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-border-macos: #000000;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--color-border-macos: #DCDCDC;
+	}
+}
+
 .app-navigation {
 	background: none !important;
 	backdrop-filter: none !important;
+	border-inline-end: 1px solid var(--color-border-macos) !important;
 }
 
 .list-item {
@@ -46,7 +59,7 @@ html, body {
 :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);
+	--color-main-background-macos: rgb(from var(--color-main-background) r g b / 0.5);
 
 }
 

src/talk/renderer/components/MainMenu.vue

@@ -27,14 +27,16 @@ const talkWebLink = computed(() => generateUrl(talkRouter.value?.currentRoute?.f
 const showHelp = () => window.TALK_DESKTOP.showHelp()
 const reload = () => window.location.reload()
 const openSettings = () => window.OCA.Talk.Settings.open()
+
+const OS = window.systemInfo
 </script>
 
 <template>
 	<NcActions :aria-label="t('talk_desktop', 'Menu')"
 		type="tertiary-no-background"
 		container="body">
 		<template #icon>
-			<IconMenu :size="20" fill-color="var(--color-header-contrast)" />
+			<IconMenu :size="20" :fill-color="!OS.isMac ? 'var(--color-header-contrast)' : undefined" />
 		</template>
 
 		<NcActionLink :href="talkWebLink" target="_blank">

src/talk/talk.window.js

@@ -13,7 +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')
+const {isMac} = require('../app/system.utils')
 
 /**
  * @return {import('electron').BrowserWindow}
@@ -24,13 +24,12 @@ function createTalkWindow() {
 	const talkWindowOptions = {
 		transparent: true,
 		frame: false,
-		vibrancy: null,
-
+		vibrancy: 'sidebar',
 		...getScaledWindowMinSize({
 			minWidth: 600,
 			minHeight: 400,
 		}),
-		//backgroundColor: '#00679E',
+		backgroundColor: !isMac ? '#00679E' : undefined,
 		autoHideMenuBar: true,
 		webPreferences: {
 			preload: TALK_WINDOW_PRELOAD_WEBPACK_ENTRY,
@@ -60,10 +59,6 @@ function createTalkWindow() {
 		show: false,
 	})
 
-	onAppConfigChange('vibrancy', (value) => {
-		window.setVibrancy(value)
-	})
-
 	// TODO: return it on release
 	/*
 	if (process.env.NODE_ENV === 'production') {
@@ -86,6 +81,8 @@ function createTalkWindow() {
 
 	setupTray(window)
 
+	window.setVibrancy('sidebar')
+
 	window.loadURL(TALK_WINDOW_WEBPACK_ENTRY)
 
 	return window