mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-25 15:55:22 +00:00
Add admin settings partials
This commit is contained in:
parent
704e7b12e0
commit
eb4871237b
3 changed files with 179 additions and 0 deletions
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<div class="card shadow-none border card-body">
|
||||||
|
<div class="form-group mb-0">
|
||||||
|
<div class="custom-control custom-checkbox">
|
||||||
|
<input type="checkbox" :name="elementId" class="custom-control-input" :id="elementId" :checked="value" @change="$emit('change', !value)">
|
||||||
|
<label class="custom-control-label font-weight-bold" :for="elementId">{{ name }}</label>
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 mb-0 small text-muted" v-html="description"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
|
||||||
|
value: {
|
||||||
|
type: Boolean
|
||||||
|
},
|
||||||
|
|
||||||
|
description: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
elementId: {
|
||||||
|
get() {
|
||||||
|
let name = this.name;
|
||||||
|
name = name.toLowerCase();
|
||||||
|
name = name.replace(/[^a-z0-9 -]/g, ' ');
|
||||||
|
name = name.replace(/\s+/g, '-');
|
||||||
|
name = name.replace(/^-+|-+$/g, '');
|
||||||
|
return 'fec_' + name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -0,0 +1,74 @@
|
||||||
|
<template>
|
||||||
|
<div :class="[ isCard ? 'card shadow-none border card-body' : '' ]">
|
||||||
|
<div
|
||||||
|
class="form-group"
|
||||||
|
:class="[ isInline ? 'd-flex align-items-center gap-1' : 'mb-1' ]">
|
||||||
|
<label :for="elementId" class="font-weight-bold mb-0">{{ name }}</label>
|
||||||
|
<input
|
||||||
|
:id="elementId"
|
||||||
|
class="form-control form-control-muted mb-0"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:value="value"
|
||||||
|
@input="$emit('change', $event.target.value)"
|
||||||
|
:disabled="isDisabled" />
|
||||||
|
</div>
|
||||||
|
<p v-if="description && description.length" class="help-text small text-muted mb-0" v-html="description">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
|
||||||
|
value: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
|
||||||
|
placeholder: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
|
||||||
|
description: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
|
||||||
|
isCard: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
|
||||||
|
isInline: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
|
||||||
|
isDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
elementId: {
|
||||||
|
get() {
|
||||||
|
let name = this.name;
|
||||||
|
name = name.toLowerCase();
|
||||||
|
name = name.replace(/[^a-z0-9 -]/g, ' ');
|
||||||
|
name = name.replace(/\s+/g, '-');
|
||||||
|
name = name.replace(/^-+|-+$/g, '');
|
||||||
|
return 'fec_' + name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped="true">
|
||||||
|
.gap-1 {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div style="width:100px;"></div>
|
||||||
|
<div>
|
||||||
|
<h2 class="display-4 mb-0" style="font-weight: 800;">{{ title }}</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary rounded-pill font-weight-bold px-5"
|
||||||
|
:disabled="isSaving || saved"
|
||||||
|
@click.prevent="save">
|
||||||
|
<template v-if="isSaving === true"><b-spinner small class="mx-2" /></template>
|
||||||
|
<template v-else>{{ buttonLabel }}</template>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="mt-3">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
saving: {
|
||||||
|
type: Boolean
|
||||||
|
},
|
||||||
|
saved: {
|
||||||
|
type: Boolean
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
buttonLabel: {
|
||||||
|
get() {
|
||||||
|
if(this.saved) {
|
||||||
|
return 'Saved';
|
||||||
|
}
|
||||||
|
if(this.saving) {
|
||||||
|
return 'Saving';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Save';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isSaving: {
|
||||||
|
get() {
|
||||||
|
return this.saving;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
save($event) {
|
||||||
|
$event.currentTarget?.blur();
|
||||||
|
this.$emit('save');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in a new issue