From d0075026290c90d8406c7ac81413259a8ae58ec7 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 15 Nov 2019 08:39:21 +0200 Subject: add fetching for emoji reactions, draft design --- src/components/status/status.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/components/status/status.js') diff --git a/src/components/status/status.js b/src/components/status/status.js index 4fbd5ac3..8268e615 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -278,6 +278,12 @@ const Status = { hidePostStats () { return this.mergedConfig.hidePostStats }, + emojiReactions () { + return { + '🤔': [{ 'id': 'xyz..' }, { 'id': 'zyx...' }], + '🐻': [{ 'id': 'abc...' }] + } + }, ...mapGetters(['mergedConfig']) }, components: { -- cgit v1.2.3-70-g09d2 From de945ba3e9470b28dd010fb32f658b42053f19d3 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Fri, 15 Nov 2019 16:29:25 +0200 Subject: wip commit, add basic popover for emoji reaction select --- src/components/react_button/react_button.js | 50 ++++++++++++++++++ src/components/react_button/react_button.vue | 78 ++++++++++++++++++++++++++++ src/components/status/status.js | 2 + src/components/status/status.vue | 10 ++-- src/i18n/en.json | 1 + 5 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 src/components/react_button/react_button.js create mode 100644 src/components/react_button/react_button.vue (limited to 'src/components/status/status.js') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js new file mode 100644 index 00000000..d1d15d93 --- /dev/null +++ b/src/components/react_button/react_button.js @@ -0,0 +1,50 @@ +import { mapGetters } from 'vuex' + +const ReactButton = { + props: ['status', 'loggedIn'], + data () { + return { + animated: false, + showTooltip: false, + popperOptions: { + modifiers: { + preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' } + } + } + } + }, + methods: { + openReactionSelect () { + console.log('test') + this.showTooltip = true + }, + closeReactionSelect () { + this.showTooltip = false + }, + favorite () { + if (!this.status.favorited) { + this.$store.dispatch('favorite', { id: this.status.id }) + } else { + this.$store.dispatch('unfavorite', { id: this.status.id }) + } + this.animated = true + setTimeout(() => { + this.animated = false + }, 500) + } + }, + computed: { + emojis () { + return this.$store.state.instance.emoji || [] + }, + classes () { + return { + 'icon-smile': true, + 'animate-spin': this.animated + } + }, + ...mapGetters(['mergedConfig']) + } +} + +export default ReactButton diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue new file mode 100644 index 00000000..93638770 --- /dev/null +++ b/src/components/react_button/react_button.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/components/status/status.js b/src/components/status/status.js index 8268e615..8c6fc0cf 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,5 +1,6 @@ import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' +import ReactButton from '../react_button/react_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' import Poll from '../poll/poll.vue' import ExtraButtons from '../extra_buttons/extra_buttons.vue' @@ -289,6 +290,7 @@ const Status = { components: { Attachment, FavoriteButton, + ReactButton, RetweetButton, ExtraButtons, PostStatusForm, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index aae58a5e..d455ccf6 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -356,12 +356,12 @@
@@ -393,6 +393,10 @@ :logged-in="loggedIn" :status="status" /> + Date: Mon, 25 Nov 2019 12:25:01 -0500 Subject: restore muted users collapsing logic on other user’s profiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/conversation/conversation.js | 3 ++- src/components/conversation/conversation.vue | 1 + src/components/status/status.js | 5 +++-- src/components/timeline/timeline.vue | 2 ++ 4 files changed, 8 insertions(+), 3 deletions(-) (limited to 'src/components/status/status.js') diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 72ee9c39..08283fff 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -43,7 +43,8 @@ const conversation = { 'collapsable', 'isPage', 'pinnedStatusIdsObject', - 'inProfile' + 'inProfile', + 'profileUserId' ], created () { if (this.isPage) { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 0f1de55f..2e48240a 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -27,6 +27,7 @@ :highlight="getHighlight()" :replies="getReplies(status.id)" :in-profile="inProfile" + :profile-user-id="profileUserId" class="status-fadein panel-body" @goto="setHighlight" @toggleExpanded="toggleExpanded" diff --git a/src/components/status/status.js b/src/components/status/status.js index 714ea6d2..c49e729c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -33,7 +33,8 @@ const Status = { 'noHeading', 'inlineExpanded', 'showPinned', - 'inProfile' + 'inProfile', + 'profileUserId' ], data () { return { @@ -115,7 +116,7 @@ const Status = { return hits }, - muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) }, + muted () { return !this.unmuted && ((!(this.inProfile && this.status.user.id === this.profileUserId) && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) }, hideFilteredStatuses () { return this.mergedConfig.hideFilteredStatuses }, diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index f1d3903a..93f6f570 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -37,6 +37,7 @@ :collapsable="true" :pinned-status-ids-object="pinnedStatusIdsObject" :in-profile="inProfile" + :profile-user-id="userId" /> -- cgit v1.2.3-70-g09d2 From 33abbed5a1e1d1cf99d21d481b2a22481d7533b2 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 13 Jan 2020 23:34:39 +0200 Subject: usable-but-buggy: picker, adding/removing reaction on click, search, styles --- src/components/react_button/react_button.js | 25 +++++---- src/components/react_button/react_button.vue | 37 +++++++++++-- src/components/status/status.js | 21 ++++++-- src/components/status/status.vue | 24 +++++++-- src/modules/statuses.js | 61 ++++++++++++++++++++-- src/services/api/api.service.js | 22 ++++++++ .../backend_interactor_service.js | 4 ++ 7 files changed, 166 insertions(+), 28 deletions(-) (limited to 'src/components/status/status.js') diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index d1d15d93..76a49305 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -6,6 +6,7 @@ const ReactButton = { return { animated: false, showTooltip: false, + filterWord: '', popperOptions: { modifiers: { preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' } @@ -14,27 +15,25 @@ const ReactButton = { } }, methods: { - openReactionSelect () { - console.log('test') - this.showTooltip = true + toggleReactionSelect () { + this.showTooltip = !this.showTooltip }, closeReactionSelect () { this.showTooltip = false }, - favorite () { - if (!this.status.favorited) { - this.$store.dispatch('favorite', { id: this.status.id }) - } else { - this.$store.dispatch('unfavorite', { id: this.status.id }) - } - this.animated = true - setTimeout(() => { - this.animated = false - }, 500) + addReaction (event, emoji) { + this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) + this.closeReactionSelect() } }, computed: { + commonEmojis () { + return ['💖', '😠', '👀', '😂', '🔥'] + }, emojis () { + if (this.filterWord !== '') { + return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord)) + } return this.$store.state.instance.emoji || [] }, classes () { diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 93638770..f7015316 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -5,21 +5,37 @@ trigger="manual" placement="top" class="react-button-popover" - @close-group="closeReactionSelect" + @hide="closeReactionSelect" >
+
+ +
+ + {{ emoji }} + +
{{ emoji.replacement }}
-
+
@import '../../_variables.scss'; +.reaction-picker-filter { + padding: 0.5em; +} + +.reaction-picker-divider { + height: 1px; + width: 100%; + margin: 0.4em; + background-color: var(--border, $fallback--border); +} + .reaction-picker { width: 10em; - height: 8em; + height: 9em; font-size: 1.5em; overflow-y: scroll; display: flex; flex-wrap: wrap; padding: 0.5em; - text-align:center; + text-align: center; + align-content: flex-start; + user-select: none; mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, diff --git a/src/components/status/status.js b/src/components/status/status.js index 8c6fc0cf..cc0c9e06 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -280,10 +280,7 @@ const Status = { return this.mergedConfig.hidePostStats }, emojiReactions () { - return { - '🤔': [{ 'id': 'xyz..' }, { 'id': 'zyx...' }], - '🐻': [{ 'id': 'abc...' }] - } + return this.status.emojiReactions }, ...mapGetters(['mergedConfig']) }, @@ -385,6 +382,22 @@ const Status = { setMedia () { const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments return () => this.$store.dispatch('setMedia', attachments) + }, + reactedWith (emoji) { + return this.status.reactedWithEmoji.includes(emoji) + }, + reactWith (emoji) { + this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) + }, + unreact (emoji) { + this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji }) + }, + emojiOnClick (emoji, event) { + if (this.reactedWith(emoji)) { + this.unreact(emoji) + } else { + this.reactWith(emoji) + } } }, watch: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d455ccf6..503de98d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -354,13 +354,15 @@
-
+
@@ -788,19 +790,33 @@ $status-margin: 0.75em; .emoji-reactions { display: flex; - margin-top: 0.75em; + margin-top: 0.25em; + flex-wrap: wrap; } .emoji-reaction { padding: 0 0.5em; margin-right: 0.5em; + margin-top: 0.5em; display: flex; align-items: center; justify-content: center; - + box-sizing: border-box; :first-child { margin-right: 0.25em; } + :last-child { + width: 1.5em; + } + &:focus { + outline: none; + } +} + +.picked-reaction { + border: 1px solid var(--link, $fallback--link); + margin-left: -1px; // offset the border, can't use inset shadows either + margin-right: calc(0.5em - 1px); } .button-icon.icon-reply { diff --git a/src/modules/statuses.js b/src/modules/statuses.js index c285b452..fcb6d1f3 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -1,4 +1,20 @@ -import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy, findKey } from 'lodash' +import { + remove, + slice, + each, + findIndex, + find, + maxBy, + minBy, + merge, + first, + last, + isArray, + omitBy, + flow, + filter, + keys +} from 'lodash' import { set } from 'vue' import apiService from '../services/api/api.service.js' // import parse from '../services/status_parser/status_parser.js' @@ -512,8 +528,29 @@ export const mutations = { }, addEmojiReactions (state, { id, emojiReactions, currentUser }) { const status = state.allStatusesObject[id] - status.emojiReactions = emojiReactions - status.reactedWithEmoji = findKey(emojiReactions, { id: currentUser.id }) + set(status, 'emojiReactions', emojiReactions) + const reactedWithEmoji = flow(keys, filter(reaction => find(reaction, { id: currentUser.id })))(emojiReactions) + set(status, 'reactedWithEmoji', reactedWithEmoji) + }, + addOwnReaction (state, { id, emoji, currentUser }) { + const status = state.allStatusesObject[id] + status.emojiReactions = status.emojiReactions || {} + const listOfUsers = (status.emojiReactions && status.emojiReactions[emoji]) || [] + const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id }) + if (!hasSelfAlready) { + set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }])) + set(status, 'reactedWithEmoji', emoji) + } + }, + removeOwnReaction (state, { id, emoji, currentUser }) { + const status = state.allStatusesObject[id] + const listOfUsers = status.emojiReactions[emoji] || [] + const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id }) + if (hasSelfAlready) { + const newUsers = filter(listOfUsers, user => user.id !== currentUser.id) + set(status.emojiReactions, emoji, newUsers) + set(status, 'reactedWith', emoji) + } }, updateStatusWithPoll (state, { id, poll }) { const status = state.allStatusesObject[id] @@ -616,6 +653,24 @@ const statuses = { commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }) }) }, + reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) { + const currentUser = rootState.users.currentUser + commit('addOwnReaction', { id, emoji, currentUser }) + rootState.api.backendInteractor.reactWithEmoji(id, emoji).then( + status => { + dispatch('fetchEmojiReactions', id) + } + ) + }, + unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) { + const currentUser = rootState.users.currentUser + commit('removeOwnReaction', { id, emoji, currentUser }) + rootState.api.backendInteractor.unreactWithEmoji(id, emoji).then( + status => { + dispatch('fetchEmojiReactions', id) + } + ) + }, fetchEmojiReactions ({ rootState, commit }, id) { rootState.api.backendInteractor.fetchEmojiReactions(id).then( emojiReactions => { diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 7ef4b74a..2e96264a 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -72,6 +72,8 @@ const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute` const MASTODON_SEARCH_2 = `/api/v2/search` const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search' const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by` +const PLEROMA_EMOJI_REACT_URL = id => `/api/v1/pleroma/statuses/${id}/react_with_emoji` +const PLEROMA_EMOJI_UNREACT_URL = id => `/api/v1/pleroma/statuses/${id}/unreact_with_emoji` const oldfetch = window.fetch @@ -869,6 +871,24 @@ const fetchEmojiReactions = ({ id }) => { return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) }) } +const reactWithEmoji = ({ id, emoji, credentials }) => { + return promisedRequest({ + url: PLEROMA_EMOJI_REACT_URL(id), + method: 'POST', + credentials, + payload: { emoji } + }).then(status => parseStatus(status)) +} + +const unreactWithEmoji = ({ id, emoji, credentials }) => { + return promisedRequest({ + url: PLEROMA_EMOJI_UNREACT_URL(id), + method: 'POST', + credentials, + payload: { emoji } + }).then(parseStatus) +} + const reportUser = ({ credentials, userId, statusIds, comment, forward }) => { return promisedRequest({ url: MASTODON_REPORT_USER_URL, @@ -1003,6 +1023,8 @@ const apiService = { fetchFavoritedByUsers, fetchRebloggedByUsers, fetchEmojiReactions, + reactWithEmoji, + unreactWithEmoji, reportUser, updateNotificationSettings, search2, diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 52234fcc..44233a24 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -144,6 +144,8 @@ const backendInteractorService = credentials => { const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id }) const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id }) const fetchEmojiReactions = (id) => apiService.fetchEmojiReactions({ id }) + const reactWithEmoji = (id, emoji) => apiService.reactWithEmoji({ id, emoji, credentials }) + const unreactWithEmoji = (id, emoji) => apiService.unreactWithEmoji({ id, emoji, credentials }) const reportUser = (params) => apiService.reportUser({ credentials, ...params }) const favorite = (id) => apiService.favorite({ id, credentials }) @@ -212,6 +214,8 @@ const backendInteractorService = credentials => { fetchFavoritedByUsers, fetchRebloggedByUsers, fetchEmojiReactions, + reactWithEmoji, + unreactWithEmoji, reportUser, favorite, unfavorite, -- cgit v1.2.3-70-g09d2 From b10b92a876eb185a88e751d028e69063c9117298 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 14 Jan 2020 10:06:14 +0200 Subject: clean up code, fix prediction bug --- src/components/emoji_reactions/emoji_reactions.js | 30 +++++++++++++ src/components/emoji_reactions/emoji_reactions.vue | 51 ++++++++++++++++++++++ src/components/react_button/react_button.js | 5 ++- src/components/react_button/react_button.vue | 42 ++++++++++-------- src/components/status/status.js | 23 ++-------- src/components/status/status.vue | 47 ++------------------ src/modules/statuses.js | 9 ++-- 7 files changed, 120 insertions(+), 87 deletions(-) create mode 100644 src/components/emoji_reactions/emoji_reactions.js create mode 100644 src/components/emoji_reactions/emoji_reactions.vue (limited to 'src/components/status/status.js') diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js new file mode 100644 index 00000000..e81e6e25 --- /dev/null +++ b/src/components/emoji_reactions/emoji_reactions.js @@ -0,0 +1,30 @@ + +const EmojiReactions = { + name: 'EmojiReactions', + props: ['status'], + computed: { + emojiReactions () { + return this.status.emojiReactions + } + }, + methods: { + reactedWith (emoji) { + return this.status.reactedWithEmoji.includes(emoji) + }, + reactWith (emoji) { + this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) + }, + unreact (emoji) { + this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji }) + }, + emojiOnClick (emoji, event) { + if (this.reactedWith(emoji)) { + this.unreact(emoji) + } else { + this.reactWith(emoji) + } + } + } +} + +export default EmojiReactions diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue new file mode 100644 index 00000000..d83f60b6 --- /dev/null +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -0,0 +1,51 @@ + + + + diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 76a49305..d1a179bc 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -15,8 +15,9 @@ const ReactButton = { } }, methods: { - toggleReactionSelect () { - this.showTooltip = !this.showTooltip + openReactionSelect () { + this.showTooltip = true + this.filterWord = '' }, closeReactionSelect () { this.showTooltip = false diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index f7015316..ae975dee 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -9,13 +9,16 @@ >
- +
{{ emoji }} @@ -24,7 +27,7 @@ {{ emoji.replacement }} @@ -34,11 +37,11 @@
{{ status.fave_num }} @@ -58,7 +61,7 @@ .reaction-picker-divider { height: 1px; width: 100%; - margin: 0.4em; + margin: 0.5em; background-color: var(--border, $fallback--border); } @@ -82,26 +85,27 @@ // Autoprefixed seem to ignore this one, and also syntax is different -webkit-mask-composite: xor; mask-composite: exclude; -} -.emoji-reaction-button { - flex-basis: 20%; - line-height: 1.5em; - align-content: center; + .emoji-button { + cursor: pointer; + + flex-basis: 20%; + line-height: 1.5em; + align-content: center; + + &:hover { + transform: scale(1.25); + } + } } -.fav-active { +.add-reaction-button { cursor: pointer; - animation-duration: 0.6s; &:hover { - color: $fallback--cOrange; - color: var(--cOrange, $fallback--cOrange); + color: $fallback--text; + color: var(--text, $fallback--text); } } -.favorite-button.icon-star { - color: $fallback--cOrange; - color: var(--cOrange, $fallback--cOrange); -} diff --git a/src/components/status/status.js b/src/components/status/status.js index 18617938..81b57667 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -12,6 +12,7 @@ import LinkPreview from '../link-preview/link-preview.vue' import AvatarList from '../avatar_list/avatar_list.vue' import Timeago from '../timeago/timeago.vue' import StatusPopover from '../status_popover/status_popover.vue' +import EmojiReactions from '../emoji_reactions/emoji_reactions.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import fileType from 'src/services/file_type/file_type.service' import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js' @@ -311,9 +312,6 @@ const Status = { hidePostStats () { return this.mergedConfig.hidePostStats }, - emojiReactions () { - return this.status.emojiReactions - }, ...mapGetters(['mergedConfig']), ...mapState({ betterShadow: state => state.interface.browserSupport.cssFilter, @@ -334,7 +332,8 @@ const Status = { LinkPreview, AvatarList, Timeago, - StatusPopover + StatusPopover, + EmojiReactions }, methods: { visibilityIcon (visibility) { @@ -418,22 +417,6 @@ const Status = { setMedia () { const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments return () => this.$store.dispatch('setMedia', attachments) - }, - reactedWith (emoji) { - return this.status.reactedWithEmoji.includes(emoji) - }, - reactWith (emoji) { - this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) - }, - unreact (emoji) { - this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji }) - }, - emojiOnClick (emoji, event) { - if (this.reactedWith(emoji)) { - this.unreact(emoji) - } else { - this.reactWith(emoji) - } } }, watch: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4ea1b74b..87e8b5da 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -354,18 +354,10 @@
-
- -
+
find(reaction, { id: currentUser.id })))(emojiReactions) + const reactedWithEmoji = flow( + keys, + filter(reaction => find(reaction, { id: currentUser.id })) + )(emojiReactions) set(status, 'reactedWithEmoji', reactedWithEmoji) }, addOwnReaction (state, { id, emoji, currentUser }) { @@ -547,7 +550,7 @@ export const mutations = { const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id }) if (!hasSelfAlready) { set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }])) - set(status, 'reactedWithEmoji', emoji) + set(status, 'reactedWithEmoji', [...status.reactedWithEmoji, emoji]) } }, removeOwnReaction (state, { id, emoji, currentUser }) { @@ -557,7 +560,7 @@ export const mutations = { if (hasSelfAlready) { const newUsers = filter(listOfUsers, user => user.id !== currentUser.id) set(status.emojiReactions, emoji, newUsers) - set(status, 'reactedWith', emoji) + set(status, 'reactedWithEmoji', status.reactedWithEmoji.filter(e => e !== emoji)) } }, updateStatusWithPoll (state, { id, poll }) { -- cgit v1.2.3-70-g09d2 From e36c39be192ce98fe20e11ea8e2d4fec1b3d50fd Mon Sep 17 00:00:00 2001 From: xenofem Date: Sat, 8 Feb 2020 16:01:01 -0500 Subject: Include non-gallery attachments and distinguish between images and videos --- src/components/status/status.js | 10 ++++++++++ src/components/status/status.vue | 6 +++++- 2 files changed, 15 insertions(+), 1 deletion(-) (limited to 'src/components/status/status.js') diff --git a/src/components/status/status.js b/src/components/status/status.js index 81b57667..fc5956ec 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -256,6 +256,16 @@ const Status = { file => !fileType.fileMatchesSomeType(this.galleryTypes, file) ) }, + hasImageAttachments () { + return this.status.attachments.some( + file => fileType.fileType(file.mimetype) === 'image' + ) + }, + hasVideoAttachments () { + return this.status.attachments.some( + file => fileType.fileType(file.mimetype) === 'video' + ) + }, maxThumbnails () { return this.mergedConfig.maxThumbnails }, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b9e3fa1d..0a82dcbe 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -280,9 +280,13 @@ > {{ $t("general.show_more") }} + Date: Mon, 24 Feb 2020 18:10:15 -0500 Subject: Refactor status showing/hiding code for better handling of edge cases and easier comprehension --- src/components/status/status.js | 35 +++++++++++++++-------------------- 1 file changed, 15 insertions(+), 20 deletions(-) (limited to 'src/components/status/status.js') diff --git a/src/components/status/status.js b/src/components/status/status.js index fc5956ec..61d66301 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -188,23 +188,22 @@ const Status = { } return this.status.attentions.length > 0 }, + + // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status. + mightHideBecauseSubject () { + return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault) + }, + mightHideBecauseTall () { + return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault) + }, hideSubjectStatus () { - if (this.tallStatus && !this.localCollapseSubjectDefault) { - return false - } - return !this.expandingSubject && this.status.summary + return this.mightHideBecauseSubject && !this.expandingSubject }, hideTallStatus () { - if (this.status.summary && this.localCollapseSubjectDefault) { - return false - } - if (this.showingTall) { - return false - } - return this.tallStatus + return this.mightHideBecauseTall && !this.showingTall }, showingMore () { - return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject) + return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject) }, nsfwClickthrough () { if (!this.status.nsfw) { @@ -408,14 +407,10 @@ const Status = { this.userExpanded = !this.userExpanded }, toggleShowMore () { - if (this.showingTall) { - this.showingTall = false - } else if (this.expandingSubject && this.status.summary) { - this.expandingSubject = false - } else if (this.hideTallStatus) { - this.showingTall = true - } else if (this.hideSubjectStatus && this.status.summary) { - this.expandingSubject = true + if (this.mightHideBecauseTall) { + this.showingTall = !this.showingTall + } else if (this.mightHideBecauseSubject) { + this.expandingSubject = !this.expandingSubject } }, generateUserProfileLink (id, name) { -- cgit v1.2.3-70-g09d2 From 6bb75a3a6d8452a3e1b88085fe87cf27386f222c Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 21 Apr 2020 23:27:51 +0300 Subject: make relationships separate from users --- src/boot/after_store.js | 3 ++ src/components/account_actions/account_actions.js | 2 +- src/components/account_actions/account_actions.vue | 8 ++--- src/components/basic_user_card/basic_user_card.vue | 2 +- src/components/block_card/block_card.js | 5 ++- src/components/follow_button/follow_button.js | 14 ++++---- src/components/follow_card/follow_card.js | 3 ++ src/components/follow_card/follow_card.vue | 5 +-- src/components/mute_card/mute_card.js | 9 ++++-- src/components/notification/notification.js | 2 +- src/components/notification/notification.vue | 2 +- src/components/side_drawer/side_drawer.vue | 2 +- src/components/status/status.js | 15 +++++++-- src/components/status/status.vue | 2 +- src/components/user_card/user_card.js | 8 ++++- src/components/user_card/user_card.vue | 15 +++++---- src/components/user_panel/user_panel.vue | 2 +- src/components/user_profile/user_profile.vue | 2 +- src/components/user_settings/user_settings.js | 8 ++--- src/modules/users.js | 37 ++++++++-------------- src/services/api/api.service.js | 4 ++- .../entity_normalizer/entity_normalizer.service.js | 25 +++++++++------ .../follow_manipulate/follow_manipulate.js | 15 +++++---- .../notifications_fetcher.service.js | 1 - .../timeline_fetcher/timeline_fetcher.service.js | 2 ++ 25 files changed, 112 insertions(+), 81 deletions(-) (limited to 'src/components/status/status.js') diff --git a/src/boot/after_store.js b/src/boot/after_store.js index d70e1058..1522d4f0 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -304,6 +304,9 @@ const afterStoreSetup = async ({ store, i18n }) => { getNodeInfo({ store }) ]) + // Start fetching things that don't need to block the UI + store.dispatch('fetchMutes') + const router = new VueRouter({ mode: 'history', routes: routes(store), diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js index 5d7ecf7e..0826c275 100644 --- a/src/components/account_actions/account_actions.js +++ b/src/components/account_actions/account_actions.js @@ -3,7 +3,7 @@ import Popover from '../popover/popover.vue' const AccountActions = { props: [ - 'user' + 'user', 'relationship' ], data () { return { } diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 483783cf..744b77d5 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -9,16 +9,16 @@ class="account-tools-popover" >
-