From 2e35289c3376881ca17b9330113c816a3327f245 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 3 May 2020 17:36:12 +0300 Subject: initial work on settings modal --- src/modules/interface.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'src/modules') diff --git a/src/modules/interface.js b/src/modules/interface.js index 5b2762e5..e55b7290 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -1,6 +1,7 @@ import { set, delete as del } from 'vue' const defaultState = { + settingsModalState: 'hidden', settings: { currentSaveStateNotice: null, noticeClearTimeout: null, @@ -35,6 +36,24 @@ const interfaceMod = { }, setMobileLayout (state, value) { state.mobileLayout = value + }, + closeSettingsModal (state) { + state.settingsModalState = 'hidden' + }, + togglePeekSettingsModal (state) { + switch (state.settingsModalState) { + case 'minimized': + state.settingsModalState = 'visible' + return + case 'visible': + state.settingsModalState = 'minimized' + return + default: + throw new Error('Illegal minimization state of settings modal') + } + }, + openSettingsModal (state) { + state.settingsModalState = 'visible' } }, actions: { @@ -49,6 +68,15 @@ const interfaceMod = { }, setMobileLayout ({ commit }, value) { commit('setMobileLayout', value) + }, + closeSettingsModal ({ commit }) { + commit('closeSettingsModal') + }, + openSettingsModal ({ commit }) { + commit('openSettingsModal') + }, + togglePeekSettingsModal ({ commit }) { + commit('togglePeekSettingsModal') } } } -- cgit v1.2.3-70-g09d2 From bc5005b3ddddeb47d5160a1b79d2edb39e887b4b Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Tue, 12 May 2020 13:59:52 -0500 Subject: Permit sidebar alignment with instance configuration option --- src/App.js | 7 ++++++- src/App.vue | 5 ++++- src/modules/instance.js | 1 + static/config.json | 3 ++- 4 files changed, 13 insertions(+), 3 deletions(-) (limited to 'src/modules') diff --git a/src/App.js b/src/App.js index 61b5eec1..bbb41409 100644 --- a/src/App.js +++ b/src/App.js @@ -99,7 +99,12 @@ export default { }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, isMobileLayout () { return this.$store.state.interface.mobileLayout }, - privateMode () { return this.$store.state.instance.private } + privateMode () { return this.$store.state.instance.private }, + sidebarAlign () { + return { + 'order': this.$store.state.instance.sidebarRight ? 99 : 0 + } + } }, methods: { scrollToTop () { diff --git a/src/App.vue b/src/App.vue index ff62fc51..7018a5a4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -80,7 +80,10 @@ id="content" class="container underlay" > -
+
diff --git a/src/modules/instance.js b/src/modules/instance.js index ffece311..869ceebd 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -36,6 +36,7 @@ const defaultState = { showFeaturesPanel: true, minimalScopesMode: false, greentext: false, + sidebarRight: false, // Nasty stuff pleromaBackend: true, diff --git a/static/config.json b/static/config.json index c8267869..a87ed853 100644 --- a/static/config.json +++ b/static/config.json @@ -19,5 +19,6 @@ "noAttachmentLinks": false, "nsfwCensorImage": "", "showFeaturesPanel": true, - "minimalScopesMode": false + "minimalScopesMode": false, + "sidebarRight": false } -- cgit v1.2.3-70-g09d2 From 8e399710988dd874bd921a9ced76daf90034c29f Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 13 May 2020 17:48:31 +0300 Subject: add with_relationships where necessary --- src/components/post_status_form/post_status_form.js | 2 +- src/components/user_settings/user_settings.js | 4 ++-- src/modules/users.js | 4 ++-- src/services/api/api.service.js | 13 +++++++++---- 4 files changed, 14 insertions(+), 9 deletions(-) (limited to 'src/modules') diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 74067fef..a98e1e31 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -102,7 +102,7 @@ const PostStatusForm = { ...this.$store.state.instance.customEmoji ], users: this.$store.state.users.users, - updateUsersList: (input) => this.$store.dispatch('searchUsers', input) + updateUsersList: (query) => this.$store.dispatch('searchUsers', { query }) }) }, emojiSuggestor () { diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 5338c974..a1ec2997 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -112,7 +112,7 @@ const UserSettings = { ...this.$store.state.instance.customEmoji ], users: this.$store.state.users.users, - updateUsersList: (input) => this.$store.dispatch('searchUsers', input) + updateUsersList: (query) => this.$store.dispatch('searchUsers', { query }) }) }, emojiSuggestor () { @@ -362,7 +362,7 @@ const UserSettings = { }) }, queryUserIds (query) { - return this.$store.dispatch('searchUsers', query) + return this.$store.dispatch('searchUsers', { query }) .then((users) => map(users, 'id')) }, blockUsers (ids) { diff --git a/src/modules/users.js b/src/modules/users.js index 1d1b415c..f377da75 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -428,8 +428,8 @@ const users = { store.commit('setUserForNotification', notification) }) }, - searchUsers (store, query) { - return store.rootState.api.backendInteractor.searchUsers({ query }) + searchUsers (store, { query, withRelationships }) { + return store.rootState.api.backendInteractor.searchUsers({ query, withRelationships }) .then((users) => { store.commit('addNewUsers', users) return users diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 72c8874f..94ff4623 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -324,7 +324,8 @@ const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => { const args = [ maxId && `max_id=${maxId}`, sinceId && `since_id=${sinceId}`, - limit && `limit=${limit}` + limit && `limit=${limit}`, + `with_relationships=true` ].filter(_ => _).join('&') url = url + (args ? '?' + args : '') @@ -358,7 +359,8 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => { const args = [ maxId && `max_id=${maxId}`, sinceId && `since_id=${sinceId}`, - limit && `limit=${limit}` + limit && `limit=${limit}`, + `with_relationships=true` ].filter(_ => _).join('&') url += args ? '?' + args : '' @@ -935,12 +937,13 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => { }) } -const searchUsers = ({ credentials, query }) => { +const searchUsers = ({ credentials, query, withRelationships }) => { return promisedRequest({ url: MASTODON_USER_SEARCH_URL, params: { q: query, - resolve: true + resolve: true, + with_relationships: withRelationships }, credentials }) @@ -971,6 +974,8 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => { params.push(['following', true]) } + params.push(['with_relationships', true]) + let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') url += `?${queryString}` -- cgit v1.2.3-70-g09d2 From 9c7cb3a95431bbea44391f79da465f77565a4b49 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 13 May 2020 18:04:30 +0300 Subject: remove search1 with_relationships --- src/modules/users.js | 4 ++-- src/services/api/api.service.js | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src/modules') diff --git a/src/modules/users.js b/src/modules/users.js index f377da75..f9329f2a 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -428,8 +428,8 @@ const users = { store.commit('setUserForNotification', notification) }) }, - searchUsers (store, { query, withRelationships }) { - return store.rootState.api.backendInteractor.searchUsers({ query, withRelationships }) + searchUsers (store, { query }) { + return store.rootState.api.backendInteractor.searchUsers({ query }) .then((users) => { store.commit('addNewUsers', users) return users diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 37ccfd6b..7f82d2fa 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -937,13 +937,12 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => { }) } -const searchUsers = ({ credentials, query, withRelationships }) => { +const searchUsers = ({ credentials, query }) => { return promisedRequest({ url: MASTODON_USER_SEARCH_URL, params: { q: query, - resolve: true, - with_relationships: !!withRelationships + resolve: true }, credentials }) -- cgit v1.2.3-70-g09d2 From 98d332793ccb8b73a8b5f6ec8893d0459412b242 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 14:40:46 -0500 Subject: alpha sort --- src/modules/instance.js | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index ffece311..eeee115c 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -5,37 +5,36 @@ import { instanceDefaultProperties } from './config.js' const defaultState = { // Stuff from static/config.json and apiConfig - name: 'Pleroma FE', - registrationOpen: true, - safeDM: true, - textlimit: 5000, - server: 'http://localhost:4040/', - theme: 'pleroma-dark', - themeData: undefined, - background: '/static/aurora_borealis.jpg', - logo: '/static/logo.png', - logoMask: true, - logoMargin: '.2em', - redirectRootNoLogin: '/main/all', - redirectRootLogin: '/main/friends', - showInstanceSpecificPanel: false, alwaysShowSubjectInput: true, - hideMutedPosts: false, + background: '/static/aurora_borealis.jpg', collapseMessageWithSubject: false, + disableChat: false, + greentext: false, + hideFilteredStatuses: false, + hideMutedPosts: false, hidePostStats: false, + hideSitename: false, hideUserStats: false, - hideFilteredStatuses: false, - disableChat: false, + logo: '/static/logo.png', + logoMargin: '.2em', + logoMask: true, + minimalScopesMode: false, + name: 'Pleroma FE', + nsfwCensorImage: undefined, + postContentType: 'text/plain', + redirectRootLogin: '/main/friends', + redirectRootNoLogin: '/main/all', + registrationOpen: true, + safeDM: true, scopeCopy: true, + server: 'http://localhost:4040/', + showFeaturesPanel: true, + showInstanceSpecificPanel: false, subjectLineBehavior: 'email', - postContentType: 'text/plain', - hideSitename: false, - nsfwCensorImage: undefined, + textlimit: 5000, + theme: 'pleroma-dark', + themeData: undefined, vapidPublicKey: undefined, - noAttachmentLinks: false, - showFeaturesPanel: true, - minimalScopesMode: false, - greentext: false, // Nasty stuff pleromaBackend: true, -- cgit v1.2.3-70-g09d2 From a4a25105babae42b04d173b44dcb8a2d797b87fc Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 14:43:36 -0500 Subject: Separate the user configurable section --- src/modules/instance.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index eeee115c..1b04032b 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -4,6 +4,9 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { instanceDefaultProperties } from './config.js' const defaultState = { + // not user configurable + name: 'Pleroma FE', + // Stuff from static/config.json and apiConfig alwaysShowSubjectInput: true, background: '/static/aurora_borealis.jpg', @@ -19,7 +22,6 @@ const defaultState = { logoMargin: '.2em', logoMask: true, minimalScopesMode: false, - name: 'Pleroma FE', nsfwCensorImage: undefined, postContentType: 'text/plain', redirectRootLogin: '/main/friends', -- cgit v1.2.3-70-g09d2 From 62e0fda5978c8cf592fb0cdf28e485e87378f467 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 14:46:31 -0500 Subject: loginMethod was missing --- src/modules/instance.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index 1b04032b..8be8ba63 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -18,6 +18,7 @@ const defaultState = { hidePostStats: false, hideSitename: false, hideUserStats: false, + loginMethod: 'password', logo: '/static/logo.png', logoMargin: '.2em', logoMask: true, -- cgit v1.2.3-70-g09d2 From e80fa3ff6d620dfe09ca373e7761b6c2f1775a12 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 15:40:13 -0500 Subject: Split apiConfig options from static/config.json options; Move safeDM to nasty section, alpha sort things --- src/modules/instance.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index 8be8ba63..a8029dc1 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -4,10 +4,16 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { instanceDefaultProperties } from './config.js' const defaultState = { - // not user configurable + // not configurable name: 'Pleroma FE', - // Stuff from static/config.json and apiConfig + // Stuff from apiConfig + server: 'http://localhost:4040/', + textlimit: 5000, + themeData: undefined, + vapidPublicKey: undefined, + + // Stuff from static/config.json alwaysShowSubjectInput: true, background: '/static/aurora_borealis.jpg', collapseMessageWithSubject: false, @@ -28,29 +34,25 @@ const defaultState = { redirectRootLogin: '/main/friends', redirectRootNoLogin: '/main/all', registrationOpen: true, - safeDM: true, scopeCopy: true, - server: 'http://localhost:4040/', showFeaturesPanel: true, showInstanceSpecificPanel: false, subjectLineBehavior: 'email', - textlimit: 5000, theme: 'pleroma-dark', - themeData: undefined, - vapidPublicKey: undefined, // Nasty stuff - pleromaBackend: true, - emoji: [], - emojiFetched: false, customEmoji: [], customEmojiFetched: false, - restrictedNicknames: [], + emoji: [], + emojiFetched: false, + pleromaBackend: true, postFormats: [], + restrictedNicknames: [], + safeDM: true, // Feature-set, apparently, not everything here is reported... - mediaProxyAvailable: false, chatAvailable: false, + mediaProxyAvailable: false, gopherAvailable: false, suggestionsEnabled: false, suggestionsWeb: '', -- cgit v1.2.3-70-g09d2 From 03318b64aacbbb48d15c94ada5ade4b38752a734 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 15:48:21 -0500 Subject: Really alpha sort this --- src/modules/instance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index a8029dc1..278a93ab 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -52,8 +52,8 @@ const defaultState = { // Feature-set, apparently, not everything here is reported... chatAvailable: false, - mediaProxyAvailable: false, gopherAvailable: false, + mediaProxyAvailable: false, suggestionsEnabled: false, suggestionsWeb: '', -- cgit v1.2.3-70-g09d2 From 79c53b849ed8d5abac978ed675488bf53ea8fb06 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 16:46:58 -0500 Subject: registrationOpen is not an FE setting --- src/modules/instance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index 278a93ab..beea424b 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -8,6 +8,7 @@ const defaultState = { name: 'Pleroma FE', // Stuff from apiConfig + registrationOpen: true, server: 'http://localhost:4040/', textlimit: 5000, themeData: undefined, @@ -33,7 +34,6 @@ const defaultState = { postContentType: 'text/plain', redirectRootLogin: '/main/friends', redirectRootNoLogin: '/main/all', - registrationOpen: true, scopeCopy: true, showFeaturesPanel: true, showInstanceSpecificPanel: false, -- cgit v1.2.3-70-g09d2 From 229bf79d9016d19e1482f5e02f2f03e5d8b078e2 Mon Sep 17 00:00:00 2001 From: Mark Felder Date: Wed, 13 May 2020 17:20:35 -0500 Subject: name setting should be with apiConfig section --- src/modules/instance.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/modules') diff --git a/src/modules/instance.js b/src/modules/instance.js index beea424b..94d4176b 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -4,10 +4,8 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { instanceDefaultProperties } from './config.js' const defaultState = { - // not configurable - name: 'Pleroma FE', - // Stuff from apiConfig + name: 'Pleroma FE', registrationOpen: true, server: 'http://localhost:4040/', textlimit: 5000, -- cgit v1.2.3-70-g09d2 From b5c1d074f83d08473a19a3885f6ff5eeb95274e5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 25 May 2020 23:38:31 +0300 Subject: fix reprööted posts not being muted properly. fix muted posts making desktop notifications MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/status/status.js | 57 ++++++++++++++++++++++------- src/components/status/status.vue | 18 ++++++++- src/i18n/en.json | 4 +- src/modules/statuses.js | 10 ++++- src/services/status_parser/status_parser.js | 11 ++++++ 5 files changed, 83 insertions(+), 17 deletions(-) (limited to 'src/modules') diff --git a/src/components/status/status.js b/src/components/status/status.js index 9cd9d61c..95278968 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -12,7 +12,8 @@ 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 { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' -import { filter, unescape, uniqBy } from 'lodash' +import { muteWordHits } from '../../services/status_parser/status_parser.js' +import { unescape, uniqBy } from 'lodash' import { mapGetters, mapState } from 'vuex' const Status = { @@ -44,6 +45,12 @@ const Status = { muteWords () { return this.mergedConfig.muteWords }, + showReasonMutedThread () { + return ( + this.status.thread_muted || + (this.status.reblog && this.status.reblog.thread_muted) + ) && !this.inConversation + }, repeaterClass () { const user = this.statusoid.user return highlightClass(user) @@ -93,20 +100,44 @@ const Status = { return !!this.currentUser }, muteWordHits () { - const statusText = this.status.text.toLowerCase() - const statusSummary = this.status.summary.toLowerCase() - const hits = filter(this.muteWords, (muteWord) => { - return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase()) - }) - - return hits + return muteWordHits(this.status, this.muteWords) }, muted () { - const relationship = this.$store.getters.relationship(this.status.user.id) - return !this.unmuted && ( - (!(this.inProfile && this.status.user.id === this.profileUserId) && relationship.muting) || - (!this.inConversation && this.status.thread_muted) || - this.muteWordHits.length > 0) + const { status } = this + const { reblog } = status + const relationship = this.$store.getters.relationship(status.user.id) + const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id) + const reasonsToMute = ( + // Post is muted according to BE + status.muted || + // Reprööt of a muted post according to BE + (reblog && reblog.muted) || + // Muted user + relationship.muting || + // Muted user of a reprööt + (relationshipReblog && relationshipReblog.muting) || + // Thread is muted + status.thread_muted || + // Wordfiltered + this.muteWordHits.length > 0 + ) + const excusesNotToMute = ( + // Currently showing status + this.unmuted || + ( + this.inProfile && ( + // Don't mute user's posts on user timeline (except reblogs) + (!reblog && status.user.id === this.profileUserId) || + // Same as above but also allow self-reblogs + (reblog && reblog.user.id === this.profileUserId) + ) + ) || + // Don't mute statuses in muted conversation when said conversation is opened + (this.inConversation && status.thread_muted) + // No excuses if post has muted words + ) && !this.muteWordHits.length > 0 + + return !excusesNotToMute && reasonsToMute }, hideFilteredStatuses () { return this.mergedConfig.hideFilteredStatuses diff --git a/src/components/status/status.vue b/src/components/status/status.vue index e4c7545b..1c287aa7 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -18,10 +18,26 @@ + + {{ $t('domain_mute_card.mute') }} + +
@@ -34,5 +45,9 @@ button { width: 10em; } + + .autosuggest-results & { + padding-left: 1em; + } } diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js index b0043dbb..40a87b81 100644 --- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js +++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js @@ -32,12 +32,12 @@ const DomainMuteList = withSubscription({ const MutesAndBlocks = { data () { return { - activeTab: 'profile', - newDomainToMute: '' + activeTab: 'profile' } }, created () { this.$store.dispatch('fetchTokens') + this.$store.dispatch('getKnownDomains') }, components: { TabSwitcher, @@ -51,6 +51,14 @@ const MutesAndBlocks = { Autosuggest, Checkbox }, + computed: { + knownDomains () { + return this.$store.state.instance.knownDomains + }, + user () { + return this.$store.state.users.currentUser + } + }, methods: { importFollows (file) { return this.$store.state.api.backendInteractor.importFollows({ file }) @@ -86,13 +94,13 @@ const MutesAndBlocks = { filterUnblockedUsers (userIds) { return reject(userIds, (userId) => { const relationship = this.$store.getters.relationship(this.userId) - return relationship.blocking || userId === this.$store.state.users.currentUser.id + return relationship.blocking || userId === this.user.id }) }, filterUnMutedUsers (userIds) { return reject(userIds, (userId) => { const relationship = this.$store.getters.relationship(this.userId) - return relationship.muting || userId === this.$store.state.users.currentUser.id + return relationship.muting || userId === this.user.id }) }, queryUserIds (query) { @@ -111,12 +119,16 @@ const MutesAndBlocks = { unmuteUsers (ids) { return this.$store.dispatch('unmuteUsers', ids) }, + filterUnMutedDomains (urls) { + return urls.filter(url => !this.user.domainMutes.includes(url)) + }, + queryKnownDomains (query) { + return new Promise((resolve, reject) => { + resolve(this.knownDomains.filter(url => url.toLowerCase().includes(query))) + }) + }, unmuteDomains (domains) { return this.$store.dispatch('unmuteDomains', domains) - }, - muteDomain () { - return this.$store.dispatch('muteDomain', this.newDomainToMute) - .then(() => { this.newDomainToMute = '' }) } } } diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue index 6884b7be..5a1cf2c0 100644 --- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue +++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue @@ -119,21 +119,16 @@
- - - {{ $t('domain_mute_card.mute') }} - - + +
`/api/v1/pleroma/statuses/${id}/reactions` const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}` const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}` @@ -995,6 +996,10 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => { }) } +const fetchKnownDomains = ({ credentials }) => { + return promisedRequest({ url: MASTODON_KNOWN_DOMAIN_LIST_URL, credentials }) +} + const fetchDomainMutes = ({ credentials }) => { return promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials }) } @@ -1193,6 +1198,7 @@ const apiService = { updateNotificationSettings, search2, searchUsers, + fetchKnownDomains, fetchDomainMutes, muteDomain, unmuteDomain -- cgit v1.2.3-70-g09d2 From 99eaec85478f384ddb0ea45a9d9c95c4dce646f5 Mon Sep 17 00:00:00 2001 From: lain Date: Mon, 8 Jun 2020 17:22:07 +0200 Subject: Messages: Load languages asynchronously. Reduces the size of the initial app bundle by about half. --- src/App.js | 3 +- .../interface_language_switcher.vue | 3 +- src/i18n/messages.js | 95 ++++++++++++++++------ src/main.js | 6 +- src/modules/config.js | 5 ++ 5 files changed, 80 insertions(+), 32 deletions(-) (limited to 'src/modules') diff --git a/src/App.js b/src/App.js index 6445335a..040138c9 100644 --- a/src/App.js +++ b/src/App.js @@ -47,7 +47,8 @@ export default { }), created () { // Load the locale from the storage - this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage + const val = this.$store.getters.mergedConfig.interfaceLanguage + this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) window.addEventListener('resize', this.updateMobileState) }, destroyed () { diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue index f5ace0cc..dd6800a3 100644 --- a/src/components/interface_language_switcher/interface_language_switcher.vue +++ b/src/components/interface_language_switcher/interface_language_switcher.vue @@ -32,7 +32,7 @@ import _ from 'lodash' export default { computed: { languageCodes () { - return Object.keys(languagesObject) + return languagesObject.languages }, languageNames () { @@ -43,7 +43,6 @@ export default { get: function () { return this.$store.getters.mergedConfig.interfaceLanguage }, set: function (val) { this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) - this.$i18n.locale = val } } }, diff --git a/src/i18n/messages.js b/src/i18n/messages.js index c56ae205..a257486f 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -7,34 +7,75 @@ // sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json // There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry. +const loaders = { + ar: () => import('./ar.json'), + ca: () => import('./ca.json'), + cs: () => import('./cs.json'), + de: () => import('./de.json'), + eo: () => import('./eo.json'), + es: () => import('./es.json'), + et: () => import('./et.json'), + eu: () => import('./eu.json'), + fi: () => import('./fi.json'), + fr: () => import('./fr.json'), + ga: () => import('./ga.json'), + he: () => import('./he.json'), + hu: () => import('./hu.json'), + it: () => import('./it.json'), + ja: () => import('./ja_pedantic.json'), + ja_easy: () => import('./ja_easy.json'), + ko: () => import('./ko.json'), + nb: () => import('./nb.json'), + nl: () => import('./nl.json'), + oc: () => import('./oc.json'), + pl: () => import('./pl.json'), + pt: () => import('./pt.json'), + ro: () => import('./ro.json'), + ru: () => import('./ru.json'), + te: () => import('./te.json'), + zh: () => import('./zh.json') +} + const messages = { - ar: require('./ar.json'), - ca: require('./ca.json'), - cs: require('./cs.json'), - de: require('./de.json'), - en: require('./en.json'), - eo: require('./eo.json'), - es: require('./es.json'), - et: require('./et.json'), - eu: require('./eu.json'), - fi: require('./fi.json'), - fr: require('./fr.json'), - ga: require('./ga.json'), - he: require('./he.json'), - hu: require('./hu.json'), - it: require('./it.json'), - ja: require('./ja_pedantic.json'), - ja_easy: require('./ja_easy.json'), - ko: require('./ko.json'), - nb: require('./nb.json'), - nl: require('./nl.json'), - oc: require('./oc.json'), - pl: require('./pl.json'), - pt: require('./pt.json'), - ro: require('./ro.json'), - ru: require('./ru.json'), - te: require('./te.json'), - zh: require('./zh.json') + languages: [ + 'ar', + 'ca', + 'cs', + 'de', + 'en', + 'eo', + 'es', + 'et', + 'eu', + 'fi', + 'fr', + 'ga', + 'he', + 'hu', + 'it', + 'ja', + 'ja_easy', + 'ko', + 'nb', + 'nl', + 'oc', + 'pl', + 'pt', + 'ro', + 'ru', + 'te', + 'zh' + ], + default: { + en: require('./en.json') + }, + setLanguage: async (i18n, language) => { + if (loaders[language]) { + let messages = await loaders[language]() + i18n.setLocaleMessage(language, messages) + } + i18n.locale = language + } } export default messages diff --git a/src/main.js b/src/main.js index be4213fa..9a201e4f 100644 --- a/src/main.js +++ b/src/main.js @@ -46,11 +46,13 @@ Vue.use(VBodyScrollLock) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary - locale: currentLocale, + locale: 'en', fallbackLocale: 'en', - messages + messages: messages.default }) +messages.setLanguage(i18n, currentLocale) + const persistedStateOptions = { paths: [ 'config', diff --git a/src/modules/config.js b/src/modules/config.js index b6b1b241..47b24d77 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -1,5 +1,6 @@ import { set, delete as del } from 'vue' import { setPreset, applyTheme } from '../services/style_setter/style_setter.js' +import messages from '../i18n/messages' const browserLocale = (window.navigator.language || 'en').split('-')[0] @@ -115,6 +116,10 @@ const config = { case 'customTheme': case 'customThemeSource': applyTheme(value) + break + case 'interfaceLanguage': + messages.setLanguage(this.getters.i18n, value) + break } } } -- cgit v1.2.3-70-g09d2 From cc4691a4efec91318284869164419d286bda44a5 Mon Sep 17 00:00:00 2001 From: kPherox Date: Sun, 17 Nov 2019 22:34:00 +0900 Subject: Fix merging array field for users --- src/modules/users.js | 13 ++++++++++--- test/unit/specs/modules/users.spec.js | 36 +++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 3 deletions(-) (limited to 'src/modules') diff --git a/src/modules/users.js b/src/modules/users.js index f9329f2a..fca01a56 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,6 +1,6 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import oauthApi from '../services/new_api/oauth.js' -import { compact, map, each, merge, last, concat, uniq } from 'lodash' +import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash' import { set } from 'vue' import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js' @@ -10,7 +10,7 @@ export const mergeOrAdd = (arr, obj, item) => { const oldItem = obj[item.id] if (oldItem) { // We already have this, so only merge the new info. - merge(oldItem, item) + mergeWith(oldItem, item, mergeArrayLength) return { item: oldItem, new: false } } else { // This is a new item, prepare it @@ -23,6 +23,13 @@ export const mergeOrAdd = (arr, obj, item) => { } } +const mergeArrayLength = (oldValue, newValue) => { + if (isArray(oldValue) && isArray(newValue)) { + oldValue.length = newValue.length + return mergeWith(oldValue, newValue, mergeArrayLength) + } +} + const getNotificationPermission = () => { const Notification = window.Notification @@ -116,7 +123,7 @@ export const mutations = { }, setCurrentUser (state, user) { state.lastLoginName = user.screen_name - state.currentUser = merge(state.currentUser || {}, user) + state.currentUser = mergeWith(state.currentUser || {}, user, mergeArrayLength) }, clearCurrentUser (state) { state.currentUser = false diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js index 670acfc8..dfa5684d 100644 --- a/test/unit/specs/modules/users.spec.js +++ b/test/unit/specs/modules/users.spec.js @@ -18,6 +18,42 @@ describe('The users module', () => { expect(state.users).to.eql([user]) expect(state.users[0].name).to.eql('Dude') }) + + it('merging array field in new information for old users', () => { + const state = cloneDeep(defaultState) + const user = { + id: '1', + fields: [ + { name: 'Label 1', value: 'Content 1' } + ] + } + const firstModUser = { + id: '1', + fields: [ + { name: 'Label 2', value: 'Content 2' }, + { name: 'Label 3', value: 'Content 3' } + ] + } + const secondModUser = { + id: '1', + fields: [ + { name: 'Label 4', value: 'Content 4' } + ] + } + + mutations.addNewUsers(state, [user]) + expect(state.users[0].fields).to.have.length(1) + expect(state.users[0].fields[0].name).to.eql('Label 1') + + mutations.addNewUsers(state, [firstModUser]) + expect(state.users[0].fields).to.have.length(2) + expect(state.users[0].fields[0].name).to.eql('Label 2') + expect(state.users[0].fields[1].name).to.eql('Label 3') + + mutations.addNewUsers(state, [secondModUser]) + expect(state.users[0].fields).to.have.length(1) + expect(state.users[0].fields[0].name).to.eql('Label 4') + }) }) describe('findUser', () => { -- cgit v1.2.3-70-g09d2 From a52a393266744560c6c6b2cbd24da812d35562fb Mon Sep 17 00:00:00 2001 From: lain Date: Thu, 11 Jun 2020 15:22:31 +0200 Subject: NotificationUtils: Extract preparation of notification object. --- src/modules/statuses.js | 41 ++------------------- .../notification_utils/notification_utils.js | 42 ++++++++++++++++++++++ 2 files changed, 45 insertions(+), 38 deletions(-) (limited to 'src/modules') diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 9a2e0df1..073b15f1 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -13,7 +13,7 @@ import { omitBy } from 'lodash' import { set } from 'vue' -import { isStatusNotification } from '../services/notification_utils/notification_utils.js' +import { isStatusNotification, prepareNotificationObject } from '../services/notification_utils/notification_utils.js' import apiService from '../services/api/api.service.js' import { muteWordHits } from '../services/status_parser/status_parser.js' @@ -344,42 +344,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot state.notifications.idStore[notification.id] = notification if ('Notification' in window && window.Notification.permission === 'granted') { - const notifObj = {} - const status = notification.status - const title = notification.from_profile.name - notifObj.icon = notification.from_profile.profile_image_url - let i18nString - switch (notification.type) { - case 'like': - i18nString = 'favorited_you' - break - case 'repeat': - i18nString = 'repeated_you' - break - case 'follow': - i18nString = 'followed_you' - break - case 'move': - i18nString = 'migrated_to' - break - case 'follow_request': - i18nString = 'follow_request' - break - } - - if (notification.type === 'pleroma:emoji_reaction') { - notifObj.body = rootGetters.i18n.t('notifications.reacted_with', [notification.emoji]) - } else if (i18nString) { - notifObj.body = rootGetters.i18n.t('notifications.' + i18nString) - } else if (isStatusNotification(notification.type)) { - notifObj.body = notification.status.text - } - - // Shows first attached non-nsfw image, if any. Should add configuration for this somehow... - if (status && status.attachments && status.attachments.length > 0 && !status.nsfw && - status.attachments[0].mimetype.startsWith('image/')) { - notifObj.image = status.attachments[0].url - } + const notifObj = prepareNotificationObject(notification, rootGetters.i18n) const reasonsToMuteNotif = ( notification.seen || @@ -393,7 +358,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot ) ) if (!reasonsToMuteNotif) { - let desktopNotification = new window.Notification(title, notifObj) + let desktopNotification = new window.Notification(notifObj.title, notifObj) // Chrome is known for not closing notifications automatically // according to MDN, anyway. setTimeout(desktopNotification.close.bind(desktopNotification), 5000) diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js index eb479227..4576ea83 100644 --- a/src/services/notification_utils/notification_utils.js +++ b/src/services/notification_utils/notification_utils.js @@ -43,3 +43,45 @@ export const filteredNotificationsFromStore = (store, types) => { export const unseenNotificationsFromStore = store => filter(filteredNotificationsFromStore(store), ({ seen }) => !seen) + +export const prepareNotificationObject = (notification, i18n) => { + const notifObj = {} + const status = notification.status + const title = notification.from_profile.name + notifObj.title = title + notifObj.icon = notification.from_profile.profile_image_url + let i18nString + switch (notification.type) { + case 'like': + i18nString = 'favorited_you' + break + case 'repeat': + i18nString = 'repeated_you' + break + case 'follow': + i18nString = 'followed_you' + break + case 'move': + i18nString = 'migrated_to' + break + case 'follow_request': + i18nString = 'follow_request' + break + } + + if (notification.type === 'pleroma:emoji_reaction') { + notifObj.body = i18n.t('notifications.reacted_with', [notification.emoji]) + } else if (i18nString) { + notifObj.body = i18n.t('notifications.' + i18nString) + } else if (isStatusNotification(notification.type)) { + notifObj.body = notification.status.text + } + + // Shows first attached non-nsfw image, if any. Should add configuration for this somehow... + if (status && status.attachments && status.attachments.length > 0 && !status.nsfw && + status.attachments[0].mimetype.startsWith('image/')) { + notifObj.image = status.attachments[0].url + } + + return notifObj +} -- cgit v1.2.3-70-g09d2 From 9c884fef11e52541ab64508c9a9e0b8694432cbb Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 18 Jun 2020 12:29:13 +0300 Subject: remove search blocker, fix debounce params --- src/components/emoji_input/suggestor.js | 8 ++++---- src/modules/users.js | 20 ++++++++++++++++---- 2 files changed, 20 insertions(+), 8 deletions(-) (limited to 'src/modules') diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 15a71eff..91d5cfb9 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -1,4 +1,4 @@ -import { debounce } from 'lodash' +import debounce from 'lodash/debounce' /** * suggest - generates a suggestor function to be used by emoji-input * data: object providing source information for specific types of suggestions: @@ -13,7 +13,7 @@ import { debounce } from 'lodash' const debounceUserSearch = debounce((data, input) => { data.updateUsersList(input) -}, 500, { leading: true, trailing: false }) +}, 500) export default data => input => { const firstChar = input[0] @@ -97,8 +97,8 @@ export const suggestUsers = data => input => { replacement: '@' + screen_name + ' ' })) - // BE search users if there are no matches - if (newUsers.length === 0 && data.updateUsersList) { + // BE search users to get more comprehensive results + if (data.updateUsersList) { debounceUserSearch(data, noPrefix) } return newUsers diff --git a/src/modules/users.js b/src/modules/users.js index f9329f2a..a640fb3b 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -225,6 +225,12 @@ export const mutations = { signUpFailure (state, errors) { state.signUpPending = false state.signUpErrors = errors + }, + addRecentQuery (state, query) { + state.recentQueries = state.recentQueries.concat(query) + if (state.recentQueries.length > 10) { + state.recentQueries = state.recentQueries.slice(1) + } } } @@ -251,7 +257,8 @@ export const defaultState = { usersObject: {}, signUpPending: false, signUpErrors: [], - relationships: {} + relationships: {}, + recentQueries: [] } const users = { @@ -428,10 +435,15 @@ const users = { store.commit('setUserForNotification', notification) }) }, - searchUsers (store, { query }) { - return store.rootState.api.backendInteractor.searchUsers({ query }) + searchUsers ({ rootState, commit }, { query }) { + // Don't fetch if this query was already done recently + if (rootState.users.recentQueries.includes(query)) { + return [] + } + return rootState.api.backendInteractor.searchUsers({ query }) .then((users) => { - store.commit('addNewUsers', users) + commit('addRecentQuery', query) + commit('addNewUsers', users) return users }) }, -- cgit v1.2.3-70-g09d2 From fa7bcb74cecb8af095e6e22271243f2d51835f39 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 18 Jun 2020 13:00:09 +0300 Subject: return the correct promise type from action --- src/modules/users.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/modules') diff --git a/src/modules/users.js b/src/modules/users.js index a640fb3b..df710ac9 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -438,7 +438,7 @@ const users = { searchUsers ({ rootState, commit }, { query }) { // Don't fetch if this query was already done recently if (rootState.users.recentQueries.includes(query)) { - return [] + return Promise.resolve([]) } return rootState.api.backendInteractor.searchUsers({ query }) .then((users) => { -- cgit v1.2.3-70-g09d2 From 4e0b4427a969b2d0584a3a1c1ffd3fe3fbfc2998 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 18 Jun 2020 14:19:21 +0300 Subject: remove recentqueries thing --- src/modules/users.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) (limited to 'src/modules') diff --git a/src/modules/users.js b/src/modules/users.js index df710ac9..5e32bb49 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -225,12 +225,6 @@ export const mutations = { signUpFailure (state, errors) { state.signUpPending = false state.signUpErrors = errors - }, - addRecentQuery (state, query) { - state.recentQueries = state.recentQueries.concat(query) - if (state.recentQueries.length > 10) { - state.recentQueries = state.recentQueries.slice(1) - } } } @@ -257,8 +251,7 @@ export const defaultState = { usersObject: {}, signUpPending: false, signUpErrors: [], - relationships: {}, - recentQueries: [] + relationships: {} } const users = { @@ -436,13 +429,8 @@ const users = { }) }, searchUsers ({ rootState, commit }, { query }) { - // Don't fetch if this query was already done recently - if (rootState.users.recentQueries.includes(query)) { - return Promise.resolve([]) - } return rootState.api.backendInteractor.searchUsers({ query }) .then((users) => { - commit('addRecentQuery', query) commit('addNewUsers', users) return users }) -- cgit v1.2.3-70-g09d2 From 96d2c86d3bc1c26da2ca46ec04fb27a9de348e47 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 29 Jun 2020 14:48:22 +0300 Subject: change placeholders to use descriptions, use icons with placeholders, change uploads to use attachment component --- src/components/attachment/attachment.js | 28 +++++++--- src/components/attachment/attachment.vue | 28 +++++----- src/components/media_modal/media_modal.vue | 8 +++ .../post_status_form/post_status_form.js | 4 +- .../post_status_form/post_status_form.vue | 60 +++++++--------------- .../video_attachment/video_attachment.vue | 2 + src/modules/media_viewer.js | 2 +- static/fontello.json | 6 +++ 8 files changed, 75 insertions(+), 63 deletions(-) (limited to 'src/modules') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index b832e10f..561a5a98 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -8,7 +8,6 @@ const Attachment = { props: [ 'attachment', 'nsfw', - 'statusId', 'size', 'allowPlay', 'setMedia', @@ -30,9 +29,21 @@ const Attachment = { VideoAttachment }, computed: { - usePlaceHolder () { + usePlaceholder () { return this.size === 'hide' || this.type === 'unknown' }, + placeholderName () { + if (this.attachment.description === '' || !this.attachment.description) { + return this.type.toUpperCase() + } + return this.attachment.description + }, + placeholderIconClass () { + if (this.type === 'image') return 'icon-picture' + if (this.type === 'video') return 'icon-video' + if (this.type === 'audio') return 'icon-music' + return 'icon-link' + }, referrerpolicy () { return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer' }, @@ -51,6 +62,12 @@ const Attachment = { fullwidth () { return this.type === 'html' || this.type === 'audio' }, + useModal () { + return this.size === 'hide' ? ['image', 'video', 'audio'] + : this.mergedConfig.playVideosInModal + ? ['image', 'video'] + : ['image'] + }, ...mapGetters(['mergedConfig']) }, methods: { @@ -60,12 +77,7 @@ const Attachment = { } }, openModal (event) { - const modalTypes = this.mergedConfig.playVideosInModal - ? ['image', 'video'] - : ['image'] - if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) || - this.usePlaceHolder - ) { + if (this.useModal) { event.stopPropagation() event.preventDefault() this.setMedia() diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 98f772c0..a18bf186 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,6 +1,6 @@ diff --git a/src/components/global_notice_list/global_notice_list.js b/src/components/global_notice_list/global_notice_list.js new file mode 100644 index 00000000..3af29c23 --- /dev/null +++ b/src/components/global_notice_list/global_notice_list.js @@ -0,0 +1,15 @@ + +const GlobalNoticeList = { + computed: { + notices () { + return this.$store.state.interface.globalNotices + } + }, + methods: { + closeNotice (notice) { + this.$store.dispatch('removeGlobalNotice', notice) + } + } +} + +export default GlobalNoticeList diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue new file mode 100644 index 00000000..0e4285cc --- /dev/null +++ b/src/components/global_notice_list/global_notice_list.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/main.js b/src/main.js index a7294ea0..5bddc76e 100644 --- a/src/main.js +++ b/src/main.js @@ -62,14 +62,14 @@ const persistedStateOptions = { }; (async () => { - let persistedState - let storageError = 'none' + let storageError = false + const plugins = [pushNotifications] try { - persistedState = await createPersistedState(persistedStateOptions) + const persistedState = await createPersistedState(persistedStateOptions) + plugins.push(persistedState) } catch (e) { console.error(e) - storageError = 'show' - persistedState = _ => _ + storageError = true } const store = new Vuex.Store({ modules: { @@ -93,11 +93,13 @@ const persistedStateOptions = { polls: pollsModule, postStatus: postStatusModule }, - plugins: [persistedState, pushNotifications], + plugins, strict: false // Socket modifies itself, let's ignore this for now. // strict: process.env.NODE_ENV !== 'production' }) - store.dispatch('setStorageError', storageError) + if (storageError) { + store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' }) + } afterStoreSetup({ store, i18n }) })() diff --git a/src/modules/interface.js b/src/modules/interface.js index 4b5b5b5d..338ef651 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -8,14 +8,14 @@ const defaultState = { noticeClearTimeout: null, notificationPermission: null }, - storageError: 'none', browserSupport: { cssFilter: window.CSS && window.CSS.supports && ( window.CSS.supports('filter', 'drop-shadow(0 0)') || window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') ) }, - mobileLayout: false + mobileLayout: false, + globalNotices: [] } const interfaceMod = { @@ -60,8 +60,11 @@ const interfaceMod = { state.settingsModalLoaded = true } }, - setStorageError (state, value) { - state.storageError = value + pushGlobalNotice (state, notice) { + state.globalNotices.push(notice) + }, + removeGlobalNotice (state, notice) { + state.globalNotices = state.globalNotices.filter(n => n !== notice) } }, actions: { @@ -86,8 +89,26 @@ const interfaceMod = { togglePeekSettingsModal ({ commit }) { commit('togglePeekSettingsModal') }, - setStorageError ({ commit }, value) { - commit('setStorageError', value) + pushGlobalNotice ( + { commit, dispatch }, + { + messageKey, + messageArgs = {}, + level = 'error', + timeout = 0 + }) { + const notice = { + messageKey, + messageArgs, + level + } + if (timeout) { + setTimeout(() => dispatch('removeGlobalNotice', notice), timeout) + } + commit('pushGlobalNotice', notice) + }, + removeGlobalNotice ({ commit }, notice) { + commit('removeGlobalNotice', notice) } } } diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index b577cfab..83c878ed 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -34,7 +34,8 @@ export const DEFAULT_OPACITY = { alert: 0.5, input: 0.5, faint: 0.5, - underlay: 0.15 + underlay: 0.15, + alertPopup: 0.85 } /** SUBJECT TO CHANGE IN THE FUTURE, this is all beta @@ -627,6 +628,39 @@ export const SLOT_INHERITANCE = { textColor: true }, + alertPopupError: { + depends: ['alertError'], + opacity: 'alertPopup' + }, + alertPopupErrorText: { + depends: ['alertErrorText'], + layer: 'popover', + variant: 'alertPopupError', + textColor: true + }, + + alertPopupWarning: { + depends: ['alertWarning'], + opacity: 'alertPopup' + }, + alertPopupWarningText: { + depends: ['alertWarningText'], + layer: 'popover', + variant: 'alertPopupWarning', + textColor: true + }, + + alertPopupNeutral: { + depends: ['alertNeutral'], + opacity: 'alertPopup' + }, + alertPopupNeutralText: { + depends: ['alertNeutralText'], + layer: 'popover', + variant: 'alertPopupNeutral', + textColor: true + }, + badgeNotification: '--cRed', badgeNotificationText: { depends: ['text', 'badgeNotification'], -- cgit v1.2.3-70-g09d2 From 685ab4f33ee57e1dc4997b58314e5c0d38581e9d Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 2 Jul 2020 10:46:43 +0300 Subject: make the addNotice dispatch return the notice --- src/modules/interface.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/modules') diff --git a/src/modules/interface.js b/src/modules/interface.js index 338ef651..e31630fc 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -106,6 +106,7 @@ const interfaceMod = { setTimeout(() => dispatch('removeGlobalNotice', notice), timeout) } commit('pushGlobalNotice', notice) + return notice }, removeGlobalNotice ({ commit }, notice) { commit('removeGlobalNotice', notice) -- cgit v1.2.3-70-g09d2 From de291e2e33f1d9e04b27ed30ba3b012d73178e63 Mon Sep 17 00:00:00 2001 From: Eugenij Date: Fri, 3 Jul 2020 19:45:49 +0000 Subject: Add bookmarks Co-authored-by: jared --- CHANGELOG.md | 1 + package.json | 1 + src/boot/routes.js | 2 + .../bookmark_timeline/bookmark_timeline.js | 17 +++++++++ .../bookmark_timeline/bookmark_timeline.vue | 9 +++++ src/components/extra_buttons/extra_buttons.js | 10 +++++ src/components/extra_buttons/extra_buttons.vue | 16 ++++++++ src/components/nav_panel/nav_panel.vue | 5 +++ src/components/side_drawer/side_drawer.vue | 8 ++++ src/components/timeline/timeline.js | 2 +- src/i18n/en.json | 6 ++- src/i18n/ru.json | 7 +++- src/modules/statuses.js | 43 ++++++++++++++++++---- src/services/api/api.service.js | 34 +++++++++++++++-- .../entity_normalizer/entity_normalizer.service.js | 16 ++++++++ .../notifications_fetcher.service.js | 2 +- .../timeline_fetcher/timeline_fetcher.service.js | 17 +++++---- static/fontello.json | 12 ++++++ .../entity_normalizer/entity_normalizer.spec.js | 22 ++++++++++- yarn.lock | 7 ++++ 20 files changed, 213 insertions(+), 24 deletions(-) create mode 100644 src/components/bookmark_timeline/bookmark_timeline.js create mode 100644 src/components/bookmark_timeline/bookmark_timeline.vue mode change 100755 => 100644 static/fontello.json (limited to 'src/modules') diff --git a/CHANGELOG.md b/CHANGELOG.md index d978d362..2595af1d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -99,6 +99,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Ability to change user's email - About page - Added remote user redirect +- Bookmarks ### Changed - changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes ### Fixed diff --git a/package.json b/package.json index c0665f6e..96231171 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "cropperjs": "^1.4.3", "diff": "^3.0.1", "escape-html": "^1.0.3", + "parse-link-header": "^1.0.1", "localforage": "^1.5.0", "phoenix": "^1.3.0", "portal-vue": "^2.1.4", diff --git a/src/boot/routes.js b/src/boot/routes.js index d98a3b50..f63d8adf 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -2,6 +2,7 @@ import PublicTimeline from 'components/public_timeline/public_timeline.vue' import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue' import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue' import TagTimeline from 'components/tag_timeline/tag_timeline.vue' +import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue' import ConversationPage from 'components/conversation-page/conversation-page.vue' import Interactions from 'components/interactions/interactions.vue' import DMs from 'components/dm_timeline/dm_timeline.vue' @@ -40,6 +41,7 @@ export default (store) => { { name: 'public-timeline', path: '/main/public', component: PublicTimeline }, { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute }, { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, + { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'remote-user-profile-acct', path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)', diff --git a/src/components/bookmark_timeline/bookmark_timeline.js b/src/components/bookmark_timeline/bookmark_timeline.js new file mode 100644 index 00000000..64b69e5d --- /dev/null +++ b/src/components/bookmark_timeline/bookmark_timeline.js @@ -0,0 +1,17 @@ +import Timeline from '../timeline/timeline.vue' + +const Bookmarks = { + computed: { + timeline () { + return this.$store.state.statuses.timelines.bookmarks + } + }, + components: { + Timeline + }, + destroyed () { + this.$store.commit('clearTimeline', { timeline: 'bookmarks' }) + } +} + +export default Bookmarks diff --git a/src/components/bookmark_timeline/bookmark_timeline.vue b/src/components/bookmark_timeline/bookmark_timeline.vue new file mode 100644 index 00000000..8da6884b --- /dev/null +++ b/src/components/bookmark_timeline/bookmark_timeline.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js index e4b19d01..5e0c36bb 100644 --- a/src/components/extra_buttons/extra_buttons.js +++ b/src/components/extra_buttons/extra_buttons.js @@ -34,6 +34,16 @@ const ExtraButtons = { navigator.clipboard.writeText(this.statusLink) .then(() => this.$emit('onSuccess')) .catch(err => this.$emit('onError', err.error.error)) + }, + bookmarkStatus () { + this.$store.dispatch('bookmark', { id: this.status.id }) + .then(() => this.$emit('onSuccess')) + .catch(err => this.$emit('onError', err.error.error)) + }, + unbookmarkStatus () { + this.$store.dispatch('unbookmark', { id: this.status.id }) + .then(() => this.$emit('onSuccess')) + .catch(err => this.$emit('onError', err.error.error)) } }, computed: { diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 68db6fd8..7a4e8642 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -40,6 +40,22 @@ > {{ $t("status.unpin") }} + + @@ -225,10 +238,20 @@

{{ $t('settings.profile_background') }}

+

{{ $t('settings.set_new_profile_background') }}

@@ -244,7 +267,7 @@ diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js index 4adf8211..94653004 100644 --- a/src/components/user_avatar/user_avatar.js +++ b/src/components/user_avatar/user_avatar.js @@ -8,26 +8,20 @@ const UserAvatar = { ], data () { return { - showPlaceholder: false + showPlaceholder: false, + defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}` } }, components: { StillImage }, - computed: { - imgSrc () { - return this.showPlaceholder ? '/images/avi.png' : this.user.profile_image_url_original - } - }, methods: { + imgSrc (src) { + return (!src || this.showPlaceholder) ? this.defaultAvatar : src + }, imageLoadError () { this.showPlaceholder = true } - }, - watch: { - src () { - this.showPlaceholder = false - } } } diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index 9ffb28d8..3545b801 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -3,7 +3,7 @@ class="avatar" :alt="user.screen_name" :title="user.screen_name" - :src="imgSrc" + :src="imgSrc(user.profile_image_url_original)" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :image-load-error="imageLoadError" /> diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js index dcb56106..818e8bd5 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.js +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -7,7 +7,7 @@ function showWhoToFollow (panel, reply) { panel.usersToFollow.forEach((toFollow, index) => { let user = shuffled[index] - let img = user.avatar || '/images/avi.png' + let img = user.avatar || this.$store.state.instance.defaultAvatar let name = user.acct toFollow.img = img @@ -38,13 +38,7 @@ function getWhoToFollow (panel) { const WhoToFollowPanel = { data: () => ({ - usersToFollow: new Array(3).fill().map(x => ( - { - img: '/images/avi.png', - name: '', - id: 0 - } - )) + usersToFollow: [] }), computed: { user: function () { @@ -68,6 +62,13 @@ const WhoToFollowPanel = { }, mounted: function () { + this.usersToFollow = new Array(3).fill().map(x => ( + { + img: this.$store.state.instance.defaultAvatar, + name: '', + id: 0 + } + )) if (this.suggestionsEnabled) { getWhoToFollow(this) } diff --git a/src/i18n/en.json b/src/i18n/en.json index b331a3e0..72c3b1f7 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -290,9 +290,7 @@ "collapse_subject": "Collapse posts with subjects", "composing": "Composing", "confirm_new_password": "Confirm new password", - "current_avatar": "Your current avatar", "current_password": "Current password", - "current_profile_banner": "Your current profile banner", "mutes_and_blocks": "Mutes and Blocks", "data_import_export_tab": "Data Import / Export", "default_vis": "Default visibility scope", @@ -399,6 +397,12 @@ "set_new_avatar": "Set new avatar", "set_new_profile_background": "Set new profile background", "set_new_profile_banner": "Set new profile banner", + "reset_avatar": "Reset avatar", + "reset_profile_background": "Reset profile background", + "reset_profile_banner": "Reset profile banner", + "reset_avatar_confirm": "Do you really want to reset the avatar?", + "reset_banner_confirm": "Do you really want to reset the banner?", + "reset_background_confirm": "Do you really want to reset the background?", "settings": "Settings", "subject_input_always_show": "Always show subject field", "subject_line_behavior": "Copy subject when replying", diff --git a/src/modules/instance.js b/src/modules/instance.js index ec5f4e54..45a8eeca 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -15,6 +15,8 @@ const defaultState = { // Stuff from static/config.json alwaysShowSubjectInput: true, + defaultAvatar: '/images/avi.png', + defaultBanner: '/images/banner.png', background: '/static/aurora_borealis.jpg', collapseMessageWithSubject: false, disableChat: false, diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index ad543c6c..14e63e4f 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -141,20 +141,11 @@ const updateNotificationSettings = ({ credentials, settings }) => { }).then((data) => data.json()) } -const updateAvatar = ({ credentials, avatar }) => { +const updateProfileImages = ({ credentials, avatar = null, banner = null, background = null }) => { const form = new FormData() - form.append('avatar', avatar) - return fetch(MASTODON_PROFILE_UPDATE_URL, { - headers: authHeaders(credentials), - method: 'PATCH', - body: form - }).then((data) => data.json()) - .then((data) => parseUser(data)) -} - -const updateBg = ({ credentials, background }) => { - const form = new FormData() - form.append('pleroma_background_image', background) + if (avatar !== null) form.append('avatar', avatar) + if (banner !== null) form.append('header', banner) + if (background !== null) form.append('pleroma_background_image', background) return fetch(MASTODON_PROFILE_UPDATE_URL, { headers: authHeaders(credentials), method: 'PATCH', @@ -164,17 +155,6 @@ const updateBg = ({ credentials, background }) => { .then((data) => parseUser(data)) } -const updateBanner = ({ credentials, banner }) => { - const form = new FormData() - form.append('header', banner) - return fetch(MASTODON_PROFILE_UPDATE_URL, { - headers: authHeaders(credentials), - method: 'PATCH', - body: form - }).then((data) => data.json()) - .then((data) => parseUser(data)) -} - const updateProfile = ({ credentials, params }) => { return promisedRequest({ url: MASTODON_PROFILE_UPDATE_URL, @@ -1206,10 +1186,8 @@ const apiService = { deactivateUser, register, getCaptcha, - updateAvatar, - updateBg, + updateProfileImages, updateProfile, - updateBanner, importBlocks, importFollows, deleteAccount, -- cgit v1.2.3-70-g09d2 From aa2cf51c05ebdf411d74af5debbbc8fa4d3cf457 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 7 May 2020 16:10:53 +0300 Subject: Add Chats --- src/App.js | 16 +- src/App.scss | 14 + src/App.vue | 3 +- src/_variables.scss | 1 + src/boot/after_store.js | 1 + src/boot/routes.js | 15 +- src/components/account_actions/account_actions.js | 12 + src/components/account_actions/account_actions.vue | 7 + src/components/chat/chat.js | 304 +++++++++++++++++++++ src/components/chat/chat.scss | 161 +++++++++++ src/components/chat/chat.vue | 99 +++++++ src/components/chat/chat_layout.js | 100 +++++++ src/components/chat/chat_layout_utils.js | 27 ++ src/components/chat_avatar/chat_avatar.js | 23 ++ src/components/chat_avatar/chat_avatar.vue | 53 ++++ src/components/chat_list/chat_list.js | 37 +++ src/components/chat_list/chat_list.vue | 48 ++++ src/components/chat_list_item/chat_list_item.js | 65 +++++ src/components/chat_list_item/chat_list_item.scss | 94 +++++++ src/components/chat_list_item/chat_list_item.vue | 49 ++++ src/components/chat_message/chat_message.js | 109 ++++++++ src/components/chat_message/chat_message.scss | 157 +++++++++++ src/components/chat_message/chat_message.vue | 99 +++++++ .../chat_message_date/chat_message_date.vue | 24 ++ src/components/chat_new/chat_new.js | 74 +++++ src/components/chat_new/chat_new.scss | 29 ++ src/components/chat_new/chat_new.vue | 46 ++++ src/components/chat_panel/chat_panel.vue | 80 +++--- src/components/chat_title/chat_title.js | 20 ++ src/components/chat_title/chat_title.vue | 56 ++++ src/components/emoji_input/emoji_input.js | 38 ++- src/components/emoji_input/emoji_input.vue | 5 +- src/components/features_panel/features_panel.js | 1 + src/components/features_panel/features_panel.vue | 3 + src/components/media_upload/media_upload.js | 3 +- src/components/media_upload/media_upload.vue | 21 +- src/components/mobile_nav/mobile_nav.js | 5 +- src/components/mobile_nav/mobile_nav.vue | 1 + .../mobile_post_status_button.js | 7 + src/components/nav_panel/nav_panel.js | 20 +- src/components/nav_panel/nav_panel.vue | 11 + src/components/notification/notification.js | 6 +- src/components/notifications/notifications.js | 9 +- .../post_status_form/post_status_form.js | 138 +++++++--- .../post_status_form/post_status_form.vue | 50 +++- .../settings_modal/tabs/theme_tab/theme_tab.js | 6 +- .../settings_modal/tabs/theme_tab/theme_tab.vue | 67 +++++ src/components/side_drawer/side_drawer.js | 7 +- src/components/side_drawer/side_drawer.vue | 22 +- src/components/status_content/status_content.js | 2 +- src/components/status_content/status_content.vue | 2 +- src/hocs/with_load_more/with_load_more.scss | 4 + src/i18n/en.json | 33 ++- src/main.js | 4 +- src/modules/api.js | 24 +- src/modules/chats.js | 228 ++++++++++++++++ src/modules/config.js | 3 +- src/modules/instance.js | 1 + src/modules/interface.js | 9 +- src/modules/statuses.js | 5 +- src/modules/users.js | 5 + src/services/api/api.service.js | 117 +++++++- src/services/chat_service/chat_service.js | 150 ++++++++++ .../entity_normalizer/entity_normalizer.service.js | 34 ++- src/services/style_setter/style_setter.js | 3 +- src/services/theme_data/pleromafe.js | 53 +++- src/services/window_utils/window_utils.js | 5 + static/fontello.json | 6 + test/unit/specs/boot/routes.spec.js | 10 +- 69 files changed, 2787 insertions(+), 154 deletions(-) create mode 100644 src/components/chat/chat.js create mode 100644 src/components/chat/chat.scss create mode 100644 src/components/chat/chat.vue create mode 100644 src/components/chat/chat_layout.js create mode 100644 src/components/chat/chat_layout_utils.js create mode 100644 src/components/chat_avatar/chat_avatar.js create mode 100644 src/components/chat_avatar/chat_avatar.vue create mode 100644 src/components/chat_list/chat_list.js create mode 100644 src/components/chat_list/chat_list.vue create mode 100644 src/components/chat_list_item/chat_list_item.js create mode 100644 src/components/chat_list_item/chat_list_item.scss create mode 100644 src/components/chat_list_item/chat_list_item.vue create mode 100644 src/components/chat_message/chat_message.js create mode 100644 src/components/chat_message/chat_message.scss create mode 100644 src/components/chat_message/chat_message.vue create mode 100644 src/components/chat_message_date/chat_message_date.vue create mode 100644 src/components/chat_new/chat_new.js create mode 100644 src/components/chat_new/chat_new.scss create mode 100644 src/components/chat_new/chat_new.vue create mode 100644 src/components/chat_title/chat_title.js create mode 100644 src/components/chat_title/chat_title.vue create mode 100644 src/modules/chats.js create mode 100644 src/services/chat_service/chat_service.js (limited to 'src/modules') diff --git a/src/App.js b/src/App.js index 92c4e2f5..84300e00 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ 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 GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' -import { windowWidth } from './services/window_utils/window_utils' +import { windowWidth, windowHeight } from './services/window_utils/window_utils' export default { name: 'app', @@ -45,7 +45,8 @@ export default { window.CSS.supports('-moz-mask-size', 'contain') || window.CSS.supports('-ms-mask-size', 'contain') || window.CSS.supports('-o-mask-size', 'contain') - ) + ), + transitionName: 'fade' }), created () { // Load the locale from the storage @@ -127,10 +128,21 @@ export default { }, updateMobileState () { const mobileLayout = windowWidth() <= 800 + const layoutHeight = windowHeight() const changed = mobileLayout !== this.isMobileLayout if (changed) { this.$store.dispatch('setMobileLayout', mobileLayout) } + this.$store.dispatch('setLayoutHeight', layoutHeight) + } + }, + watch: { + '$route' (to, from) { + if ((to.name === 'chat' && from.name === 'chats') || (to.name === 'chats' && from.name === 'chat')) { + this.transitionName = 'none' + } else { + this.transitionName = 'fade' + } } } } diff --git a/src/App.scss b/src/App.scss index 6597b6f4..29ce73a8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -56,6 +56,7 @@ body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overscroll-behavior: none; &.hidden { display: none; @@ -928,3 +929,16 @@ nav { background-color: $fallback--fg; background-color: var(--panel, $fallback--fg); } + +.unread-chat-count { + font-size: 0.9em; + font-weight: bolder; + font-style: normal; + position: absolute; + right: 0.6rem; + padding: 0 0.3em; + min-width: 1.3rem; + min-height: 1.3rem; + max-height: 1.3rem; + line-height: 1.3rem; +} diff --git a/src/App.vue b/src/App.vue index 03b632ec..5d429934 100644 --- a/src/App.vue +++ b/src/App.vue @@ -77,6 +77,7 @@
+
- +
diff --git a/src/_variables.scss b/src/_variables.scss index 30dc3e42..9004d551 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -27,5 +27,6 @@ $fallback--tooltipRadius: 5px; $fallback--avatarRadius: 4px; $fallback--avatarAltRadius: 10px; $fallback--attachmentRadius: 10px; +$fallback--chatMessageRadius: 10px; $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 302b278c..7160434f 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -230,6 +230,7 @@ const getNodeInfo = async ({ store }) => { store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') }) store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') }) store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') }) + store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') }) store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') }) store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') }) store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) diff --git a/src/boot/routes.js b/src/boot/routes.js index f63d8adf..b5d3c631 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -6,6 +6,8 @@ import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue import ConversationPage from 'components/conversation-page/conversation-page.vue' import Interactions from 'components/interactions/interactions.vue' import DMs from 'components/dm_timeline/dm_timeline.vue' +import ChatList from 'components/chat_list/chat_list.vue' +import Chat from 'components/chat/chat.vue' import UserProfile from 'components/user_profile/user_profile.vue' import Search from 'components/search/search.vue' import Registration from 'components/registration/registration.vue' @@ -28,7 +30,7 @@ export default (store) => { } } - return [ + let routes = [ { name: 'root', path: '/', redirect: _to => { @@ -62,11 +64,20 @@ export default (store) => { { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute }, { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute }, { name: 'login', path: '/login', component: AuthForm }, - { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) }, + { name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) }, { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'about', path: '/about', component: About }, { name: 'user-profile', path: '/(users/)?:name', component: UserProfile } ] + + if (store.state.instance.pleromaChatMessagesAvailable) { + routes = routes.concat([ + { name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }, + { name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute } + ]) + } + + return routes } diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js index 0826c275..6d345bc7 100644 --- a/src/components/account_actions/account_actions.js +++ b/src/components/account_actions/account_actions.js @@ -1,3 +1,4 @@ +import { mapState } from 'vuex' import ProgressButton from '../progress_button/progress_button.vue' import Popover from '../popover/popover.vue' @@ -27,7 +28,18 @@ const AccountActions = { }, reportUser () { this.$store.dispatch('openUserReportingModal', this.user.id) + }, + openChat () { + this.$router.push({ + name: 'chat', + params: { recipient_id: this.user.id } + }) } + }, + computed: { + ...mapState({ + pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable + }) } } diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 029e7096..987e94b7 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -50,6 +50,13 @@ > {{ $t('user_card.report') }} +
{ + this.updateScrollableContainerHeight() + this.handleResize() + }) + this.setChatLayout() + }, + destroyed () { + window.removeEventListener('scroll', this.handleScroll) + window.removeEventListener('resize', this.handleLayoutChange) + this.unsetChatLayout() + if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) + this.$store.dispatch('clearCurrentChat') + }, + computed: { + recipient () { + return this.currentChat && this.currentChat.account + }, + recipientId () { + return this.$route.params.recipient_id + }, + formPlaceholder () { + if (this.recipient) { + return this.$t('chats.message_user', { nickname: this.recipient.screen_name }) + } else { + return '' + } + }, + chatViewItems () { + return chatService.getView(this.currentChatMessageService) + }, + newMessageCount () { + return this.currentChatMessageService && this.currentChatMessageService.newMessageCount + }, + streamingEnabled () { + return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED + }, + ...mapGetters([ + 'currentChat', + 'currentChatMessageService', + 'findOpenedChatByRecipientId', + 'mergedConfig' + ]), + ...mapState({ + backendInteractor: state => state.api.backendInteractor, + mastoUserSocketStatus: state => state.api.mastoUserSocketStatus, + mobileLayout: state => state.interface.mobileLayout, + layoutHeight: state => state.interface.layoutHeight, + currentUser: state => state.users.currentUser + }) + }, + watch: { + chatViewItems () { + // We don't want to scroll to the bottom on a new message when the user is viewing older messages. + // Therefore we need to know whether the scroll position was at the bottom before the DOM update. + const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET) + this.$nextTick(() => { + if (bottomedOutBeforeUpdate) { + this.scrollDown({ forceRead: !document.hidden }) + } + }) + }, + '$route': function () { + this.startFetching() + }, + layoutHeight () { + this.handleResize({ expand: true }) + }, + mastoUserSocketStatus (newValue) { + if (newValue === WSConnectionStatus.JOINED) { + this.fetchChat({ isFirstFetch: true }) + } + } + }, + methods: { + // Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered + onMessageHover ({ isHovered, messageChainId }) { + this.hoveredMessageChainId = isHovered ? messageChainId : undefined + }, + onFilesDropped () { + this.$nextTick(() => { + this.updateScrollableContainerHeight() + }) + }, + handleVisibilityChange () { + this.$nextTick(() => { + if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) { + this.scrollDown({ forceRead: true }) + } + }) + }, + handleLayoutChange () { + this.updateScrollableContainerHeight() + if (this.mobileLayout) { + this.setMobileChatLayout() + } else { + this.unsetMobileChatLayout() + } + this.$nextTick(() => { + this.updateScrollableContainerHeight() + this.scrollDown() + }) + }, + // Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it) + updateScrollableContainerHeight () { + const header = this.$refs.header + const footer = this.$refs.footer + const inner = this.mobileLayout ? window.document.body : this.$refs.inner + this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px' + }, + // Preserves the scroll position when OSK appears or the posting form changes its height. + handleResize (opts) { + this.$nextTick(() => { + this.updateScrollableContainerHeight() + + const { offsetHeight = undefined } = this.scrollPositionBeforeResize + this.scrollPositionBeforeResize = getScrollPosition(this.$refs.scrollable) + + const diff = this.scrollPositionBeforeResize.offsetHeight - offsetHeight + if (diff < 0 || (!this.bottomedOut() && opts && opts.expand)) { + this.$nextTick(() => { + this.updateScrollableContainerHeight() + this.$refs.scrollable.scrollTo({ + top: this.$refs.scrollable.scrollTop - diff, + left: 0 + }) + }) + } + }) + }, + scrollDown (options = {}) { + const { behavior = 'auto', forceRead = false } = options + const scrollable = this.$refs.scrollable + if (!scrollable) { return } + this.$nextTick(() => { + scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior }) + }) + if (forceRead || this.newMessageCount > 0) { + this.readChat() + } + }, + readChat () { + if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return } + if (document.hidden) { return } + const lastReadId = this.currentChatMessageService.lastMessage.id + this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId }) + }, + bottomedOut (offset) { + return isBottomedOut(this.$refs.scrollable, offset) + }, + reachedTop () { + const scrollable = this.$refs.scrollable + return scrollable && scrollable.scrollTop <= 0 + }, + handleScroll: _.throttle(function () { + if (!this.currentChat) { return } + + if (this.reachedTop()) { + this.fetchChat({ maxId: this.currentChatMessageService.minId }) + } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { + this.jumpToBottomButtonVisible = false + if (this.newMessageCount > 0) { + this.readChat() + } + } else { + this.jumpToBottomButtonVisible = true + } + }, 100), + handleScrollUp (positionBeforeLoading) { + const positionAfterLoading = getScrollPosition(this.$refs.scrollable) + this.$refs.scrollable.scrollTo({ + top: getNewTopPosition(positionBeforeLoading, positionAfterLoading), + left: 0 + }) + }, + fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) { + const chatMessageService = this.currentChatMessageService + if (!chatMessageService) { return } + if (fetchLatest && this.streamingEnabled) { return } + + const chatId = chatMessageService.chatId + const fetchOlderMessages = !!maxId + const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id + + this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId }) + .then((messages) => { + // Clear the current chat in case we're recovering from a ws connection loss. + if (isFirstFetch) { + chatService.clear(chatMessageService) + } + + const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable) + this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => { + this.$nextTick(() => { + if (fetchOlderMessages) { + this.handleScrollUp(positionBeforeUpdate) + } + + if (isFirstFetch) { + this.updateScrollableContainerHeight() + } + }) + }) + }) + }, + async startFetching () { + let chat = this.findOpenedChatByRecipientId(this.recipientId) + if (!chat) { + try { + chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId }) + } catch (e) { + console.error('Error creating or getting a chat', e) + this.errorLoadingChat = true + } + } + if (chat) { + this.$nextTick(() => { + this.scrollDown({ forceRead: true }) + }) + this.$store.dispatch('addOpenedChat', { chat }) + this.doStartFetching() + } + }, + doStartFetching () { + this.$store.dispatch('startFetchingCurrentChat', { + fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000) + }) + this.fetchChat({ isFirstFetch: true }) + }, + sendMessage ({ status, media }) { + const params = { + id: this.currentChat.id, + content: status + } + + if (media[0]) { + params.mediaId = media[0].id + } + + return this.backendInteractor.sendChatMessage(params) + .then(data => { + this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => { + this.$nextTick(() => { + this.updateScrollableContainerHeight() + this.scrollDown({ forceRead: true }) + }) + }) + + return data + }) + .catch(error => { + console.error('Error sending message', error) + return { + error: this.$t('chats.error_sending_message') + } + }) + }, + goBack () { + this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } }) + } + } +} + +export default Chat diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss new file mode 100644 index 00000000..13c52ea3 --- /dev/null +++ b/src/components/chat/chat.scss @@ -0,0 +1,161 @@ +.chat-view { + display: flex; + height: calc(100vh - 60px); + width: 100%; + + .chat-view-inner { + height: auto; + width: 100%; + overflow: visible; + display: flex; + margin-top: 0.5em; + margin-left: 0.5em; + margin-right: 0.5em; + } + + .chat-view-body { + background-color: var(--chatBg, $fallback--bg); + display: flex; + flex-direction: column; + width: 100%; + overflow: visible; + border-radius: none; + min-height: 100%; + margin-left: 0; + margin-right: 0; + margin-bottom: 0em; + margin-top: 0em; + border-radius: 10px 10px 0 0; + border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ; + + &::after { + border-radius: none; + box-shadow: none; + } + } + + .scrollable-message-list { + padding: 0 10px; + height: 100%; + overflow-y: scroll; + overflow-x: hidden; + display: flex; + flex-direction: column; + } + + .footer { + position: sticky; + bottom: 0px; + } + + .chat-view-heading { + align-items: center; + justify-content: space-between; + top: 50px; + display: flex; + z-index: 2; + border-radius: none; + position: sticky; + display: flex; + overflow: hidden; + } + + .go-back-button { + margin-right: 1.2em; + cursor: pointer; + } + + .jump-to-bottom-button { + width: 2.5em; + height: 2.5em; + border-radius: 100%; + position: absolute; + right: 1.3em; + top: -3.2em; + background-color: $fallback--fg; + background-color: var(--btn, $fallback--fg); + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3); + z-index: 10; + transition: 0.35s all; + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + opacity: 0; + visibility: hidden; + cursor: pointer; + + &.visible { + opacity: 1; + visibility: visible; + } + + i { + font-size: 1em; + color: $fallback--text; + color: var(--text, $fallback--text); + } + + .unread-message-count { + font-size: 0.8em; + left: 50%; + transform: translate(-50%, 0); + border-radius: 100%; + margin-top: -1rem; + padding: 0; + } + + .chat-loading-error { + width: 100%; + display: flex; + align-items: flex-end; + height: 100%; + + .error { + width: 100%; + } + } + } + + @media all and (max-width: 800px) { + height: 100%; + overflow: hidden; + + .chat-view-inner { + overflow: hidden; + height: 100%; + margin-top: 0; + margin-left: 0; + margin-right: 0; + } + + .chat-view-body { + display: flex; + min-height: auto; + overflow: hidden; + height: 100%; + margin: 0; + border-radius: 0 !important; + } + + .chat-view-heading { + position: static; + z-index: 9999; + top: 0; + margin-top: 0; + border-radius: 0; + } + + .scrollable-message-list { + display: unset; + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + .footer { + position: sticky; + bottom: auto; + } + } +} diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue new file mode 100644 index 00000000..d8c91dbe --- /dev/null +++ b/src/components/chat/chat.vue @@ -0,0 +1,99 @@ + + + + diff --git a/src/components/chat/chat_layout.js b/src/components/chat/chat_layout.js new file mode 100644 index 00000000..07ae3abf --- /dev/null +++ b/src/components/chat/chat_layout.js @@ -0,0 +1,100 @@ +const ChatLayout = { + methods: { + setChatLayout () { + if (this.mobileLayout) { + this.setMobileChatLayout() + } + }, + unsetChatLayout () { + this.unsetMobileChatLayout() + }, + setMobileChatLayout () { + // This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app). + // This layout prevents empty spaces from being visible at the bottom + // of the chat on iOS Safari (`safe-area-inset`) when + // - the on-screen keyboard appears and the user starts typing + // - the user selects the text inside the input area + // - the user selects and deletes the text that is multiple lines long + // TODO: unify the chat layout with the global layout. + + let html = document.querySelector('html') + if (html) { + html.style.overflow = 'hidden' + html.style.height = '100%' + } + + let body = document.querySelector('body') + if (body) { + body.style.height = '100%' + } + + let app = document.getElementById('app') + if (app) { + app.style.height = '100%' + app.style.overflow = 'hidden' + app.style.minHeight = 'auto' + } + + let appBgWrapper = window.document.getElementById('app_bg_wrapper') + if (appBgWrapper) { + appBgWrapper.style.overflow = 'hidden' + } + + let main = document.getElementsByClassName('main')[0] + if (main) { + main.style.overflow = 'hidden' + main.style.height = '100%' + } + + let content = document.getElementById('content') + if (content) { + content.style.paddingTop = '0' + content.style.height = '100%' + content.style.overflow = 'visible' + } + + this.$nextTick(() => { + this.updateScrollableContainerHeight() + }) + }, + unsetMobileChatLayout () { + let html = document.querySelector('html') + if (html) { + html.style.overflow = 'visible' + html.style.height = 'unset' + } + + let body = document.querySelector('body') + if (body) { + body.style.height = 'unset' + } + + let app = document.getElementById('app') + if (app) { + app.style.height = '100%' + app.style.overflow = 'visible' + app.style.minHeight = '100vh' + } + + let appBgWrapper = document.getElementById('app_bg_wrapper') + if (appBgWrapper) { + appBgWrapper.style.overflow = 'visible' + } + + let main = document.getElementsByClassName('main')[0] + if (main) { + main.style.overflow = 'visible' + main.style.height = 'unset' + } + + let content = document.getElementById('content') + if (content) { + content.style.paddingTop = '60px' + content.style.height = 'unset' + content.style.overflow = 'unset' + } + } + } +} + +export default ChatLayout diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js new file mode 100644 index 00000000..f07ba2a1 --- /dev/null +++ b/src/components/chat/chat_layout_utils.js @@ -0,0 +1,27 @@ +// Captures a scroll position +export const getScrollPosition = (el) => { + return { + scrollTop: el.scrollTop, + scrollHeight: el.scrollHeight, + offsetHeight: el.offsetHeight + } +} + +// A helper function that is used to keep the scroll position fixed as the new elements are added to the top +// Takes two scroll positions, before and after the update. +export const getNewTopPosition = (previousPosition, newPosition) => { + return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight) +} + +export const isBottomedOut = (el, offset = 0) => { + if (!el) { return } + const scrollHeight = el.scrollTop + offset + const totalHeight = el.scrollHeight - el.offsetHeight + return totalHeight <= scrollHeight +} + +// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form. +export const scrollableContainerHeight = (inner, header, footer) => { + const height = parseFloat(getComputedStyle(inner, null).height.replace('px', '')) + return height - header.clientHeight - footer.clientHeight +} diff --git a/src/components/chat_avatar/chat_avatar.js b/src/components/chat_avatar/chat_avatar.js new file mode 100644 index 00000000..7b26e07c --- /dev/null +++ b/src/components/chat_avatar/chat_avatar.js @@ -0,0 +1,23 @@ +import StillImage from '../still-image/still-image.vue' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' +import { mapState } from 'vuex' + +const ChatAvatar = { + props: ['user', 'width', 'height'], + components: { + StillImage + }, + methods: { + getUserProfileLink (user) { + if (!user) { return } + return generateProfileLink(user.id, user.screen_name) + } + }, + computed: { + ...mapState({ + betterShadow: state => state.interface.browserSupport.cssFilter + }) + } +} + +export default ChatAvatar diff --git a/src/components/chat_avatar/chat_avatar.vue b/src/components/chat_avatar/chat_avatar.vue new file mode 100644 index 00000000..f54a7151 --- /dev/null +++ b/src/components/chat_avatar/chat_avatar.vue @@ -0,0 +1,53 @@ + + + + diff --git a/src/components/chat_list/chat_list.js b/src/components/chat_list/chat_list.js new file mode 100644 index 00000000..95708d1d --- /dev/null +++ b/src/components/chat_list/chat_list.js @@ -0,0 +1,37 @@ +import { mapState, mapGetters } from 'vuex' +import ChatListItem from '../chat_list_item/chat_list_item.vue' +import ChatNew from '../chat_new/chat_new.vue' +import List from '../list/list.vue' + +const ChatList = { + components: { + ChatListItem, + List, + ChatNew + }, + computed: { + ...mapState({ + currentUser: state => state.users.currentUser + }), + ...mapGetters(['sortedChatList']) + }, + data () { + return { + isNew: false + } + }, + created () { + this.$store.dispatch('fetchChats', { latest: true }) + }, + methods: { + cancelNewChat () { + this.isNew = false + this.$store.dispatch('fetchChats', { latest: true }) + }, + newChat () { + this.isNew = true + } + } +} + +export default ChatList diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue new file mode 100644 index 00000000..e62f58e5 --- /dev/null +++ b/src/components/chat_list/chat_list.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js new file mode 100644 index 00000000..1c27088c --- /dev/null +++ b/src/components/chat_list_item/chat_list_item.js @@ -0,0 +1,65 @@ +import { mapState } from 'vuex' +import StatusContent from '../status_content/status_content.vue' +import fileType from 'src/services/file_type/file_type.service' +import ChatAvatar from '../chat_avatar/chat_avatar.vue' +import AvatarList from '../avatar_list/avatar_list.vue' +import Timeago from '../timeago/timeago.vue' +import ChatTitle from '../chat_title/chat_title.vue' + +const ChatListItem = { + name: 'ChatListItem', + props: [ + 'chat' + ], + components: { + ChatAvatar, + AvatarList, + Timeago, + ChatTitle, + StatusContent + }, + computed: { + ...mapState({ + currentUser: state => state.users.currentUser + }), + attachmentInfo () { + if (this.chat.lastMessage.attachments.length === 0) { return } + + const types = this.chat.lastMessage.attachments.map(file => fileType.fileType(file.mimetype)) + if (types.includes('video')) { + return this.$t('file_type.video') + } else if (types.includes('audio')) { + return this.$t('file_type.audio') + } else if (types.includes('image')) { + return this.$t('file_type.image') + } else { + return this.$t('file_type.file') + } + }, + messageForStatusContent () { + const content = this.chat.lastMessage ? (this.attachmentInfo || this.chat.lastMessage.content) : '' + + return { + summary: '', + statusnet_html: content, + text: content, + attachments: [] + } + } + }, + methods: { + openChat (_e) { + if (this.chat.id) { + this.$router.push({ + name: 'chat', + params: { + username: this.currentUser.screen_name, + recipient_id: this.chat.account.id + } + }) + } + } + } +} + +export default ChatListItem diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss new file mode 100644 index 00000000..12269f89 --- /dev/null +++ b/src/components/chat_list_item/chat_list_item.scss @@ -0,0 +1,94 @@ +.chat-list-item { + &:hover .animated.avatar { + canvas { + display: none; + } + img { + visibility: visible; + } + } + + display: flex; + flex-direction: row; + padding: 0.75em; + height: 4.85em; + overflow: hidden; + box-sizing: border-box; + cursor: pointer; + + :focus { + outline: none; + } + + &:hover { + background-color: var(--selectedPost, $fallback--lightBg); + box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.1); + } + + .chat-list-item-left { + margin-right: 1em; + } + + .chat-list-item-center { + width: 100%; + box-sizing: border-box; + overflow: hidden; + word-wrap: break-word; + } + + .heading { + width: 100%; + display: inline-flex; + justify-content: space-between; + line-height: 1em; + } + + .heading-right { + white-space: nowrap; + } + + .member-count { + color: $fallback--text; + color: var(--faintText, $fallback--text); + margin-right: 2px; + } + + .name-and-account-name { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + flex-shrink: 1; + } + + .chat-preview { + display: inline-flex; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: 0.35rem 0; + height: 1.2em; + line-height: 1.2em; + color: $fallback--text; + color: var(--faint, $fallback--text); + } + + a { + color: var(--faintLink, $fallback--link); + text-decoration: none; + pointer-events: none; + } + + .unread-indicator-wrapper { + display: flex; + align-items: center; + margin-left: 10px; + } + + .unread-indicator { + border-radius: 100%; + height: 8px; + width: 8px; + background-color: $fallback--link; + background-color: var(--link, $fallback--link); + } +} diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue new file mode 100644 index 00000000..26ad581b --- /dev/null +++ b/src/components/chat_list_item/chat_list_item.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js new file mode 100644 index 00000000..aba95074 --- /dev/null +++ b/src/components/chat_message/chat_message.js @@ -0,0 +1,109 @@ +import { mapState, mapGetters } from 'vuex' +import Popover from '../popover/popover.vue' +import Attachment from '../attachment/attachment.vue' +import UserAvatar from '../user_avatar/user_avatar.vue' +import Gallery from '../gallery/gallery.vue' +import LinkPreview from '../link-preview/link-preview.vue' +import StatusContent from '../status_content/status_content.vue' +import ChatMessageDate from '../chat_message_date/chat_message_date.vue' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' + +const ChatMessage = { + name: 'ChatMessage', + props: [ + 'author', + 'edited', + 'noHeading', + 'chatViewItem', + 'hoveredMessageChain' + ], + components: { + Popover, + Attachment, + StatusContent, + UserAvatar, + Gallery, + LinkPreview, + ChatMessageDate + }, + computed: { + // Returns HH:MM (hours and minutes) in local time. + createdAt () { + const time = this.chatViewItem.data.created_at + return time.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false }) + }, + isCurrentUser () { + return this.message.account_id === this.currentUser.id + }, + message () { + return this.chatViewItem.data + }, + userProfileLink () { + return generateProfileLink(this.author.id, this.author.screen_name, this.$store.state.instance.restrictedNicknames) + }, + isMessage () { + return this.chatViewItem.type === 'message' + }, + messageForStatusContent () { + return { + summary: '', + statusnet_html: this.message.content, + text: this.message.content, + attachments: this.message.attachments + } + }, + hasAttachment () { + return this.message.attachments.length > 0 + }, + ...mapState({ + betterShadow: state => state.interface.browserSupport.cssFilter, + currentUser: state => state.users.currentUser, + restrictedNicknames: state => state.instance.restrictedNicknames + }), + ellipsisButtonWrapperStyle () { + let res = { + 'opacity': this.hovered || this.menuOpened ? '1' : '0' + } + + if (this.isCurrentUser) { + res.right = '5px' + } else { + res.left = '5px' + } + + return res + }, + popoverMarginStyle () { + if (this.isCurrentUser) { + return {} + } else { + return { left: 50 } + } + }, + ...mapGetters(['mergedConfig', 'findUser']) + }, + data () { + return { + hovered: false, + menuOpened: false + } + }, + methods: { + onHover (bool) { + this.$emit('hover', { isHovered: bool, messageChainId: this.chatViewItem.messageChainId }) + }, + async deleteMessage () { + const confirmed = window.confirm(this.$t('chats.delete_confirm')) + if (confirmed) { + await this.$store.dispatch('deleteChatMessage', { + messageId: this.chatViewItem.data.id, + chatId: this.chatViewItem.data.chat_id + }) + } + this.hovered = false + this.menuOpened = false + } + } +} + +export default ChatMessage diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss new file mode 100644 index 00000000..e4028537 --- /dev/null +++ b/src/components/chat_message/chat_message.scss @@ -0,0 +1,157 @@ +@import '../../_variables.scss'; + +.chat-message-wrapper { + &.hovered-message-chain { + .animated.avatar { + canvas { + display: none; + } + img { + visibility: visible; + } + } + } + + &:last-child { + margin-bottom: 16px; + } + + .chat-message-menu { + transition: opacity 0.1s; + opacity: 0; + position: absolute; + top: -10px; + + button { + padding-top: 3px; + padding-bottom: 3px; + } + } + + .icon-ellipsis { + cursor: pointer; + + &:hover, .extra-button-popover.open & { + color: $fallback--text; + color: var(--text, $fallback--text); + } + + border-radius: $fallback--chatMessageRadius; + border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); + } + + .popover { + width: 12rem; + } + + .chat-message { + display: flex; + padding-bottom: 7px; + } + + .avatar-wrapper { + margin-right: 10px; + width: 32px; + } + + .link-preview, .attachments { + margin-bottom: 0.9em; + } + + .chat-message-inner { + display: flex; + flex-direction: column; + align-items: flex-start; + max-width: 80%; + min-width: 10rem; + width: 100%; + + &.with-media { + width: 100%; + + .gallery-row { + overflow: hidden; + } + + .status { + width: 100%; + } + } + } + + .status { + border-radius: $fallback--chatMessageRadius; + border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); + display: flex; + padding: 0.75em; + } + + .created-at { + float: right; + font-size: 0.8em; + margin: -10px 0 -5px 4px; + font-style: italic; + opacity: 0.8; + } + + .without-attachment { + .status-content { + white-space: normal; + + &::after { + margin-right: 75px; + content: " "; + display: inline-block; + } + } + } + + .incoming { + a { + color: var(--chatMessageIncomingLink, $fallback--link); + } + + .status { + color: var(--chatMessageIncomingText, $fallback--text); + background-color: var(--chatMessageIncomingBg, $fallback--bg); + border: 1px solid var(--chatMessageIncomingBorder, --border); + } + + .created-at { + a { + color: var(--chatMessageIncomingText, $fallback--text); + } + } + } + + .outgoing { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: end; + justify-content: flex-end; + + a { + color: var(--chatMessageOutgoingLink, $fallback--link); + } + + .status { + color: var(--chatMessageOutgoingText, $fallback--text); + background-color: var(--chatMessageOutgoingBg, $fallback--lightBg); + border: 1px solid var(--chatMessageOutgoingBorder, --lightBg); + } + + .chat-message-inner { + align-items: flex-end; + } + } +} + +.chat-message-date-separator { + text-align: center; + margin: 1.4em 0; + font-size: 0.9em; + user-select: none; + color: $fallback--text; + color: var(--faintedText, $fallback--text); +} diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue new file mode 100644 index 00000000..872ddf70 --- /dev/null +++ b/src/components/chat_message/chat_message.vue @@ -0,0 +1,99 @@ + + + + diff --git a/src/components/chat_message_date/chat_message_date.vue b/src/components/chat_message_date/chat_message_date.vue new file mode 100644 index 00000000..79c346b6 --- /dev/null +++ b/src/components/chat_message_date/chat_message_date.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js new file mode 100644 index 00000000..0da681f7 --- /dev/null +++ b/src/components/chat_new/chat_new.js @@ -0,0 +1,74 @@ +import { throttle } from 'lodash' +import { mapState, mapGetters } from 'vuex' +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import UserAvatar from '../user_avatar/user_avatar.vue' + +const chatNew = { + components: { + BasicUserCard, + UserAvatar + }, + data () { + return { + suggestions: [], + userIds: [], + loading: false, + query: '' + } + }, + async created () { + const { chats } = await this.backendInteractor.chats() + chats.forEach(chat => this.suggestions.push(chat.account)) + }, + computed: { + users () { + return this.userIds.map(userId => this.findUser(userId)) + }, + availableUsers () { + if (this.query.length !== 0) { + return this.users + } else { + return this.suggestions + } + }, + ...mapState({ + currentUser: state => state.users.currentUser, + backendInteractor: state => state.api.backendInteractor + }), + ...mapGetters(['findUser']) + }, + methods: { + goBack () { + this.$emit('cancel') + }, + goToChat (user) { + this.$router.push({ name: 'chat', params: { recipient_id: user.id } }) + }, + onInput () { + this.search(this.query) + }, + addUser (user) { + this.selectedUserIds.push(user.id) + this.query = '' + }, + removeUser (userId) { + this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId) + }, + search: throttle(function (query) { + if (!query) { + this.loading = false + return + } + + this.loading = true + this.userIds = [] + this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts' }) + .then(data => { + this.loading = false + this.userIds = data.accounts.map(a => a.id) + }) + }) + } +} + +export default chatNew diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss new file mode 100644 index 00000000..39216677 --- /dev/null +++ b/src/components/chat_new/chat_new.scss @@ -0,0 +1,29 @@ +.chat-new { + .input-wrap { + display: flex; + margin: 0.7em 0.5em 0.7em 0.5em; + + input { + width: 100%; + } + } + + .icon-search { + font-size: 1.5em; + float: right; + margin-right: 0.3em; + } + + .member-list { + padding-bottom: 0.67rem; + } + + .basic-user-card:hover { + cursor: pointer; + background-color: var(--selectedPost, $fallback--lightBg); + } + + .go-back-button { + cursor: pointer; + } +} diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue new file mode 100644 index 00000000..3333dbf9 --- /dev/null +++ b/src/components/chat_new/chat_new.vue @@ -0,0 +1,46 @@ + + + + diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index 3677722f..12968cfb 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -84,54 +84,56 @@ max-width: 25em; } -.chat-heading { - cursor: pointer; - .icon-comment-empty { - color: $fallback--text; - color: var(--text, $fallback--text); +.chat-panel { + .chat-heading { + cursor: pointer; + .icon-comment-empty { + color: $fallback--text; + color: var(--text, $fallback--text); + } } -} - -.chat-window { - overflow-y: auto; - overflow-x: hidden; - max-height: 20em; -} -.chat-window-container { - height: 100%; -} + .chat-window { + overflow-y: auto; + overflow-x: hidden; + max-height: 20em; + } -.chat-message { - display: flex; - padding: 0.2em 0.5em -} + .chat-window-container { + height: 100%; + } -.chat-avatar { - img { - height: 24px; - width: 24px; - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); - margin-right: 0.5em; - margin-top: 0.25em; + .chat-message { + display: flex; + padding: 0.2em 0.5em } -} -.chat-input { - display: flex; - textarea { - flex: 1; - margin: 0.6em; - min-height: 3.5em; - resize: none; + .chat-avatar { + img { + height: 24px; + width: 24px; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + margin-right: 0.5em; + margin-top: 0.25em; + } } -} -.chat-panel { - .title { + .chat-input { display: flex; - justify-content: space-between; + textarea { + flex: 1; + margin: 0.6em; + min-height: 3.5em; + resize: none; + } + } + + .chat-panel { + .title { + display: flex; + justify-content: space-between; + } } } diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js new file mode 100644 index 00000000..2723d5f5 --- /dev/null +++ b/src/components/chat_title/chat_title.js @@ -0,0 +1,20 @@ +import Vue from 'vue' +import ChatAvatar from '../chat_avatar/chat_avatar.vue' + +export default Vue.component('chat-title', { + name: 'ChatTitle', + components: { + ChatAvatar + }, + props: [ + 'user', 'withAvatar' + ], + computed: { + title () { + return this.user ? this.user.screen_name : '' + }, + htmlTitle () { + return this.user ? this.user.name_html : '' + } + } +}) diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue new file mode 100644 index 00000000..fd42d125 --- /dev/null +++ b/src/components/chat_title/chat_title.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 7974a66d..a27da090 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -79,6 +79,15 @@ const EmojiInput = { required: false, type: Boolean, default: false + }, + placement: { + /** + * Forces the panel to take a specific position relative to the input element. + * The 'auto' placement chooses either bottom or top depending on which has the available space (when both have available space, bottom is preferred). + */ + required: false, + type: String, // 'auto', 'top', 'bottom' + default: 'auto' } }, data () { @@ -162,6 +171,11 @@ const EmojiInput = { input.elm.removeEventListener('input', this.onInput) } }, + watch: { + showSuggestions: function (newValue) { + this.$emit('shown', newValue) + } + }, methods: { triggerShowPicker () { this.showPicker = true @@ -425,15 +439,29 @@ const EmojiInput = { this.caret = selectionStart }, resize () { - const { panel, picker } = this.$refs + const panel = this.$refs.panel if (!panel) return + const picker = this.$refs.picker.$el + const panelBody = this.$refs['panel-body'] const { offsetHeight, offsetTop } = this.input.elm const offsetBottom = offsetTop + offsetHeight - panel.style.top = offsetBottom + 'px' - if (!picker) return - picker.$el.style.top = offsetBottom + 'px' - picker.$el.style.bottom = 'auto' + this.setPlacement(panelBody, panel, offsetBottom) + this.setPlacement(picker, picker, offsetBottom) + }, + setPlacement (container, target, offsetBottom) { + if (!container || !target) return + + target.style.top = offsetBottom + 'px' + target.style.bottom = 'auto' + + if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) { + target.style.top = 'auto' + target.style.bottom = this.input.elm.offsetHeight + 'px' + } + }, + overflowsBottom (el) { + return el.getBoundingClientRect().bottom > window.innerHeight } } } diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index e9ac09c3..b9a74572 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -29,7 +29,10 @@ class="autocomplete-panel" :class="{ hide: !showSuggestions }" > -
+
{{ $t('features_panel.chat') }} +
  • + {{ $t('features_panel.pleroma_chat_messages') }} +
  • {{ $t('features_panel.gopher') }}
    • diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index fbb2d03d..7b8a76cc 100644 --- a/src/components/media_upload/media_upload.js +++ b/src/components/media_upload/media_upload.js @@ -61,7 +61,8 @@ const mediaUpload = { } }, props: [ - 'dropFiles' + 'dropFiles', + 'disabled' ], watch: { 'dropFiles': function (fileInfos) { diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue index 5e31730b..d719eae1 100644 --- a/src/components/media_upload/media_upload.vue +++ b/src/components/media_upload/media_upload.vue @@ -1,5 +1,8 @@