From 75f0c191dd8ad029561901ce0dab8e10226b95f7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 14 Nov 2018 21:53:51 +0300 Subject: some initial work for user highlight v2 --- src/components/user_card_content/user_card_content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 76a5577e..eae436a9 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,7 +5,7 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const color = this.$store.state.config.colors.bg + const color = this.$store.state.config.customTheme.colors.bg if (color) { const rgb = hex2rgb(color) const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` -- cgit v1.2.3-70-g09d2 From aa93664fd68e3fc27821fc1b03af25b6a6e6ae87 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 03:51:57 +0300 Subject: fix coldboot --- src/components/user_card_content/user_card_content.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index eae436a9..4c7b6a68 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,9 +5,8 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const color = this.$store.state.config.customTheme.colors.bg - if (color) { - const rgb = hex2rgb(color) + const rgb = this.$store.state.config.customTheme.colors.bg + if (rgb) { const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, -- cgit v1.2.3-70-g09d2 From 50562eb6b700cee84f70210fd1adc8df3b18b92b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 04:26:45 +0300 Subject: fix lint, for shadows, it's now possible to refer css variables as colors --- .../user_card_content/user_card_content.js | 1 - src/services/style_setter/style_setter.js | 20 +++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 4c7b6a68..e8073021 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -1,5 +1,4 @@ import StillImage from '../still-image/still-image.vue' -import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 45e950f0..1b7ec7f2 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -101,11 +101,29 @@ const getCssShadow = (input) => { shad.blur, shad.spread ].map(_ => _ + 'px').concat([ - rgb2rgba({...(hex2rgb(shad.color)), a: shad.alpha}), + getCssColor(shad.color, shad.alpha), shad.inset ? 'inset' : '' ]).join(' ')).join(', ') } +const getCssColor = (input, a) => { + console.log(input) + let rgb = {} + if (typeof input === 'object') { + rgb = input + } else if (typeof input === 'string') { + if (input.startsWith('#')) { + rgb = hex2rgb(input) + } else if (input.startsWith('--')) { + return `var(${input})` + } else { + return input + } + } + console.log(rgb2rgba({ ...rgb, a })) + return rgb2rgba({ ...rgb, a }) +} + const generateColors = (input) => { const colors = {} const opacity = Object.assign({ -- cgit v1.2.3-70-g09d2 From dc3df7bc4e91abf4a911e4c5ecc0c627d00dcfb1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 18:22:05 +0300 Subject: fixes --- src/components/notifications/notifications.scss | 1 + src/components/post_status_form/post_status_form.vue | 4 ++-- src/components/timeline/timeline.vue | 2 +- src/components/user_card_content/user_card_content.js | 6 ++++-- src/services/style_setter/style_setter.js | 3 +++ 5 files changed, 11 insertions(+), 5 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 26455ffb..3f22b690 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -35,6 +35,7 @@ right: 0; left: 0; bottom: 0; + pointer-events: none; } &.unseen { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 4514e79f..751b048a 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -154,7 +154,7 @@ margin-left: $fallback--attachmentRadius; margin-left: var(--attachmentRadius, $fallback--attachmentRadius); background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--btn, $fallback--fg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -292,7 +292,7 @@ &.highlighted { background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--lightBg, $fallback--fg); } } } diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index c2d5b9e6..39f1b5bc 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -75,6 +75,6 @@ padding: 10px; z-index: 1; background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + background-color: var(--panel, $fallback--fg); } diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index e8073021..6f9ed9fe 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -1,11 +1,13 @@ import StillImage from '../still-image/still-image.vue' +import { hex2rgb } from '../../services/color_convert/color_convert.js' export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const rgb = this.$store.state.config.customTheme.colors.bg - if (rgb) { + const color = this.$store.state.config.customTheme.colors.bg + if (color) { + const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 1b7ec7f2..57bd2841 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -202,6 +202,9 @@ const generateColors = (input) => { colors[k + 'Link'].a = v colors['panelFaint'].a = v } + if (k === 'bg') { + colors['lightBg'].a = v + } if (colors[k]) { colors[k].a = v } else { -- cgit v1.2.3-70-g09d2 From f039b79e5ac7da33c3664241e0d20d3c6964872f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 20:25:14 +0300 Subject: unbreak user profiles --- src/components/user_card_content/user_card_content.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 064c984d..e7ca21c7 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -12,7 +12,10 @@ export default { }, computed: { headingStyle () { - const color = this.$store.state.config.customTheme.colors.bg + const color = this.$store.state.config.customTheme.colors ? + this.$store.state.config.customTheme.colors.bg : // v2 + this.$store.state.config.colors.bg // v1 + if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` -- cgit v1.2.3-70-g09d2 From f8e17cbdc58651b17a4f5639d3719a7e533b0d8b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 26 Nov 2018 21:22:44 +0300 Subject: lint fix --- src/components/user_card_content/user_card_content.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index e7ca21c7..254d1666 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -12,9 +12,9 @@ export default { }, computed: { headingStyle () { - const color = this.$store.state.config.customTheme.colors ? - this.$store.state.config.customTheme.colors.bg : // v2 - this.$store.state.config.colors.bg // v1 + const color = this.$store.state.config.customTheme.colors + ? this.$store.state.config.customTheme.colors.bg // v2 + : this.$store.state.config.colors.bg // v1 if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color -- cgit v1.2.3-70-g09d2 From 406df4399b630268c1028664f3b818571d6f8e4f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 30 Nov 2018 16:39:07 +0300 Subject: avatars shadows, also allows drop-shadow use --- src/components/notification/notification.js | 3 ++- src/components/notification/notification.vue | 2 +- src/components/notifications/notifications.scss | 6 +++++ src/components/status/status.js | 3 ++- src/components/status/status.vue | 13 +++++++++- src/components/style_switcher/style_switcher.vue | 12 ++++++++++ .../user_card_content/user_card_content.js | 3 ++- .../user_card_content/user_card_content.vue | 7 +++++- src/i18n/en.json | 7 ++++++ src/modules/interface.js | 6 +++++ src/services/style_setter/style_setter.js | 28 ++++++++++++++++++++-- 11 files changed, 82 insertions(+), 8 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index c786f2cc..4dea63bb 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/ const Notification = { data () { return { - userExpanded: false + userExpanded: false, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, props: [ diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 72c1ca69..f98afbe0 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 87c89f6a..d17ae25d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -49,11 +49,17 @@ .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); overflow: hidden; line-height: 0; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/components/status/status.js b/src/components/status/status.js index 10716583..725bc3f8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -33,7 +33,8 @@ const Status = { showingTall: false, expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' ? !this.$store.state.instance.collapseMessageWithSubject - : !this.$store.state.config.collapseMessageWithSubject + : !this.$store.state.config.collapseMessageWithSubject, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4541c560..26be335c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -21,7 +21,7 @@
- +
@@ -464,8 +464,14 @@ .status .avatar-compact { width: 32px; height: 32px; + box-shadow: var(--avatarStatusShadow); border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } } .avatar { @@ -477,6 +483,11 @@ overflow: hidden; position: relative; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + img { width: 100%; height: 100%; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fa173b98..66fe0f6b 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -278,6 +278,18 @@
+
+ + filter: drop-shadow() + + + drop-shadow + spread-radius + inset + +

{{$t('settings.style.shadows.filter_hint.inset_ignored')}}

+

{{$t('settings.style.shadows.filter_hint.spread_zero')}}

+
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 254d1666..97cd4983 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -7,7 +7,8 @@ export default { return { hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats - : this.$store.state.config.hideUserStats + : this.$store.state.config.hideUserStats, + betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, computed: { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 5529948e..cca418ff 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -10,7 +10,7 @@
- +
@@ -159,6 +159,11 @@ box-shadow: var(--avatarShadow); object-fit: cover; + &.better-shadow { + box-shadow: none; + filter: drop-shadow(var(--avatarStatusShadowFilter)) + } + &.animated::before { display: none; } diff --git a/src/i18n/en.json b/src/i18n/en.json index 8847b11e..7f5a2a4f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -236,6 +236,13 @@ "spread": "Spread", "inset": "Inset", "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", + "filter_hint": { + "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", + "text": "Please note that {0} does not support {1} parameter and {2} keyword.", + "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", + "inset_ignored": "Inset shadows using will be ignored", + "inset_substituted": "Inset shadows will be substituted with {1} equivalent" + }, "components": { "panel": "Panel", "panelHeader": "Panel header", diff --git a/src/modules/interface.js b/src/modules/interface.js index 07489685..132fb08d 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -4,6 +4,12 @@ const defaultState = { settings: { currentSaveStateNotice: null, noticeClearTimeout: null + }, + browserSupport: { + cssFilter: window.CSS && window.CSS.supports && ( + window.CSS.supports('filter', 'drop-shadow(0 0)') || + window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') + ) } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 7c375206..cff81c40 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -110,6 +110,24 @@ const getCssShadow = (input) => { ]).join(' ')).join(', ') } +const getCssShadowFilter = (input) => { + if (input.length === 0) { + return 'none' + } + + return input + // drop-shadow doesn't support inset or spread + .filter((shad) => console.log(shad) || !shad.inset && Number(shad.spread) === 0) + .map((shad) => [ + shad.x, + shad.y, + // drop-shadow's blur is twice as strong compared to box-shadow + shad.blur / 2 + ].map(_ => _ + 'px').concat([ + getCssColor(shad.color, shad.alpha) + ]).join(' ')).join(', ') +} + const getCssColor = (input, a) => { let rgb = {} if (typeof input === 'object') { @@ -384,7 +402,12 @@ const generateShadows = (input) => { return { rules: { - shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';') + shadows: Object + .entries(shadows) + // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally + // convert all non-inset shadows into filter: drop-shadow() to boost performance + .map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}; --${k}ShadowFilter: ${getCssShadowFilter(v)}`) + .join(';') }, theme: { shadows @@ -467,5 +490,6 @@ export { generateFonts, generatePreset, composePreset, - getCssShadow + getCssShadow, + getCssShadowFilter } -- cgit v1.2.3-70-g09d2 From ca190251870c239d49c45d245a2a219fe4169625 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 4 Dec 2018 12:50:29 +0300 Subject: Added support for async following including delayed confirmation if we followed user or not --- .../user_card_content/user_card_content.js | 46 ++++++++++++++++++++++ .../user_card_content/user_card_content.vue | 21 ++++++++-- src/i18n/en.json | 4 ++ src/i18n/ru.json | 4 ++ 4 files changed, 71 insertions(+), 4 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index b5dd9b91..235cfb49 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' ], data () { return { + followRequestInProgress: false, + followRequestSent: false, hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats : this.$store.state.config.hideUserStats @@ -70,13 +72,57 @@ 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(() => { + if (this.user.following) { + this.followRequestInProgress = false + return + } + if (!this.user.locked) { + let attemptsLeft = 3 + const fetchUser = () => 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)) + .catch((e) => reject(e)) + }, 500) + }).then((confirmed) => { + if (!confirmed && attemptsLeft > 0) { + attemptsLeft-- + return fetchUser() + } else if (confirmed) { + return true + } else { + return false + } + }) + + return fetchUser() + .then((successfulConfirmation) => { + if (successfulConfirmation) { + this.followRequestInProgress = false + } else { + this.followRequestInProgress = false + this.followRequestSent = true + } + }) + } else { + 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 84669d7f..1dcf348f 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 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index 893db931..9d12f09e 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -193,6 +193,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 9c28ccf4..37d88e3c 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -156,6 +156,10 @@ "block": "Заблокировать", "blocked": "Заблокирован", "follow": "Читать", + "follow_sent": "Запрос отправлен!", + "follow_progress": "Запрашиваем…", + "follow_again": "Запросить еще заново?", + "follow_unfollow": "Перестать читать", "followees": "Читаемые", "followers": "Читатели", "following": "Читаю", -- cgit v1.2.3-70-g09d2 From cc259411a79c6752f2e71917d58d625fc6028db9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 13 Dec 2018 20:41:23 +0300 Subject: fix gradients and minor artifacts --- src/components/user_card_content/user_card_content.js | 12 +++++++++++- src/components/user_card_content/user_card_content.vue | 5 ++++- 2 files changed, 15 insertions(+), 2 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index e7f19953..be7a2349 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -20,10 +20,20 @@ export default { if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` + + const gradient = [ + [tintColor, this.hideBio ? '60%' : ''], + this.hideBio ? [ + color, '100%' + ] : [ + tintColor, '' + ] + ].map(_ => _.join(' ')).join(', ') + return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, backgroundImage: [ - `linear-gradient(to bottom, ${tintColor}, ${tintColor})`, + `linear-gradient(to bottom, ${gradient})`, `url(${this.user.cover_photo})` ].join(', ') } diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 18504277..08b25595 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -90,7 +90,7 @@
-
+
{{ $t('user_card.statuses') }}
@@ -122,6 +122,9 @@ border-radius: var(--panelRadius, $fallback--panelRadius); overflow: hidden; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + .panel-heading { padding: 0.6em 0em; text-align: center; -- cgit v1.2.3-70-g09d2 From 13fbef4550e0e95024df9f1cc77764b8c734ca3f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 14 Dec 2018 17:33:48 +0300 Subject: slightly changed the code to have less mutations, added comments --- .../user_card_content/user_card_content.js | 71 +++++++++++++--------- 1 file changed, 41 insertions(+), 30 deletions(-) (limited to 'src/components/user_card_content/user_card_content.js') diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 8c6de8ec..206dba88 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -90,43 +90,54 @@ export default { 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 } - if (!this.user.locked) { - let attemptsLeft = 3 - const fetchUser = () => 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)) - .catch((e) => reject(e)) - }, 500) - }).then((confirmed) => { - if (!confirmed && attemptsLeft > 0) { - attemptsLeft-- - return fetchUser() - } else if (confirmed) { - return true + + // 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 { - return false + // If after all the tries, just treat it as if user is locked + this.followRequestInProgress = false + this.followRequestSent = true } }) - - return fetchUser() - .then((successfulConfirmation) => { - if (successfulConfirmation) { - this.followRequestInProgress = false - } else { - this.followRequestInProgress = false - this.followRequestSent = true - } - }) - } else { - this.followRequestInProgress = false - this.followRequestSent = true - } }) }, unfollowUser () { -- cgit v1.2.3-70-g09d2