hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into admin-tabs-2

Browse source
This commit is contained in:
Henry Jameson 2025-12-01 18:52:04 +02:00
commit 388ecd9a5e
3 changed files with 165 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/settings_modal/tabs/appearance_tab.js
View file

@ -236,6 +236,10 @@ const AppearanceTab = {
noIntersectionObserver () {
return !window.IntersectionObserver
},
instanceWallpaper () {
console.log(this.$store.state.instance.background)
this.$store.state.instance.background
},
instanceWallpaperUsed () {
return this.$store.state.instance.background &&
!this.$store.state.users.currentUser.background_image
@ -411,6 +415,9 @@ const AppearanceTab = {
this.submitBackground('')
}
},
resetUploadedBackground () {
this.backgroundPreview = null
},
submitBackground (background) {
if (!this.backgroundPreview && background !== '') { return }

109
src/components/settings_modal/tabs/appearance_tab.scss
View file

@ -18,7 +18,31 @@
height: auto;
}
.banner-background {
display: flex;
gap: 1em;
flex-wrap: wrap;
h4 {
margin: 0;
}
}
.banner-background-input {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5em;
.custom-bg-control {
display: grid;
gap: 0.5em;
grid-template-columns: 1fr 1fr;
}
}
.banner-background-preview {
display: flex;
max-width: 100%;
width: 300px;
position: relative;
@ -26,32 +50,85 @@
img {
width: 100%;
}
.fun-monitor {
position: relative;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
* {
line-height: 1;
}
.reset-button {
&-display-bezel,
&-display-screen {
aspect-ratio: 16 / 9;
width: 16em;
}
img {
object-fit: cover;
}
.wallpaper {
position: absolute;
top: 0.2em;
right: 0.2em;
border-radius: var(--roundness);
inset: 0;
background-color: var(--wallpaper);
}
&-display-uploading {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
place-items: center;
place-content: center;
background-color: rgb(0 0 0 / 60%);
opacity: 0.7;
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
font-size: 1.5em;
cursor: pointer;
&:hover {
opacity: 1;
font-size: 4em;
}
svg {
color: white;
&-display-screen {
padding: 0;
overflow: hidden;
position: relative;
&-overlay {
background: transparent;
position: absolute;
inset: 0;
z-index: 2;
}
&-image {
aspect-ratio: 16 / 9
}
}
&-display-bezel {
padding: 1em;
margin: 0;
order: 1;
z-index: 3;
}
&-neck {
width: 5em;
height: 3em;
margin-top: -1em;
margin-bottom: -0.5em;
order: 2
}
&-stand {
width: 8em;
height: 1em;
order: 3;
z-index: 1
}
}
}
.palettes-container {
height: 15em;

69
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -154,46 +154,67 @@
</div>
</div>
<h3>{{ $t('settings.background') }}</h3>
<div class="banner-background">
<div class="banner-background-preview">
<img :src="user.background_image">
<button
v-if="!isDefaultBackground"
class="button-unstyled reset-button"
:title="$t('settings.reset_profile_background')"
@click="resetBackground"
<div class="fun-monitor">
<div class="fun-monitor-stand button-default" />
<div class="fun-monitor-neck button-default" />
<div class="fun-monitor-display-bezel button-default">
<div class="fun-monitor-display-screen input">
<img
v-if="backgroundPreview || user.background_image || instanceWallpaper"
class="fun-monitor-display-screen-image"
:src="backgroundPreview || user.background_image || instanceWallpaper"
/>
<div v-else class="wallpaper" />
<div class="fun-monitor-display-screen-overlay input" />
<div
v-if="backgroundUploading"
class="fun-monitor-display-uploading"
>
<FAIcon
icon="times"
type="button"
class="fun-monitor-display-screen-uploading"
spin
icon="circle-notch"
/>
</button>
</div>
<p>{{ $t('settings.set_new_background') }}</p>
<img
v-if="backgroundPreview"
class="banner-background-preview"
:src="backgroundPreview"
>
<div>
</div>
</div>
</div>
</div>
<div class="banner-background-input">
<h4>{{ $t('settings.set_new_background') }}</h4>
<input
type="file"
class="input"
@change="uploadFile('background', $event)"
>
</div>
<FAIcon
v-if="backgroundUploading"
class="uploading"
spin
icon="circle-notch"
/>
<div class="custom-bg-control">
<button
v-else-if="backgroundPreview"
:disabled="!backgroundPreview"
class="btn button-default"
@click="submitBackground(background)"
>
{{ $t('settings.save') }}
</button>
<button
:disabled="!backgroundPreview"
class="btn button-default"
@click="resetUploadedBackground"
>
{{ $t('settings.reset') }}
</button>
</div>
<button
v-if="!isDefaultBackground"
class="btn button-default reset-button"
:title="$t('settings.reset_profile_background')"
@click="resetBackground"
>
{{ $t('settings.reset_profile_background') }}
</button>
</div>
</div>
<h3>{{ $t('settings.visual_tweaks') }}</h3>
<div class="alert neutral theme-notice">
{{ $t("settings.style.visual_tweaks_section_note") }}