GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-07 05:02:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): add rotate for pin icon of title bar and backgroud color for button

Browse Source
This commit is contained in:
Kuingsmile
2026-01-01 16:05:48 +08:00
parent 760ab51d7b
commit fa6f2a9070
1 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/renderer/components/ui/TitleBar.vue
View File

@@ -3,7 +3,7 @@
<div class="title-bar-content"> <div class="title-bar-content">
<div v-if="osGlobal !== 'darwin'" class="title-left"> <div v-if="osGlobal !== 'darwin'" class="title-left">
<div class="app-icon"> <div class="app-icon">
<img :src="defaultLogo" alt="App Icon" width="20" height="20" /> <img :src="defaultLogo" width="20" height="20" />
</div> </div>
</div> </div>
@@ -19,13 +19,8 @@
<div class="title-right"> <div class="title-right">
<div class="window-controls"> <div class="window-controls">
<button <button class="control-button pin-button" :title="$t('titleBar.alwaysOnTop')" @click="setAlwaysOnTop">
class="control-button pin-button" <PinIcon :size="14" class="pin-icon" :class="{ active: isAlwaysOnTop }" />
:class="{ active: isAlwaysOnTop }"
:title="$t('titleBar.alwaysOnTop')"
@click="setAlwaysOnTop"
>
<PinIcon :color="isAlwaysOnTop ? '#CE6769' : '#6B7280'" :size="14" />
</button> </button>
<template v-if="osGlobal !== 'darwin'"> <template v-if="osGlobal !== 'darwin'">
<button class="control-button minimize-button" :title="$t('titleBar.minimize')" @click="minimizeWindow"> <button class="control-button minimize-button" :title="$t('titleBar.minimize')" @click="minimizeWindow">
@@ -61,17 +56,9 @@ function setAlwaysOnTop() {
window.electron.sendRPC(IRPCActionType.MAIN_WINDOW_ON_TOP) window.electron.sendRPC(IRPCActionType.MAIN_WINDOW_ON_TOP)
} }
function minimizeWindow() { const minimizeWindow = () => window.electron.sendRPC(IRPCActionType.MINIMIZE_WINDOW)
window.electron.sendRPC(IRPCActionType.MINIMIZE_WINDOW) const openMiniWindow = () => window.electron.sendRPC(IRPCActionType.OPEN_MINI_WINDOW)
} const closeWindow = () => window.electron.sendRPC(IRPCActionType.CLOSE_WINDOW)
function openMiniWindow() {
window.electron.sendRPC(IRPCActionType.OPEN_MINI_WINDOW)
}
function closeWindow() {
window.electron.sendRPC(IRPCActionType.CLOSE_WINDOW)
}
const uploadProcessHandler = (data: { progress: number }) => { const uploadProcessHandler = (data: { progress: number }) => {
isShowprogress.value = data.progress !== 100 && data.progress !== 0 isShowprogress.value = data.progress !== 100 && data.progress !== 0
@@ -212,10 +199,22 @@ onBeforeUnmount(() => {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-surface-elevated);
} }
.pin-icon {
color: #6b7280;
}
.pin-icon.active {
rotate: 90deg;
color: #ce6769;
}
.pin-button.active { .minimize-button:hover {
color: var(--color-accent); color: white;
background: var(--color-accent) 20; background: color-mix(in srgb, var(--color-warning), transparent 15%);
}
.mini-button:hover {
color: white;
background: color-mix(in srgb, var(--color-success), transparent 15%);
} }
.close-button:hover { .close-button:hover {