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

✨ Feature(custom): optimize ui of several buttons

Browse Source
This commit is contained in:
Kuingsmile
2026-01-25 17:01:17 +08:00
parent d93d3243ae
commit 800c9be311
6 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/manage/pages/BucketPage.vue
View File

@@ -188,11 +188,13 @@
<!-- Sort Dropdown -->
<div class="relative">
<button
class="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-bg-secondary px-3 py-2 text-sm font-medium text-main hover:border-accent hover:bg-accent/10"
class="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-bg-secondary px-3 py-2 text-sm font-medium text-secondary hover:border-accent hover:bg-accent/10"
@click="sortDropdownOpen = !sortDropdownOpen"
>
<ArrowUpDownIcon class="action-icon" />
{{ t(`pages.manage.bucket.sort.${currentSortType}`) }}
<span class="text-sm font-medium text-secondary">
{{ t(`pages.manage.bucket.sort.${currentSortType}`) }}</span
>
<ChevronDownIcon class="action-icon" />
</button>
<div
@@ -251,7 +253,7 @@
<template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
<ChevronRightIcon v-if="index !== 0" class="h-[16px] w-[15px] shrink-0 text-accent" />
<button
class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary last:bg-accent/10 hover:bg-accent/10 hover:text-main"
@click="handleBreadcrumbClick(Number(index))"
>
{{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}

6
src/renderer/manage/pages/LogInPage.vue
View File

@@ -101,7 +101,7 @@
<div class="relative">
<button
class="flex cursor-pointer items-center gap-2 rounded-xl border-none bg-accent/5 p-2 text-sm text-secondary hover:text-main"
class="flex cursor-pointer items-center gap-2 rounded-xl border-none bg-accent/5 p-2 text-xs font-semibold text-secondary hover:bg-accent/30 hover:text-white"
@click="toggleConfigDetails(item.alias)"
>
<InfoIcon :size="14" />
@@ -198,14 +198,14 @@
</div>
<div class="grid grid-cols-2 gap-1.5 transition-all duration-fast ease-apple">
<button
class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-accent/30 text-secondary transition-all duration-fast ease-standard hover:scale-105 hover:border-accent hover:text-accent"
class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-accent/30 text-accent transition-all duration-fast ease-standard hover:scale-105 hover:bg-accent/30 hover:text-white"
:title="t('pages.uploaderConfig.edit')"
@click.stop="openEditPage(item.alias)"
>
<Pencil :size="14" />
</button>
<button
class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-border bg-danger/10 text-danger transition-all duration-fast ease-standard hover:scale-105 hover:border-danger hover:text-danger"
class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-border bg-danger/10 text-danger transition-all duration-fast ease-standard hover:scale-105 hover:bg-danger hover:text-white"
:title="t('pages.uploaderConfig.delete')"
@click.stop="() => handleConfigRemove(item.alias)"
>

4
src/renderer/manage/pages/ManageMain.vue
View File

@@ -144,7 +144,7 @@
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
<!-- Back to main card -->
<div
class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-success/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple"
class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-success/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple hover:border-accent"
@click="switchPicBed('main')"
>
<div class="mb-3 flex h-[40px] w-[40px] items-center justify-center">
@@ -161,7 +161,7 @@
<div
v-for="(config, alias) in allPicBedConfigure"
:key="String(alias)"
class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-border/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple [.active]:border-accent"
class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-border/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple hover:border-accent [.active]:border-accent"
:class="{ active: String(alias) === currentAlias }"
@click="switchPicBed(String(alias))"
>

6
src/renderer/manage/pages/css/BucketPage.css
View File

@@ -51,9 +51,9 @@
}
.file-action-button {
@apply flex justify-center items-center border-none rounded-sm p-1.5 w-[32px] h-[32px] text-secondary bg-bg-secondary transition-all duration-fast ease-apple cursor-pointer;
@apply hover:bg-accent/10 hover:text-main hover:-translate-y-px;
@apply hover:[.danger]:text-error hover:[.danger]:bg-error/10;
@apply flex justify-center items-center border-none rounded-sm p-1.5 w-[26px] h-[26px] text-secondary bg-bg-secondary transition-all duration-fast ease-apple cursor-pointer;
@apply hover:bg-accent/50 hover:text-white hover:-translate-y-px;
@apply hover:[.danger]:text-white hover:[.danger]:bg-error/50;
}
.action-icon {

6
src/renderer/pages/css/Gallery.css
View File

@@ -35,9 +35,9 @@
.icon-button {
@apply flex items-center justify-center border-none rounded-md w-[25px] h-[25px] text-secondary transition-all duration-fast ease-apple cursor-pointer;
@apply hover:text-main hover:-translate-y-px;
@apply [.copy-icon]:hover:text-warning [.copy-icon]:hover:bg-warning/10;
@apply [.edit-icon]:hover:text-success [.edit-icon]:hover:bg-success/10;
@apply [.delete-icon]:hover:text-error [.delete-icon]:hover:bg-error/10;
@apply [.copy-icon]:hover:text-white [.copy-icon]:hover:bg-warning/50;
@apply [.edit-icon]:hover:text-white [.edit-icon]:hover:bg-success/50;
@apply [.delete-icon]:hover:text-white [.delete-icon]:hover:bg-error/50;
}
.form-input {

2
src/renderer/pages/css/UploaderConfigPage.css
View File

@@ -3,5 +3,5 @@
@import "../../assets/css/utilities.css" reference;
.action-btn {
@apply flex justify-center items-center border border-border-secondary/80 rounded-md text-secondary transition-all duration-fast ease-standard w-[30px] h-[30px] cursor-pointer hover:border-accent hover:text-accent hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:[.danger]:border-danger hover:not-disabled:[.danger]:text-danger;
@apply flex justify-center items-center border border-border-secondary/80 rounded-md text-secondary transition-all duration-fast ease-standard w-[30px] h-[30px] cursor-pointer hover:bg-accent/30 hover:text-white hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:[.danger]:border-danger hover:not-disabled:[.danger]:bg-danger;
}