pleroma/pleroma-fe
Watch
2
2
Fork
You've already forked pleroma-fe
 10
Code Issues 351 Pull requests 26 Projects Releases 5 Packages 1 Wiki Activity

Show Favs and Repeats in the statuses #1995

Closed
brendenbice1222 wants to merge 0 commits from gitlab-mr-iid-725 into develop
pull from: gitlab-mr-iid-725
merge into: pleroma:develop
Conversation 52 Commits - Files changed -
brendenbice1222 commented 2019-04-02 03:20:50 +00:00
Member
Copy link

close #202

Things to note

I've made AvatarList component that accepts avatars information array. This allows to display users easily in stacked avatars list. At the moment, It fetches the information of favourited by and replied by from 2 endpoints after initial loading of statuses. This needs to be tested in performance wise as well to see if api refactoring is needed.

Screenshots

  • desktop

Screen_Shot_2019-04-01_at_11.18.19_PM

  • mobile

Screen_Shot_2019-04-01_at_11.18.34_PM

close #202 **Things to note** I've made AvatarList component that accepts avatars information array. This allows to display users easily in stacked avatars list. At the moment, It fetches the information of favourited by and replied by from 2 endpoints after initial loading of statuses. This needs to be tested in performance wise as well to see if api refactoring is needed. **Screenshots** * desktop ![Screen_Shot_2019-04-01_at_11.18.19_PM](/attachments/c9ade2af-06cf-4516-8067-6b20b07be930) * mobile ![Screen_Shot_2019-04-01_at_11.18.34_PM](/attachments/c9178114-d488-434d-9b70-d5cdc1be5334)
Screen_Shot_2019-04-01_at_11.18.19_PM.png
979 KiB
Screen_Shot_2019-04-01_at_11.18.34_PM.png
133 KiB
shpuld commented 2019-04-02 14:41:29 +00:00
Member
Copy link

Really needs a lot better design than this. Takes a lot of space compared to everything else, the avatars are way too big. Boost is not in our terminology (mastodon term, that's why it's in the API) and the labels for the things are also unnecessary. In your screenshots it's also inaccurate, there are only 3 repeats and your image shows 10 avatars, maybe it would be better to just have one list that is the combined favs or repeats. The placing should also be above the status actions instead of below, so it doesn't appear between reply form and the status actions if you decide to reply.

Really needs a lot better design than this. Takes a lot of space compared to everything else, the avatars are way too big. Boost is not in our terminology (mastodon term, that's why it's in the API) and the labels for the things are also unnecessary. In your screenshots it's also inaccurate, there are only 3 repeats and your image shows 10 avatars, maybe it would be better to just have one list that is the combined favs or repeats. The placing should also be above the status actions instead of below, so it doesn't appear between reply form and the status actions if you decide to reply.
shpuld commented 2019-04-02 14:43:52 +00:00
Member
Copy link

I'm sure there's a better way for this

I'm sure there's a better way for this
shpuld commented 2019-04-02 14:45:55 +00:00
Member
Copy link

we tend to use just dashes and not double underscores

we tend to use just dashes and not double underscores
shpuld commented 2019-04-02 14:47:36 +00:00
Member
Copy link

the combination of classes "boosted-users" and "reblogged-users" is bound to confuse anyone reading this

the combination of classes "boosted-users" and "reblogged-users" is bound to confuse anyone reading this
hj commented 2019-04-02 15:58:16 +00:00
Member
Copy link

oh no it's BEM

[flashbacks]

oh no it's BEM [flashbacks]
hj commented 2019-04-02 15:59:15 +00:00
Member
Copy link

flex order could be of use

flex order could be of use
hj commented 2019-04-02 15:59:57 +00:00
Member
Copy link

use variable-provided border-radius pls

use variable-provided border-radius pls
hj commented 2019-04-02 16:00:26 +00:00
Member
Copy link

what about css3 variable?

what about css3 variable?
hj commented 2019-04-02 16:01:02 +00:00
Member
Copy link

again, theming

again, theming
hj commented 2019-04-02 16:01:58 +00:00
Member
Copy link

pls use favorited (en_US) instead of favourite (en_UK) to make it easier to search.

pls use favorited (en_US) instead of favourite (en_UK) to make it easier to search.
hj commented 2019-04-02 16:02:07 +00:00
Member
Copy link

i18n

i18n
hj commented 2019-04-02 16:02:16 +00:00
Member
Copy link

i18n

i18n
hj commented 2019-04-02 16:04:23 +00:00
Member
Copy link

for mobile layout it should probably be in one column instead of two.

avatar size definitely needs to be smaller

for mobile layout it should probably be in one column instead of two. avatar size definitely needs to be smaller
brendenbice1222 commented 2019-04-02 17:36:02 +00:00
Author
Member
Copy link

