From c714eb26002b1343a64d664ad7c1282f838f39aa Mon Sep 17 00:00:00 2001 From: eugenijm Date: Mon, 4 Feb 2019 05:23:10 +0300 Subject: [PATCH 1/6] Add admin and moderator indicators to the user card --- src/_variables.scss | 4 ++++ .../user_card_content/user_card_content.vue | 16 +++++++++++++++- .../entity_normalizer.service.js | 2 ++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/_variables.scss b/src/_variables.scss index 150e4fb5..4869b721 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -2,6 +2,10 @@ $main-color: #f58d2c; $main-background: white; $darkened-background: whitesmoke; +$admin-color: #e87487; +$admin-border-color: rgba(232,116,135,.5); +$admin-background-color: rgba(232,116,135,.1); + $fallback--bg: #121a24; $fallback--fg: #182230; $fallback--faint: rgba(185, 185, 186, .5); diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index ce65ec2f..3c0e160c 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -19,7 +19,10 @@ - @{{user.screen_name}} + @{{user.screen_name}} + Admin + Moderator + {{dailyAvg}} {{ $t('user_card.per_day') }} @@ -247,6 +250,17 @@ text-overflow: ellipsis; overflow: hidden; } + + .staff { + border: 1px solid $admin-border-color; + color: $admin-color; + background-color: $admin-background-color; + line-height: 12px; + border-radius: 3px; + font-size: 12px; + padding: 4px 6px; + margin-left: 5px; + } } .user-meta { diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index bba6b363..bbf20b64 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -90,6 +90,8 @@ export const parseUser = (data) => { output.statusnet_blocking = data.statusnet_blocking output.is_local = data.is_local + output.is_admin = data.is_admin + output.is_moderator = data.is_moderator output.follows_you = data.follows_you From 648f635429da929e7090b103b9c8d354a1d3860a Mon Sep 17 00:00:00 2001 From: eugenijm Date: Mon, 4 Feb 2019 17:03:35 +0300 Subject: [PATCH 2/6] Allow to configure visibility for admin and moderator badges --- .../user_card_content/user_card_content.js | 15 +++++++++++++++ .../user_card_content/user_card_content.vue | 4 ++-- src/components/user_settings/user_settings.js | 7 ++++++- src/components/user_settings/user_settings.vue | 5 +++++ src/i18n/en.json | 2 ++ src/i18n/ru.json | 2 ++ src/services/api/api.service.js | 2 +- .../entity_normalizer.service.js | 4 ++-- 8 files changed, 35 insertions(+), 6 deletions(-) diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 6f6d04a7..427cb32d 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -79,6 +79,21 @@ export default { set (color) { this.$store.dispatch('setHighlight', { user: this.user.screen_name, color }) } + }, + visibleRole () { + const user = this.user + + if (!(user.role === 'admin' || user.role === 'moderator')) { + return undefined + } + + if (this.isOtherUser) { + return user.role + } + + if (user.show_role) { + return user.role + } } }, components: { diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 3c0e160c..0b4d0d21 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -20,8 +20,7 @@ @{{user.screen_name}} - Admin - Moderator + {{visibleRole}} {{dailyAvg}} {{ $t('user_card.per_day') }} @@ -254,6 +253,7 @@ .staff { border: 1px solid $admin-border-color; color: $admin-color; + text-transform: capitalize; background-color: $admin-background-color; line-height: 12px; border-radius: 3px; diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index ef9398f6..4f991370 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -14,6 +14,8 @@ const UserSettings = { newDefaultScope: this.$store.state.users.currentUser.default_scope, hideFollows: this.$store.state.users.currentUser.hide_follows, hideFollowers: this.$store.state.users.currentUser.hide_followers, + showRole: this.$store.state.users.currentUser.show_role, + role: this.$store.state.users.currentUser.role, followList: null, followImportError: false, followsImported: false, @@ -71,6 +73,8 @@ const UserSettings = { const no_rich_text = this.newNoRichText const hide_follows = this.hideFollows const hide_followers = this.hideFollowers + const show_role = this.showRole + /* eslint-enable camelcase */ this.$store.state.api.backendInteractor .updateProfile({ @@ -83,7 +87,8 @@ const UserSettings = { default_scope, no_rich_text, hide_follows, - hide_followers + hide_followers, + show_role /* 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 19b7bdbd..ea5b3de5 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -37,6 +37,11 @@

+

+ + + +

