Use label button for profile page
It's less confusing than figuring out what the icons represent.
This commit is contained in:
parent
a521f253a0
commit
f447393be7
|
@ -6,17 +6,9 @@
|
||||||
- If a follow is requested, then the button is pressed but shows as "follow requested" with
|
- If a follow is requested, then the button is pressed but shows as "follow requested" with
|
||||||
a different icon.
|
a different icon.
|
||||||
-->
|
-->
|
||||||
<IconButton
|
<button class="account-profile-follow-button" on:click="onFollowButtonClick(event)">
|
||||||
className="account-profile-follow-icon-button"
|
{pressed ? pressedLabel : label}
|
||||||
{label}
|
</button>
|
||||||
{pressedLabel}
|
|
||||||
{href}
|
|
||||||
{pressable}
|
|
||||||
{pressed}
|
|
||||||
big={!$isVeryTinyMobileSize}
|
|
||||||
on:click="onFollowButtonClick(event)"
|
|
||||||
ref:icon
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.account-profile-follow {
|
.account-profile-follow {
|
||||||
|
@ -33,6 +25,12 @@
|
||||||
justify-self: flex-end;
|
justify-self: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account-profile-follow-button {
|
||||||
|
padding: 0.6em;
|
||||||
|
font-size: 1.1em;
|
||||||
|
min-width: 10ch;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import IconButton from '../IconButton.html'
|
import IconButton from '../IconButton.html'
|
||||||
|
@ -99,17 +97,6 @@
|
||||||
pressedLabel: ({ requested }) => {
|
pressedLabel: ({ requested }) => {
|
||||||
return formatIntl('intl.unfollowLabel', { requested })
|
return formatIntl('intl.unfollowLabel', { requested })
|
||||||
},
|
},
|
||||||
href: ({ blocking, following, followRequested }) => {
|
|
||||||
if (blocking) {
|
|
||||||
return '#fa-unlock'
|
|
||||||
} else if (following) {
|
|
||||||
return '#fa-user-times'
|
|
||||||
} else if (followRequested) {
|
|
||||||
return '#fa-hourglass'
|
|
||||||
} else {
|
|
||||||
return '#fa-user-plus'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
shown: ({ verifyCredentials, relationship }) => (
|
shown: ({ verifyCredentials, relationship }) => (
|
||||||
verifyCredentials && relationship && verifyCredentials.id !== relationship.id
|
verifyCredentials && relationship && verifyCredentials.id !== relationship.id
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in New Issue