github/VRCX
1
1
Fork 0
mirror of https://github.com/vrcx-team/VRCX.git synced 2026-04-06 00:32:02 +02:00
Code Issues 51 Packages Projects Releases Wiki Activity

Add custom macOS-style title bar (#1404)

Browse Source 
Introduces a custom MacOSTitleBar component for macOS, updates the Electron window to use 'hiddenInset' titleBarStyle, and adjusts App.vue to conditionally render the new title bar and add appropriate padding. This improves the native look and feel on macOS platforms.
This commit is contained in:
玺朽
2025-10-15 01:22:23 +08:00
committed by GitHub
parent 2be998a270
commit bed76e0ad8
3 changed files with 131 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src-electron/main.js
View File

@@ -316,6 +316,7 @@ function createWindow() {
height,
icon: path.join(rootDir, 'VRCX.png'),
autoHideMenuBar: true,
titleBarStyle: 'hiddenInset',
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}

15
src/App.vue
View File

@@ -1,9 +1,13 @@
<template>
<!DOCTYPE html>
<el-config-provider :locale="currentLocale">
<!-- macOS Custom Title Bar -->
<MacOSTitleBar></MacOSTitleBar>
<div
id="x-app"
class="x-app"
:class="{ 'with-macos-titlebar': isMacOS }"
ondragenter="event.preventDefault()"
ondragover="event.preventDefault()"
ondrop="event.preventDefault()">
@@ -106,6 +110,7 @@
import Login from './views/Login/Login.vue';
import NavMenu from './components/NavMenu.vue';
import MacOSTitleBar from './components/TitleBar/MacOSTitleBar.vue';
import Sidebar from './views/Sidebar/Sidebar.vue';
import Feed from './views/Feed/Feed.vue';
import GameLog from './views/GameLog/GameLog.vue';
@@ -148,6 +153,11 @@
console.log(`isLinux: ${LINUX}`);
// Simple macOS detection
const isMacOS = computed(() => {
return navigator.platform.indexOf('Mac') > -1;
});
const { locale } = useI18n();
initNoty();
@@ -200,4 +210,9 @@
:deep(.el-splitter-bar__dragger) {
width: 4px !important;
}
/* Add title bar spacing for macOS */
.x-app.with-macos-titlebar {
padding-top: 28px;
}
</style>

115
src/components/TitleBar/MacOSTitleBar.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div v-if="isMacOS" class="macos-title-bar">
<div class="title-bar-content">
<div class="traffic-lights-spacer"></div>
<div class="title-bar-center">
<span class="app-title">VRCX</span>
</div>
<div class="title-bar-right"></div>
</div>
</div>
</template>
<script setup>
import { computed, onMounted } from 'vue';
// Simple macOS detection
const isMacOS = computed(() => {
return navigator.platform.indexOf('Mac') > -1;
});
// Make title bar draggable
onMounted(() => {
if (isMacOS.value) {
const titleBar = document.querySelector('.macos-title-bar');
if (titleBar) {
titleBar.classList.add('draggable');
}
}
});
</script>
<style scoped>
.macos-title-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 28px;
z-index: 9999;
user-select: none;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
.macos-title-bar.draggable {
-webkit-app-region: drag;
}
.title-bar-content {
display: flex;
align-items: center;
height: 100%;
padding: 0 12px;
}
.traffic-lights-spacer {
width: 78px;
flex-shrink: 0;
}
.title-bar-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.app-title {
font-size: 13px;
font-weight: 600;
line-height: 1;
transition: all 0.2s ease;
}
.title-bar-right {
width: 78px;
flex-shrink: 0;
}
/* Light theme styles */
:global(html:not(.dark)) .macos-title-bar {
background-color: rgba(248, 248, 248, 0.8);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
:global(html:not(.dark)) .macos-title-bar .app-title {
color: rgba(29, 29, 31, 0.9);
}
/* Dark theme styles */
:global(html.dark) .macos-title-bar {
background-color: rgba(30, 30, 30, 0.8);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
:global(html.dark) .macos-title-bar .app-title {
color: rgba(245, 245, 247, 0.9);
}
/* Hover effects */
.macos-title-bar:hover {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
:global(html:not(.dark)) .macos-title-bar:hover {
background-color: rgba(248, 248, 248, 0.95);
}
:global(html.dark) .macos-title-bar:hover {
background-color: rgba(30, 30, 30, 0.95);
}
</style>