aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/mobile_post_status_button/mobile_post_status_button.js (renamed from src/components/mobile_post_status_modal/mobile_post_status_modal.js)25
-rw-r--r--src/components/mobile_post_status_button/mobile_post_status_button.vue (renamed from src/components/mobile_post_status_modal/mobile_post_status_modal.vue)38
-rw-r--r--src/components/notification/notification.js14
-rw-r--r--src/components/notification/notification.vue202
-rw-r--r--src/components/notifications/notifications.scss5
-rw-r--r--src/components/post_status_form/post_status_form.js2
-rw-r--r--src/components/post_status_modal/post_status_modal.js32
-rw-r--r--src/components/post_status_modal/post_status_modal.vue43
-rw-r--r--src/components/user_card/user_card.js3
-rw-r--r--src/components/user_card/user_card.vue9
-rw-r--r--src/components/user_panel/user_panel.vue2
11 files changed, 224 insertions, 151 deletions
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 3cec23c6..3e77148a 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -1,14 +1,9 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
import { debounce } from 'lodash'
-const MobilePostStatusModal = {
- components: {
- PostStatusForm
- },
+const MobilePostStatusButton = {
data () {
return {
hidden: false,
- postFormOpen: false,
scrollingDown: false,
inputActive: false,
oldScrollPos: 0,
@@ -28,8 +23,8 @@ const MobilePostStatusModal = {
window.removeEventListener('resize', this.handleOSK)
},
computed: {
- currentUser () {
- return this.$store.state.users.currentUser
+ isLoggedIn () {
+ return !!this.$store.state.users.currentUser
},
isHidden () {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
@@ -57,17 +52,7 @@ const MobilePostStatusModal = {
window.removeEventListener('scroll', this.handleScrollEnd)
},
openPostForm () {
- this.postFormOpen = true
- this.hidden = true
-
- const el = this.$el.querySelector('textarea')
- this.$nextTick(function () {
- el.focus()
- })
- },
- closePostForm () {
- this.postFormOpen = false
- this.hidden = false
+ this.$store.dispatch('openPostStatusModal')
},
handleOSK () {
// This is a big hack: we're guessing from changed window sizes if the
@@ -105,4 +90,4 @@ const MobilePostStatusModal = {
}
}
-export default MobilePostStatusModal
+export default MobilePostStatusButton
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index b6d7d3ba..9cf45de3 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -1,23 +1,5 @@
<template>
- <div v-if="currentUser">
- <div
- v-show="postFormOpen"
- class="post-form-modal-view modal-view"
- @click="closePostForm"
- >
- <div
- class="post-form-modal-panel panel"
- @click.stop=""
- >
- <div class="panel-heading">
- {{ $t('post_status.new_status') }}
- </div>
- <PostStatusForm
- class="panel-body"
- @posted="closePostForm"
- />
- </div>
- </div>
+ <div v-if="isLoggedIn">
<button
class="new-status-button"
:class="{ 'hidden': isHidden }"
@@ -28,27 +10,11 @@
</div>
</template>
-<script src="./mobile_post_status_modal.js"></script>
+<script src="./mobile_post_status_button.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%;
- }
-}
-
.new-status-button {
width: 5em;
height: 5em;
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 896c6d52..8e817f3b 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -9,7 +9,8 @@ const Notification = {
data () {
return {
userExpanded: false,
- betterShadow: this.$store.state.interface.browserSupport.cssFilter
+ betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+ unmuted: false
}
},
props: [ 'notification' ],
@@ -23,11 +24,14 @@ const Notification = {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
- userProfileLink (user) {
+ generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
},
getUser (notification) {
return this.$store.state.users.usersObject[notification.from_profile.id]
+ },
+ toggleMute () {
+ this.unmuted = !this.unmuted
}
},
computed: {
@@ -47,6 +51,12 @@ const Notification = {
return this.userInStore
}
return this.notification.from_profile
+ },
+ userProfileLink () {
+ return this.generateUserProfileLink(this.user)
+ },
+ needMute () {
+ return this.user.muted
}
}
}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index bafcd026..1f192c77 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -4,104 +4,126 @@
:compact="true"
:statusoid="notification.status"
/>
- <div
- v-else
- class="non-mention"
- :class="[userClass, { highlighted: userStyle }]"
- :style="[ userStyle ]"
- >
- <a
- class="avatar-container"
- :href="notification.from_profile.statusnet_profile_url"
- @click.stop.prevent.capture="toggleUserExpanded"
+ <div v-else>
+ <div
+ v-if="needMute && !unmuted"
+ class="container muted"
>
- <UserAvatar
- :compact="true"
- :better-shadow="betterShadow"
- :user="notification.from_profile"
- />
- </a>
- <div class="notification-right">
- <UserCard
- v-if="userExpanded"
- :user="getUser(notification)"
- :rounded="true"
- :bordered="true"
- />
- <span class="notification-details">
- <div class="name-and-action">
- <!-- eslint-disable vue/no-v-html -->
- <span
- v-if="!!notification.from_profile.name_html"
- class="username"
- :title="'@'+notification.from_profile.screen_name"
- v-html="notification.from_profile.name_html"
- />
- <!-- eslint-enable vue/no-v-html -->
- <span
- v-else
- class="username"
- :title="'@'+notification.from_profile.screen_name"
- >{{ notification.from_profile.name }}</span>
- <span v-if="notification.type === 'like'">
- <i class="fa icon-star lit" />
- <small>{{ $t('notifications.favorited_you') }}</small>
- </span>
- <span v-if="notification.type === 'repeat'">
- <i
- class="fa icon-retweet lit"
- :title="$t('tool_tip.repeat')"
+ <small>
+ <router-link :to="userProfileLink">
+ {{ notification.from_profile.screen_name }}
+ </router-link>
+ </small>
+ <a
+ href="#"
+ class="unmute"
+ @click.prevent="toggleMute"
+ ><i class="button-icon icon-eye-off" /></a>
+ </div>
+ <div
+ v-else
+ class="non-mention"
+ :class="[userClass, { highlighted: userStyle }]"
+ :style="[ userStyle ]"
+ >
+ <a
+ class="avatar-container"
+ :href="notification.from_profile.statusnet_profile_url"
+ @click.stop.prevent.capture="toggleUserExpanded"
+ >
+ <UserAvatar
+ :compact="true"
+ :better-shadow="betterShadow"
+ :user="notification.from_profile"
+ />
+ </a>
+ <div class="notification-right">
+ <UserCard
+ v-if="userExpanded"
+ :user="getUser(notification)"
+ :rounded="true"
+ :bordered="true"
+ />
+ <span class="notification-details">
+ <div class="name-and-action">
+ <!-- eslint-disable vue/no-v-html -->
+ <span
+ v-if="!!notification.from_profile.name_html"
+ class="username"
+ :title="'@'+notification.from_profile.screen_name"
+ v-html="notification.from_profile.name_html"
/>
- <small>{{ $t('notifications.repeated_you') }}</small>
- </span>
- <span v-if="notification.type === 'follow'">
- <i class="fa icon-user-plus lit" />
- <small>{{ $t('notifications.followed_you') }}</small>
- </span>
- </div>
+ <!-- eslint-enable vue/no-v-html -->
+ <span
+ v-else
+ class="username"
+ :title="'@'+notification.from_profile.screen_name"
+ >{{ notification.from_profile.name }}</span>
+ <span v-if="notification.type === 'like'">
+ <i class="fa icon-star lit" />
+ <small>{{ $t('notifications.favorited_you') }}</small>
+ </span>
+ <span v-if="notification.type === 'repeat'">
+ <i
+ class="fa icon-retweet lit"
+ :title="$t('tool_tip.repeat')"
+ />
+ <small>{{ $t('notifications.repeated_you') }}</small>
+ </span>
+ <span v-if="notification.type === 'follow'">
+ <i class="fa icon-user-plus lit" />
+ <small>{{ $t('notifications.followed_you') }}</small>
+ </span>
+ </div>
+ <div
+ v-if="notification.type === 'follow'"
+ class="timeago"
+ >
+ <span class="faint">
+ <Timeago
+ :time="notification.created_at"
+ :auto-update="240"
+ />
+ </span>
+ </div>
+ <div
+ v-else
+ class="timeago"
+ >
+ <router-link
+ v-if="notification.status"
+ :to="{ name: 'conversation', params: { id: notification.status.id } }"
+ class="faint-link"
+ >
+ <Timeago
+ :time="notification.created_at"
+ :auto-update="240"
+ />
+ </router-link>
+ </div>
+ <a
+ v-if="needMute"
+ href="#"
+ @click.prevent="toggleMute"
+ ><i class="button-icon icon-eye-off" /></a>
+ </span>
<div
v-if="notification.type === 'follow'"
- class="timeago"
- >
- <span class="faint">
- <Timeago
- :time="notification.created_at"
- :auto-update="240"
- />
- </span>
- </div>
- <div
- v-else
- class="timeago"
+ class="follow-text"
>
- <router-link
- v-if="notification.status"
- :to="{ name: 'conversation', params: { id: notification.status.id } }"
- class="faint-link"
- >
- <Timeago
- :time="notification.created_at"
- :auto-update="240"
- />
+ <router-link :to="userProfileLink">
+ @{{ notification.from_profile.screen_name }}
</router-link>
</div>
- </span>
- <div
- v-if="notification.type === 'follow'"
- class="follow-text"
- >
- <router-link :to="userProfileLink(notification.from_profile)">
- @{{ notification.from_profile.screen_name }}
- </router-link>
+ <template v-else>
+ <status
+ class="faint"
+ :compact="true"
+ :statusoid="notification.action"
+ :no-heading="true"
+ />
+ </template>
</div>
- <template v-else>
- <status
- class="faint"
- :compact="true"
- :statusoid="notification.action"
- :no-heading="true"
- />
- </template>
</div>
</div>
</template>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 622d12f4..71876b14 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -33,7 +33,6 @@
.notification {
box-sizing: border-box;
- display: flex;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
@@ -47,6 +46,10 @@
}
}
+ .muted {
+ padding: .25em .6em;
+ }
+
.non-mention {
display: flex;
flex: 1;
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 40bbf6d4..dc4b419c 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -8,7 +8,7 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
import { reject, map, uniqBy } from 'lodash'
import suggestor from '../emoji-input/suggestor.js'
-const buildMentionsString = ({ user, attentions }, currentUser) => {
+const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions]
allAttentions.unshift(user)
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..1033ba11
--- /dev/null
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -0,0 +1,32 @@
+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 || {}
+ }
+ },
+ watch: {
+ isOpen (val) {
+ if (val) {
+ this.$nextTick(() => this.$el.querySelector('textarea').focus())
+ }
+ }
+ },
+ 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..3f8eec69
--- /dev/null
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -0,0 +1,43 @@
+<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"
+ v-bind="params"
+ @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 e3bd7697..0c200ad1 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -168,6 +168,9 @@ export default {
}
this.$store.dispatch('setMedia', [attachment])
this.$store.dispatch('setCurrent', attachment)
+ },
+ mentionUser () {
+ this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
}
}
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0b83cf16..f25d16d3 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -190,6 +190,15 @@
<div>
<button
+ class="btn btn-default btn-block"
+ @click="mentionUser"
+ >
+ {{ $t('user_card.mention') }}
+ </button>
+ </div>
+
+ <div>
+ <button
v-if="user.muted"
class="btn btn-default btn-block pressed"
@click="unmuteUser"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index c92630e3..e859d612 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -11,7 +11,7 @@
rounded="top"
/>
<div class="panel-footer">
- <post-status-form v-if="user" />
+ <post-status-form />
</div>
</div>
<auth-form
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-28 01:49:48 +0000