feat: add "accout has moved" banner (#1032)

fixes #472
This commit is contained in:
Nolan Lawson 2019-02-22 20:35:19 -08:00 committed by GitHub
parent 11e918dd50
commit eeba66567c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 110 additions and 8 deletions

View File

@ -45,5 +45,6 @@ module.exports = [
{ id: 'fa-search-minus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-minus.svg' }, { id: 'fa-search-minus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-minus.svg' },
{ id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' }, { id: 'fa-search-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search-plus.svg' },
{ id: 'fa-share-square-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/share-square-o.svg' }, { id: 'fa-share-square-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/share-square-o.svg' },
{ id: 'fa-flag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/flag.svg' } { id: 'fa-flag', src: 'src/thirdparty/font-awesome-svg-png/white/svg/flag.svg' },
{ id: 'fa-suitcase', src: 'src/thirdparty/font-awesome-svg-png/white/svg/suitcase.svg' }
] ]

View File

@ -52,7 +52,8 @@
className: void 0, className: void 0,
loaded: false, loaded: false,
error: void 0, error: void 0,
isLink: false isLink: false,
size: 'medium'
}), }),
store: () => store, store: () => store,
computed: { computed: {

View File

@ -1,4 +1,7 @@
<h1 class="sr-only">Profile for {accountName}</h1> <h1 class="sr-only">Profile for {accountName}</h1>
{#if moved}
<AccountProfileMovedBanner {account} />
{/if}
<div class={className} <div class={className}
style="background-image: url({headerImage});"> style="background-image: url({headerImage});">
<div class="account-profile-grid-wrapper"> <div class="account-profile-grid-wrapper">
@ -19,6 +22,10 @@
padding-top: 175px; padding-top: 175px;
} }
.account-profile.moved {
filter: grayscale(0.8);
}
.account-profile.header-image-is-missing { .account-profile.header-image-is-missing {
padding-top: 0; padding-top: 0;
background-color: #ccc; background-color: #ccc;
@ -74,6 +81,7 @@
import AccountProfileNote from './AccountProfileNote.html' import AccountProfileNote from './AccountProfileNote.html'
import AccountProfileMeta from './AccountProfileMeta.html' import AccountProfileMeta from './AccountProfileMeta.html'
import AccountProfileDetails from './AccountProfileDetails.html' import AccountProfileDetails from './AccountProfileDetails.html'
import AccountProfileMovedBanner from './AccountProfileMovedBanner.html'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { classname } from '../../_utils/classname' import { classname } from '../../_utils/classname'
@ -83,8 +91,10 @@
headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'), headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static, headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
accountName: ({ account }) => (account && (account.display_name || account.username)) || '', accountName: ({ account }) => (account && (account.display_name || account.username)) || '',
className: ({ headerImageIsMissing, $underlineLinks }) => (classname( moved: ({ account }) => account.moved,
className: ({ headerImageIsMissing, $underlineLinks, moved }) => (classname(
'account-profile', 'account-profile',
moved && 'moved',
headerImageIsMissing && 'header-image-is-missing', headerImageIsMissing && 'header-image-is-missing',
$underlineLinks && 'underline-links' $underlineLinks && 'underline-links'
)) ))
@ -94,7 +104,8 @@
AccountProfileFollow, AccountProfileFollow,
AccountProfileNote, AccountProfileNote,
AccountProfileMeta, AccountProfileMeta,
AccountProfileDetails AccountProfileDetails,
AccountProfileMovedBanner
} }
} }
</script> </script>

View File

@ -111,10 +111,9 @@
emojis: ({ account }) => (account.emojis || []), emojis: ({ account }) => (account.emojis || []),
displayName: ({ account }) => account.display_name || account.username, displayName: ({ account }) => account.display_name || account.username,
accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => { accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
if ($omitEmojiInDisplayNames) { return $omitEmojiInDisplayNames
return removeEmoji(displayName, emojis) || displayName ? removeEmoji(displayName, emojis) || displayName
} : displayName
return displayName
}, },
bot: ({ account }) => !!account.bot, bot: ({ account }) => !!account.bot,
label: ({ bot }) => bot ? 'bot' : '' label: ({ bot }) => bot ? 'bot' : ''

View File

@ -0,0 +1,90 @@
<div class="account-profile-moved-banner">
<Avatar className="from-avatar" size="extra-small" {account} />
<div class="moved-label">
<svg class="moved-svg">
<use xlink:href="#fa-suitcase"/>
</svg>
{accessibleName} has moved:
</div>
<a class="moved-avatar" href="/accounts/{moved.id}">
<Avatar account={moved} />
</a>
<a class="moved-to-name" href="/accounts/{moved.id}" title="@{moved.acct}">{movedAccessibleName}</a>
<a class="moved-to-acct" href="/accounts/{moved.id}">@{moved.acct}</a>
</div>
<style>
.account-profile-moved-banner {
display: grid;
grid-template-areas: "from-avatar label"
"avatar name"
"avatar acct";
grid-template-columns: max-content 1fr;
margin: 10px 20px;
grid-row-gap: 10px;
grid-column-gap: 20px;
}
:global(.from-avatar) {
grid-area: from-avatar;
justify-self: flex-end;
}
.moved-svg {
width: 18px;
height: 18px;
fill: var(--deemphasized-text-color);
margin-right: 5px;
}
.moved-label, .moved-to-acct, .moved-to-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.moved-avatar {
grid-area: avatar;
}
.moved-label {
grid-area: label;
}
.moved-to-acct {
grid-area: acct;
font-size: 1.2em;
}
.moved-to-name {
grid-area: name;
font-weight: 600;
font-size: 1.1em;
text-decoration: none;
color: var(--body-text-color);
}
.moved-to-name:hover {
text-decoration: underline;
}
</style>
<script>
import { removeEmoji } from '../../_utils/removeEmoji'
import Avatar from '../Avatar.html'
export default {
computed: {
emojis: ({ account }) => (account.emojis || []),
displayName: ({ account }) => account.display_name || account.username,
accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
return $omitEmojiInDisplayNames
? removeEmoji(displayName, emojis) || displayName
: displayName
},
moved: ({ account }) => account.moved,
movedEmojis: ({ moved }) => (moved.emojis || []),
movedDisplayName: ({ moved }) => moved.display_name || moved.username,
movedAccessibleName: ({ movedDisplayName, movedEmojis, $omitEmojiInDisplayNames }) => {
return $omitEmojiInDisplayNames
? removeEmoji(movedDisplayName, movedEmojis) || movedDisplayName
: movedDisplayName
}
},
components: {
Avatar
}
}
</script>