Screenshots

Desktop

Screen_Shot_2019-04-02_at_1.34.33_PM

Mobile

Screen_Shot_2019-04-02_at_1.34.43_PM

**Screenshots** *Desktop* ![Screen_Shot_2019-04-02_at_1.34.33_PM](/attachments/fd4dece3-25b0-41fd-a02f-0690d8dac373) *Mobile* ![Screen_Shot_2019-04-02_at_1.34.43_PM](/attachments/07aeb2fa-a094-4d32-a9a3-40bacaf784f0)
Screen_Shot_2019-04-02_at_1.34.33_PM.png
1.5 MiB
Screen_Shot_2019-04-02_at_1.34.43_PM.png
151 KiB
brendenbice1222 commented 2019-04-02 17:41:57 +00:00
Author
Member
Copy link

We discussed to remove the labels so i think there's no need to use i18n this time.

We discussed to remove the labels so i think there's no need to use i18n this time.
hj commented 2019-04-04 15:39:24 +00:00
Member
Copy link

re: screenshots
are those avatars of ones that repeated or ones that favorited or both? we may never know.

re: screenshots are those avatars of ones that repeated or ones that favorited or both? we may never know.
brendenbice1222 commented 2019-04-04 15:46:37 +00:00
Author
Member
Copy link

Those are the avatars of both repeated and favorited.

Those are the avatars of both repeated and favorited.
shpuld commented 2019-04-04 19:46:39 +00:00
Member
Copy link

Discussed this with hj today, would be a good idea to do the design the same way as twitter and qvitter do it, so there's text with numbers like "Favorites 12 Repeats 19", then a divider, and then avatars of the people who favd/rtd it. I don't think the overlap for the avatars is necessary or good, could just have them side by side normally.

Further improvements in the future would be having the favorites/repeats texts function as buttons that open a proper list of people who favorited or who repeated, like on twitter.

Discussed this with hj today, would be a good idea to do the design the same way as twitter and qvitter do it, so there's text with numbers like "Favorites 12 Repeats 19", then a divider, and then avatars of the people who favd/rtd it. I don't think the overlap for the avatars is necessary or good, could just have them side by side normally. Further improvements in the future would be having the favorites/repeats texts function as buttons that open a proper list of people who favorited or who repeated, like on twitter.
brendenbice1222 commented 2019-04-04 19:56:07 +00:00
Author
Member
Copy link

What if there are number of user like over 100 that has large number of users to display?

What if there are number of user like over 100 that has large number of users to display?
brendenbice1222 commented 2019-04-05 07:32:14 +00:00
Author
Member
Copy link

Screenshots

desktop

Screen_Shot_2019-04-05_at_3.31.01_AM

mobile

Screen_Shot_2019-04-05_at_3.31.12_AM

**Screenshots** *desktop* ![Screen_Shot_2019-04-05_at_3.31.01_AM](/attachments/b804cd45-d428-4e1d-9403-f03e512310ad) *mobile* ![Screen_Shot_2019-04-05_at_3.31.12_AM](/attachments/c84642f1-e9da-4087-96bc-5c094ce01e30)
Screen_Shot_2019-04-05_at_3.31.12_AM.png
464 KiB
Screen_Shot_2019-04-05_at_3.31.01_AM.png
816 KiB
hj commented 2019-04-05 07:51:10 +00:00
Member
Copy link

That border looks like an underline, also there's no way of telling if those are clickable

That border looks like an underline, also there's no way of telling if those are clickable
shpuld commented 2019-04-05 14:36:46 +00:00
Member
Copy link

I think we're getting there now, I still think duplicates should be removed so that if a person favd AND rtd a post, you'd only need to show that once.

You have to cap the amount of avatars to some reasonable number, there's just no good way of dealing with dozens of them, if you look at twitter they only show as much as it can fit in the UI and I don't think we need to deviate from that.

I edited your screenshot to sketch out the design I was thinking about when we were talking about making it like twitter, should've done it sooner to not leave ambiguity. when we later add functionality to view the people who favd/rtd, then the repeats/favorites text should get an underline on mouseover just like the Timeago link on the top row of the status. @hj feel free to comment/improve. (As an idea, maybe not showing numbers on the buttons when there's the proper display would make it look cleaner with less redundancy? or maybe that's just me overthinking it)

favs_rts

