Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: show relationship badge and remove hover-only label on follow button #2397

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

shuuji3
Copy link
Member

@shuuji3 shuuji3 commented Sep 16, 2023

resolve #1020

This PR implements two changes:

  • Avoid the current hover-only label on the follow button, which means the button label is always the same regardless hovered or not.
  • Add a new relationship badge: "following you" or "mutuals" similar style as the "Lock" or "Bot" badge.

Examples

When the account follows you but you don't follow them:
Screenshot 2023-09-17 at 0 32 17

When the account follows you and you follow them:
Screenshot 2023-09-17 at 0 27 49

@stackblitz
Copy link

stackblitz bot commented Sep 16, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@netlify
Copy link

netlify bot commented Sep 16, 2023

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit 1628009
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/658fa9405c344400088463af

@netlify
Copy link

netlify bot commented Sep 16, 2023

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 1628009
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/658fa940f82e5c000804eec7
😎 Deploy Preview https://deploy-preview-2397--elk-zone.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@edimitchel
Copy link
Collaborator

Why not putting the relationship badge aside the username?

@shuuji3
Copy link
Member Author

shuuji3 commented Sep 17, 2023

@edimitchel Because I felt a bit crowded when the account had many badges or the name was long, also it can mimic the other platform. But maybe it was not necessary, and better to place the same position as other badges for consistency. Let me adjust the position.

@shuuji3
Copy link
Member Author

shuuji3 commented Sep 17, 2023

Yes, it was not as bad as I thought.

Screenshot 2023-09-17 at 16 41 55 Screenshot 2023-09-17 at 16 44 23

import type { mastodon } from 'masto'

defineProps<{
relationship?: mastodon.v1.Relationship
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO this shouldn't be optional and rather the v-if should be applied outside of this component

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your review. That makes sense. I changed it to be non-optional.

@shuuji3
Copy link
Member Author

shuuji3 commented Dec 30, 2023

To preview the PR, you can visit, for example, https://deploy-preview-2397--elk-zone.netlify.app/universeodon.com/@[email protected] to see "Mutuals" badge.

Copy link
Contributor

@maybeanerd maybeanerd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve the way to follow someone
4 participants