mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
refactor ContributionForm template
This commit is contained in:
Alina Beck
parent
e14cbf8173
commit
1d435392ff
@ -16,14 +16,6 @@
|
||||
</ds-flex-item>
|
||||
</div>
|
||||
</ds-flex>
|
||||
<p class="small-info">
|
||||
{{
|
||||
$t('contribution.categories.infoSelectedNoOfMaxCategories', {
|
||||
chosen: selectedCount,
|
||||
max: selectedMax,
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,94 +8,64 @@
|
||||
>
|
||||
<template slot-scope="{ errors }">
|
||||
<base-card>
|
||||
<section class="card-image">
|
||||
<section :class="['card-image', form.blurImage && '--blur-image']">
|
||||
<img v-if="contribution" class="preview-image" :src="contribution.image | proxyApiUrl" />
|
||||
<teaser-image
|
||||
:contribution="contribution"
|
||||
:class="{ '--blur-image': form.blurImage }"
|
||||
@addTeaserImage="addTeaserImage"
|
||||
@addImageAspectRatio="addImageAspectRatio"
|
||||
/>
|
||||
</section>
|
||||
<div class="blur-toggle">
|
||||
<div v-if="form.teaserImage || form.image" class="blur-toggle">
|
||||
<label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
|
||||
<input type="checkbox" id="blur-img" v-model="form.blurImage" />
|
||||
<p>
|
||||
<a
|
||||
href="https://support.human-connection.org/kb/faq.php?id=113"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>
|
||||
{{ $t('contribution.inappropriatePictureText') }}
|
||||
<ds-icon name="question-circle" />
|
||||
</a>
|
||||
</p>
|
||||
<a
|
||||
href="https://support.human-connection.org/kb/faq.php?id=113"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>
|
||||
{{ $t('contribution.inappropriatePictureText') }}
|
||||
<base-icon name="question-circle" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ds-space />
|
||||
<client-only>
|
||||
<user-teaser :user="currentUser" />
|
||||
</client-only>
|
||||
<ds-space />
|
||||
<ds-input
|
||||
model="title"
|
||||
class="post-title"
|
||||
:placeholder="$t('contribution.title')"
|
||||
name="title"
|
||||
autofocus
|
||||
size="large"
|
||||
/>
|
||||
<ds-text align="right">
|
||||
<ds-chip v-if="errors && errors.title" color="danger" size="base">
|
||||
{{ form.title.length }}/{{ formSchema.title.max }}
|
||||
<ds-icon name="warning"></ds-icon>
|
||||
</ds-chip>
|
||||
<ds-chip v-else size="base">{{ form.title.length }}/{{ formSchema.title.max }}</ds-chip>
|
||||
</ds-text>
|
||||
<ds-chip size="base" :color="errors && errors.title && 'danger'">
|
||||
{{ form.title.length }}/{{ formSchema.title.max }}
|
||||
<base-icon v-if="errors && errors.title" name="warning" />
|
||||
</ds-chip>
|
||||
<hc-editor
|
||||
:users="users"
|
||||
:value="form.content"
|
||||
:hashtags="hashtags"
|
||||
@input="updateEditorContent"
|
||||
/>
|
||||
<ds-text align="right">
|
||||
<ds-chip v-if="errors && errors.content" color="danger" size="base">
|
||||
{{ contentLength }}
|
||||
<ds-icon name="warning"></ds-icon>
|
||||
</ds-chip>
|
||||
<ds-chip v-else size="base">
|
||||
{{ contentLength }}
|
||||
</ds-chip>
|
||||
</ds-text>
|
||||
<ds-space margin-bottom="small" />
|
||||
<hc-categories-select model="categoryIds" :existingCategoryIds="form.categoryIds" />
|
||||
<ds-text align="right">
|
||||
<ds-chip v-if="errors && errors.categoryIds" color="danger" size="base">
|
||||
{{ form.categoryIds.length }} / 3
|
||||
<ds-icon name="warning"></ds-icon>
|
||||
</ds-chip>
|
||||
<ds-chip v-else size="base">{{ form.categoryIds.length }} / 3</ds-chip>
|
||||
</ds-text>
|
||||
<ds-flex class="contribution-form-footer">
|
||||
<ds-flex-item :width="{ lg: '50%', md: '50%', sm: '100%' }" />
|
||||
<ds-flex-item>
|
||||
<ds-space margin-bottom="small" />
|
||||
<ds-select
|
||||
model="language"
|
||||
:options="languageOptions"
|
||||
icon="globe"
|
||||
:placeholder="$t('contribution.languageSelectText')"
|
||||
:label="$t('contribution.languageSelectLabel')"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<ds-text align="right">
|
||||
<ds-chip v-if="errors && errors.language" size="base" color="danger">
|
||||
<ds-icon name="warning"></ds-icon>
|
||||
</ds-chip>
|
||||
</ds-text>
|
||||
|
||||
<ds-space />
|
||||
<div style="text-align: right">
|
||||
<ds-chip size="base" :color="errors && errors.content && 'danger'">
|
||||
{{ contentLength }}
|
||||
<base-icon v-if="errors && errors.content" name="warning" />
|
||||
</ds-chip>
|
||||
<categories-select model="categoryIds" :existingCategoryIds="form.categoryIds" />
|
||||
<ds-chip size="base" :color="errors && errors.categoryIds && 'danger'">
|
||||
{{ form.categoryIds.length }} / 3
|
||||
<base-icon v-if="errors && errors.categoryIds" name="warning" />
|
||||
</ds-chip>
|
||||
<ds-select
|
||||
model="language"
|
||||
icon="globe"
|
||||
class="select-field"
|
||||
:options="languageOptions"
|
||||
:placeholder="$t('contribution.languageSelectText')"
|
||||
:label="$t('contribution.languageSelectLabel')"
|
||||
/>
|
||||
<ds-chip v-if="errors && errors.language" size="base" color="danger">
|
||||
<base-icon name="warning" />
|
||||
</ds-chip>
|
||||
<div class="buttons">
|
||||
<base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
|
||||
{{ $t('actions.cancel') }}
|
||||
</base-button>
|
||||
@ -103,7 +73,6 @@
|
||||
{{ $t('actions.save') }}
|
||||
</base-button>
|
||||
</div>
|
||||
<ds-space margin-bottom="large" />
|
||||
</base-card>
|
||||
</template>
|
||||
</ds-form>
|
||||
@ -116,16 +85,14 @@ import { mapGetters } from 'vuex'
|
||||
import HcEditor from '~/components/Editor/Editor'
|
||||
import locales from '~/locales'
|
||||
import PostMutations from '~/graphql/PostMutations.js'
|
||||
import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
|
||||
import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
|
||||
import TeaserImage from '~/components/TeaserImage/TeaserImage'
|
||||
import UserTeaser from '~/components/UserTeaser/UserTeaser'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HcEditor,
|
||||
HcCategoriesSelect,
|
||||
CategoriesSelect,
|
||||
TeaserImage,
|
||||
UserTeaser,
|
||||
},
|
||||
props: {
|
||||
contribution: { type: Object, default: () => {} },
|
||||
@ -194,12 +161,12 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
contentLength() {
|
||||
return this.$filters.removeHtml(this.form.content).length
|
||||
},
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
contentLength() {
|
||||
return this.$filters.removeHtml(this.form.content).length
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
@ -293,8 +260,38 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.contribution-form {
|
||||
.card-image {
|
||||
position: relative;
|
||||
> .base-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> .card-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: $space-xx-small;
|
||||
|
||||
&.--blur-image img {
|
||||
filter: blur(22px);
|
||||
}
|
||||
}
|
||||
|
||||
> .ds-form-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .ds-chip {
|
||||
align-self: flex-end;
|
||||
margin: $space-xx-small 0 $space-base;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
> .select-field {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
align-self: flex-end;
|
||||
margin-top: $space-base;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
@ -305,27 +302,11 @@ export default {
|
||||
|
||||
.blur-toggle {
|
||||
text-align: right;
|
||||
margin-bottom: $space-base;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-chip {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
margin-top: $space-x-small;
|
||||
margin-bottom: $space-xx-small;
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
font-size: $font-size-x-large;
|
||||
font-weight: bold;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -106,7 +106,6 @@ export default {
|
||||
.image-uploader {
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&:only-child {
|
||||
@ -117,10 +116,6 @@ export default {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.--blur-image img {
|
||||
filter: blur(22px);
|
||||
}
|
||||
|
||||
.preview-image + & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user