refactor all kind of modals using the modal component

This commit is contained in:
taehoon 2019-10-18 07:05:01 -04:00
parent 07ec18fe11
commit 348d6664eb
6 changed files with 23 additions and 40 deletions

View file

@ -1,11 +1,13 @@
import StillImage from '../still-image/still-image.vue'
import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
const MediaModal = {
components: {
StillImage,
VideoAttachment
VideoAttachment,
Modal
},
computed: {
showing () {

View file

@ -1,9 +1,8 @@
<template>
<div
<Modal
v-if="showing"
v-body-scroll-lock="showing"
class="modal-view media-modal-view"
@click.prevent="hide"
class="media-modal-view"
@close="hide"
>
<img
v-if="type === 'image'"
@ -33,7 +32,7 @@
>
<i class="icon-right-open arrow-icon" />
</button>
</div>
</Modal>
</template>
<script src="./media_modal.js"></script>
@ -44,10 +43,6 @@
.media-modal-view {
z-index: 1001;
body:not(.scroll-locked) & {
display: none;
}
&:hover {
.modal-view-button-arrow {
opacity: 0.75;

View file

@ -1,9 +1,11 @@
import PostStatusForm from '../post_status_form/post_status_form.vue'
import Modal from '../modal/modal.vue'
import get from 'lodash/get'
const PostStatusModal = {
components: {
PostStatusForm
PostStatusForm,
Modal
},
data () {
return {

View file

@ -1,15 +1,11 @@
<template>
<div
<Modal
v-if="isLoggedIn && !resettingForm"
v-show="modalActivated"
v-body-scroll-lock="modalActivated"
class="post-form-modal-view modal-view"
@click="closeModal"
class="post-form-modal-view"
@close="closeModal"
>
<div
class="post-form-modal-panel panel"
@click.stop=""
>
<div class="post-form-modal-panel panel">
<div class="panel-heading">
{{ $t('post_status.new_status') }}
</div>
@ -19,7 +15,7 @@
@posted="closeModal"
/>
</div>
</div>
</Modal>
</template>
<script src="./post_status_modal.js"></script>
@ -29,10 +25,6 @@
.post-form-modal-view {
align-items: flex-start;
body:not(.scroll-locked) & {
display: none;
}
}
.post-form-modal-panel {

View file

@ -2,12 +2,14 @@
import Status from '../status/status.vue'
import List from '../list/list.vue'
import Checkbox from '../checkbox/checkbox.vue'
import Modal from '../modal/modal.vue'
const UserReportingModal = {
components: {
Status,
List,
Checkbox
Checkbox,
Modal
},
data () {
return {
@ -51,6 +53,7 @@ const UserReportingModal = {
this.error = false
},
closeModal () {
console.log('closeModal clicked')
this.$store.dispatch('closeUserReportingModal')
},
reportUser () {

View file

@ -1,14 +1,9 @@
<template>
<div
<Modal
v-if="isOpen"
v-body-scroll-lock="isOpen"
class="modal-view user-reporting-modal-view"
@click="closeModal"
@close="closeModal"
>
<div
class="user-reporting-panel panel"
@click.stop=""
>
<div class="user-reporting-panel panel">
<div class="panel-heading">
<div class="title">
{{ $t('user_reporting.title', [user.screen_name]) }}
@ -70,7 +65,7 @@
</div>
</div>
</div>
</div>
</Modal>
</template>
<script src="./user_reporting_modal.js"></script>
@ -78,12 +73,6 @@
<style lang="scss">
@import '../../_variables.scss';
.user-reporting-modal-view {
body:not(.scroll-locked) & {
display: none;
}
}
.user-reporting-panel {
width: 90vw;
max-width: 700px;