ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the frontend tests and design issues with and in the report modal

Browse Source 
Co-Authored-By: mattwr18 <mattwr18@gmail.com>
Co-Authored-By: alina-beck <4ndroid4va@gmail.com>
This commit is contained in:
Wolfgang Huß 2019-10-09 15:49:11 +02:00
parent ab8e30df30
commit 0062725470
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/components/Modal/ReportModal.spec.js
View File

@ -20,7 +20,7 @@ describe('ReportModal.vue', () => {
id: 'c43', id: 'c43',
} }
mocks = { mocks = {
$t: jest.fn(), $t: jest.fn(a => a),
$filters: { $filters: {
truncate: a => a, truncate: a => a,
}, },
@ -29,7 +29,9 @@ describe('ReportModal.vue', () => {
error: () => {}, error: () => {},
}, },
$apollo: { $apollo: {
mutate: jest.fn().mockResolvedValue(), mutate: jest.fn().mockResolvedValue({
data: {},
}),
}, },
} }
}) })
@ -154,6 +156,7 @@ describe('ReportModal.vue', () => {
describe('click confirm button', () => { describe('click confirm button', () => {
beforeEach(() => { beforeEach(() => {
wrapper.find('.ds-radio-option-label').trigger('click')
wrapper.find('button.confirm').trigger('click') wrapper.find('button.confirm').trigger('click')
}) })

29
webapp/components/Modal/ReportModal.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<ds-modal <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
:title="title"
:is-open="isOpen"
:width="{ base: '100%', sm: '200px', md: '200px', lg: '200px' }"
@cancel="cancel"
>
<transition name="ds-transition-fade"> <transition name="ds-transition-fade">
<ds-flex v-if="success" class="hc-modal-success" centered> <ds-flex v-if="success" class="hc-modal-success" centered>
<sweetalert-icon icon="success" /> <sweetalert-icon icon="success" />
@ -26,6 +21,7 @@
:schema="formSchema.reasonCategory" :schema="formSchema.reasonCategory"
:label="$t('report.reason.category.label')" :label="$t('report.reason.category.label')"
:options="form.reasonCategoryOptions" :options="form.reasonCategoryOptions"
labelProp="label"
/> />
<!-- Wolle <ds-input <!-- Wolle <ds-input
model="reasonDescription" model="reasonDescription"
@ -33,16 +29,16 @@
:placeholder="$t('report.reason.description.placeholder')" :placeholder="$t('report.reason.description.placeholder')"
type="textarea" type="textarea"
rows="5" rows="5"
class="reasonDescription" class="reason-description"
/> --> /> -->
<ds-input <ds-input
class="reason-description"
:value="form.reasonDescription" :value="form.reasonDescription"
:schema="formSchema.reasonDescription" :schema="formSchema.reasonDescription"
:label="$t('report.reason.description.label')" :label="$t('report.reason.description.label')"
:placeholder="$t('report.reason.description.placeholder')" :placeholder="$t('report.reason.description.placeholder')"
type="textarea" type="textarea"
rows="5" rows="5"
class="reasonDescription"
/> />
<small class="smallTag"> <small class="smallTag">
{{ form.reasonDescription.length }}/{{ formSchema.reasonDescription.max }} {{ form.reasonDescription.length }}/{{ formSchema.reasonDescription.max }}
@ -214,15 +210,24 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.reasonDescription { .ds-modal {
margin-top: $space-x-small; max-width: 600px !important;
margin-bottom: $space-xxx-small; }
.ds-radio-option:not(.ds-button) {
width: 100% !important;
}
.ds-radio-option-label {
margin: 5px 20px 5px 5px !important;
width: 100% !important;
}
.reason-description {
margin-top: $space-x-small !important;
margin-bottom: $space-xx-small !important;
} }
.smallTag { .smallTag {
width: 100%; width: 100%;
position: relative; position: relative;
left: 90%; left: 90%;
margin-top: $space-xxx-small;
} }
.hc-modal-success { .hc-modal-success {
pointer-events: none; pointer-events: none;