MANIFEST EDITING FUCK YEAH
This commit is contained in:
parent
0222d493f8
commit
68aadcdd08
5 changed files with 239 additions and 94 deletions
|
|
@ -44,6 +44,7 @@
|
|||
path=":pleroma.:instance.:instance_thumbnail"
|
||||
/>
|
||||
</li>
|
||||
<h4>{{ $t('admin_dash.instance.pwa.manifest') }}</H4>
|
||||
<li>
|
||||
<PWAManifestIconsSetting path=":pleroma.:manifest.:icons" />
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,69 @@
|
|||
import { clone } from 'lodash'
|
||||
import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
|
||||
|
||||
import Setting from './setting.js'
|
||||
import Select from 'src/components/select/select.vue'
|
||||
import Attachment from 'src/components/attachment/attachment.vue'
|
||||
import MediaUpload from 'src/components/media_upload/media_upload.vue'
|
||||
|
||||
export default {
|
||||
...Setting,
|
||||
components: {
|
||||
...Setting.components,
|
||||
Select,
|
||||
Attachment,
|
||||
MediaUpload
|
||||
},
|
||||
computed: {
|
||||
...Setting.computed,
|
||||
purposeOptions () {
|
||||
return ['any','monochrome','maskable'].map(value => ({
|
||||
value,
|
||||
key: value,
|
||||
label: this.$t('admin_dash.instance.pwa.icon.' + value)
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...Setting.methods,
|
||||
optionPresent (option) {
|
||||
return this.valueSet.has(option)
|
||||
attachment (e) {
|
||||
const path = e[':src']
|
||||
if (!path) {
|
||||
return {
|
||||
mimetype: '',
|
||||
url: ''
|
||||
}
|
||||
}
|
||||
const url = path.includes('://') ? path : this.$store.state.instance.server + path
|
||||
|
||||
return {
|
||||
mimetype: fileTypeExt(url),
|
||||
url
|
||||
}
|
||||
},
|
||||
setMediaFile ({ event, index }) {
|
||||
this.update({
|
||||
event: {
|
||||
target: {
|
||||
value: event.url
|
||||
},
|
||||
},
|
||||
index,
|
||||
eventType: 'edit',
|
||||
field: ':src'
|
||||
})
|
||||
},
|
||||
setPurpose ({ event, index }) {
|
||||
this.update({
|
||||
event: {
|
||||
target: {
|
||||
value: event
|
||||
},
|
||||
},
|
||||
index,
|
||||
eventType: 'edit',
|
||||
field: ':purpose'
|
||||
})
|
||||
},
|
||||
getValue ({ event, field, index, eventType }) {
|
||||
switch (eventType) {
|
||||
|
|
@ -27,7 +84,6 @@ export default {
|
|||
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]
|
||||
|
|
@ -35,8 +91,6 @@ export default {
|
|||
item[field] = string
|
||||
}
|
||||
|
||||
console.log(item)
|
||||
|
||||
return [...pre, item, ...post]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
class="pwa-label setting-label"
|
||||
:class="{ 'faint': shouldBeDisabled }"
|
||||
>
|
||||
<ModifiedIndicator
|
||||
:changed="isChanged"
|
||||
:onclick="reset"
|
||||
/>
|
||||
<ProfileSettingIndicator :is-profile="isProfileSetting" />
|
||||
{{ ' ' }}
|
||||
<template v-if="backendDescriptionLabel">
|
||||
{{ backendDescriptionLabel + ' ' }}
|
||||
</template>
|
||||
|
|
@ -22,23 +28,72 @@
|
|||
>
|
||||
{{ backendDescriptionDescription + ' ' }}
|
||||
</p>
|
||||
<ul class="setting-list setting-control">
|
||||
<div class="setting-control">
|
||||
<ul class="item-list">
|
||||
<li
|
||||
class="no_items"
|
||||
v-if="visibleState.length === 0"
|
||||
>
|
||||
{{ $t('admin_dash.instance.pwa.no_icons') }}
|
||||
<button
|
||||
v-if="visibleState.length === 0"
|
||||
class="button-default add-button"
|
||||
@click="e => update({ eventType: 'add' })"
|
||||
>
|
||||
<FAIcon icon="plus" />
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
v-for="(item, index) in visibleState"
|
||||
:key="index"
|
||||
>
|
||||
<div class="setting-item">
|
||||
<dl>
|
||||
<dt><code>purpose</code></dt>
|
||||
<dd>
|
||||
<div class="icon-element">
|
||||
<div class="src-field">
|
||||
<Attachment
|
||||
class="src-attachment"
|
||||
:compact="compact"
|
||||
:attachment="attachment(item)"
|
||||
size="small"
|
||||
hide-description
|
||||
/>
|
||||
<div class="src-url">
|
||||
<label for="path">{{ $t('settings.url') }}</label>
|
||||
<input
|
||||
class="input string-input"
|
||||
:class="{ disabled: shouldBeDisabled }"
|
||||
:value="item[':purpose']"
|
||||
@change="e => update({ event: e, index, eventType: 'edit', field: ':purpose' })"
|
||||
:id="path"
|
||||
:disabled="shouldBeDisabled"
|
||||
:value="item[':src']"
|
||||
@change="event => update({ event, index, eventType: 'edit', field: ':src' })"
|
||||
>
|
||||
</div>
|
||||
<MediaUpload
|
||||
ref="mediaUpload"
|
||||
class="src-upload media-upload-icon"
|
||||
:class="{ disabled: shouldBeDisabled }"
|
||||
normal-button
|
||||
:accept-types="acceptTypes"
|
||||
@uploaded="event => setMediaFile({ event, index })"
|
||||
/>
|
||||
</div>
|
||||
<dl>
|
||||
<dt>{{ $t('admin_dash.instance.pwa.icon.purpose') }}</dt>
|
||||
<dd>
|
||||
<Select
|
||||
:class="{ disabled: shouldBeDisabled }"
|
||||
:disabled="shouldBeDisabled"
|
||||
:model-value="item[':purpose']"
|
||||
@update:model-value="event => setPurpose({ event, index })"
|
||||
>
|
||||
<option
|
||||
v-for="(purpose, index) in purposeOptions"
|
||||
:key="index"
|
||||
:value="purpose.value"
|
||||
>
|
||||
{{ purpose.label }}
|
||||
</option>
|
||||
</Select>
|
||||
</dd>
|
||||
<dt><code>sizes</code></dt>
|
||||
<dt><code>sizes</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
|
||||
<dd>
|
||||
<input
|
||||
class="input string-input"
|
||||
|
|
@ -47,16 +102,7 @@
|
|||
@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>
|
||||
<dt><code>type</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
|
||||
<dd>
|
||||
<input
|
||||
class="input string-input"
|
||||
|
|
@ -84,44 +130,28 @@
|
|||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ModifiedIndicator
|
||||
:changed="isChanged"
|
||||
:onclick="reset"
|
||||
/>
|
||||
<ProfileSettingIndicator :is-profile="isProfileSetting" />
|
||||
</div>
|
||||
<DraftButtons />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./pwa_manifest_icons_setting.js"></script>
|
||||
<style lang="scss">
|
||||
.PWAManifestIconsSetting {
|
||||
div.PWAManifestIconsSetting {
|
||||
&.setting-item {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"label control"
|
||||
"desc control"
|
||||
". draft";
|
||||
"label"
|
||||
"desc"
|
||||
"control"
|
||||
"draft";
|
||||
grid-template-rows: 2em auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pwa-label.setting-label {
|
||||
align-self: end;
|
||||
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
text-align: right;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.setting-list {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
@ -135,16 +165,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 12em);
|
||||
grid-gap: 2em;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: inline-grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 0.5em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: 0.5em;
|
||||
gap: 0.25em;
|
||||
align-items: baseline;
|
||||
|
||||
dt {
|
||||
display: inline;
|
||||
font-weight: 800;
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
content: ':'
|
||||
|
|
@ -152,9 +188,38 @@
|
|||
}
|
||||
|
||||
dd {
|
||||
display: inline;
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
|
||||
.src-field {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
justify-items: center;
|
||||
gap: 0.5em;
|
||||
|
||||
.src-attachment {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.src-upload {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.src-url {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -161,7 +161,6 @@ export default {
|
|||
}
|
||||
},
|
||||
backendDescriptionDescription () {
|
||||
console.log('LOL', this.description)
|
||||
if (this.description) return this.description
|
||||
if (this.realSource !== 'admin') return ''
|
||||
if (this.hideDescription) return null
|
||||
|
|
|
|||
|
|
@ -1391,6 +1391,32 @@
|
|||
"always": "Always",
|
||||
"never": "Never"
|
||||
},
|
||||
"instance": {
|
||||
"instance": "Instance information",
|
||||
"pwa": {
|
||||
"manifest": "PWA Manifest",
|
||||
"optional": "(optional)",
|
||||
"no_icons": "No icons defined",
|
||||
"icon": {
|
||||
"purpose": "Icon purpose",
|
||||
"any": "Any",
|
||||
"monochrome": "Monochrome",
|
||||
"maskable": "Maskable"
|
||||
}
|
||||
},
|
||||
"branding": "Branding",
|
||||
"access": "Instance access",
|
||||
"rich_metadata": "Metadata",
|
||||
"restrict": {
|
||||
"header": "Restrict access for anonymous visitors",
|
||||
"description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
|
||||
"timelines": "Timelines access",
|
||||
"profiles": "User profiles access",
|
||||
"activities": "Statuses/activities access"
|
||||
},
|
||||
":unauthenticated": "Unauthenticated",
|
||||
":all": "Everyone"
|
||||
},
|
||||
"temp_overrides": {
|
||||
":pleroma": {
|
||||
":connections_pool": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue