renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(settings): adjust the style of the upload wallpaper component

Browse Source
This commit is contained in:
Hakadao
2024-07-25 11:17:35 +08:00
parent a15cac3a54
commit 69e7dfda7e
1 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Settings/components/ChangeWallpaper.vue
View File

@@ -138,19 +138,36 @@ function handleRemoveCustomWallpaper() {
<div i-tabler:photo-off text="3xl $bew-text-3" />
</picture>
<!-- Upload wallpaper input -->
<input
ref="uploadWallpaperRef" type="file" accept="image/*" hidden
@change="handleUploadWallpaper"
>
<Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
<picture
aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
un-border="4 transparent" w-full
:class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === item.url : settings.searchPageWallpaper === item.url }"
@click="changeWallpaper(item.url)"
>
<img
:src="item.thumbnail || item.url"
:alt="item.name"
w-full h-full object-cover
class="img-no-error"
>
</picture>
</Tooltip>
<Tooltip placement="top" :content="settings.locallyUploadedWallpaper?.name || ''" aspect-video>
<!-- Upload wallpaper input -->
<input
ref="uploadWallpaperRef" type="file" accept="image/*"
hidden
@change="handleUploadWallpaper"
>
<picture
class="group"
:class="{ 'selected-wallpaper': isGlobal
? settings.wallpaper === settings.locallyUploadedWallpaper?.url
: settings.searchPageWallpaper === settings.locallyUploadedWallpaper?.url }"
aspect-video bg="$bew-theme-color-20" rounded="$bew-radius" overflow-hidden
aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
un-border="4 transparent" w-full
flex="~ items-center justify-center"
@click="changeWallpaper(settings.locallyUploadedWallpaper?.url || '')"
@@ -184,7 +201,7 @@ function handleRemoveCustomWallpaper() {
>
<div
i-tabler:photo-up
text="3xl $bew-theme-color"
text="3xl $bew-text-3"
/>
</div>
<img
@@ -195,22 +212,6 @@ function handleRemoveCustomWallpaper() {
>
</picture>
</Tooltip>
<Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
<picture
aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
un-border="4 transparent" w-full
:class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === item.url : settings.searchPageWallpaper === item.url }"
@click="changeWallpaper(item.url)"
>
<img
:src="item.thumbnail || item.url"
:alt="item.name"
w-full h-full object-cover
class="img-no-error"
>
</picture>
</Tooltip>
</div>
</SettingsItem>
<SettingsItem v-else :title="$t('settings.image_url')" next-line>