Subscriptions: move subscribe button to top-right corner of banner

groups
Alex Gleason 2021-06-27 12:46:00 -05:00
rodzic cffe1b7ff5
commit 5e3d859b57
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 44 dodań i 32 usunięć

Wyświetl plik

@ -279,6 +279,10 @@ class Header extends ImmutablePureComponent {
{info} {info}
</div> </div>
<div className='account__header__subscribe'>
<SubscriptionButton account={account} />
</div>
<StillImage src={account.get('header')} alt='' className='parallax' /> <StillImage src={account.get('header')} alt='' className='parallax' />
</div> </div>
@ -335,7 +339,6 @@ class Header extends ImmutablePureComponent {
} }
<div className='account__header__extra__buttons'> <div className='account__header__extra__buttons'>
<SubscriptionButton account={account} />
<ActionButton account={account} /> <ActionButton account={account} />
{me && account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true && {me && account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true &&
<Button className='button-alternative-2' onClick={this.props.onChat}> <Button className='button-alternative-2' onClick={this.props.onChat}>

Wyświetl plik

@ -14,6 +14,7 @@ import {
const messages = defineMessages({ const messages = defineMessages({
subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' }, subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' }, unsubscribe: { id: 'account.unsubscribe', defaultMessage: 'Unsubscribe to notifications from @{name}' },
subscribed: { id: 'account.subscribed', defaultMessage: 'Subscribed' },
}); });
const mapStateToProps = state => { const mapStateToProps = state => {
@ -48,16 +49,23 @@ class SubscriptionButton extends ImmutablePureComponent {
render() { render() {
const { account, intl } = this.props; const { account, intl } = this.props;
const subscribing = account.getIn(['relationship', 'subscribing']); const subscribing = account.getIn(['relationship', 'subscribing']);
const following = account.getIn(['relationship', 'following']);
const requested = account.getIn(['relationship', 'requested']);
let subscriptionButton = ''; if (requested || following) {
return (
if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { <Button
subscriptionButton = (<Button className={classNames('subscription-button', subscribing && 'button-active')} style={{ padding: 0, lineHeight: '18px' }} title={intl.formatMessage(account.getIn(['relationship', 'subscribing']) ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })} onClick={this.handleSubscriptionToggle}> className={classNames('subscription-button', subscribing && 'button-active')}
<Icon id={account.getIn(['relationship', 'subscribing']) ? 'bell-ringing' : 'bell'} style={{ margin: 0, fontSize: 18 }} /> title={intl.formatMessage(subscribing ? messages.unsubscribe : messages.subscribe, { name: account.get('username') })}
</Button>); onClick={this.handleSubscriptionToggle}
>
<Icon id={subscribing ? 'bell-ringing' : 'bell'} />
{subscribing && intl.formatMessage(messages.subscribed)}
</Button>
);
} }
return subscriptionButton; return null;
} }
} }

Wyświetl plik

@ -15,6 +15,31 @@
z-index: 1; z-index: 1;
} }
&__subscribe {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
.subscription-button {
color: var(--primary-text-color);
margin-bottom: 4px;
display: block;
vertical-align: top;
background-color: var(--background-color);
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
opacity: 0.7;
&:not(.button-active) i.fa {
margin: 0;
}
}
}
&__image { &__image {
overflow: hidden; overflow: hidden;
height: 350px; height: 350px;
@ -150,30 +175,6 @@
.button { margin-right: 10px; } .button { margin-right: 10px; }
.subscription-button {
padding: 0;
height: 36px;
line-height: 36px;
width: 36px;
margin-right: 10px;
font-size: 20px;
text-align: center;
border: 1px solid var(--brand-color);
background: transparent;
color: var(--primary-text-color);
&:hover,
&.active {
border-color: $error-red;
background: $error-red;
color: #fff;
}
@media (max-width: 430px) {
display: none;
}
}
.button-active { .button-active {
border-color: #008000; border-color: #008000;
background: #008000; background: #008000;