pleroma/pleroma-fe
3
2
Fork 5
Code Issues 345 Pull requests 27 Projects Releases Packages Wiki Activity

Add admin and moderator indicators to the user profile #1791

Closed
eugenijm wants to merge 0 commits from gitlab-mr-iid-519 into develop
pull from: gitlab-mr-iid-519
merge into: pleroma:develop
Conversation 25 Commits - Files changed -
eugenijm commented 2019-02-04 02:25:41 +00:00
Member
Copy link

Revives #1523

The complementary BE MR is merged now.

Updated video that shows how the settings change take place: https://cl.ly/483e72275867

Screenshots of how badges look in different themes:

(Updated styling with theming support as per @hj's feedback (I used .alert with neutral gray that — the button background color that is optimized to be aligned with different themes):

BE provides two JSON fields: role (which can be admin, moderator, or default member) and show_role. A few notes

  • If the user chooses not to display role, BE doesn't include role in the JSON response when giving this user's data to other users.

  • show_role is visible only to the current user and is used for toggling the parameter in the user settings UI

Revives https://git.pleroma.social/pleroma/pleroma-fe/pulls/1523 [The complementary BE MR](https://git.pleroma.social/pleroma/pleroma/pulls/4153) is merged now. Updated video that shows how the settings change take place: https://cl.ly/483e72275867 Screenshots of how badges look in different themes: (Updated styling with theming support as per @hj's feedback (I used `.alert` with neutral gray that — the button background color that is optimized to be aligned with different themes): * [Pleroma Dark](https://cl.ly/0aad082bcba8) ![Screen_Shot_2019-02-07_at_5.29.36_PM](/attachments/6709a4ed-01a0-4cda-8db6-e2d6a0ab3ea5) * [Pleroma Light](https://cl.ly/9fc61a524345) ![Screen_Shot_2019-02-07_at_5.31.15_PM](/attachments/9f61402d-3722-449b-8adf-30fb904d387e) * [Classic](https://cl.ly/e0e72810e982) ![Screen_Shot_2019-02-07_at_5.30.21_PM](/attachments/7790f0f9-ce5e-4041-a049-92fdbf376ac3) * [Bird](https://cl.ly/0941e64b8d23)![Screen_Shot_2019-02-07_at_5.32.07_PM](/attachments/5db9112f-1be6-4da9-83ec-86703d63dc8a) * [Ir Black](https://cl.ly/0941e64b8d23)![Screen_Shot_2019-02-07_at_5.38.26_PM](/attachments/d963c333-80d9-4a09-8cd7-8cd3153f7394) * [Monokai](https://cl.ly/b6fbe01c63a5)![Screen_Shot_2019-02-07_at_5.34.38_PM](/attachments/fc54178c-a48d-4e17-ac4b-9dadb9f0af44) * [Mammal](https://cl.ly/d3e8ccd2657c)![Screen_Shot_2019-02-07_at_5.35.29_PM](/attachments/70e0cfb7-7c04-4bd2-96b9-840c4f8cb114) * [Redmond XX](https://cl.ly/e2f0e83b4e76)![Screen_Shot_2019-02-07_at_5.36.15_PM](/attachments/1c58edb9-2a66-4221-bbc3-00bf38c14406) * [Breezy Dark](https://cl.ly/f9d11e279695)![Screen_Shot_2019-02-07_at_5.36.48_PM](/attachments/6bc86c09-4b92-4be4-9a6e-6ac1a2d4edd4) * [Breezy Light](https://cl.ly/100914090d29)![Screen_Shot_2019-02-07_at_5.37.24_PM](/attachments/7070a065-072c-42fa-ac0a-e6df4327421d) BE provides two JSON fields: `role` (which can be `admin`, `moderator`, or default `member`) and `show_role`. A few notes - If the user chooses not to display role, BE doesn't include `role` in the JSON response when giving this user's data to other users. - `show_role` is visible only to the current user and is used for toggling the parameter in the user settings UI
Screen_Shot_2019-02-07_at_5.36.15_PM.png
243 KiB
Screen_Shot_2019-02-07_at_5.36.48_PM.png
239 KiB
Screen_Shot_2019-02-07_at_5.31.15_PM.png
201 KiB
Screen_Shot_2019-02-07_at_5.30.21_PM.png
263 KiB
Screen_Shot_2019-02-07_at_5.32.07_PM.png
276 KiB
Screen_Shot_2019-02-07_at_5.38.26_PM.png
271 KiB
Screen_Shot_2019-02-07_at_5.34.38_PM.png
252 KiB
Screen_Shot_2019-02-07_at_5.35.29_PM.png
388 KiB
Screen_Shot_2019-02-07_at_5.29.36_PM.png
281 KiB
Screen_Shot_2019-02-07_at_5.37.24_PM.png
252 KiB
shpuld commented 2019-02-04 14:41:26 +00:00
Owner
Copy link

Names can be long enough to wrap, how does the label behave when there's no space?

Names can be long enough to wrap, how does the label behave when there's no space?
eugenijm commented 2019-02-04 14:53:57 +00:00
Author
Member
Copy link

Oh, good question. I observe it being shifted by the name:
Screen_Shot_2019-02-04_at_5.49.00_PM.

Would it be more preferred for the badge to overlap the name in this case? (I suppose yes but would like to confirm)

Oh, good question. I observe it being shifted by the name: ![Screen_Shot_2019-02-04_at_5.49.00_PM](/attachments/48d0fcf5-dce6-4565-b494-149e0eee95ff). Would it be more preferred for the badge to overlap the name in this case? (I suppose yes but would like to confirm)
Screen_Shot_2019-02-04_at_5.49.00_PM.png
28 KiB
shpuld commented 2019-02-04 14:55:51 +00:00
Owner
Copy link

This func could read a bit better with something along these lines

const validRole = (this.user.role === 'admin' || this.user.role === 'moderator')
const showRole = this.isOtherUser || this.user.show_role

return validRole && showRole && this.user.role
This func could read a bit better with something along these lines ``` const validRole = (this.user.role === 'admin' || this.user.role === 'moderator') const showRole = this.isOtherUser || this.user.show_role return validRole && showRole && this.user.role ```
shpuld commented 2019-02-04 14:59:13 +00:00
Owner
Copy link

I don't think either cutting it off or overlapping is really acceptable. wrap would be preferable, but at the same time I don't think the name alone should wrap. maybe always having the badge on the next line would be cleaner. @hj opinions pls

I don't think either cutting it off or overlapping is really acceptable. wrap would be preferable, but at the same time I don't think the name alone should wrap. maybe always having the badge on the next line would be cleaner. @hj opinions pls
hj commented 2019-02-04 17:54:42 +00:00
Owner
Copy link

can we not use mastodon-mimicking style btw? I'd rather use same style as errors except with different color

can we not use mastodon-mimicking style btw? I'd rather use same style as errors except with different color
hj commented 2019-02-04 17:55:19 +00:00
Owner
Copy link

No theming support

No theming support
hj commented 2019-02-04 17:56:05 +00:00
Owner
Copy link

"в моем профиле" звучит понятнее

"в моем профиле" звучит понятнее
eugenijm commented 2019-02-04 17:58:16 +00:00
Author
Member
Copy link

Let me check, haven't considered that

Let me check, haven't considered that
hj commented 2019-02-04 18:01:07 +00:00
Owner
Copy link

I'd suggest using more-or-less same styles as .alert but using different color, like blue or gray. It will fit the overall style better and have better color coding (red is danger, i guess garg thought of moderators as of russian cops lol. blue is info/trust and gray is neutral). Also visibility will improve since we have less transparency.

I'd suggest using more-or-less same styles as `.alert` but using different color, like blue or gray. It will fit the overall style better and have better color coding (red is danger, i guess garg thought of moderators as of russian cops lol. blue is info/trust and gray is neutral). Also visibility will improve since we have less transparency.
hj commented 2019-02-04 18:02:52 +00:00
Owner
Copy link

I don't think you need to show [Admin]/[Moderator] above post form, it's distracting and gives you info you don't really need. (unless you need a reminder that you're admin and you should behave accordingly)