diff --git a/src/i18n/en.json b/src/i18n/en.json index ac7cc2a7..30bbe214 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -166,6 +166,8 @@ "no_rich_text_description": "Strip rich text formatting from all posts", "hide_follows_description": "Don't show who I'm following", "hide_followers_description": "Don't show who's following me", + "show_admin_badge": "Show Admin badge on my user card", + "show_moderator_badge": "Show Moderator badge on my user card", "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding", "panelRadius": "Panels", "pause_on_unfocused": "Pause streaming when tab is not focused", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index e86eaff9..b5686a5c 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -129,6 +129,8 @@ "no_rich_text_description": "Убрать форматирование из всех постов", "hide_follows_description": "Не показывать кого я читаю", "hide_followers_description": "Не показывать кто читает меня", + "show_admin_badge": "Показывать значок администратора на моей карточке пользователя", + "show_moderator_badge": "Показывать значок модератора на моей карточке пользователя", "nsfw_clickthrough": "Включить скрытие NSFW вложений", "panelRadius": "Панели", "pause_on_unfocused": "Приостановить загрузку когда вкладка не в фокусе", diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index d4d52ab1..f2365b7e 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -130,7 +130,7 @@ const updateBanner = ({credentials, params}) => { // description const updateProfile = ({credentials, params}) => { // Always include these fields, because they might be empty or false - const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers'] + const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers', 'show_role'] let url = PROFILE_UPDATE_URL const form = new FormData() diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index bbf20b64..828c48f9 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -90,8 +90,8 @@ export const parseUser = (data) => { output.statusnet_blocking = data.statusnet_blocking output.is_local = data.is_local - output.is_admin = data.is_admin - output.is_moderator = data.is_moderator + output.role = data.role + output.show_role = data.show_role output.follows_you = data.follows_you From d00b74b607f5bf77a7c695262d9690c2f5d31023 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Mon, 4 Feb 2019 18:05:56 +0300 Subject: [PATCH 3/6] Refactor visibleRole for better readability Improve translation --- .../user_card_content/user_card_content.js | 15 +++------------ src/i18n/ru.json | 4 ++-- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 427cb32d..1888f8c6 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -81,19 +81,10 @@ export default { } }, visibleRole () { - const user = this.user + const validRole = (this.user.role === 'admin' || this.user.role === 'moderator') + const showRole = this.isOtherUser || this.user.show_role - if (!(user.role === 'admin' || user.role === 'moderator')) { - return undefined - } - - if (this.isOtherUser) { - return user.role - } - - if (user.show_role) { - return user.role - } + return validRole && showRole && this.user.role } }, components: { diff --git a/src/i18n/ru.json b/src/i18n/ru.json index b5686a5c..4b0bd4b4 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -129,8 +129,8 @@ "no_rich_text_description": "Убрать форматирование из всех постов", "hide_follows_description": "Не показывать кого я читаю", "hide_followers_description": "Не показывать кто читает меня", - "show_admin_badge": "Показывать значок администратора на моей карточке пользователя", - "show_moderator_badge": "Показывать значок модератора на моей карточке пользователя", + "show_admin_badge": "Показывать значок администратора в моем профиле", + "show_moderator_badge": "Показывать значок модератора в моем профиле", "nsfw_clickthrough": "Включить скрытие NSFW вложений", "panelRadius": "Панели", "pause_on_unfocused": "Приостановить загрузку когда вкладка не в фокусе", From 676e6da3a539a3a537fa1060c63ea11568e39973 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Tue, 5 Feb 2019 03:28:44 +0300 Subject: [PATCH 4/6] Add theming support for admin/moderator badges --- .../user_card_content/user_card_content.vue | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 0b4d0d21..af9941e6 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -20,7 +20,7 @@ @{{user.screen_name}} - {{visibleRole}} + {{visibleRole}} {{dailyAvg}} {{ $t('user_card.per_day') }} @@ -251,15 +251,10 @@ } .staff { - border: 1px solid $admin-border-color; - color: $admin-color; - text-transform: capitalize; - background-color: $admin-background-color; - line-height: 12px; - border-radius: 3px; - font-size: 12px; - padding: 4px 6px; - margin-left: 5px; + color: $fallback--text; + color: var(--btnText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btn, $fallback--fg); } } From fd4cd2e10a544d2ee03f1c834cf08eeb5993a648 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Tue, 5 Feb 2019 04:17:27 +0300 Subject: [PATCH 5/6] Make role badge visible only on user profile page --- src/_variables.scss | 4 ---- src/components/user_card_content/user_card_content.vue | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 4869b721..150e4fb5 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -2,10 +2,6 @@ $main-color: #f58d2c; $main-background: white; $darkened-background: whitesmoke; -$admin-color: #e87487; -$admin-border-color: rgba(232,116,135,.5); -$admin-background-color: rgba(232,116,135,.1); - $fallback--bg: #121a24; $fallback--fg: #182230; $fallback--faint: rgba(185, 185, 186, .5); diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index af9941e6..12068d7d 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -20,7 +20,7 @@ @{{user.screen_name}} - {{visibleRole}} + {{visibleRole}} {{dailyAvg}} {{ $t('user_card.per_day') }} From 19dbdd24b41122ebcda71bcdf91ea61abfc123dd Mon Sep 17 00:00:00 2001 From: eugenijm Date: Tue, 5 Feb 2019 20:22:49 +0300 Subject: [PATCH 6/6] Update user settings text: staff badges are only visible in user profile Use capitalized text in badges --- src/components/user_card_content/user_card_content.vue | 2 ++ src/i18n/en.json | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 12068d7d..7f9909c4 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -250,7 +250,9 @@ overflow: hidden; } + // TODO use proper colors .staff { + text-transform: capitalize; color: $fallback--text; color: var(--btnText, $fallback--text); background-color: $fallback--fg; diff --git a/src/i18n/en.json b/src/i18n/en.json index 30bbe214..0d8553de 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -166,8 +166,8 @@ "no_rich_text_description": "Strip rich text formatting from all posts", "hide_follows_description": "Don't show who I'm following", "hide_followers_description": "Don't show who's following me", - "show_admin_badge": "Show Admin badge on my user card", - "show_moderator_badge": "Show Moderator badge on my user card", + "show_admin_badge": "Show Admin badge in my profile", + "show_moderator_badge": "Show Moderator badge in my profile", "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding", "panelRadius": "Panels", "pause_on_unfocused": "Pause streaming when tab is not focused",