#194 custom flags
This commit is contained in:
Avris
parent
2d0eb3ac9c
commit
34bda3fcda
|
|
@ -2,14 +2,18 @@
|
|||
<span class="flag-wrapper">
|
||||
<a v-if="link" :href="`/${config.nouns.route}/${config.nouns.terms.route}#${link.toLowerCase()}`" :title="alt">
|
||||
<img :src="img" alt="" class="flag-mini rounded"/>
|
||||
<Spelling :text="name"/>
|
||||
<Spelling :text="name"/><sup v-if="custom" class="text-muted"><small><Icon v="user"/></small></sup>
|
||||
</a>
|
||||
<span v-else :title="alt">
|
||||
<img :src="img" alt="" class="flag-mini rounded"/>
|
||||
<Spelling :text="name"/>
|
||||
<Spelling :text="name"/><sup v-if="custom" class="text-muted"><small><Icon v="user"/></small></sup>
|
||||
</span>
|
||||
<span class="flag-preview bg-white rouded p-2 border">
|
||||
<img :src="img" alt="" class="rounded"/>
|
||||
<span v-if="custom" class="alert alert-warning small d-inline-block mt-2 mb-0 p-2">
|
||||
<Icon v="user"/>
|
||||
<T>profile.flagsCustomWarning</T>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -21,6 +25,7 @@
|
|||
alt: { required: true },
|
||||
img: { required: true },
|
||||
terms: { },
|
||||
custom: { type: Boolean },
|
||||
},
|
||||
computed: {
|
||||
link() {
|
||||
|
|
@ -57,6 +62,9 @@
|
|||
left: 0;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
img {
|
||||
max-height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<a :href="buildImageUrl(id, 'big')" target="_blank" rel="noopener" class="d-inline-block"
|
||||
@click.prevent="$eventHub.$emit('lightbox', buildImageUrl(id, 'big'))"
|
||||
<a :href="buildImageUrl(id, bigSize)" target="_blank" rel="noopener" class="d-inline-block"
|
||||
@click.prevent="$eventHub.$emit('lightbox', buildImageUrl(id, bigSize))"
|
||||
>
|
||||
<img :src="buildImageUrl(id, 'thumb')" class="border rounded-lg"/>
|
||||
<img :src="buildImageUrl(id, smallSize)" class="border rounded-lg" :style="`height: ${size}; width: auto;`"/>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,11 +10,9 @@
|
|||
export default {
|
||||
props: {
|
||||
id: {required: true},
|
||||
},
|
||||
methods: {
|
||||
getUrl(size) {
|
||||
return `${process.env.BUCKET}/images/${this.id}-${size}.png`;
|
||||
},
|
||||
smallSize: {'default': 'thumb'},
|
||||
bigSize: {'default': 'big'},
|
||||
size: {'default': 'auto'}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="form-group">
|
||||
<draggable tag="ul" v-model="images" handle=".handle" ghostClass="ghost" @end="$emit('input', images)" class="list-unstyled">
|
||||
<li v-for="(image, i) in images" class="mb-4">
|
||||
<div class="input-group mb-1">
|
||||
<button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
|
||||
<Icon v="bars"/>
|
||||
</button>
|
||||
<ImageThumb :id="image.id" smallSize="flag" bigSize="flag" size="2.4em"/>
|
||||
<input v-model="images[i].desc" type="text" class="form-control"
|
||||
@keyup="update" @change="update"
|
||||
required :maxlength="maxLength"/>
|
||||
<button class="btn btn-outline-danger" type="button" @click.prevent="removeFile(image.id)" :aria-label="$t('crud.remove')">
|
||||
<Icon v="times"/>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li slot="footer">
|
||||
<ImageUploader multiple :name="name" form @uploaded="addFiles"/>
|
||||
</li>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { curry } from "../src/helpers";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
props: {
|
||||
value: {type: Object},
|
||||
name: {'default': 'images'},
|
||||
maxLength: {'default': 24},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
images: this.dictToList(this.value),
|
||||
curry,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
this.images = this.dictToList(this.value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addFiles(files) {
|
||||
this.$emit('input', this.listToDict([...this.images, ...files]));
|
||||
},
|
||||
async removeFile(id) {
|
||||
await this.$confirm(this.$t('crud.removeConfirm'), 'danger');
|
||||
this.$emit('input', this.listToDict(this.images.filter(i => i.id !== id)));
|
||||
},
|
||||
update() {
|
||||
this.$emit('input', this.listToDict(this.images));
|
||||
},
|
||||
|
||||
dictToList(dict) {
|
||||
const images = [];
|
||||
for (let id in dict) {
|
||||
if (dict.hasOwnProperty(id)) {
|
||||
images.push({id, desc: dict[id]});
|
||||
}
|
||||
}
|
||||
return images;
|
||||
},
|
||||
listToDict(list) {
|
||||
const images = {};
|
||||
for (let image of list) {
|
||||
if (typeof(image) === 'string') {
|
||||
image = {id: image, desc: ''};
|
||||
}
|
||||
images[image.id] = image.desc;
|
||||
}
|
||||
return images;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -384,6 +384,8 @@ profile:
|
|||
birthdayInfo: 'Wir veröffentlichen nicht dein Geburtstag, sondern nur das errechnete Alter.'
|
||||
flags: 'Flaggen'
|
||||
flagsInfo: 'Ziehe deine Pride Flaggen per drag & drop in diesen Rahmen.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: 'Links'
|
||||
column: 'Spalte'
|
||||
|
||||
|
|
@ -402,6 +404,14 @@ profile:
|
|||
meh: 'Okay'
|
||||
no: 'Nope'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
share: 'Teilen'
|
||||
|
||||
crud:
|
||||
|
|
|
|||
|
|
@ -293,17 +293,6 @@ faq:
|
|||
Nonbinary folks can use binary pronouns, some lesbians use {/he=he/him} for cultural reasons, etc.
|
||||
- >
|
||||
Simply say “pronouns”.
|
||||
add-flags:
|
||||
question: 'My flag is not in the editor. Can you add it?'
|
||||
answer:
|
||||
- >
|
||||
To avoid potential vandalisms (flags of attack helicopters, MAPs, TERFs, etc.)
|
||||
we've decided not to allow uploading your own pictures to the flags editor.
|
||||
But we do offer a choice from a pretty long list of more popular flags
|
||||
– unfortunately that requires us to make a subjective choice.
|
||||
- >
|
||||
You can try using the closest matching flag you identify with instead.
|
||||
And in the “description” field you can just write anything you want.
|
||||
|
||||
links:
|
||||
header: 'Links'
|
||||
|
|
@ -397,6 +386,8 @@ profile:
|
|||
birthdayInfo: 'We do not publish your birthday, just the calculated age.'
|
||||
flags: 'Flags'
|
||||
flagsInfo: 'Drag & drop your pride flags into this frame.'
|
||||
flagsCustom: 'Upload custom flags'
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.'
|
||||
links: 'Links'
|
||||
column: 'Column'
|
||||
|
||||
|
|
|
|||
|
|
@ -393,6 +393,8 @@ profile:
|
|||
birthdayInfo: 'No publicamos la fecha de tu cumpleaños, sólo la edad calculada.'
|
||||
flags: 'Banderas'
|
||||
flagsInfo: 'Arrastra tus banderas de orgullo a este marco.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: 'Enlaces'
|
||||
column: 'Columna'
|
||||
|
||||
|
|
@ -411,6 +413,14 @@ profile:
|
|||
meh: 'Okey'
|
||||
no: 'No'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
share: 'Compartir'
|
||||
|
||||
crud:
|
||||
|
|
|
|||
|
|
@ -386,6 +386,8 @@ profile:
|
|||
birthdayInfo: 'We laten jouw verjaardagsdatum niet zien, alleen de berekende leeftijd.'
|
||||
flags: 'Vlaggen'
|
||||
flagsInfo: 'Klik en sleep jouw pridevlaggen naar deze frame.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: 'Links'
|
||||
column: 'Kolom'
|
||||
|
||||
|
|
@ -404,6 +406,14 @@ profile:
|
|||
meh: 'Oké'
|
||||
no: 'Nee'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
share: 'Deel'
|
||||
|
||||
crud:
|
||||
|
|
|
|||
|
|
@ -767,19 +767,6 @@ faq:
|
|||
niektóre lesbijki ze względów kulturowych i historycznych używają form męskich, itp.
|
||||
- >
|
||||
Mów po prostu „zaimki”. To prościej i sensowniej.
|
||||
moja-flaga:
|
||||
question: 'Mojej flagi nie ma w edytorze wizytówki'
|
||||
answer:
|
||||
- >
|
||||
Aby uniknąć potencjalnych wandalizmów
|
||||
(flaga helikopterów szturmowych, MAPów, TERFów, itp.),
|
||||
zdecydowałośmy się nie umożliwiać wgrywania własnych obrazków na stronę.
|
||||
Oferujemy natomiast wybór spośród dość bogatej listy co popularniejszych flag
|
||||
– niestety siłą rzeczy musi być to wybór subiektywny.
|
||||
- >
|
||||
Możesz spróbować wybrać najbliższą pasującą flagę, z którą się identyfikujesz.
|
||||
No i zawsze w polu „opis” możesz wpisać, co tylko ci się podoba.
|
||||
|
||||
a-moj-dziadek:
|
||||
question: 'Czy po to mój dziadek walczył na wojnie, by teraz ktoś mówił o sobie „ono”?'
|
||||
answer:
|
||||
|
|
@ -942,6 +929,8 @@ profile:
|
|||
flagsInfo: >
|
||||
Przeciągnij swoje pride''owe flagi do poniższej ramki.
|
||||
Więcej informacji o etykietkach znajdziesz w naszym <a href="/slowniki/terminologia" target="_blank">Słowniku Terminologii Queerowej</a>.
|
||||
flagsCustom: 'Dodaj inne flagi'
|
||||
flagsCustomWarning: 'Ta flaga została wgrana przez osobę użytkującą. Ekipa zaimki.pl nie jest za nią odpowiedzialna.'
|
||||
links: 'Linki'
|
||||
column: 'Kolumna'
|
||||
|
||||
|
|
|
|||
|
|
@ -390,6 +390,8 @@ profile:
|
|||
birthdayInfo: 'Não publicamos a data do aniversário, somente a idade calculada.'
|
||||
flags: 'Bandeiras'
|
||||
flagsInfo: 'Arrasta as bandeiras de orgulho a esse marco.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: 'Enlaces'
|
||||
column: 'Coluna'
|
||||
|
||||
|
|
@ -408,6 +410,14 @@ profile:
|
|||
meh: 'OK'
|
||||
no: 'Não'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
share: 'Compartilhar'
|
||||
|
||||
crud:
|
||||
|
|
|
|||
|
|
@ -925,6 +925,8 @@ profile:
|
|||
birthdayInfo: 'Nie pokazujemy publicznie pełnej daty urodzenia, jedynie obliczony wiek.'
|
||||
flags: 'Flagi'
|
||||
flagsInfo: 'Przeciągnij swoje pride''owe flagi do poniższej ramki.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: 'Linki'
|
||||
column: 'Kolumna'
|
||||
|
||||
|
|
@ -943,6 +945,14 @@ profile:
|
|||
meh: 'Spoko'
|
||||
no: 'Nie'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
census:
|
||||
header: 'Spis'
|
||||
headerLong: 'Niebinarny spis powszechny'
|
||||
|
|
|
|||
|
|
@ -404,6 +404,8 @@ profile:
|
|||
birthdayInfo: 'We do not publish your birthday, just the calculated age.'
|
||||
flags: 'פֿענער'
|
||||
flagsInfo: 'Drag & drop your pride flags into this frame.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: 'פֿאַרבינדונגען'
|
||||
column: 'Column'
|
||||
|
||||
|
|
@ -422,6 +424,14 @@ profile:
|
|||
meh: 'אָקײ'
|
||||
no: 'נײן'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
share: 'Share'
|
||||
|
||||
crud:
|
||||
|
|
|
|||
|
|
@ -371,6 +371,8 @@ profile:
|
|||
birthdayInfo: '我們不發布您的生日，只發布計算出的年齡。'
|
||||
flags: '旗幟'
|
||||
flagsInfo: '將您的驕傲旗幟拖放到此框架中.'
|
||||
flagsCustom: 'Upload custom flags' # TODO
|
||||
flagsCustomWarning: 'This flag has been uploaded by a user. The team of pronouns.page is not responsible for it.' # TODO
|
||||
links: '鏈接'
|
||||
column: '列'
|
||||
|
||||
|
|
@ -389,6 +391,14 @@ profile:
|
|||
meh: 'OK'
|
||||
no: '不好'
|
||||
|
||||
# TODO
|
||||
# banner: >
|
||||
# You can also use our website to create a card, {/@andrea=like this one},
|
||||
# containing your names, pronouns, pride flags, liked words, etc.
|
||||
# Then you can link to it in your bio or email footer.
|
||||
# Just create an account {/account=here}.
|
||||
# bannerButton: 'Create a card'
|
||||
|
||||
share: '這裡'
|
||||
|
||||
crud:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
-- Up
|
||||
|
||||
ALTER TABLE profiles ADD COLUMN customFlags TEXT NOT NULL DEFAULT '{}';
|
||||
|
||||
-- Down
|
||||
|
|
@ -44,7 +44,17 @@
|
|||
<section v-if="profile.flags.length">
|
||||
<ul class="list-inline">
|
||||
<li v-for="flag in profile.flags" v-if="allFlags[flag]" class="list-inline-item pr-2">
|
||||
<Flag :name="flag.startsWith('-') ? allFlags[flag] : $translateForPronoun(allFlags[flag], mainPronoun)" :alt="allFlags[flag]" :img="`/flags/${flag}.png`" :terms="terms"/>
|
||||
<Flag :name="flag.startsWith('-') ? allFlags[flag] : $translateForPronoun(allFlags[flag], mainPronoun)"
|
||||
:alt="allFlags[flag]"
|
||||
:img="`/flags/${flag}.png`"
|
||||
:terms="terms"/>
|
||||
</li>
|
||||
<li v-for="(desc, flag) in profile.customFlags" class="list-inline-item pr-2">
|
||||
<Flag :name="desc"
|
||||
:alt="desc"
|
||||
:img="buildImageUrl(flag, 'flag')"
|
||||
:terms="terms"
|
||||
custom/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,15 @@
|
|||
</ButtonList>
|
||||
</div>
|
||||
|
||||
<details class="form-group border rounded" open>
|
||||
<summary class="px-3 py-2 small">
|
||||
<T>profile.flagsCustom</T>
|
||||
</summary>
|
||||
<div class="border-top">
|
||||
<ImageWidgetRich v-model="customFlags"/>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="form-group">
|
||||
<h3 class="h4">
|
||||
<Icon v="link"/>
|
||||
|
|
@ -178,6 +187,7 @@
|
|||
birthday: profile.birthday,
|
||||
links: Object.keys(profile.links).length ? profile.links : [],
|
||||
flags: profile.flags,
|
||||
customFlags: profile.customFlags,
|
||||
words: profile.words.map(x => dictToList(x)),
|
||||
teamName: profile.teamName,
|
||||
footerName: profile.footerName,
|
||||
|
|
@ -198,6 +208,7 @@
|
|||
birthday: profile.birthday,
|
||||
links: Object.keys(profile.links).length ? profile.links : [],
|
||||
flags: profile.flags.filter(f => !f.startsWith('-')),
|
||||
customFlags: profile.customFlags,
|
||||
words: defaultWords,
|
||||
teamName: profile.teamName,
|
||||
footerName: profile.footerName,
|
||||
|
|
@ -212,6 +223,7 @@
|
|||
birthday: null,
|
||||
links: [],
|
||||
flags: [],
|
||||
customFlags: {},
|
||||
words: defaultWords,
|
||||
teamName: '',
|
||||
footerName: '',
|
||||
|
|
@ -234,6 +246,7 @@
|
|||
birthday: this.birthday,
|
||||
links: [...this.links],
|
||||
flags: [...this.flags],
|
||||
customFlags: {...this.customFlags},
|
||||
words: this.words.map(x => listToDict(x)),
|
||||
teamName: this.teamName,
|
||||
footerName: this.footerName,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import S3 from 'aws-sdk/clients/s3';
|
|||
|
||||
const sizes = {
|
||||
big: [1600, false],
|
||||
flag: [256, false],
|
||||
thumb: [240, true],
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const fetchProfiles = async (db, username, self) => {
|
|||
age: calcAge(profile.birthday),
|
||||
links: JSON.parse(profile.links),
|
||||
flags: JSON.parse(profile.flags),
|
||||
customFlags: JSON.parse(profile.customFlags),
|
||||
words: JSON.parse(profile.words),
|
||||
avatar: await avatar(db, profile),
|
||||
birthday: self ? profile.birthday : undefined,
|
||||
|
|
@ -67,9 +68,9 @@ router.post('/profile/save', async (req, res) => {
|
|||
}
|
||||
|
||||
await req.db.get(SQL`DELETE FROM profiles WHERE userId = ${req.user.id} AND locale = ${req.config.locale}`);
|
||||
await req.db.get(SQL`INSERT INTO profiles (id, userId, locale, names, pronouns, description, birthday, links, flags, words, active, teamName, footerName, footerAreas)
|
||||
await req.db.get(SQL`INSERT INTO profiles (id, userId, locale, names, pronouns, description, birthday, links, flags, customFlags, words, active, teamName, footerName, footerAreas)
|
||||
VALUES (${ulid()}, ${req.user.id}, ${req.config.locale}, ${JSON.stringify(req.body.names)}, ${JSON.stringify(req.body.pronouns)},
|
||||
${req.body.description}, ${req.body.birthday || null}, ${JSON.stringify(req.body.links.filter(x => !!x))}, ${JSON.stringify(req.body.flags)},
|
||||
${req.body.description}, ${req.body.birthday || null}, ${JSON.stringify(req.body.links.filter(x => !!x))}, ${JSON.stringify(req.body.flags)}, ${JSON.stringify(req.body.customFlags)},
|
||||
${JSON.stringify(req.body.words)}, 1,
|
||||
${req.isGranted('users') ? req.body.teamName || null : ''},
|
||||
${req.isGranted('users') ? req.body.footerName || null : ''},
|
||||
|
|
|
|||
Reference in New Issue