diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 1 | ||||
| -rw-r--r-- | src/components/search_bar/search_bar.js | 5 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 24 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 26 | ||||
| -rw-r--r-- | src/components/user_card/user_card.js | 10 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 48 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 16 | ||||
| -rw-r--r-- | src/modules/users.js | 6 | ||||
| -rw-r--r-- | src/services/entity_normalizer/entity_normalizer.service.js | 2 |
9 files changed, 110 insertions, 28 deletions
diff --git a/src/App.vue b/src/App.vue index be4d1f75..bf6e62e2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,6 +41,7 @@ <search-bar class="nav-icon mobile-hidden" @toggled="onSearchBarToggled" + @click.stop.native /> <router-link class="mobile-hidden" diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js index b8a792ee..d7d85676 100644 --- a/src/components/search_bar/search_bar.js +++ b/src/components/search_bar/search_bar.js @@ -20,6 +20,11 @@ const SearchBar = { toggleHidden () { this.hidden = !this.hidden this.$emit('toggled', this.hidden) + this.$nextTick(() => { + if (!this.hidden) { + this.$refs.searchInput.focus() + } + }) } } } diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 5e24bd15..aac3869f 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,7 +1,20 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import Conversation from '../conversation/conversation.vue' -import { throttle } from 'lodash' +import { throttle, keyBy } from 'lodash' + +export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { + const ids = [] + if (pinnedStatusIds && pinnedStatusIds.length > 0) { + for (let status of statuses) { + if (!pinnedStatusIds.includes(status.id)) { + break + } + ids.push(status.id) + } + } + return ids +} const Timeline = { props: [ @@ -11,7 +24,8 @@ const Timeline = { 'userId', 'tag', 'embedded', - 'count' + 'count', + 'pinnedStatusIds' ], data () { return { @@ -39,6 +53,12 @@ const Timeline = { body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []), footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : []) } + }, + // id map of statuses which need to be hidden in the main list due to pinning logic + excludedStatusIdsObject () { + const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds) + // Convert id array to object + return keyBy(ids, id => id) } }, components: { diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 1fc52083..0cb4b3ef 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -28,13 +28,25 @@ </div> <div :class="classes.body"> <div class="timeline"> - <conversation - v-for="status in timeline.visibleStatuses" - :key="status.id" - class="status-fadein" - :statusoid="status" - :collapsable="true" - /> + <template v-for="statusId in pinnedStatusIds"> + <conversation + v-if="timeline.statusesObject[statusId]" + :key="statusId + '-pinned'" + class="status-fadein" + :statusoid="timeline.statusesObject[statusId]" + :collapsable="true" + :show-pinned="true" + /> + </template> + <template v-for="status in timeline.visibleStatuses"> + <conversation + v-if="!excludedStatusIdsObject[status.id]" + :key="status.id" + class="status-fadein" + :statusoid="status" + :collapsable="true" + /> + </template> </div> </div> <div :class="classes.footer"> diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index e019ebbd..82d3b835 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -7,7 +7,7 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' export default { - props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ], + props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' ], data () { return { followRequestInProgress: false, @@ -162,6 +162,14 @@ export default { }, reportUser () { this.$store.dispatch('openUserReportingModal', this.user.id) + }, + zoomAvatar () { + const attachment = { + url: this.user.profile_image_url_original, + mimetype: 'image' + } + this.$store.dispatch('setMedia', [attachment]) + this.$store.dispatch('setCurrent', attachment) } } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 9e142480..fc18e240 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -7,7 +7,23 @@ <div class="panel-heading"> <div class="user-info"> <div class="container"> - <router-link :to="userProfileLink(user)"> + <a + v-if="allowZoomingAvatar" + class="user-info-avatar-link" + @click="zoomAvatar" + > + <UserAvatar + :better-shadow="betterShadow" + :user="user" + /> + <div class="user-info-avatar-link-overlay"> + <i class="button-icon icon-zoom-in" /> + </div> + </a> + <router-link + v-else + :to="userProfileLink(user)" + > <UserAvatar :better-shadow="betterShadow" :user="user" @@ -351,6 +367,7 @@ .container { padding: 16px 0 6px; display: flex; + align-items: flex-start; max-height: 56px; .avatar { @@ -372,6 +389,35 @@ } } + &-avatar-link { + position: relative; + cursor: pointer; + + &-overlay { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + opacity: 0; + transition: opacity .2s ease; + + i { + color: #FFF; + } + } + + &:hover &-overlay { + opacity: 1; + } + } + .usersettings { color: $fallback--lightText; color: var(--lightText, $fallback--lightText); diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 4ea0a869..cffa28f1 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -8,6 +8,7 @@ :user="user" :switcher="true" :selected="timeline.viewing" + :allow-zooming-avatar="true" rounded="top" /> <tab-switcher @@ -15,25 +16,14 @@ :render-only-focused="true" > <div :label="$t('user_card.statuses')"> - <div class="timeline"> - <template v-for="statusId in user.pinnedStatuseIds"> - <Conversation - v-if="timeline.statusesObject[statusId]" - :key="statusId" - class="status-fadein" - :statusoid="timeline.statusesObject[statusId]" - :collapsable="true" - :show-pinned="true" - /> - </template> - </div> <Timeline :count="user.statuses_count" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" - :timeline-name="'user'" + timeline-name="user" :user-id="userId" + :pinned-status-ids="user.pinnedStatusIds" /> </div> <div diff --git a/src/modules/users.js b/src/modules/users.js index 57d3a3e3..10def9cd 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -167,11 +167,11 @@ export const mutations = { }, setPinned (state, status) { const user = state.usersObject[status.user.id] - const index = user.pinnedStatuseIds.indexOf(status.id) + const index = user.pinnedStatusIds.indexOf(status.id) if (status.pinned && index === -1) { - user.pinnedStatuseIds.push(status.id) + user.pinnedStatusIds.push(status.id) } else if (!status.pinned && index !== -1) { - user.pinnedStatuseIds.splice(index, 1) + user.pinnedStatusIds.splice(index, 1) } }, setUserForStatus (state, status) { diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index de6664d1..8b4d2594 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -152,7 +152,7 @@ export const parseUser = (data) => { output.statuses_count = data.statuses_count output.friendIds = [] output.followerIds = [] - output.pinnedStatuseIds = [] + output.pinnedStatusIds = [] if (data.pleroma) { output.follow_request_count = data.pleroma.follow_request_count |
