add label for bots (#479)

fixes #463
This commit is contained in:
Nolan Lawson 2018-08-23 18:41:43 -07:00 committed by GitHub
parent c4c128030e
commit 1753e20f29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 14 deletions

View File

@ -0,0 +1,27 @@
<div class="generic-label {className || ''}">
<span class="generic-label-span">
{label}
</span>
</div>
<style>
.generic-label {
display: flex;
align-items: center;
justify-content: center;
}
.generic-label-span {
text-transform: uppercase;
padding: 3px 7px 2px;
background: var(--nav-bg);
color: var(--nav-text-color);
font-size: 0.8em;
border-radius: 4px;
}
</style>
<script>
export default {
data: () => ({
className: void 0
})
}
</script>

View File

@ -24,11 +24,11 @@
.account-profile-grid { .account-profile-grid {
display: grid; display: grid;
grid-template-areas: "avatar name followed-by follow" grid-template-areas: "avatar name label followed-by follow"
"avatar username username follow" "avatar username username username follow"
"avatar note note follow" "avatar note note note follow"
"details details details details"; "details details details details details";
grid-template-columns: min-content auto 1fr min-content; grid-template-columns: min-content auto 1fr 1fr min-content;
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 5px; grid-row-gap: 5px;
padding: 20px; padding: 20px;
@ -53,6 +53,7 @@
.account-profile-grid { .account-profile-grid {
display: grid; display: grid;
grid-template-areas: "avatar name follow" grid-template-areas: "avatar name follow"
"avatar label follow"
"avatar username follow" "avatar username follow"
"avatar followed-by follow" "avatar followed-by follow"
"note note note" "note note note"

View File

@ -2,14 +2,18 @@
<Avatar {account} size="big" /> <Avatar {account} size="big" />
</div> </div>
<div class="account-profile-name"> <div class="account-profile-name">
<ExternalLink href={account.url} <ExternalLink
showIcon="true" className="account-profile-name-link"
normalIconColor="true" href={account.url}
ariaLabel="{accessibleName} (opens in new window)" showIcon="true"
> normalIconColor="true"
ariaLabel="{accessibleName} (opens in new window)">
<AccountDisplayName {account} /> <AccountDisplayName {account} />
</ExternalLink> </ExternalLink>
</div> </div>
{#if label}
<Label {label} className="account-profile-label" />
{/if}
<div class="account-profile-username"> <div class="account-profile-username">
{'@' + account.acct} {'@' + account.acct}
</div> </div>
@ -56,15 +60,22 @@
text-overflow: ellipsis; text-overflow: ellipsis;
min-width: 0; min-width: 0;
} }
:global(.account-profile-name a) {
:global(.account-profile-name-link) {
color: var(--body-text-color); color: var(--body-text-color);
text-decoration: none; text-decoration: none;
} }
:global(.account-profile-name a:hover) {
:global(.account-profile-name-link:hover) {
color: var(--body-text-color); color: var(--body-text-color);
text-decoration: underline; text-decoration: underline;
} }
:global(.account-profile-label) {
grid-area: label;
justify-content: left !important;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.account-profile-name { .account-profile-name {
font-size: 1.3em; font-size: 1.3em;
@ -83,6 +94,7 @@
import AccountDisplayName from '../profile/AccountDisplayName.html' import AccountDisplayName from '../profile/AccountDisplayName.html'
import { removeEmoji } from '../../_utils/removeEmoji' import { removeEmoji } from '../../_utils/removeEmoji'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import Label from '../Label.html'
export default { export default {
store: () => store, store: () => store,
@ -94,12 +106,15 @@
return removeEmoji(displayName, emojis) || displayName return removeEmoji(displayName, emojis) || displayName
} }
return displayName return displayName
} },
bot: ({ account }) => !!account.bot,
label: ({ bot }) => bot ? 'bot' : ''
}, },
components: { components: {
Avatar, Avatar,
ExternalLink, ExternalLink,
AccountDisplayName AccountDisplayName,
Label
} }
} }
</script> </script>