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

branding/manifest part done

Browse source
This commit is contained in:
Henry Jameson 2025-12-08 18:12:21 +02:00
commit bc47bef80d
10 changed files with 288 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/settings_modal/admin_tabs/instance_tab.js
View file

@ -2,9 +2,12 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import StringSetting from '../helpers/string_setting.vue'
import ColorSetting from '../helpers/color_setting.vue'
import GroupSetting from '../helpers/group_setting.vue'
import AttachmentSetting from '../helpers/attachment_setting.vue'
import ListSetting from '../helpers/list_setting.vue'
import PWAManifestIconsSetting from '../helpers/pwa_manifest_icons_setting.vue'
import MapSetting from '../helpers/map_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { get } from 'lodash'
@ -21,8 +24,11 @@ const InstanceTab = {
ChoiceSetting,
IntegerSetting,
StringSetting,
ColorSetting,
AttachmentSetting,
ListSetting,
PWAManifestIconsSetting,
MapSetting,
GroupSetting
},
computed: {

39
src/components/settings_modal/admin_tabs/instance_tab.vue
View file

@ -6,6 +6,24 @@
<li>
<StringSetting path=":pleroma.:instance.:name" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:contact_username" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:email" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:status_page" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:description" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:short_description" />
</li>
</ul>
<h3>{{ $t('admin_dash.instance.branding') }}</h3>
<ul class="setting-list">
<!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
<li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
<AttachmentSetting
@ -13,24 +31,21 @@
path=":pleroma.:instance.:favicon"
/>
</li>
<li>
<StringSetting path=":pleroma.:instance.:contact_username" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:email" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:description" />
</li>
<li>
<StringSetting path=":pleroma.:instance.:short_description" />
</li>
<li>
<AttachmentSetting
compact
path=":pleroma.:instance.:instance_thumbnail"
/>
</li>
<li>
<PWAManifestIconsSetting path=":pleroma.:manifest.:icons" />
</li>
<li>
<ColorSetting path=":pleroma.:manifest.:theme_color" />
</li>
<li>
<ColorSetting path=":pleroma.:manifest.:background_color" />
</li>
<li>
<AttachmentSetting path=":pleroma.:instance.:background_image" />
</li>

17
src/components/settings_modal/helpers/color_setting.js Normal file
View file

@ -0,0 +1,17 @@
import Setting from './setting.js'
import ColorInput from 'src/components/color_input/color_input.vue'
export default {
...Setting,
components: {
...Setting.components,
ColorInput
},
methods: {
...Setting.methods,
getValue (e) {
console.log(e)
return e
}
}
}

54
src/components/settings_modal/helpers/color_setting.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<label
v-if="matchesExpertLevel"
class="ColorSetting"
>
<label
v-if="!hideLabel"
:for="path"
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
<template v-else-if="source === 'admin'">
MISSING LABEL FOR {{ path }}
</template>
<slot v-else />
</label>
{{ ' ' }}
<ColorInput
:id="path"
class="color-setting-input"
:class="{ disabled: shouldBeDisabled }"
:disabled="shouldBeDisabled"
:placeholder="backendDescriptionSuggestions"
:model-value="realDraftMode ? draft : state"
@update:model-value="update"
/>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons v-if="!hideDraftButtons" />
<p
v-if="backendDescriptionDescription"
class="setting-description"
:class="{ 'faint': shouldBeDisabled }"
>
{{ backendDescriptionDescription + ' ' }}
</p>
</label>
</template>
<style lang="scss">
.ColorSetting {
.color-setting-input {
vertical-align: middle;
}
}
</style>
<script src="./color_setting.js"></script>

5
src/components/settings_modal/helpers/list_tuple_setting.vue
View file

@ -1,7 +1,7 @@
<template>
<div
v-if="matchesExpertLevel"
class="ListSetting"
class="ListTupleSetting"
>
<label
class="setting-label"
@ -80,7 +80,7 @@
</template>
<style lang="scss">
.ListSetting {
.ListTupleSetting {
.btn-group {
display: flex
}
@ -89,6 +89,7 @@
display: inline-grid;
grid-template-columns: auto auto;
gap: 0.5em;
align-items: baseline;
dt {
display: inline;

45
src/components/settings_modal/helpers/pwa_manifest_icons_setting.js Normal file
View file

@ -0,0 +1,45 @@
import { clone } from 'lodash'
import Setting from './setting.js'
export default {
...Setting,
methods: {
...Setting.methods,
optionPresent (option) {
return this.valueSet.has(option)
},
getValue ({ event, field, index, eventType }) {
switch (eventType) {
case 'add': {
const res = [...this.visibleState, {}]
return res
}
case 'remove': {
const pre = this.visibleState.slice(0, index)
const post = this.visibleState.slice(index + 1)
return [...pre, ...post]
}
case 'edit': {
const pre = this.visibleState.slice(0, index)
const post = this.visibleState.slice(index + 1)
const item = clone(this.visibleState[index])
const string = event.target.value
console.log(item)
if (!string) {
delete item[field]
} else {
item[field] = string
}
console.log(item)
return [...pre, item, ...post]
}
}
}
}
}

135
src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue Normal file
View file

@ -0,0 +1,135 @@
<template>
<div
v-if="matchesExpertLevel"
class="PWAManifestIconsSetting"
>
<label
class="setting-label"
:class="{ 'faint': shouldBeDisabled }"
>
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
<template v-else-if="source === 'admin'">
MISSING LABEL FOR {{ path }}
</template>
<slot v-else />
</label>
<p
v-if="backendDescriptionDescription"
class="setting-description"
:class="{ 'faint': shouldBeDisabled }"
>
{{ backendDescriptionDescription + ' ' }}
</p>
<ul class="setting-list">
<li v-for="(item, index) in visibleState">
<div>
<dl>
<dt><code>purpose</code></dt>
<dd>
<input
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:value="item[':purpose']"
@change="e => update({ event: e, index, eventType: 'edit', field: ':purpose' })"
>
</dd>
<dt><code>sizes</code></dt>
<dd>
<input
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:value="item[':sizes']"
@change="e => update({ event: e, index, eventType: 'edit', field: ':sizes' })"
>
</dd>
<dt><code>src</code></dt>
<dd>
<input
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:value="item[':src']"
@change="e => update({ event: e, index, eventType: 'edit', field: ':src' })"
>
</dd>
<dt><code>type</code></dt>
<dd>
<input
class="input string-input"
:class="{ disabled: shouldBeDisabled }"
:value="item[':type']"
@change="e => update({ event: e, index, eventType: 'edit', field: ':type' })"
>
</dd>
</dl>
<div class="buttons">
<button
v-if="index === visibleState.length - 1"
class="button-default add-button"
@click="e => update({ eventType: 'add' })"
>
<FAIcon icon="plus" />
</button>
<button
class="button-default delete-button"
@click="e => update({ index, eventType: 'remove' })"
>
<FAIcon icon="times" />
</button>
</div>
</div>
</li>
</ul>
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
<DraftButtons />
</div>
</template>
<style lang="scss">
.PWAManifestIconsSetting {
display: inline-block;
.setting-list {
display: grid;
gap: 0.5em;
}
.buttons {
display: flex;
gap: 0.5em;
justify-content: right;
margin-top: 0.5em;
button {
line-height: 2;
}
}
dl {
display: inline-grid;
grid-template-columns: auto auto;
gap: 0.5em;
align-items: baseline;
dt {
display: inline;
font-weight: 800;
text-align: right;
&::after {
content: ':'
}
}
dd {
display: inline;
margin: 0
}
}
}
</style>
<script src="./pwa_manifest_icons_setting.js"></script>

1
src/components/settings_modal/helpers/setting.js
View file

@ -242,7 +242,6 @@ export default {
if (this.path == null) return null
if (this.descriptionPathOverride) return this.descriptionPathOverride
const path = Array.isArray(this.path) ? this.path : this.path.split('.')
console.log(this.path, this.subgroup)
if (this.subgroup) {
return [
...path.slice(0, path.length - 1),

1
src/components/settings_modal/tabs/filtering_tab.js
View file

@ -217,7 +217,6 @@ const FilteringTab = {
},
purgeExpiredFilters () {
this.muteFiltersExpired.forEach(([id]) => {
console.log(id)
delete this.muteFiltersDraftObject[id]
this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
})

1
src/i18n/en.json
View file

@ -1225,6 +1225,7 @@
},
"instance": {
"instance": "Instance information",
"branding": "Branding",
"registrations": "User sign-ups",
"captcha_header": "CAPTCHA",
"kocaptcha": "KoCaptcha settings",