I don't think you need to show [Admin]/[Moderator] above post form, it's distracting and gives you info you don't really need. (unless you need a reminder that you're admin and you should behave accordingly)
eugenijm commented 2019-02-05 01:18:26 +00:00
Author
Member
Copy link

Makes sense, updated the MR to make it visible only on user profile page.

Screen_Shot_2019-02-05_at_4.24.18_AM

Makes sense, updated the MR to make it visible only on user profile page. ![Screen_Shot_2019-02-05_at_4.24.18_AM](/attachments/882c6b06-4fc3-46fc-8b85-3a395b43009f)
Screen_Shot_2019-02-05_at_4.24.18_AM.png
372 KiB
eugenijm commented 2019-02-05 01:22:29 +00:00
Author
Member
Copy link

Updated styling with theming support. I used .alert with default neutral grey background color. It works on dark / light themes:

Screen_Shot_2019-02-05_at_3.24.19_AM

Screen_Shot_2019-02-05_at_3.24.43_AM

Other themes:

Updated styling with theming support. I used `.alert` with default neutral grey background color. It works on dark / light themes: ![Screen_Shot_2019-02-05_at_3.24.19_AM](/attachments/f8cc23e1-4f38-49ce-9d64-2fa3170fdba0) ![Screen_Shot_2019-02-05_at_3.24.43_AM](/attachments/1c0400e2-9dd8-46b4-992f-177c32d5c883) Other themes: * [Pleroma Light](https://cl.ly/9fc61a524345) * [Classic](https://cl.ly/e0e72810e982) * [Bird](https://cl.ly/0941e64b8d23) * [Ir Black](https://cl.ly/0941e64b8d23) * [Monokai](https://cl.ly/b6fbe01c63a5) * [Mammal](https://cl.ly/d3e8ccd2657c) * [Redmond XX](https://cl.ly/e2f0e83b4e76) * [Breezy Dark](https://cl.ly/f9d11e279695) * [Breezy Light](https://cl.ly/100914090d29)
Screen_Shot_2019-02-05_at_3.24.19_AM.png
32 KiB
Screen_Shot_2019-02-05_at_3.24.43_AM.png
29 KiB
feld commented 2019-02-05 14:03:26 +00:00
Owner
Copy link

How does this display if you have multiple roles assigned?

How does this display if you have multiple roles assigned?
shpuld commented 2019-02-05 14:40:23 +00:00
Owner
Copy link

We basically have 3 booleans to tell the user card content if it's in the post-status-form or not, which is a bit stupid (switcher, hideBio and now roleBadge). I think you could instead make it use hideBio instead, if hideBio -> don't show badge.

We basically have 3 booleans to tell the user card content if it's in the post-status-form or not, which is a bit stupid (switcher, hideBio and now roleBadge). I think you could instead make it use hideBio instead, if hideBio -> don't show badge.
eugenijm commented 2019-02-05 15:24:50 +00:00
Author
Member
Copy link

How does this display if you have multiple roles assigned?

With regards to multiple roles, I found only 2 role related fields: is_moderator and is_admin.

If someone has both of these fields set to true, then admin takes precedence as set of admin rights includes that of moderator's.

So, it displays either admin or moderator. Will there be more roles or anything we want to display in a form of a badge in the future?

> How does this display if you have multiple roles assigned? With regards to multiple roles, I found only 2 role related fields: [`is_moderator` and `is_admin`](https://git.pleroma.social/pleroma/pleroma/blob/develop/lib/pleroma/user/info.ex#L24-25). If someone has both of these fields set to true, then `admin` [takes precedence](https://git.pleroma.social/pleroma/pleroma/blob/98fb57b41e114770154e83dc148f55d2a8603e0b/lib/pleroma/web/twitter_api/views/user_view.ex#L145) as set of admin rights includes that of moderator's. So, it displays either `admin` or `moderator`. Will there be more roles or anything we want to display in a form of a badge in the future?
feld commented 2019-02-05 15:51:07 +00:00
Owner
Copy link

Yes, we want to display user tags similarly which is more or less metadata to be used for various purposes in the future.

Yes, we want to display user tags similarly which is more or less metadata to be used for various purposes in the future.
eugenijm commented 2019-02-05 16:22:08 +00:00
Author
Member
Copy link

Good point, updated it so that it uses hideBio

Screen_Shot_2019-02-05_at_7.20.11_PM

Good point, updated it so that it uses `hideBio` ![Screen_Shot_2019-02-05_at_7.20.11_PM](/attachments/e528ac9c-4234-428a-9b5a-3d2a8ad9bc1a)
Screen_Shot_2019-02-05_at_7.20.11_PM.png
500 KiB
shpuld commented 2019-02-05 16:28:57 +00:00
Owner
Copy link

If there's going to be more in the future, it'd be a better idea to move them elsewhere, like above the bio. But I think that for now it's ok, not everything has to be done at once

If there's going to be more in the future, it'd be a better idea to move them elsewhere, like above the bio. But I think that for now it's ok, not everything has to be done at once
shpuld commented 2019-02-05 16:31:49 +00:00
Owner
Copy link

Marking this as resolved if it's only shown in the user profile view anyway. it might still wrap but we can fix it later too

Marking this as resolved if it's only shown in the user profile view anyway. it might still wrap but we can fix it later too
eugenijm commented 2019-02-05 21:55:35 +00:00
Author
Member
Copy link

FWIW, there are two user profile views that are similar. The latter appears as a preview in the TL and has slightly less space available.

Screen_Shot_2019-02-05_at_7.20.11_PM

FWIW, there are two user profile views that are similar. The latter appears as a preview in the TL and has slightly less space available. ![Screen_Shot_2019-02-05_at_7.20.11_PM](/attachments/55a9b397-4d27-49a6-8f08-f73dfada0275)
Screen_Shot_2019-02-05_at_7.20.11_PM.png
472 KiB
eugenijm commented 2019-02-07 12:49:54 +00:00
Author
Member
Copy link

Agreed that having user tags in a separate MR might be easier. The complementary BE MR is merged now by the way.

Updated video that shows how the settings change take place: https://cl.ly/483e72275867

Screenshots of how badges look in different themes (edit: in case links don't work, uploaded pictures to the MR description):

Agreed that having user tags in a separate MR might be easier. [The complementary BE MR](https://git.pleroma.social/pleroma/pleroma/pulls/4153) is merged now by the way. Updated video that shows how the settings change take place: https://cl.ly/483e72275867 Screenshots of how badges look in different themes (edit: in case links don't work, uploaded pictures to the MR description): * [Pleroma Dark](https://cl.ly/0aad082bcba8) * [Pleroma Light](https://cl.ly/9fc61a524345) * [Classic](https://cl.ly/e0e72810e982) * [Bird](https://cl.ly/0941e64b8d23) * [Ir Black](https://cl.ly/0941e64b8d23) * [Monokai](https://cl.ly/b6fbe01c63a5) * [Mammal](https://cl.ly/d3e8ccd2657c) * [Redmond XX](https://cl.ly/e2f0e83b4e76) * [Breezy Dark](https://cl.ly/f9d11e279695) * [Breezy Light](https://cl.ly/100914090d29)
shpuld commented 2019-02-07 14:17:29 +00:00
Owner
Copy link

none of those links work for me for some reason (image doesn't show up), for images you can just drag and drop them into the textbox here and it will upload and attach them.

to me it looks mostly fine (maybe add 0.2em padding on the sides of the badge or something?), but I didn't want to merge it in before @hj resolves the parts he commented on

none of those links work for me for some reason (image doesn't show up), for images you can just drag and drop them into the textbox here and it will upload and attach them. to me it looks mostly fine (maybe add 0.2em padding on the sides of the badge or something?), but I didn't want to merge it in before @hj resolves the parts he commented on
hj commented 2019-02-07 22:31:29 +00:00
Owner
Copy link

please add // TODO use proper colors here, i'll fix it myself later

please add `// TODO use proper colors` here, i'll fix it myself later
hj commented 2019-02-07 22:33:08 +00:00
Owner
Copy link

please add one comment since i don't want to burden you with creating correct theming extension for it and it's a merge.

please add one comment since i don't want to burden you with creating correct theming extension for it and it's a merge.
eugenijm commented 2019-02-07 22:34:57 +00:00
Author
Member
Copy link

Done

Done

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1

Instance Admin Dashboard

  
NL2

Improved Mobile Experience

  
NL4

Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility

https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident

Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe!1791
No description provided.