aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue1
-rw-r--r--src/components/search_bar/search_bar.js5
-rw-r--r--src/components/timeline/timeline.js24
-rw-r--r--src/components/timeline/timeline.vue26
-rw-r--r--src/components/user_card/user_card.js10
-rw-r--r--src/components/user_card/user_card.vue48
-rw-r--r--src/components/user_profile/user_profile.vue16
-rw-r--r--src/modules/users.js6
-rw-r--r--src/services/entity_normalizer/entity_normalizer.service.js2
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