diff options
| -rw-r--r-- | src/App.js | 4 | ||||
| -rw-r--r-- | src/App.vue | 1 | ||||
| -rw-r--r-- | src/components/post_status_modal/post_status_modal.js | 25 | ||||
| -rw-r--r-- | src/components/post_status_modal/post_status_modal.vue | 42 | ||||
| -rw-r--r-- | src/components/user_card/user_card.js | 2 | ||||
| -rw-r--r-- | src/main.js | 4 | ||||
| -rw-r--r-- | src/modules/postStatus.js | 25 |
7 files changed, 100 insertions, 3 deletions
@@ -11,6 +11,7 @@ import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' +import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import { windowWidth } from './services/window_utils/window_utils' export default { @@ -28,7 +29,8 @@ export default { SideDrawer, MobilePostStatusModal, MobileNav, - UserReportingModal + UserReportingModal, + PostStatusModal }, data: () => ({ mobileActivePanel: 'timeline', diff --git a/src/App.vue b/src/App.vue index 719e00a4..46d3ac42 100644 --- a/src/App.vue +++ b/src/App.vue @@ -109,6 +109,7 @@ /> <MobilePostStatusModal /> <UserReportingModal /> + <PostStatusModal /> <portal-target name="modal" /> </div> </template> diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js new file mode 100644 index 00000000..86a4e1d8 --- /dev/null +++ b/src/components/post_status_modal/post_status_modal.js @@ -0,0 +1,25 @@ +import PostStatusForm from '../post_status_form/post_status_form.vue' + +const PostStatusModal = { + components: { + PostStatusForm + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + isOpen () { + return this.isLoggedIn && this.$store.state.postStatus.modalActivated + }, + params () { + return this.$store.state.postStatus.params + } + }, + methods: { + closeModal () { + this.$store.dispatch('closePostStatusModal') + } + } +} + +export default PostStatusModal diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue new file mode 100644 index 00000000..85a5401c --- /dev/null +++ b/src/components/post_status_modal/post_status_modal.vue @@ -0,0 +1,42 @@ +<template> + <div + v-if="isOpen" + class="post-form-modal-view modal-view" + @click="closeModal" + > + <div + class="post-form-modal-panel panel" + @click.stop="" + > + <div class="panel-heading"> + {{ $t('post_status.new_status') }} + </div> + <PostStatusForm + class="panel-body" + @posted="closeModal" + /> + </div> + </div> +</template> + +<script src="./post_status_modal.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.post-form-modal-view { + align-items: flex-start; +} + +.post-form-modal-panel { + flex-shrink: 0; + margin-top: 25%; + margin-bottom: 2em; + width: 100%; + max-width: 700px; + + @media (orientation: landscape) { + margin-top: 8%; + } +} +</style> diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index d42be9fc..0c200ad1 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -170,7 +170,7 @@ export default { this.$store.dispatch('setCurrent', attachment) }, mentionUser () { - + this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user }) } } } diff --git a/src/main.js b/src/main.js index b3256e8e..a43d31e2 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,7 @@ import mediaViewerModule from './modules/media_viewer.js' import oauthTokensModule from './modules/oauth_tokens.js' import reportsModule from './modules/reports.js' import pollsModule from './modules/polls.js' +import postStatusModule from './modules/postStatus.js' import VueI18n from 'vue-i18n' @@ -76,7 +77,8 @@ const persistedStateOptions = { mediaViewer: mediaViewerModule, oauthTokens: oauthTokensModule, reports: reportsModule, - polls: pollsModule + polls: pollsModule, + postStatus: postStatusModule }, plugins: [persistedState, pushNotifications], strict: false // Socket modifies itself, let's ignore this for now. diff --git a/src/modules/postStatus.js b/src/modules/postStatus.js new file mode 100644 index 00000000..638c1fb2 --- /dev/null +++ b/src/modules/postStatus.js @@ -0,0 +1,25 @@ +const postStatus = { + state: { + params: null, + modalActivated: false + }, + mutations: { + openPostStatusModal (state, params) { + state.params = params + state.modalActivated = true + }, + closePostStatusModal (state) { + state.modalActivated = false + } + }, + actions: { + openPostStatusModal ({ commit }, params) { + commit('openPostStatusModal', params) + }, + closePostStatusModal ({ commit }) { + commit('closePostStatusModal') + } + } +} + +export default postStatus |