diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 7 | ||||
| -rw-r--r-- | src/App.scss | 8 | ||||
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/settings/settings.vue | 2 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.js | 57 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 21 | ||||
| -rw-r--r-- | src/components/user_finder/user_finder.js | 1 | ||||
| -rw-r--r-- | src/components/user_finder/user_finder.vue | 29 | ||||
| -rw-r--r-- | src/i18n/en.json | 4 | ||||
| -rw-r--r-- | src/i18n/ru.json | 4 |
10 files changed, 121 insertions, 14 deletions
@@ -21,6 +21,7 @@ export default { }, data: () => ({ mobileActivePanel: 'timeline', + finderHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || window.CSS.supports('-webkit-mask-size', 'contain') || @@ -53,7 +54,8 @@ export default { }, logoBgStyle () { return Object.assign({ - 'margin': `${this.$store.state.instance.logoMargin} 0` + 'margin': `${this.$store.state.instance.logoMargin} 0`, + opacity: this.finderHidden ? 1 : 0 }, this.enableMask ? {} : { 'background-color': this.enableMask ? '' : 'transparent' }) @@ -80,6 +82,9 @@ export default { logout () { this.$router.replace('/main/public') this.$store.dispatch('logout') + }, + onFinderToggled (hidden) { + this.finderHidden = hidden } } } diff --git a/src/App.scss b/src/App.scss index 0a303b15..7f33cd51 100644 --- a/src/App.scss +++ b/src/App.scss @@ -269,6 +269,9 @@ nav { justify-content: center; flex: 0 0 auto; z-index: -1; + transition: opacity; + transition-timing-function: ease-out; + transition-duration: 100ms; .mask { mask-repeat: no-repeat; @@ -597,6 +600,11 @@ nav { color: $fallback--faint; color: var(--faint, $fallback--faint); } +@media all and (min-width: 959px) { + .logo { + opacity: 1 !important; + } +} @media all and (max-width: 959px) { .mobile-hidden { diff --git a/src/App.vue b/src/App.vue index 048c1e77..a3a7ecf6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,7 +13,7 @@ <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> </div> <div class='item right'> - <user-finder class="nav-icon"></user-finder> + <user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder> <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link> <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a> </div> diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 3f920de5..39125009 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -120,7 +120,7 @@ </li> <ul class="setting-list suboptions" > <li> - <input :disabled="!hideAttachmentsInConvLocal" type="checkbox" id="preloadImage" v-model="preloadImage"> + <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage"> <label for="preloadImage">{{$t('settings.preload_images')}}</label> </li> </ul> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index be7a2349..206dba88 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,6 +5,8 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ], data () { return { + followRequestInProgress: false, + followRequestSent: false, hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats : this.$store.state.config.hideUserStats, @@ -84,13 +86,68 @@ export default { methods: { followUser () { const store = this.$store + this.followRequestInProgress = true store.state.api.backendInteractor.followUser(this.user.id) .then((followedUser) => store.commit('addNewUsers', [followedUser])) + .then(() => { + // For locked users we just mark it that we sent the follow request + if (this.user.locked) { + this.followRequestInProgress = false + this.followRequestSent = true + return + } + + if (this.user.following) { + // If we get result immediately, just stop. + this.followRequestInProgress = false + return + } + + // But usually we don't get result immediately, so we ask server + // for updated user profile to confirm if we are following them + // Sometimes it takes several tries. Sometimes we end up not following + // user anyway, probably because they locked themselves and we + // don't know that yet. + // Recursive Promise, it will call itself up to 3 times. + const fetchUser = (attempt) => new Promise((resolve, reject) => { + setTimeout(() => { + store.state.api.backendInteractor.fetchUser({ id: this.user.id }) + .then((user) => store.commit('addNewUsers', [user])) + .then(() => resolve([this.user.following, attempt])) + .catch((e) => reject(e)) + }, 500) + }).then(([following, attempt]) => { + if (!following && attempt <= 3) { + // If we BE reports that we still not following that user - retry, + // increment attempts by one + return fetchUser(++attempt) + } else { + // If we run out of attempts, just return whatever status is. + return following + } + }) + + return fetchUser(1) + .then((following) => { + if (following) { + // We confirmed and everything its good. + this.followRequestInProgress = false + } else { + // If after all the tries, just treat it as if user is locked + this.followRequestInProgress = false + this.followRequestSent = true + } + }) + }) }, unfollowUser () { const store = this.$store + this.followRequestInProgress = true store.state.api.backendInteractor.unfollowUser(this.user.id) .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) + .then(() => { + this.followRequestInProgress = false + }) }, blockUser () { const store = this.$store diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 08b25595..a40aff35 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -44,13 +44,26 @@ <div class="follow" v-if="loggedIn"> <span v-if="user.following"> <!--Following them!--> - <button @click="unfollowUser" class="pressed"> - {{ $t('user_card.following') }} + <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')"> + <template v-if="followRequestInProgress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else> + {{ $t('user_card.following') }} + </template> </button> </span> <span v-if="!user.following"> - <button @click="followUser"> - {{ $t('user_card.follow') }} + <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''"> + <template v-if="followRequestInProgress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else-if="followRequestSent"> + {{ $t('user_card.follow_sent') }} + </template> + <template v-else> + {{ $t('user_card.follow') }} + </template> </button> </span> </div> diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js index 74f79d1b..55c6c402 100644 --- a/src/components/user_finder/user_finder.js +++ b/src/components/user_finder/user_finder.js @@ -11,6 +11,7 @@ const UserFinder = { }, toggleHidden () { this.hidden = !this.hidden + this.$emit('toggled', this.hidden) } } } diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index 4d9f6842..9efdfab7 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,11 +1,14 @@ <template> <div class="user-finder-container"> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> - <a href="#" v-if="hidden" :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> - <span v-else> + <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> + <template v-else> <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> + <button class="btn search-button" @click="findUser(username)"> + <i class="icon-search"/> + </button> <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> - </span> + </template> </div> </template> @@ -16,11 +19,23 @@ .user-finder-container { max-width: 100%; -} + display: inline-flex; + align-items: baseline; + vertical-align: baseline; + + + .user-finder-input, + .search-button { + height: 29px; + } + .user-finder-input { + max-width: 80%; + } -.user-finder-input { - max-width: 80%; - vertical-align: middle; + .search-button { + margin-left: .5em; + margin-right: .5em; + } } </style> diff --git a/src/i18n/en.json b/src/i18n/en.json index 1ce53796..f445bfc2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -320,6 +320,10 @@ "blocked": "Blocked!", "deny": "Deny", "follow": "Follow", + "follow_sent": "Request sent!", + "follow_progress": "Requesting…", + "follow_again": "Send request again?", + "follow_unfollow": "Stop following", "followees": "Following", "followers": "Followers", "following": "Following!", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 80598b0c..249eab69 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -280,6 +280,10 @@ "block": "Заблокировать", "blocked": "Заблокирован", "follow": "Читать", + "follow_sent": "Запрос отправлен!", + "follow_progress": "Запрашиваем…", + "follow_again": "Запросить еще заново?", + "follow_unfollow": "Перестать читать", "followees": "Читаемые", "followers": "Читатели", "following": "Читаю", |