cast1e
/
wallitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

titlebar-style

master
cast1e 2024-10-16 21:12:46 +08:00
parent b8f1b81c0f
commit be030c2ae9
4 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wallitor-gui/src/App.vue
View File

@ -16,6 +16,6 @@ isDarkTheme.addEventListener('change', (event) => {
</script> </script>
<template> <template>
<title-bar mode="win"></title-bar> <title-bar mode="mac"></title-bar>
<router-view></router-view> <router-view></router-view>
</template> </template>

71
wallitor-gui/src/components/TitleBar.vue
View File

@ -1,45 +1,33 @@
<template> <template>
<div data-tauri-drag-region class="titlebar colbox"> <div data-tauri-drag-region class="titlebar colbox">
<template v-if="mode == 'mac'">
<div class="titlebar-button-wrapper colbox">
<div class="titlebar-button" id="titlebar-minimize" @click="minimize">
<svg-icon name="window-minimize" color="red"></svg-icon>
</div>
<div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
<template v-if="maximized">
<svg-icon name="window-maximized"></svg-icon>
</template>
<template v-else>
<svg-icon name="window-maximize" width="13px"></svg-icon>
</template>
</div>
<div class="titlebar-button" id="titlebar-close" @click="close">
<svg-icon name="window-close"></svg-icon>
</div>
</div>
</template>
<div class="titlebar-icon-wrapper colbox"> <div class="titlebar-icon-wrapper colbox">
<template v-if="mode == 'mac'">
<div class="titlebar-button titlebar-close button-style-mac" @click="close"></div>
<div class="titlebar-button titlebar-minimize button-style-mac" @click="minimize"></div>
<div class="titlebar-button titlebar-maximize button-style-mac" @click="toggleMaximize"></div>
</template>
<img src="@/assets/vw.png" class="titlebar-icon"> <img src="@/assets/vw.png" class="titlebar-icon">
<div class="titlebar-icon-title"> <div class="titlebar-icon-title">
Wallitor Wallitor
</div> </div>
</div> </div>
<template v-if="mode == 'win'">
<div class="titlebar-button-wrapper colbox"> <div class="titlebar-button-wrapper colbox">
<div class="titlebar-button" id="titlebar-settings" @click="openSettings"> <div class="titlebar-button" id="titlebar-settings" @click="openSettings">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="setting" :size="button_size_default"></svg-icon> <svg-icon name="setting" :size="button_size_default"></svg-icon>
</div> </div>
</div> </div>
<div class="titlebar-button" id="titlebar-minimize" @click="minimize"> <template v-if="mode == 'win'">
<div class="titlebar-button titlebar-minimize button-style-win" @click="minimize">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="window-minimize" :size="button_size_default"></svg-icon> <svg-icon name="window-minimize" :size="button_size_default"></svg-icon>
</div> </div>
</div> </div>
<div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize"> <div class="titlebar-button titlebar-maximize button-style-win" @click="toggleMaximize">
<template v-if="maximized"> <template v-if="maximized">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="window-maximized" :size="button_size_alter"></svg-icon> <svg-icon name="window-maximized button-style-win" :size="button_size_alter"></svg-icon>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -48,14 +36,14 @@
</div> </div>
</template> </template>
</div> </div>
<div class="titlebar-button" id="titlebar-close" @click="close"> <div class="titlebar-button titlebar-close button-style-win" @click="close">
<div class="titlebar-button-rect"> <div class="titlebar-button-rect">
<svg-icon name="window-close" :size="button_size_default"></svg-icon> <svg-icon name="window-close" :size="button_size_default"></svg-icon>
</div> </div>
</div> </div>
</div>
</template> </template>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -140,7 +128,7 @@ function openSettings() {
z-index: 300; z-index: 300;
} }
.titlebar-button { .button-style-win.titlebar-button {
height: 30px; height: 30px;
width: 30px; width: 30px;
padding-top: 3px; padding-top: 3px;
@ -157,21 +145,44 @@ function openSettings() {
justify-content: center; justify-content: center;
} }
#titlebar-settings { #titlebar-settings{
cursor: pointer;
}
.button-style-win#titlebar-settings {
padding-left: 5px; padding-left: 5px;
} }
#titlebar-close { .button-style-win.titlebar-close {
padding-right: 5px; padding-right: 5px;
} }
#titlebar-settings .titlebar-button-rect:hover, #titlebar-settings .titlebar-button-rect:hover,
#titlebar-minimize .titlebar-button-rect:hover, .button-style-win.titlebar-minimize .titlebar-button-rect:hover,
#titlebar-maximize .titlebar-button-rect:hover { .button-style-win.titlebar-maximize .titlebar-button-rect:hover {
background-color: var(--bg-hover-fill); background-color: var(--bg-hover-fill);
} }
#titlebar-close .titlebar-button-rect:hover { .button-style-win.titlebar-close .titlebar-button-rect:hover {
background-color: var(--bg-hover-fill-close); background-color: var(--bg-hover-fill-close);
} }
.button-style-mac.titlebar-button{
width: 14px;
height: 14px;
border-radius: 100%;
margin-left: 6px;
}
.button-style-mac.titlebar-minimize {
background-color: red;
}
.button-style-mac.titlebar-maximize {
background-color: green;
margin-right: 6px;
}
.button-style-mac.titlebar-close {
background-color: yellow;
}
</style> </style>

3
wallitor-gui/src/store/index.ts
View File

@ -23,6 +23,9 @@ export const store = createStore({
return { return {
wpList: [] as Cell[], wpList: [] as Cell[],
videoWindow: null as VideoWindow, videoWindow: null as VideoWindow,
settings:{
}
} }
}, },
mutations: { mutations: {

6
wallitor-gui/src/ts/types.d.ts vendored
View File

@ -44,3 +44,9 @@ interface EditInfo {
description: string description: string
mute: boolean mute: boolean
} }
export interface settings{
title_bar:"win"|"mac",
auto_start:boolean,
auto_pause:boolean
}