I think we're getting there now, I still think duplicates should be removed so that if a person favd AND rtd a post, you'd only need to show that once. You have to cap the amount of avatars to some reasonable number, there's just no good way of dealing with dozens of them, if you look at twitter they only show as much as it can fit in the UI and I don't think we need to deviate from that. I edited your screenshot to sketch out the design I was thinking about when we were talking about making it like twitter, should've done it sooner to not leave ambiguity. when we later add functionality to view the people who favd/rtd, then the repeats/favorites text should get an underline on mouseover just like the Timeago link on the top row of the status. @hj feel free to comment/improve. (As an idea, maybe not showing numbers on the buttons when there's the proper display would make it look cleaner with less redundancy? or maybe that's just me overthinking it) ![favs_rts](/attachments/7a057b0f-59a8-4b24-afba-c95333fe2807)
favs_rts.png
454 KiB
brendenbice1222 commented 2019-04-05 18:34:31 +00:00
Author
Member
Copy link

Screenshots

Desktop

Screen_Shot_2019-04-05_at_2.33.11_PM

Mobile

Screen_Shot_2019-04-05_at_2.33.28_PM

**Screenshots** *Desktop* ![Screen_Shot_2019-04-05_at_2.33.11_PM](/attachments/28f69d49-6644-4ec1-993f-9a614156691d) *Mobile* ![Screen_Shot_2019-04-05_at_2.33.28_PM](/attachments/eaeffb19-6965-4a03-8040-ac2fd6f4d859)
Screen_Shot_2019-04-05_at_2.33.11_PM.png
809 KiB
Screen_Shot_2019-04-05_at_2.33.28_PM.png
213 KiB
shpuld commented 2019-04-05 18:50:31 +00:00
Member
Copy link

was this supposed to be $fallback--faint ?

was this supposed to be $fallback--faint ?
hj commented 2019-04-06 07:10:41 +00:00
Member
Copy link

why the !important?

why the `!important`?
hj commented 2019-04-06 07:10:53 +00:00
Member
Copy link

same here, !important

same here, `!important`
hj commented 2019-04-06 07:12:37 +00:00
Member
Copy link

wait why are you searching for the first post in conversation?

wait why are you searching for the first post in conversation?
hj commented 2019-04-06 07:14:42 +00:00
Member
Copy link
[].concat(this.statusoid.rebloggedBy, this.statusoid.favoritedBy).filter(_=>_)

looks more clean

```js [].concat(this.statusoid.rebloggedBy, this.statusoid.favoritedBy).filter(_=>_) ``` looks more clean
hj commented 2019-04-06 07:16:59 +00:00
Member
Copy link

probably should use <transition>? https://vuejs.org/v2/guide/transitions.html

probably should use `<transition>`? https://vuejs.org/v2/guide/transitions.html
hj commented 2019-04-06 07:18:42 +00:00
Member
Copy link

i had some bad experiences with font-weight lighter than normal suddenly becoming too light and unreadable. We allow users to select their own font and probably want to avoid that behavior

i had some bad experiences with font-weight lighter than normal suddenly becoming too light and unreadable. We allow users to select their own font and probably want to avoid that behavior
hj commented 2019-04-06 07:20:15 +00:00
Member
Copy link

so your text and your background will be same color??

so your text and your background will be same color??
hj commented 2019-04-06 07:33:54 +00:00
Member
Copy link

just how it looks here:
image

just how it looks here: ![image](/attachments/3d771d7a-ce6f-427a-9b0e-da6d63761e74)
image.png
5 KiB
hj commented 2019-04-06 07:34:25 +00:00
Member
Copy link

without font-weight:
image

without font-weight: ![image](/attachments/e11ffec3-2b3a-4715-b7a9-066d0d94da95)
image.png
5.5 KiB
hj commented 2019-04-06 07:38:18 +00:00
Member
Copy link

ok i realise what you are trying to do here.

just use <a>

ok i realise what you are trying to do here. just use `<a>`
hj commented 2019-04-06 07:40:39 +00:00
Member
Copy link

always shows favs/repeats for first post in conversation, should show favs and repeats for highlighted (selected) post

clicking on labels does nothing which makes whole thing kinda pointless at the moment.

always shows favs/repeats for first post in conversation, should show favs and repeats for highlighted (selected) post clicking on labels does nothing which makes whole thing kinda pointless at the moment.
brendenbice1222 commented 2019-04-06 18:02:21 +00:00
Author
Member
Copy link

as per the discussion with Feld.
I'll discuss with him again with this as @shpuld asked me same

as per the discussion with Feld. I'll discuss with him again with this as @shpuld asked me same
hj commented 2019-04-06 18:20:04 +00:00
Member
Copy link

can we just discuss it here together instead? i'm starting to really hate this "@feld wants something and it will be done this way like it or not".

can we just discuss it here together instead? i'm starting to really hate this "@feld wants something and it will be done this way like it or not".
brendenbice1222 commented 2019-04-06 18:26:27 +00:00
Author
Member
Copy link

@feld, what do you think?

