tykayn
/
mastodon
mirror of https://framagit.org/tykayn/mastodon.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

🎨 make avatars a bit bigger 

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
This commit is contained in:
Baptiste Lemoine 2020-01-07 13:06:39 +01:00
parent 9e79e11091
commit fa91d39338
24 changed files with 385 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/mastodon/components/account.js
View File

@ -37,27 +37,27 @@ class Account extends ImmutablePureComponent {
handleFollow = () => {
this.props.onFollow(this.props.account);
}
};
handleBlock = () => {
this.props.onBlock(this.props.account);
}
};
handleMute = () => {
this.props.onMute(this.props.account);
}
};
handleMuteNotifications = () => {
this.props.onMuteNotifications(this.props.account, true);
}
};
handleUnmuteNotifications = () => {
this.props.onMuteNotifications(this.props.account, false);
}
};
handleAction = () => {
this.props.onActionClick(this.props.account);
}
};
render () {
const { account, intl, hidden, onActionClick, actionIcon, actionTitle } = this.props;
@ -111,7 +111,10 @@ class Account extends ImmutablePureComponent {
<div className='account'>
<div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<div className='account__avatar-wrapper'><Avatar
account={account}
size={55}
/></div >
<DisplayName account={account} />
</Permalink>

20
app/javascript/mastodon/components/avatar.js
View File

@ -7,16 +7,16 @@ export default class Avatar extends React.PureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
size: PropTypes.number.isRequired,
style: PropTypes.object,
inline: PropTypes.bool,
size : PropTypes.number.isRequired,
style : PropTypes.object,
inline : PropTypes.bool,
animate: PropTypes.bool,
};
static defaultProps = {
animate: autoPlayGif,
size: 20,
inline: false,
size : 20,
inline : false,
};
state = {
@ -26,14 +26,14 @@ export default class Avatar extends React.PureComponent {
handleMouseEnter = () => {
if (this.props.animate) return;
this.setState({ hovering: true });
}
};
handleMouseLeave = () => {
if (this.props.animate) return;
this.setState({ hovering: false });
}
};
render () {
render() {
const { account, size, animate, inline } = this.props;
const { hovering } = this.state;
@ -48,8 +48,8 @@ export default class Avatar extends React.PureComponent {
const style = {
...this.props.style,
width: `${size}px`,
height: `${size}px`,
width : `${size}px`,
height : `${size}px`,
backgroundSize: `${size}px ${size}px`,
};

4
app/javascript/mastodon/components/status.js
View File

@ -503,12 +503,12 @@ class Status extends ImmutablePureComponent {
if (otherAccounts && otherAccounts.size > 0) {
statusAvatar = (<AvatarComposite
accounts={otherAccounts}
size={48}
size={55}
/>);
} else if (account === undefined || account === null) {
statusAvatar = (<Avatar
account={status.get('account')}
size={48}
size={55}
/>);
} else {
statusAvatar = (<AvatarOverlay

19
app/javascript/mastodon/features/account/components/header.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import Button from 'mastodon/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { autoPlayGif, me, isStaff } from 'mastodon/initial_state';
import { autoPlayGif, isStaff, me } from 'mastodon/initial_state';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import Avatar from 'mastodon/components/avatar';
@ -70,7 +70,7 @@ class Header extends ImmutablePureComponent {
openEditProfile = () => {
window.open('/settings/profile', '_blank');
}
};
isStatusesPageActive = (match, location) => {
if (!match) {
@ -78,7 +78,7 @@ class Header extends ImmutablePureComponent {
}
return !location.pathname.match(/\/(followers|following)\/?$/);
}
};
_updateEmojis () {
const node = this.node;
@ -111,15 +111,15 @@ class Header extends ImmutablePureComponent {
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
};
setRef = (c) => {
this.node = c;
}
};
render () {
const { account, intl, domain, identity_proofs } = this.props;
@ -263,7 +263,10 @@ class Header extends ImmutablePureComponent {
<div className='account__header__bar'>
<div className='account__header__tabs'>
<a className='avatar' href={account.get('url')} rel='noopener noreferrer' target='_blank'>
<Avatar account={account} size={90} />
<Avatar
account={account}
size={120}
/>
</a>
<div className='spacer' />

2
app/javascript/mastodon/features/compose/components/navigation_bar.js
View File

@ -26,7 +26,7 @@ export default class NavigationBar extends ImmutablePureComponent {
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span >
<Avatar
account={this.props.account}
size={48}
size={55}
/>
</Permalink >

2
app/javascript/mastodon/features/direct_timeline/components/conversation.js
View File

@ -179,7 +179,7 @@ class Conversation extends ImmutablePureComponent {
<div className='conversation__avatar'>
<AvatarComposite
accounts={accounts}
size={48}
size={55}
/>
</div >

21
app/javascript/mastodon/features/directory/components/account_card.js
View File

@ -9,10 +9,10 @@ import DisplayName from 'mastodon/components/display_name';
import Permalink from 'mastodon/components/permalink';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import IconButton from 'mastodon/components/icon_button';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
import { shortNumberFormat } from 'mastodon/utils/numbers';
import { followAccount, unfollowAccount, blockAccount, unblockAccount, unmuteAccount } from 'mastodon/actions/accounts';
import { blockAccount, followAccount, unblockAccount, unfollowAccount, unmuteAccount } from 'mastodon/actions/accounts';
import { openModal } from 'mastodon/actions/modal';
import { initMuteModal } from 'mastodon/actions/mutes';
@ -113,27 +113,27 @@ class AccountCard extends ImmutablePureComponent {
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
};
handleFollow = () => {
this.props.onFollow(this.props.account);
}
};
handleBlock = () => {
this.props.onBlock(this.props.account);
}
};
handleMute = () => {
this.props.onMute(this.props.account);
}
};
setRef = (c) => {
this.node = c;
}
};
render () {
const { account, intl } = this.props;
@ -165,7 +165,10 @@ class AccountCard extends ImmutablePureComponent {
<div className='directory__card__bar'>
<Permalink className='directory__card__bar__name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
<Avatar account={account} size={48} />
<Avatar
account={account}
size={55}
/>
<DisplayName account={account} />
</Permalink>

5
app/javascript/mastodon/features/follow_requests/components/account_authorize.js
View File

@ -31,7 +31,10 @@ class AccountAuthorize extends ImmutablePureComponent {
<div className='account-authorize__wrapper'>
<div className='account-authorize'>
<Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name'>
<div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
<div className='account-authorize__avatar'><Avatar
account={account}
size={55}
/></div >
<DisplayName account={account} />
</Permalink>

267
app/javascript/mastodon/features/notifications/components/notification.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { HotKeys } from 'react-hotkeys';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -13,10 +13,10 @@ import Permalink from 'mastodon/components/permalink';
const messages = defineMessages({
favourite: { id: 'notification.favourite', defaultMessage: '{name} favourited your status' },
follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
ownPoll: { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
poll: { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
reblog: { id: 'notification.reblog', defaultMessage: '{name} boosted your status' },
follow : { id: 'notification.follow', defaultMessage: '{name} followed you' },
ownPoll : { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
poll : { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
reblog : { id: 'notification.reblog', defaultMessage: '{name} boosted your status' },
});
const notificationForScreenReader = (intl, message, timestamp) => {
@ -35,31 +35,31 @@ class Notification extends ImmutablePureComponent {
};
static propTypes = {
notification: ImmutablePropTypes.map.isRequired,
hidden: PropTypes.bool,
onMoveUp: PropTypes.func.isRequired,
onMoveDown: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
onFavourite: PropTypes.func.isRequired,
onReblog: PropTypes.func.isRequired,
onToggleHidden: PropTypes.func.isRequired,
status: ImmutablePropTypes.map,
intl: PropTypes.object.isRequired,
getScrollPosition: PropTypes.func,
notification : ImmutablePropTypes.map.isRequired,
hidden : PropTypes.bool,
onMoveUp : PropTypes.func.isRequired,
onMoveDown : PropTypes.func.isRequired,
onMention : PropTypes.func.isRequired,
onFavourite : PropTypes.func.isRequired,
onReblog : PropTypes.func.isRequired,
onToggleHidden : PropTypes.func.isRequired,
status : ImmutablePropTypes.map,
intl : PropTypes.object.isRequired,
getScrollPosition : PropTypes.func,
updateScrollBottom: PropTypes.func,
cacheMediaWidth: PropTypes.func,
cachedMediaWidth: PropTypes.number,
cacheMediaWidth : PropTypes.func,
cachedMediaWidth : PropTypes.number,
};
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
}
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
}
};
handleOpen = () => {
const { notification } = this.props;
@ -69,94 +69,131 @@ class Notification extends ImmutablePureComponent {
} else {
this.handleOpenProfile();
}
}
};
handleOpenProfile = () => {
const { notification } = this.props;
this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`);
}
};
handleMention = e => {
e.preventDefault();
const { notification, onMention } = this.props;
onMention(notification.get('account'), this.context.router.history);
}
};
handleHotkeyFavourite = () => {
const { status } = this.props;
if (status) this.props.onFavourite(status);
}
};
handleHotkeyBoost = e => {
const { status } = this.props;
if (status) this.props.onReblog(status, e);
}
};
handleHotkeyToggleHidden = () => {
const { status } = this.props;
if (status) this.props.onToggleHidden(status);
}
};
getHandlers () {
getHandlers() {
return {
reply: this.handleMention,
favourite: this.handleHotkeyFavourite,
boost: this.handleHotkeyBoost,
mention: this.handleMention,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
moveUp: this.handleMoveUp,
moveDown: this.handleMoveDown,
reply : this.handleMention,
favourite : this.handleHotkeyFavourite,
boost : this.handleHotkeyBoost,
mention : this.handleMention,
open : this.handleOpen,
openProfile : this.handleOpenProfile,
moveUp : this.handleMoveUp,
moveDown : this.handleMoveDown,
toggleHidden: this.handleHotkeyToggleHidden,
};
}
renderFollow (notification, account, link) {
renderFollow(notification, account, link) {
const { intl } = this.props;
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='user-plus' fixedWidth />
</div>
<div
className='notification notification-follow focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}
>
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
</span>
</div>
<AccountContainer id={account.get('id')} hidden={this.props.hidden} />
</div>
</HotKeys>
<span title={notification.get('created_at')}>
<span className='media'>
<span className='media-left'>
<AccountContainer
id={account.get('id')}
hidden={this.props.hidden}
/>
</span >
<span className='media-center'>
<FormattedMessage
id='notification.follow'
defaultMessage='{name} followed you'
values={{ name: link }}
/>
</span >
<span className='media-right'>
<Icon
id='user-plus'
fixedWidth
/>
</span >
</span >
</span >
</div >
</HotKeys >
);
}
renderFollowRequest (notification, account, link) {
renderFollowRequest(notification, account, link) {
const { intl } = this.props;
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-follow-request focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
<div
className='notification notification-follow-request focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage({
id : 'notification.follow_request',
defaultMessage: '{name} has requested to follow you',
}, { name: account.get('acct') }), notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='user' fixedWidth />
</div>
<Icon
id='user'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={{ name: link }} />
</span>
</div>
<FormattedMessage
id='notification.follow_request'
defaultMessage='{name} has requested to follow you'
values={{ name: link }}
/>
</span >
</div >
<FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
</div>
</HotKeys>
<FollowRequestContainer
id={account.get('id')}
withNote={false}
hidden={this.props.hidden}
/>
</div >
</HotKeys >
);
}
renderMention (notification) {
renderMention(notification) {
return (
<StatusContainer
id={notification.get('status')}
@ -173,21 +210,33 @@ class Notification extends ImmutablePureComponent {
);
}
renderFavourite (notification, link) {
renderFavourite(notification, link) {
const { intl } = this.props;
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div
className='notification notification-favourite focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='star' className='star-icon' fixedWidth />
</div>
<Icon
id='star'
className='star-icon'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
</span>
</div>
<FormattedMessage
id='notification.favourite'
defaultMessage='{name} favourited your status'
values={{ name: link }}
/>
</span >
</div >
<StatusContainer
id={notification.get('status')}
@ -200,26 +249,37 @@ class Notification extends ImmutablePureComponent {
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
/>
</div>
</HotKeys>
</div >
</HotKeys >
);
}
renderReblog (notification, link) {
renderReblog(notification, link) {
const { intl } = this.props;
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div
className='notification notification-reblog focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='retweet' fixedWidth />
</div>
<Icon
id='retweet'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
</span>
</div>
<FormattedMessage
id='notification.reblog'
defaultMessage='{name} boosted your status'
values={{ name: link }}
/>
</span >
</div >
<StatusContainer
id={notification.get('status')}
@ -232,32 +292,45 @@ class Notification extends ImmutablePureComponent {
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
/>
</div>
</HotKeys>
</div >
</HotKeys >
);
}
renderPoll (notification, account) {
renderPoll(notification, account) {
const { intl } = this.props;
const ownPoll = me === account.get('id');
const message = ownPoll ? intl.formatMessage(messages.ownPoll) : intl.formatMessage(messages.poll);
const ownPoll = me === account.get('id');
const message = ownPoll ? intl.formatMessage(messages.ownPoll) : intl.formatMessage(messages.poll);
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-poll focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}>
<div
className='notification notification-poll focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='tasks' fixedWidth />
</div>
<Icon
id='tasks'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
{ownPoll ? (
<FormattedMessage id='notification.own_poll' defaultMessage='Your poll has ended' />
<FormattedMessage
id='notification.own_poll'
defaultMessage='Your poll has ended'
/>
) : (
<FormattedMessage id='notification.poll' defaultMessage='A poll you have voted in has ended' />
<FormattedMessage
id='notification.poll'
defaultMessage='A poll you have voted in has ended'
/>
)}
</span>
</div>
</span >
</div >
<StatusContainer
id={notification.get('status')}
@ -270,18 +343,24 @@ class Notification extends ImmutablePureComponent {
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
/>
</div>
</HotKeys>
</div >
</HotKeys >
);
}
render () {
render() {
const { notification } = this.props;
const account = notification.get('account');
const displayNameHtml = { __html: account.get('display_name_html') };
const link = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
const account = notification.get('account');
const displayNameHtml = { __html: account.get('display_name_html') };
const link = (<bdi ><Permalink
className='notification__display-name'
href={account.get('url')}
title={account.get('acct')}
to={`/accounts/${account.get('id')}`}
dangerouslySetInnerHTML={displayNameHtml}
/></bdi >);
switch(notification.get('type')) {
switch (notification.get('type')) {
case 'follow':
return this.renderFollow(notification, account, link);
case 'follow_request':

20
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@ -45,15 +45,15 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
e.stopPropagation();
}
};
handleOpenVideo = (media, startTime) => {
this.props.onOpenVideo(media, startTime);
}
};
handleExpandedToggle = () => {
this.props.onToggleHidden(this.props.status);
}
};
_measureHeight (heightJustChanged) {
if (this.props.measureHeight && this.node) {
@ -68,7 +68,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
setRef = c => {
this.node = c;
this._measureHeight();
}
};
componentDidUpdate (prevProps, prevState) {
this._measureHeight(prevState.height !== this.state.height);
@ -86,7 +86,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
}
};
render () {
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
@ -211,8 +211,14 @@ export default class DetailedStatus extends ImmutablePureComponent {
<div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', { compact })}>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
<div className='detailed-status__display-avatar'><Avatar
account={status.get('account')}
size={55}
/></div >
<DisplayName
account={status.get('account')}
localDomain={this.props.domain}
/>
</a>
<StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />

36
app/javascript/mastodon/features/ui/components/actions_modal.js
View File

@ -26,16 +26,29 @@ export default class ActionsModal extends ImmutablePureComponent {
return (
<li key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
{icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
<div>
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
<div>{meta}</div>
</div>
</a>
</li>
<a
href={href}
target='_blank'
rel='noopener noreferrer'
onClick={this.props.onClick}
data-index={i}
className={classNames({ active })}
>
{icon && <IconButton
title={text}
icon={icon}
role='presentation'
tabIndex='-1'
inverted
/>}
<div >
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div >
<div >{meta}</div >
</div >
</a >
</li >
);
}
};
render () {
const status = this.props.status && (
@ -49,7 +62,10 @@ export default class ActionsModal extends ImmutablePureComponent {
<a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
<Avatar account={this.props.status.get('account')} size={48} />
<Avatar
account={this.props.status.get('account')}
size={55}
/>
</div>
<DisplayName account={this.props.status.get('account')} />

13
app/javascript/mastodon/features/ui/components/boost_modal.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import Button from '../../../components/button';
import StatusContent from '../../../components/status_content';
import Avatar from '../../../components/avatar';
@ -37,7 +37,7 @@ class BoostModal extends ImmutablePureComponent {
handleReblog = () => {
this.props.onReblog(this.props.status);
this.props.onClose();
}
};
handleAccountClick = (e) => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
@ -45,11 +45,11 @@ class BoostModal extends ImmutablePureComponent {
this.props.onClose();
this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
}
}
};
setRef = (c) => {
this.button = c;
}
};
render () {
const { status, intl } = this.props;
@ -66,7 +66,10 @@ class BoostModal extends ImmutablePureComponent {
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
<Avatar account={status.get('account')} size={48} />
<Avatar
account={status.get('account')}
size={55}
/>
</div>
<DisplayName account={status.get('account')} />

38
app/javascript/mastodon/features/ui/components/link_footer.js
View File

@ -129,25 +129,25 @@ class LinkFooter extends React.PureComponent {
<div className='extras'>
<button className='mod-theme btn btn-block btn-small btn-primary pull-left'>
{this.themeIsDark ? (
<span
onClick={this.setState('theme', 'light')}
title='set light'
>
<i className='fa fa-pencil-o' /> to light
</span >
) : (
<span
onClick={
this.changeTheme
}
title='set dark'
>
<i className='fa fa-pencil' /> to dark
</span >
)}
</button >
{/*<button className='mod-theme btn btn-block btn-small btn-primary pull-left'>*/}
{/* {this.themeIsDark ? (*/}
{/* <span*/}
{/* onClick={this.setState('theme', 'light')}*/}
{/* title='set light'*/}
{/* >*/}
{/* <i className='fa fa-pencil-o' /> to light*/}
{/* </span >*/}
{/* ) : (*/}
{/* <span*/}
{/* onClick={*/}
{/* this.changeTheme*/}
{/* }*/}
{/* title='set dark'*/}
{/* >*/}
{/* <i className='fa fa-pencil' /> to dark*/}
{/* </span >*/}
{/* )}*/}
{/*</button >*/}
{this.state.enableChristmasSnow && (
<div

6
app/javascript/styles/bliss/about.scss
View File

@ -711,9 +711,9 @@
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
width: $avatar-side;
height: $avatar-side;
background-size: $avatar-side $avatar-side;
}
}

23
app/javascript/styles/bliss/components.scss
View File

@ -2197,27 +2197,16 @@ a.account__display-name {
}
.notification {
&__message {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__favourite-icon-wrapper {
left: -32px;
}
.status {
padding-top: 8px;
}
background-color: $classic-base-color !important;
padding: 1em 0;
color: $ui-highlight-color;
border-left: $ui-highlight-color 5px solid;
.account {
padding: 0;
padding-top: 8px;
}
.account__avatar-wrapper {
margin-left: 17px;
margin-right: 15px;
}
}
}
}
@ -2320,7 +2309,7 @@ a.account__display-name {
flex-direction: column;
height: calc(100% - 10px);
overflow-y: hidden;
z-index:1;
z-index: 1;
.navigation-bar {
padding-top: 20px;

4
app/javascript/styles/bliss/footer.scss
View File

@ -181,12 +181,12 @@
@media all and(min-width: $maximum-width) {
& {
width: 30vw;
width: 25vw;
}
}
@media all and(max-width: $maximum-width) {
& {
width: 27vw;
width: 22vw;
height: 50vh;
overflow-y: auto;
padding-right: 1em;

2
app/javascript/styles/bliss/variables.scss
View File

@ -55,6 +55,8 @@ $small-breakpoint: 960px;
$xs-top-breakpoint: 738px;
$xs-breakpoint: 675px;
// pictures
$avatar-side: 55px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;

6
app/javascript/styles/bliss/widgets.scss
View File

@ -95,9 +95,9 @@
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
width: $avatar-side;
height: $avatar-side;
background-size: $avatar-side $avatar-side;
}
}
}

1
app/javascript/styles/contrast/variables.scss
View File

@ -22,3 +22,4 @@ $action-button-color: #8d9ac2;
$inverted-text-color: $black !default;
$lighter-text-color: darken($ui-base-color, 6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default;
$avatar-side: 55px;

52
app/javascript/styles/custom.scss
View File

@ -1,26 +1,26 @@
@import 'large_center';
// custom sheet made on https://www.cipherbliss.com
// Commonly used web colors
$black: #fff; // Black
$white: #000; // White
$success-green: #6bbd77 !default; // Padua
$error-red: #d4839b !default; // Cerise
$warning-red: #528dc8 !default; // Sunset Orange
$gold-star: #00ec84 !default; // Dark Goldenrod
// User Interface Colors
$ui-base-color: #313644; // Midnight Express
$ui-base-lighter-color: #bdd2d6;
$ui-primary-color: #a1ccff; // Echo Blue
$ui-secondary-color: #7fc0ff; // Pattens Blue
$ui-highlight-color: #00a7d1; // Summer Sky
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
// fix
// then we import the rest of the world
@import 'application';
@import 'bliss/messaging';
//@import 'large_center';
//// custom sheet made on https://www.cipherbliss.com
//// Commonly used web colors
//$black: #fff; // Black
//$white: #000; // White
//$success-green: #6bbd77 !default; // Padua
//$error-red: #d4839b !default; // Cerise
//$warning-red: #528dc8 !default; // Sunset Orange
//$gold-star: #00ec84 !default; // Dark Goldenrod
//
//// User Interface Colors
//$ui-base-color: #313644; // Midnight Express
//$ui-base-lighter-color: #bdd2d6;
//$ui-primary-color: #a1ccff; // Echo Blue
//$ui-secondary-color: #7fc0ff; // Pattens Blue
//$ui-highlight-color: #00a7d1; // Summer Sky
//$avatar-side: 55px;
//// Variables for components
//$media-modal-media-max-width: 100%;
//// put margins on top and bottom of image to avoid the screen covered by image.
//$media-modal-media-max-height: 80%;
//// fix
//
//// then we import the rest of the world
//@import 'application';
//@import 'bliss/messaging';

6
app/javascript/styles/mastodon/about.scss
View File

@ -751,9 +751,9 @@ $small-breakpoint: 960px;
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
width: $avatar-side;
height: $avatar-side;
background-size: $avatar-side $avatar-side;
}
}

47
app/javascript/styles/mastodon/components.scss
View File

@ -949,8 +949,12 @@
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
opacity: 1;
@ -2175,7 +2179,7 @@ a.account__display-name {
.scrollable {
overflow: visible;
@supports(display: grid) {
@supports (display: grid) {
contain: content;
}
}
@ -2333,7 +2337,7 @@ a.account__display-name {
.columns-area__panels__pane--navigational {
display: none;
}
.getting-started__footer{
.getting-started__footer {
width: 250px;
}
}
@ -2520,7 +2524,7 @@ a.account__display-name {
overflow-y: auto;
}
@supports(display: grid) { // hack to fix Chrome <57
@supports (display: grid) { // hack to fix Chrome <57
contain: strict;
}
@ -2537,7 +2541,7 @@ a.account__display-name {
}
.scrollable.fullscreen {
@supports(display: grid) { // hack to fix Chrome <57
@supports (display: grid) { // hack to fix Chrome <57
contain: none;
}
}
@ -3467,9 +3471,15 @@ a.status-card.compact:hover {
}
@keyframes loader-label {
0% { opacity: 0.25; }
30% { opacity: 1; }
100% { opacity: 0.25; }
0% {
opacity: 0.25;
}
30% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
.video-error-cover {
@ -3758,7 +3768,7 @@ a.status-card.compact:hover {
align-items: center;
justify-content: center;
@supports(display: grid) { // hack to fix Chrome <57
@supports (display: grid) { // hack to fix Chrome <57
contain: strict;
}
@ -5163,6 +5173,7 @@ a.status-card.compact:hover {
overflow: hidden;
position: absolute;
}
/* End Media Gallery */
.detailed,
@ -5834,9 +5845,15 @@ noscript {
}
@keyframes flicker {
0% { opacity: 1; }
30% { opacity: 0.75; }
100% { opacity: 1; }
0% {
opacity: 1;
}
30% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 630px) and (max-height: 400px) {
@ -5869,13 +5886,13 @@ noscript {
& > .icon-button.close {
will-change: opacity transform;
transition: opacity $duration * 0.5 $delay,
transform $duration $delay;
transform $duration $delay;
}
& > .compose__action-bar .icon-button {
will-change: opacity transform;
transition: opacity $duration * 0.5 $delay + $duration * 0.5,
transform $duration $delay;
transform $duration $delay;
}
}
}

28
app/javascript/styles/mastodon/variables.scss
View File

@ -1,18 +1,18 @@
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a !default; // Padua
$error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a !default; // Padua
$error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
$red-bookmark: $warning-red;
// Values from the classic Mastodon UI
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
$classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black !default;
@ -23,10 +23,10 @@ $valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
// Variables for texts
@ -76,3 +76,5 @@ $no-gap-breakpoint: 415px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;
$avatar-side: 55px;

4
app/javascript/styles/mastodon/widgets.scss
View File

@ -372,8 +372,8 @@
.account__avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
width: $avatar-side;
height: $avatar-side;
border-radius: 50%;
position: relative;
margin-left: -10px;