diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/nav_panel/nav_panel.vue | 1 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 14 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 9 | ||||
| -rw-r--r-- | src/components/status/status.js | 30 | ||||
| -rw-r--r-- | src/components/status/status.vue | 4 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 10 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 9 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.js | 3 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.js | 9 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 8 |
10 files changed, 76 insertions, 21 deletions
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index ad7c53f9..3aa0a793 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -44,6 +44,7 @@ .nav-panel .panel { overflow: hidden; + box-shadow: var(--panelShadow); } .nav-panel ul { list-style: none; diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index ea32bbd0..5e95631a 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -13,6 +13,11 @@ const Notifications = { notificationsFetcher.startFetching({ store, credentials }) }, + data () { + return { + bottomedOut: false + } + }, computed: { notifications () { return notificationsFromStore(this.$store) @@ -28,6 +33,9 @@ const Notifications = { }, unseenCount () { return this.unseenNotifications.length + }, + loading () { + return this.$store.state.statuses.notifications.loading } }, components: { @@ -49,10 +57,16 @@ const Notifications = { fetchOlderNotifications () { const store = this.$store const credentials = store.state.users.currentUser.credentials + store.commit('setNotificationsLoading', { value: true }) notificationsFetcher.fetchAndUpdate({ store, credentials, older: true + }).then(notifs => { + store.commit('setNotificationsLoading', { value: false }) + if (notifs.length === 0) { + this.bottomedOut = true + } }) } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 64f18720..6f162b62 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -18,10 +18,15 @@ </div> </div> <div class="panel-footer"> - <a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading"> + <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> + {{$t('notifications.no_more_notifications')}} + </div> + <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()"> <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div> </a> - <div class="new-status-notification text-center panel-footer" v-else>...</div> + <div v-else class="new-status-notification text-center panel-footer"> + <i class="icon-spin3 animate-spin"/> + </div> </div> </div> </div> diff --git a/src/components/status/status.js b/src/components/status/status.js index 558125df..2e418f0c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -9,6 +9,7 @@ import LinkPreview from '../link-preview/link-preview.vue' import { filter, find } from 'lodash' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' +import { mentionMatchesUrl } from 'src/services/mention_matcher/mention_matcher.js' const Status = { name: 'Status', @@ -79,7 +80,7 @@ const Status = { }, replyProfileLink () { if (this.isReply) { - return this.generateUserProfileLink(this.status.in_reply_to_status_id, this.replyToName) + return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName) } }, retweet () { return !!this.statusoid.retweeted_status }, @@ -179,7 +180,7 @@ const Status = { return this.tallStatus }, showingMore () { - return this.showingTall || (this.status.summary && this.expandingSubject) + return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject) }, nsfwClickthrough () { if (!this.status.nsfw) { @@ -237,11 +238,23 @@ const Status = { return 'icon-globe' } }, - linkClicked ({target}) { + linkClicked (event) { + let { target } = event if (target.tagName === 'SPAN') { target = target.parentNode } if (target.tagName === 'A') { + if (target.className.match(/mention/)) { + const href = target.getAttribute('href') + const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href)) + if (attn) { + event.stopPropagation() + event.preventDefault() + const link = this.generateUserProfileLink(attn.id, attn.screen_name) + this.$router.push(link) + return + } + } window.open(target.href, '_blank') } }, @@ -303,11 +316,14 @@ const Status = { 'highlight': function (id) { if (this.status.id === id) { let rect = this.$el.getBoundingClientRect() - if (rect.top < 140) { - window.scrollBy(0, rect.top - 200) - } else if (rect.top < window.innerHeight && rect.height >= (window.innerHeight - 50)) { - window.scrollBy(0, rect.top - 50) + if (rect.top < 100) { + // Post is above screen, match its top to screen top + window.scrollBy(0, rect.top - 100) + } else if (rect.height >= (window.innerHeight - 50)) { + // Post we want to see is taller than screen so match its top to screen top + window.scrollBy(0, rect.top - 100) } else if (rect.bottom > window.innerHeight - 50) { + // Post is below screen, match its bottom to screen bottom window.scrollBy(0, rect.bottom - window.innerHeight + 50) } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d88428c7..45100a46 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -24,9 +24,9 @@ <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status"> <div v-if="!noHeading" class="media-left"> - <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> + <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded"> <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/> - </a> + </router-link> </div> <div class="status-body"> <div class="usercard media-body" v-if="userExpanded"> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 98da8660..85e0a055 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -16,7 +16,8 @@ const Timeline = { data () { return { paused: false, - unfocused: false + unfocused: false, + bottomedOut: false } }, computed: { @@ -95,7 +96,12 @@ const Timeline = { showImmediately: true, userId: this.userId, tag: this.tag - }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) + }).then(statuses => { + store.commit('setLoading', { timeline: this.timelineName, value: false }) + if (statuses.length === 0) { + this.bottomedOut = true + } + }) }, 1000, this), scrollLoad (e) { const bodyBRect = document.body.getBoundingClientRect() diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 6ba598c5..e3eea3bd 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -20,10 +20,15 @@ </div> </div> <div :class="classes.footer"> - <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> + <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> + {{$t('timeline.no_more_statuses')}} + </div> + <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'> <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> </a> - <div class="new-status-notification text-center panel-footer" v-else>...</div> + <div v-else class="new-status-notification text-center panel-footer"> + <i class="icon-spin3 animate-spin"/> + </div> </div> </div> </template> diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 991062cd..27e138b0 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -36,7 +36,8 @@ const UserProfile = { return this.$route.params.name || this.user.screen_name }, isUs () { - return this.userId === this.$store.state.users.currentUser.id + return this.userId && this.$store.state.users.currentUser.id && + this.userId === this.$store.state.users.currentUser.id }, friends () { return this.user.friends diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index dcce275a..be799f5d 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -10,7 +10,8 @@ const UserSettings = { newLocked: this.$store.state.users.currentUser.locked, newNoRichText: this.$store.state.users.currentUser.no_rich_text, newDefaultScope: this.$store.state.users.currentUser.default_scope, - newHideNetwork: this.$store.state.users.currentUser.hide_network, + hideFollowings: this.$store.state.users.currentUser.hide_followings, + hideFollowers: this.$store.state.users.currentUser.hide_followers, followList: null, followImportError: false, followsImported: false, @@ -66,7 +67,8 @@ const UserSettings = { /* eslint-disable camelcase */ const default_scope = this.newDefaultScope const no_rich_text = this.newNoRichText - const hide_network = this.newHideNetwork + const hide_followings = this.hideFollowings + const hide_followers = this.hideFollowers /* eslint-enable camelcase */ this.$store.state.api.backendInteractor .updateProfile({ @@ -78,7 +80,8 @@ const UserSettings = { /* eslint-disable camelcase */ default_scope, no_rich_text, - hide_network + hide_followings, + hide_followers /* eslint-enable camelcase */ }}).then((user) => { if (!user.error) { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 4bc2eeec..253bbd34 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -30,8 +30,12 @@ <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label> </p> <p> - <input type="checkbox" v-model="newHideNetwork" id="account-hide-network"> - <label for="account-hide-network">{{$t('settings.hide_network_description')}}</label> + <input type="checkbox" v-model="hideFollowings" id="account-hide-followings"> + <label for="account-hide-followings">{{$t('settings.hide_followings_description')}}</label> + </p> + <p> + <input type="checkbox" v-model="hideFollowers" id="account-hide-followers"> + <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label> </p> <button :disabled='newName.length <= 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button> </div> |