@feld, what do you think?
brendenbice1222 commented 2019-04-07 18:29:26 +00:00
Author
Member
Copy link

Screenshots

desktop

Screen_Shot_2019-04-07_at_2.28.09_PM

mobile

Screen_Shot_2019-04-07_at_2.29.02_PM

**Screenshots** *desktop* ![Screen_Shot_2019-04-07_at_2.28.09_PM](/attachments/b83cb705-c45a-422a-b208-ddb995ea5ee9) *mobile* ![Screen_Shot_2019-04-07_at_2.29.02_PM](/attachments/38445351-f340-463f-ad9c-08025e39aae7)
Screen_Shot_2019-04-07_at_2.28.09_PM.png
1.1 MiB
Screen_Shot_2019-04-07_at_2.29.02_PM.png
257 KiB
brendenbice1222 commented 2019-04-07 18:30:05 +00:00
Author
Member
Copy link

@hj
Please review latest changes.

@hj Please review latest changes.
shpuld commented 2019-04-08 17:29:54 +00:00
Member
Copy link

Gave it a spin, some notes:

  • I don't think the fav/rt details should be shown on other posts than the one that is being highlighted.
  • It doesn't work when you expand a conversation on the timeline (the [+] icon in the corner of a status)
  • would be nice if it worked when you focus a post in conversation via the reply links ("Reply to" or the #0 numbers)
Gave it a spin, some notes: - I don't think the fav/rt details should be shown on other posts than the one that is being highlighted. - It doesn't work when you expand a conversation on the timeline (the [+] icon in the corner of a status) - would be nice if it worked when you focus a post in conversation via the reply links ("Reply to" or the #0 numbers)
hj commented 2019-04-08 17:33:57 +00:00
Member
Copy link

why remove? are you sure you're deleting correct thing there?

why remove? are you sure you're deleting correct thing there?
hj commented 2019-04-08 17:34:32 +00:00
Member
Copy link

commented code

commented code
brendenbice1222 commented 2019-04-08 17:57:47 +00:00
Author
Member
Copy link

We use transition wrapper component provided by Vue and that's why this class is not needed any more.

We use transition wrapper component provided by Vue and that's why this class is not needed any more.
hj commented 2019-04-08 18:06:59 +00:00
Member
Copy link

yeah but you're removing existing code, not your changes...

yeah but you're removing existing code, not your changes...
brendenbice1222 commented 2019-04-08 18:10:09 +00:00
Author
Member
Copy link

I've added it back

I've added it back
brendenbice1222 commented 2019-04-09 15:58:15 +00:00
Author
Member
Copy link

Screenshot

Screen_Shot_2019-04-09_at_11.47.54_AM

Things to note

  • Showing favs & reblogged avatars is available in timeline
  • Showing favs & reblogged avatars on highlighted post by click reply to and #0, ... is done
**Screenshot** ![Screen_Shot_2019-04-09_at_11.47.54_AM](/attachments/c75cb08a-3772-4787-86bb-aa3f2a06084b) *Things to note* - Showing favs & reblogged avatars is available in timeline - Showing favs & reblogged avatars on highlighted post by click reply to and #0, ... is done
Screen_Shot_2019-04-09_at_11.47.54_AM.png
605 KiB
tae commented 2019-04-09 17:39:06 +00:00
Member
Copy link

This looks great!! 💯

This looks great!! :100:
feld commented 2019-04-10 16:35:08 +00:00
Owner
Copy link

I think this is a good solution. Are there any technical concerns?

I think this is a good solution. Are there any technical concerns?
shpuld commented 2019-04-15 18:05:03 +00:00
Member
Copy link

Yeah this is what I'm talking about! great work! Code looks good to me, but there's some small things (bear with me) I'd add, it would be tooltip for the username (lain@pleroma.soykaf for example) when hovering an avatar, and some flex-wrap: nowrap; to eliminate half-showing avatars.

Edit: To clarify: just using flex-wrap to hide the overflowing ones, not to show them on multiple rows

Yeah this is what I'm talking about! great work! Code looks good to me, but there's some small things (bear with me) I'd add, it would be tooltip for the username (lain@pleroma.soykaf for example) when hovering an avatar, and some flex-wrap: nowrap; to eliminate half-showing avatars. Edit: To clarify: just using flex-wrap to hide the overflowing ones, not to show them on multiple rows
shpuld commented 2019-04-15 18:16:33 +00:00
Member
Copy link

Could add it for "Favorites" and "Repeats" now, no need to worry about other languages than english for your MR

Could add it for "Favorites" and "Repeats" now, no need to worry about other languages than english for your MR
shpuld commented 2019-04-16 18:32:13 +00:00
Member
Copy link

taking this one over

taking this one over

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
5 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!1995
No description provided.