diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
26 files changed, 352 insertions, 353 deletions
diff --git a/app/javascript/flavours/glitch/actions/modal.js b/app/javascript/flavours/glitch/actions/modal.js index 3d0299db5..3e576fab8 100644 --- a/app/javascript/flavours/glitch/actions/modal.js +++ b/app/javascript/flavours/glitch/actions/modal.js @@ -9,9 +9,10 @@ export function openModal(type, props) { }; }; -export function closeModal(type) { +export function closeModal(type, options = { ignoreFocus: false }) { return { type: MODAL_CLOSE, modalType: type, + ignoreFocus: options.ignoreFocus, }; }; diff --git a/app/javascript/flavours/glitch/components/icon_button.js b/app/javascript/flavours/glitch/components/icon_button.js index 58d3568dd..3999409cd 100644 --- a/app/javascript/flavours/glitch/components/icon_button.js +++ b/app/javascript/flavours/glitch/components/icon_button.js @@ -30,6 +30,7 @@ export default class IconButton extends React.PureComponent { label: PropTypes.string, counter: PropTypes.number, obfuscateCount: PropTypes.bool, + href: PropTypes.string, }; static defaultProps = { @@ -109,6 +110,7 @@ export default class IconButton extends React.PureComponent { title, counter, obfuscateCount, + href, } = this.props; const { @@ -130,6 +132,21 @@ export default class IconButton extends React.PureComponent { style.width = 'auto'; } + let contents = ( + <React.Fragment> + <Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>} + {this.props.label} + </React.Fragment> + ); + + if (href) { + contents = ( + <a href={href} target='_blank' rel='noopener noreferrer'> + {contents} + </a> + ); + } + return ( <button aria-label={title} @@ -145,8 +162,7 @@ export default class IconButton extends React.PureComponent { tabIndex={tabIndex} disabled={disabled} > - <Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>} - {this.props.label} + {contents} </button> ); } diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js index 7b5a630e5..0595f6a0e 100644 --- a/app/javascript/flavours/glitch/components/modal_root.js +++ b/app/javascript/flavours/glitch/components/modal_root.js @@ -18,6 +18,7 @@ export default class ModalRoot extends React.PureComponent { b: PropTypes.number, }), noEsc: PropTypes.bool, + ignoreFocus: PropTypes.bool, }; activeElement = this.props.children ? document.activeElement : null; @@ -72,7 +73,9 @@ export default class ModalRoot extends React.PureComponent { // immediately selectable, we have to wait for observers to run, as // described in https://github.com/WICG/inert#performance-and-gotchas Promise.resolve().then(() => { - this.activeElement.focus({ preventScroll: true }); + if (!this.props.ignoreFocus) { + this.activeElement.focus({ preventScroll: true }); + } this.activeElement = null; }).catch(console.error); diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 16f13afa4..50bfacc6a 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -144,7 +144,7 @@ class ScrollableList extends PureComponent { this.attachIntersectionObserver(); attachFullscreenListener(this.onFullScreenChange); - // Handle initial scroll posiiton + // Handle initial scroll position this.handleScroll(); } diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js index 1ddbc706b..11c15d7c6 100644 --- a/app/javascript/flavours/glitch/containers/media_container.js +++ b/app/javascript/flavours/glitch/containers/media_container.js @@ -43,7 +43,7 @@ export default class MediaContainer extends PureComponent { handleOpenVideo = (options) => { const { components } = this.props; - const { media } = JSON.parse(components[options.componetIndex].getAttribute('data-props')); + const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props')); const mediaList = fromJS(media); document.body.classList.add('with-modals--active'); @@ -87,7 +87,7 @@ export default class MediaContainer extends PureComponent { ...(hashtag ? { hashtag: fromJS(hashtag) } : {}), ...(componentName === 'Video' ? { - componetIndex: i, + componentIndex: i, onOpenVideo: this.handleOpenVideo, } : { onOpenMedia: this.handleOpenMedia, diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index c75906ce7..b03bc34b8 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -246,9 +246,14 @@ class ComposeForm extends ImmutablePureComponent { selectionStart = selectionEnd = text.length; } if (textarea) { - textarea.setSelectionRange(selectionStart, selectionEnd); - textarea.focus(); - if (!singleColumn) textarea.scrollIntoView(); + // Because of the wicg-inert polyfill, the activeElement may not be + // immediately selectable, we have to wait for observers to run, as + // described in https://github.com/WICG/inert#performance-and-gotchas + Promise.resolve().then(() => { + textarea.setSelectionRange(selectionStart, selectionEnd); + textarea.focus(); + if (!singleColumn) textarea.scrollIntoView(); + }).catch(console.error); } // Refocuses the textarea after submitting. diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.js b/app/javascript/flavours/glitch/features/directory/components/account_card.js index 2a3fd1ecf..c9ef5850c 100644 --- a/app/javascript/flavours/glitch/features/directory/components/account_card.js +++ b/app/javascript/flavours/glitch/features/directory/components/account_card.js @@ -7,31 +7,28 @@ import { makeGetAccount } from 'flavours/glitch/selectors'; import Avatar from 'flavours/glitch/components/avatar'; import DisplayName from 'flavours/glitch/components/display_name'; import Permalink from 'flavours/glitch/components/permalink'; -import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp'; -import IconButton from 'flavours/glitch/components/icon_button'; +import Button from 'flavours/glitch/components/button'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/util/initial_state'; import ShortNumber from 'flavours/glitch/components/short_number'; import { followAccount, unfollowAccount, - blockAccount, unblockAccount, unmuteAccount, } from 'flavours/glitch/actions/accounts'; import { openModal } from 'flavours/glitch/actions/modal'; -import { initMuteModal } from 'flavours/glitch/actions/mutes'; +import classNames from 'classnames'; const messages = defineMessages({ - follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, - requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, - unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, - unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, - unfollowConfirm: { - id: 'confirmations.unfollow.confirm', - defaultMessage: 'Unfollow', - }, + follow: { id: 'account.follow', defaultMessage: 'Follow' }, + cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Cancel follow request' }, + requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, + unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' }, + unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, + unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, + edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, }); const makeMapStateToProps = () => { @@ -75,18 +72,15 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ onBlock(account) { if (account.getIn(['relationship', 'blocking'])) { dispatch(unblockAccount(account.get('id'))); - } else { - dispatch(blockAccount(account.get('id'))); } }, onMute(account) { if (account.getIn(['relationship', 'muting'])) { dispatch(unmuteAccount(account.get('id'))); - } else { - dispatch(initMuteModal(account)); } }, + }); export default @@ -138,130 +132,92 @@ class AccountCard extends ImmutablePureComponent { handleMute = () => { this.props.onMute(this.props.account); - }; + } + + handleEditProfile = () => { + window.open('/settings/profile', '_blank'); + } render() { const { account, intl } = this.props; - let buttons; - - if ( - account.get('id') !== me && - account.get('relationship', null) !== null - ) { - const following = account.getIn(['relationship', 'following']); - const requested = account.getIn(['relationship', 'requested']); - const blocking = account.getIn(['relationship', 'blocking']); - const muting = account.getIn(['relationship', 'muting']); - - if (requested) { - buttons = ( - <IconButton - disabled - icon='hourglass' - title={intl.formatMessage(messages.requested)} - /> - ); - } else if (blocking) { - buttons = ( - <IconButton - active - icon='unlock' - title={intl.formatMessage(messages.unblock, { - name: account.get('username'), - })} - onClick={this.handleBlock} - /> - ); - } else if (muting) { - buttons = ( - <IconButton - active - icon='volume-up' - title={intl.formatMessage(messages.unmute, { - name: account.get('username'), - })} - onClick={this.handleMute} - /> - ); - } else if (!account.get('moved') || following) { - buttons = ( - <IconButton - icon={following ? 'user-times' : 'user-plus'} - title={intl.formatMessage( - following ? messages.unfollow : messages.follow, - )} - onClick={this.handleFollow} - active={following} - /> - ); + let actionBtn; + + if (me !== account.get('id')) { + if (!account.get('relationship')) { // Wait until the relationship is loaded + actionBtn = ''; + } else if (account.getIn(['relationship', 'requested'])) { + actionBtn = <Button className={classNames('logo-button')} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.handleFollow} />; + } else if (account.getIn(['relationship', 'muting'])) { + actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} />; + } else if (!account.getIn(['relationship', 'blocking'])) { + actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />; + } else if (account.getIn(['relationship', 'blocking'])) { + actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />; } + } else { + actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} onClick={this.handleEditProfile} />; } return ( - <div className='directory__card'> - <div className='directory__card__img'> - <img - src={ - autoPlayGif ? account.get('header') : account.get('header_static') - } - alt='' - /> - </div> + <div className='account-card'> + <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='account-card__permalink'> + <div className='account-card__header'> + <img + src={ + autoPlayGif ? account.get('header') : account.get('header_static') + } + alt='' + /> + </div> - <div className='directory__card__bar'> - <Permalink - className='directory__card__bar__name' - href={account.get('url')} - to={`/@${account.get('acct')}`} - > - <Avatar account={account} size={48} /> + <div className='account-card__title'> + <div className='account-card__title__avatar'><Avatar account={account} size={56} /></div> <DisplayName account={account} /> - </Permalink> - - <div className='directory__card__bar__relationship account__relationship'> - {buttons} </div> - </div> + </Permalink> - <div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> + {account.get('note').length > 0 && ( <div - className='account__header__content translate' + className='account-card__bio translate' + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} /> - </div> - - <div className='directory__card__extra'> - <div className='accounts-table__count'> - <ShortNumber value={account.get('statuses_count')} /> - <small> - <FormattedMessage id='account.posts' defaultMessage='Toots' /> - </small> + )} + + <div className='account-card__actions'> + <div className='account-card__counters'> + <div className='account-card__counters__item'> + <ShortNumber value={account.get('statuses_count')} /> + <small> + <FormattedMessage id='account.posts' defaultMessage='Toots' /> + </small> + </div> + + <div className='account-card__counters__item'> + {account.get('followers_count') < 0 ? '-' : <ShortNumber value={account.get('followers_count')} />}{' '} + <small> + <FormattedMessage + id='account.followers' + defaultMessage='Followers' + /> + </small> + </div> + + <div className='account-card__counters__item'> + <ShortNumber value={account.get('following_count')} />{' '} + <small> + <FormattedMessage + id='account.following' + defaultMessage='Following' + /> + </small> + </div> </div> - <div className='accounts-table__count'> - {account.get('followers_count') < 0 ? '-' : <ShortNumber value={account.get('followers_count')} />}{' '} - <small> - <FormattedMessage - id='account.followers' - defaultMessage='Followers' - /> - </small> - </div> - <div className='accounts-table__count'> - {account.get('last_status_at') === null ? ( - <FormattedMessage - id='account.never_active' - defaultMessage='Never' - /> - ) : ( - <RelativeTimestamp timestamp={account.get('last_status_at')} /> - )}{' '} - <small> - <FormattedMessage - id='account.last_status' - defaultMessage='Last active' - /> - </small> + + <div className='account-card__actions__button'> + {actionBtn} </div> </div> </div> diff --git a/app/javascript/flavours/glitch/features/directory/index.js b/app/javascript/flavours/glitch/features/directory/index.js index cde5926e0..87d9b3625 100644 --- a/app/javascript/flavours/glitch/features/directory/index.js +++ b/app/javascript/flavours/glitch/features/directory/index.js @@ -10,9 +10,9 @@ import { fetchDirectory, expandDirectory } from 'flavours/glitch/actions/directo import { List as ImmutableList } from 'immutable'; import AccountCard from './components/account_card'; import RadioButton from 'flavours/glitch/components/radio_button'; -import classNames from 'classnames'; import LoadMore from 'flavours/glitch/components/load_more'; import ScrollContainer from 'flavours/glitch/containers/scroll_container'; +import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; const messages = defineMessages({ title: { id: 'column.directory', defaultMessage: 'Browse profiles' }, @@ -129,7 +129,7 @@ class Directory extends React.PureComponent { const pinned = !!columnId; const scrollableArea = ( - <div className='scrollable' style={{ background: 'transparent' }}> + <div className='scrollable'> <div className='filter-form'> <div className='filter-form__column' role='group'> <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} /> @@ -142,8 +142,10 @@ class Directory extends React.PureComponent { </div> </div> - <div className={classNames('directory__list', { loading: isLoading })}> - {accountIds.map(accountId => <AccountCard id={accountId} key={accountId} />)} + <div className='directory__list'> + {isLoading ? <LoadingIndicator /> : accountIds.map(accountId => ( + <AccountCard id={accountId} key={accountId} /> + ))} </div> <LoadMore onClick={this.handleLoadMore} visible={!isLoading} /> diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js index e01d277a1..0408105ae 100644 --- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js +++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js @@ -62,7 +62,7 @@ class Footer extends ImmutablePureComponent { const { router } = this.context; if (onClose) { - onClose(); + onClose(true); } dispatch(replyCompose(status, router.history)); @@ -181,7 +181,7 @@ class Footer extends ImmutablePureComponent { {replyButton} <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} /> <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} /> - {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} />} + {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={status.get('url')} />} </div> ); } diff --git a/app/javascript/flavours/glitch/features/report/category.js b/app/javascript/flavours/glitch/features/report/category.js index ddbc82563..cf63533d0 100644 --- a/app/javascript/flavours/glitch/features/report/category.js +++ b/app/javascript/flavours/glitch/features/report/category.js @@ -8,7 +8,7 @@ const messages = defineMessages({ dislike: { id: 'report.reasons.dislike', defaultMessage: 'I don\'t like it' }, dislike_description: { id: 'report.reasons.dislike_description', defaultMessage: 'It is not something you want to see' }, spam: { id: 'report.reasons.spam', defaultMessage: 'It\'s spam' }, - spam_description: { id: 'report.reasons.spam_description', defaultMessage: 'Malicious links, fake engagement, or repetetive replies' }, + spam_description: { id: 'report.reasons.spam_description', defaultMessage: 'Malicious links, fake engagement, or repetitive replies' }, violation: { id: 'report.reasons.violation', defaultMessage: 'It violates server rules' }, violation_description: { id: 'report.reasons.violation_description', defaultMessage: 'You are aware that it breaks specific rules' }, other: { id: 'report.reasons.other', defaultMessage: 'It\'s something else' }, diff --git a/app/javascript/flavours/glitch/features/report/comment.js b/app/javascript/flavours/glitch/features/report/comment.js index b2663bbf2..ec261afcb 100644 --- a/app/javascript/flavours/glitch/features/report/comment.js +++ b/app/javascript/flavours/glitch/features/report/comment.js @@ -74,7 +74,7 @@ class Comment extends React.PureComponent { <div className='flex-spacer' /> <div className='report-dialog-modal__actions'> - <Button onClick={this.handleClick}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button> + <Button onClick={this.handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button> </div> </React.Fragment> ); diff --git a/app/javascript/flavours/glitch/features/report/statuses.js b/app/javascript/flavours/glitch/features/report/statuses.js index 69cfbb3e5..47d5ee863 100644 --- a/app/javascript/flavours/glitch/features/report/statuses.js +++ b/app/javascript/flavours/glitch/features/report/statuses.js @@ -6,9 +6,11 @@ import StatusCheckBox from 'flavours/glitch/features/report/containers/status_ch import { OrderedSet } from 'immutable'; import { FormattedMessage } from 'react-intl'; import Button from 'flavours/glitch/components/button'; +import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; const mapStateToProps = (state, { accountId }) => ({ availableStatusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])), + isLoading: state.getIn(['timelines', `account:${accountId}:with_replies`, 'isLoading']), }); export default @connect(mapStateToProps) @@ -19,6 +21,7 @@ class Statuses extends React.PureComponent { accountId: PropTypes.string.isRequired, availableStatusIds: ImmutablePropTypes.set.isRequired, selectedStatusIds: ImmutablePropTypes.set.isRequired, + isLoading: PropTypes.bool, onToggle: PropTypes.func.isRequired, }; @@ -28,7 +31,7 @@ class Statuses extends React.PureComponent { }; render () { - const { availableStatusIds, selectedStatusIds, onToggle } = this.props; + const { availableStatusIds, selectedStatusIds, onToggle, isLoading } = this.props; return ( <React.Fragment> @@ -36,7 +39,7 @@ class Statuses extends React.PureComponent { <p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p> <div className='report-dialog-modal__statuses'> - {availableStatusIds.union(selectedStatusIds).map(statusId => ( + {isLoading ? <LoadingIndicator /> : availableStatusIds.union(selectedStatusIds).map(statusId => ( <StatusCheckBox id={statusId} key={statusId} diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index 1e065c171..a975c4013 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -55,6 +55,7 @@ export default class ModalRoot extends React.PureComponent { type: PropTypes.string, props: PropTypes.object, onClose: PropTypes.func.isRequired, + ignoreFocus: PropTypes.bool, }; state = { @@ -85,7 +86,7 @@ export default class ModalRoot extends React.PureComponent { return <BundleModalError {...props} onClose={onClose} />; } - handleClose = () => { + handleClose = (ignoreFocus = false) => { const { onClose } = this.props; let message = null; try { @@ -95,7 +96,7 @@ export default class ModalRoot extends React.PureComponent { // isn't set. // This would be much smoother with react-intl 3+ and `forwardRef`. } - onClose(message); + onClose(message, ignoreFocus); } setModalRef = (c) => { @@ -103,12 +104,12 @@ export default class ModalRoot extends React.PureComponent { } render () { - const { type, props } = this.props; + const { type, props, ignoreFocus } = this.props; const { backgroundColor } = this.state; const visible = !!type; return ( - <Base backgroundColor={backgroundColor} onClose={this.handleClose} noEsc={props ? props.noEsc : false}> + <Base backgroundColor={backgroundColor} onClose={this.handleClose} noEsc={props ? props.noEsc : false} ignoreFocus={ignoreFocus}> {visible && ( <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}> {(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />} diff --git a/app/javascript/flavours/glitch/features/ui/containers/modal_container.js b/app/javascript/flavours/glitch/features/ui/containers/modal_container.js index 039aabd8a..560c34f01 100644 --- a/app/javascript/flavours/glitch/features/ui/containers/modal_container.js +++ b/app/javascript/flavours/glitch/features/ui/containers/modal_container.js @@ -3,22 +3,23 @@ import { openModal, closeModal } from 'flavours/glitch/actions/modal'; import ModalRoot from '../components/modal_root'; const mapStateToProps = state => ({ - type: state.getIn(['modal', 0, 'modalType'], null), - props: state.getIn(['modal', 0, 'modalProps'], {}), + ignoreFocus: state.getIn(['modal', 'ignoreFocus']), + type: state.getIn(['modal', 'stack', 0, 'modalType'], null), + props: state.getIn(['modal', 'stack', 0, 'modalProps'], {}), }); const mapDispatchToProps = dispatch => ({ - onClose (confirmationMessage) { + onClose (confirmationMessage, ignoreFocus = false) { if (confirmationMessage) { dispatch( openModal('CONFIRM', { message: confirmationMessage.message, confirm: confirmationMessage.confirm, - onConfirm: () => dispatch(closeModal()), + onConfirm: () => dispatch(closeModal(undefined, { ignoreFocus })), }), ); } else { - dispatch(closeModal()); + dispatch(closeModal(undefined, { ignoreFocus })); } }, }); diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index fcbf07ce2..53e3dfda3 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -123,7 +123,7 @@ class Video extends React.PureComponent { autoPlay: PropTypes.bool, volume: PropTypes.number, muted: PropTypes.bool, - componetIndex: PropTypes.number, + componentIndex: PropTypes.number, }; static defaultProps = { @@ -516,7 +516,7 @@ class Video extends React.PureComponent { startTime: this.video.currentTime, autoPlay: !this.state.paused, defaultVolume: this.state.volume, - componetIndex: this.props.componetIndex, + componentIndex: this.props.componentIndex, }); } diff --git a/app/javascript/flavours/glitch/reducers/modal.js b/app/javascript/flavours/glitch/reducers/modal.js index ae205c6d5..2ef0aef24 100644 --- a/app/javascript/flavours/glitch/reducers/modal.js +++ b/app/javascript/flavours/glitch/reducers/modal.js @@ -3,16 +3,36 @@ import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines'; import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from 'flavours/glitch/actions/compose'; import { Stack as ImmutableStack, Map as ImmutableMap } from 'immutable'; -export default function modal(state = ImmutableStack(), action) { +const initialState = ImmutableMap({ + ignoreFocus: false, + stack: ImmutableStack(), +}); + +const popModal = (state, { modalType, ignoreFocus }) => { + if (modalType === undefined || modalType === state.getIn(['stack', 0, 'modalType'])) { + return state.set('ignoreFocus', !!ignoreFocus).update('stack', stack => stack.shift()); + } else { + return state; + } +}; + +const pushModal = (state, modalType, modalProps) => { + return state.withMutations(map => { + map.set('ignoreFocus', false); + map.update('stack', stack => stack.unshift(ImmutableMap({ modalType, modalProps }))); + }); +}; + +export default function modal(state = initialState, action) { switch(action.type) { case MODAL_OPEN: - return state.unshift(ImmutableMap({ modalType: action.modalType, modalProps: action.modalProps })); + return pushModal(state, action.modalType, action.modalProps); case MODAL_CLOSE: - return (action.modalType === undefined || action.modalType === state.getIn([0, 'modalType'])) ? state.shift() : state; + return popModal(state, action); case COMPOSE_UPLOAD_CHANGE_SUCCESS: - return state.getIn([0, 'modalType']) === 'FOCAL_POINT' ? state.shift() : state; + return popModal(state, { modalType: 'FOCAL_POINT', ignoreFocus: false }); case TIMELINE_DELETE: - return state.filterNot((modal) => modal.get('modalProps').statusId === action.id); + return state.update('stack', stack => stack.filterNot((modal) => modal.get('modalProps').statusId === action.id)); default: return state; } diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 920aa6331..87e35236c 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -332,7 +332,8 @@ } .batch-table__row--muted .pending-account__header, -.batch-table__row--muted .accounts-table { +.batch-table__row--muted .accounts-table, +.batch-table__row--muted .name-tag { &, a, strong { @@ -340,6 +341,10 @@ } } +.batch-table__row--muted .name-tag .avatar { + opacity: 0.5; +} + .batch-table__row--muted .accounts-table { tbody td.accounts-table__extra, &__count, @@ -353,7 +358,8 @@ } .batch-table__row--attention .pending-account__header, -.batch-table__row--attention .accounts-table { +.batch-table__row--attention .accounts-table, +.batch-table__row--attention .name-tag { &, a, strong { diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index a1b99636c..0873ac300 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -904,6 +904,14 @@ a.name-tag, text-align: center; } +.applications-list__item { + padding: 15px 0; + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 4%); + border-radius: 4px; + margin-top: 15px; +} + .announcements-list { border: 1px solid lighten($ui-base-color, 4%); border-radius: 4px; @@ -923,6 +931,12 @@ a.name-tag, text-decoration: none; margin-bottom: 10px; + .account-role { + vertical-align: middle; + } + } + + a.announcements-list__item__title { &:hover, &:focus, &:active { @@ -941,6 +955,10 @@ a.name-tag, align-items: center; } + &__permissions { + margin-top: 10px; + } + &:last-child { border-bottom: 0; } @@ -1218,6 +1236,11 @@ a.sparkline { background: $ui-base-color; border-radius: 4px; + &__permalink { + color: inherit; + text-decoration: none; + } + &__header { padding: 4px; border-radius: 4px; @@ -1234,20 +1257,22 @@ a.sparkline { } &__title { - margin-top: -25px; + margin-top: -(15px + 8px); display: flex; align-items: flex-end; &__avatar { - padding: 15px; + padding: 14px; - img { + img, + .account__avatar { display: block; margin: 0; width: 56px; height: 56px; - background: darken($ui-base-color, 8%); + background-color: darken($ui-base-color, 8%); border-radius: 8px; + border: 1px solid $ui-base-color; } } @@ -1255,30 +1280,34 @@ a.sparkline { color: $darker-text-color; padding-bottom: 15px; font-size: 15px; + line-height: 20px; bdi { display: block; color: $primary-text-color; - font-weight: 500; + font-weight: 700; } } } &__bio { padding: 0 15px; + margin: 8px 0; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; - max-height: 18px * 2; + max-height: 21px * 2; position: relative; + font-size: 15px; + line-height: 21px; &::after { display: block; content: ""; width: 50px; - height: 18px; + height: 21px; position: absolute; - bottom: 0; + bottom: 8px; right: 15px; background: linear-gradient(to left, $ui-base-color, transparent); pointer-events: none; @@ -1291,10 +1320,6 @@ a.sparkline { &:hover { text-decoration: underline; - - .fa { - color: lighten($dark-text-color, 7%); - } } &.mention { @@ -1311,12 +1336,21 @@ a.sparkline { &__actions { display: flex; + justify-content: space-between; align-items: center; - padding-top: 10px; &__button { - flex: 0 0 auto; + flex-shrink: 1; padding: 0 15px; + overflow: hidden; + + .button { + min-width: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 100%; + } } } @@ -1325,19 +1359,23 @@ a.sparkline { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; + max-width: 340px; + min-width: 65px * 3; &__item { - padding: 15px; + padding: 15px 0; text-align: center; color: $primary-text-color; font-weight: 600; font-size: 15px; + line-height: 21px; small { display: block; color: $darker-text-color; font-weight: 400; font-size: 13px; + line-height: 18px; } } } @@ -1383,16 +1421,20 @@ a.sparkline { line-height: 20px; margin-bottom: 4px; - .username a { + .username { color: $primary-text-color; font-weight: 500; - text-decoration: none; margin-right: 5px; - &:hover, - &:focus, - &:active { - text-decoration: underline; + a { + color: inherit; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } } } @@ -1506,6 +1548,8 @@ a.sparkline { word-wrap: break-word; font-weight: 400; color: $primary-text-color; + box-sizing: border-box; + min-height: 100%; p { margin-bottom: 20px; diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.scss index b0ad5a88a..b48c6c102 100644 --- a/app/javascript/flavours/glitch/styles/components/directory.scss +++ b/app/javascript/flavours/glitch/styles/components/directory.scss @@ -1,133 +1,17 @@ -.directory { - &__list { - width: 100%; - margin: 10px 0; - transition: opacity 100ms ease-in; - - &.loading { - opacity: 0.7; - } +.scrollable .account-card { + margin: 10px; + background: lighten($ui-base-color, 8%); +} - @media screen and (max-width: $no-gap-breakpoint) { - margin: 0; - } +.scrollable .account-card__title__avatar { + img, + .account__avatar { + border-color: lighten($ui-base-color, 8%); } +} - &__card { - box-sizing: border-box; - margin-bottom: 10px; - - &__img { - height: 125px; - position: relative; - background: darken($ui-base-color, 12%); - overflow: hidden; - - img { - display: block; - width: 100%; - height: 100%; - margin: 0; - object-fit: cover; - } - } - - &__bar { - display: flex; - align-items: center; - background: lighten($ui-base-color, 4%); - padding: 10px; - - &__name { - flex: 1 1 auto; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - } - - &__relationship { - width: 23px; - min-height: 1px; - flex: 0 0 auto; - } - - .avatar { - flex: 0 0 auto; - width: 48px; - height: 48px; - padding-top: 2px; - - img { - width: 100%; - height: 100%; - display: block; - margin: 0; - border-radius: 4px; - background: darken($ui-base-color, 8%); - object-fit: cover; - } - } - - .display-name { - margin-left: 15px; - text-align: left; - - strong { - font-size: 15px; - color: $primary-text-color; - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - } - - span { - display: block; - font-size: 14px; - color: $darker-text-color; - font-weight: 400; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - &__extra { - background: $ui-base-color; - display: flex; - align-items: center; - justify-content: center; - - .accounts-table__count { - width: 33.33%; - flex: 0 0 auto; - padding: 15px 0; - } - - .account__header__content { - box-sizing: border-box; - padding: 15px 10px; - border-bottom: 1px solid lighten($ui-base-color, 8%); - width: 100%; - min-height: 18px + 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - p { - display: none; - - &:first-child { - display: inline; - } - } - - br { - display: none; - } - } - } - } +.scrollable .account-card__bio::after { + background: linear-gradient(to left, lighten($ui-base-color, 8%), transparent); } .filter-form { @@ -135,6 +19,7 @@ &__column { padding: 10px 15px; + padding-bottom: 0; } .radio-button { diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 55abd6e1e..7364eba91 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -41,7 +41,7 @@ cursor: pointer; display: inline-block; font-family: inherit; - font-size: 17px; + font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 22px; @@ -146,6 +146,11 @@ transition-property: background-color, color; text-decoration: none; + a { + color: inherit; + text-decoration: none; + } + &:hover, &:active, &:focus { diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss index edf705b5f..db510f1f4 100644 --- a/app/javascript/flavours/glitch/styles/components/single_column.scss +++ b/app/javascript/flavours/glitch/styles/components/single_column.scss @@ -94,17 +94,7 @@ padding: 0; } - .directory__list { - display: grid; - grid-gap: 10px; - grid-template-columns: minmax(0, 50%) minmax(0, 50%); - - @media screen and (max-width: $no-gap-breakpoint) { - display: block; - } - } - - .directory__card { + .account-card { margin-bottom: 0; } diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index eb72eab28..98a1288eb 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -1,7 +1,6 @@ .container-alt { width: 700px; margin: 0 auto; - margin-top: 40px; @media screen and (max-width: 740px) { width: 100%; @@ -67,23 +66,21 @@ line-height: 18px; box-sizing: border-box; padding: 20px 0; - padding-bottom: 0; - margin-bottom: -30px; margin-top: 40px; + margin-bottom: 10px; + border-bottom: 1px solid $ui-base-color; @media screen and (max-width: 440px) { width: 100%; margin: 0; - margin-bottom: 10px; padding: 20px; - padding-bottom: 0; } .avatar { width: 40px; height: 40px; @include avatar-size(40px); - margin-right: 8px; + margin-right: 10px; img { width: 100%; @@ -98,7 +95,7 @@ .name { flex: 1 1 auto; color: $secondary-text-color; - width: calc(100% - 88px); + width: calc(100% - 90px); .username { display: block; @@ -112,7 +109,7 @@ display: block; font-size: 32px; line-height: 40px; - margin-left: 8px; + margin-left: 10px; } } @@ -414,14 +411,6 @@ } } - .directory__card { - border-radius: 4px; - - @media screen and (max-width: $no-gap-breakpoint) { - border-radius: 0; - } - } - .page-header { @media screen and (max-width: $no-gap-breakpoint) { border-bottom: 0; @@ -844,19 +833,21 @@ grid-gap: 10px; grid-template-columns: minmax(0, 50%) minmax(0, 50%); + .account-card { + display: flex; + flex-direction: column; + } + @media screen and (max-width: $no-gap-breakpoint) { display: block; - } - .icon-button { - font-size: 18px; + .account-card { + margin-bottom: 10px; + display: block; + } } } - .directory__card { - margin-bottom: 0; - } - .card-grid { display: flex; flex-wrap: wrap; diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 034350525..ea416a79f 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -785,9 +785,41 @@ code { } } } +} - @media screen and (max-width: 740px) and (min-width: 441px) { - margin-top: 40px; +.oauth-prompt { + h3 { + color: $ui-secondary-color; + font-size: 17px; + line-height: 22px; + font-weight: 500; + margin-bottom: 30px; + } + + p { + font-size: 14px; + line-height: 18px; + margin-bottom: 30px; + } + + .permissions-list { + border: 1px solid $ui-base-color; + border-radius: 4px; + background: darken($ui-base-color, 4%); + margin-bottom: 30px; + } + + .actions { + margin: 0 -10px; + display: flex; + + form { + box-sizing: border-box; + padding: 0 10px; + flex: 1 1 auto; + min-height: 1px; + width: 50%; + } } } @@ -1056,3 +1088,39 @@ code { .simple_form .h-captcha { text-align: center; } + +.permissions-list { + &__item { + padding: 15px; + color: $ui-secondary-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); + display: flex; + align-items: center; + + &__text { + flex: 1 1 auto; + + &__title { + font-weight: 500; + } + + &__type { + color: $darker-text-color; + } + } + + &__icon { + flex: 0 0 auto; + font-size: 18px; + width: 30px; + color: $valid-value-color; + display: flex; + align-items: center; + } + + &:last-child { + border-bottom: 0; + padding-bottom: 0; + } + } +} diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index a2cdecf06..0847c8f4c 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -75,7 +75,7 @@ display: none; } - .autossugest-input { + .autosuggest-input { flex: 1 1 auto; } diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index afa05d93e..d0153c9f9 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -12,11 +12,6 @@ body.rtl { margin-left: 10px; } - .directory__card__bar .display-name { - margin-left: 0; - margin-right: 15px; - } - .display-name { text-align: right; } diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 12c84a6c9..8b5933b7b 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -210,6 +210,7 @@ a.table-action-link { &__content { padding-top: 12px; padding-bottom: 16px; + overflow: hidden; &--unpadded { padding: 0; @@ -292,3 +293,9 @@ a.table-action-link { } } } + +.one-liner { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} |