diff options
Diffstat (limited to 'src')
6 files changed, 23 insertions, 40 deletions
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js index 992d7129..4832abda 100644 --- a/src/components/media_modal/media_modal.js +++ b/src/components/media_modal/media_modal.js @@ -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 () { diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 06ced5a1..69e75e2b 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -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; diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js index 38258296..b44354db 100644 --- a/src/components/post_status_modal/post_status_modal.js +++ b/src/components/post_status_modal/post_status_modal.js @@ -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 { diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue index b5e75de7..06ef0a35 100644 --- a/src/components/post_status_modal/post_status_modal.vue +++ b/src/components/post_status_modal/post_status_modal.vue @@ -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 { diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js index 7c6ea409..3fb96384 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.js +++ b/src/components/user_reporting_modal/user_reporting_modal.js @@ -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 () { diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index ecbc1369..0dce4c55 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -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; |