add favicon setting and add compact layout for AttachmentSetting

This commit is contained in:
Henry Jameson 2023-11-01 22:10:46 +02:00
parent b6a4b62058
commit ce109c38f3
3 changed files with 40 additions and 5 deletions

View File

@ -6,6 +6,10 @@
<li>
<StringSetting path=":pleroma.:instance.:name" />
</li>
<!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
<li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
<AttachmentSetting compact path=":pleroma.:instance.:favicon" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:email" />
</li>
@ -16,7 +20,7 @@
<StringSetting path=":pleroma.:instance.:short_description" />
</li>
<li>
<AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
<AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
</li>
<li>
<AttachmentSetting path=":pleroma.:instance.:background_image" />

View File

@ -7,6 +7,7 @@ export default {
...Setting,
props: {
...Setting.props,
compact: Boolean,
acceptTypes: {
type: String,
required: false,

View File

@ -2,6 +2,7 @@
<span
v-if="matchesExpertLevel"
class="AttachmentSetting"
:class="{ '-compact': compact }"
>
<label
:for="path"
@ -24,8 +25,8 @@
{{ backendDescriptionDescription + ' ' }}
</p>
<div class="attachment-input">
<div>{{ $t('settings.url') }}</div>
<div class="controls">
<div class="controls control-field">
<label for="path">{{ $t('settings.url') }}</label>
<input
:id="path"
class="string-input"
@ -40,7 +41,7 @@
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</div>
<div>{{ $t('settings.preview') }}</div>
<div v-if="!compact">{{ $t('settings.preview') }}</div>
<Attachment
class="attachment"
:compact="compact"
@ -50,7 +51,7 @@
@setMedia="onMedia"
@naturalSizeLoad="onNaturalSizeLoad"
/>
<div class="controls">
<div class="controls control-upload">
<MediaUpload
ref="mediaUpload"
class="media-upload-icon"
@ -84,6 +85,35 @@
width: 20em;
}
&.-compact {
.attachment-input {
flex-direction: row;
align-items: flex-end;
}
.attachment {
flex: 0;
order: 0;
display: block;
min-width: 4em;
height: 4em;
align-self: center;
margin-bottom: 0;
}
.control-field {
order: 1;
min-width: 12em;
margin-left: 0.5em;
}
.control-upload {
order: 2;
min-width: 12em;
padding: 0 0.5em;
}
}
.controls {
margin-bottom: 0.5em;