diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | src/components/staff_panel/staff_panel.js | 20 | ||||
| -rw-r--r-- | src/components/staff_panel/staff_panel.vue | 27 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 2 | ||||
| -rw-r--r-- | src/i18n/en.json | 7 |
5 files changed, 47 insertions, 10 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 965b538b..cf4be7da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Added some missing unicode emoji - Added the upload limit to the Features panel in the About page - Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore +- Group staff members by role in the About page ### Fixed - Fixed the occasional bug where screen would scroll 1px when typing into a reply form diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js index 8665648a..b9561bf1 100644 --- a/src/components/staff_panel/staff_panel.js +++ b/src/components/staff_panel/staff_panel.js @@ -1,4 +1,6 @@ import map from 'lodash/map' +import groupBy from 'lodash/groupBy' +import { mapGetters, mapState } from 'vuex' import BasicUserCard from '../basic_user_card/basic_user_card.vue' const StaffPanel = { @@ -10,9 +12,21 @@ const StaffPanel = { BasicUserCard }, computed: { - staffAccounts () { - return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _) - } + groupedStaffAccounts () { + const staffAccounts = map(this.staffAccounts, this.findUser).filter(_ => _) + const groupedStaffAccounts = groupBy(staffAccounts, 'role') + + return [ + { role: 'admin', users: groupedStaffAccounts['admin'] }, + { role: 'moderator', users: groupedStaffAccounts['moderator'] } + ].filter(group => group.users) + }, + ...mapGetters([ + 'findUser' + ]), + ...mapState({ + staffAccounts: state => state.instance.staffAccounts + }) } } diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue index 1d13003d..c52ade42 100644 --- a/src/components/staff_panel/staff_panel.vue +++ b/src/components/staff_panel/staff_panel.vue @@ -7,11 +7,18 @@ </div> </div> <div class="panel-body"> - <basic-user-card - v-for="user in staffAccounts" - :key="user.screen_name" - :user="user" - /> + <div + v-for="group in groupedStaffAccounts" + :key="group.role" + class="staff-group" + > + <h4>{{ $t('general.role.' + group.role) }}</h4> + <basic-user-card + v-for="user in group.users" + :key="user.screen_name" + :user="user" + /> + </div> </div> </div> </div> @@ -20,4 +27,14 @@ <script src="./staff_panel.js" ></script> <style lang="scss"> + +.staff-group { + padding-left: 1em; + padding-top: 1em; + + .basic-user-card { + padding-left: 0; + } +} + </style> diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 773f764a..c6c4dfee 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -89,7 +89,7 @@ v-if="user.bot" class="alert user-role" > - bot + {{ $t('user_card.bot') }} </span> </template> <span v-if="user.locked"> diff --git a/src/i18n/en.json b/src/i18n/en.json index 78ce0919..46614ef1 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -75,7 +75,11 @@ "confirm": "Confirm", "verify": "Verify", "close": "Close", - "peek": "Peek" + "peek": "Peek", + "role": { + "admin": "Admin", + "moderator": "Moderator" + } }, "image_cropper": { "crop_picture": "Crop picture", @@ -714,6 +718,7 @@ "mute_progress": "Muting…", "hide_repeats": "Hide repeats", "show_repeats": "Show repeats", + "bot": "Bot", "admin_menu": { "moderation": "Moderation", "grant_admin": "Grant Admin", |