diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
50 files changed, 230 insertions, 185 deletions
diff --git a/app/javascript/flavours/glitch/actions/accounts.js b/app/javascript/flavours/glitch/actions/accounts.js index b659e4ff3..e1012a80b 100644 --- a/app/javascript/flavours/glitch/actions/accounts.js +++ b/app/javascript/flavours/glitch/actions/accounts.js @@ -370,6 +370,7 @@ export function fetchFollowersFail(id, error) { type: FOLLOWERS_FETCH_FAIL, id, error, + skipNotFound: true, }; }; @@ -456,6 +457,7 @@ export function fetchFollowingFail(id, error) { type: FOLLOWING_FETCH_FAIL, id, error, + skipNotFound: true, }; }; @@ -545,6 +547,7 @@ export function fetchRelationshipsFail(error) { type: RELATIONSHIPS_FETCH_FAIL, error, skipLoading: true, + skipNotFound: true, }; }; diff --git a/app/javascript/flavours/glitch/actions/alerts.js b/app/javascript/flavours/glitch/actions/alerts.js index cd36d8007..1670f9c10 100644 --- a/app/javascript/flavours/glitch/actions/alerts.js +++ b/app/javascript/flavours/glitch/actions/alerts.js @@ -34,11 +34,11 @@ export function showAlert(title = messages.unexpectedTitle, message = messages.u }; }; -export function showAlertForError(error) { +export function showAlertForError(error, skipNotFound = false) { if (error.response) { const { data, status, statusText, headers } = error.response; - if (status === 404 || status === 410) { + if (skipNotFound && (status === 404 || status === 410)) { // Skip these errors as they are reflected in the UI return { type: ALERT_NOOP }; } diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index 0be746048..f98cb7bf8 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -259,12 +259,31 @@ export function uploadCompose(files) { // Account for disparity in size of original image and resized data total += file.size - f.size; - return api(getState).post('/api/v1/media', data, { + return api(getState).post('/api/v2/media', data, { onUploadProgress: function({ loaded }){ progress[i] = loaded; dispatch(uploadComposeProgress(progress.reduce((a, v) => a + v, 0), total)); }, - }).then(({ data }) => dispatch(uploadComposeSuccess(data, f))); + }).then(({ status, data }) => { + // If server-side processing of the media attachment has not completed yet, + // poll the server until it is, before showing the media attachment as uploaded + + if (status === 200) { + dispatch(uploadComposeSuccess(data, f)); + } else if (status === 202) { + const poll = () => { + api(getState).get(`/api/v1/media/${data.id}`).then(response => { + if (response.status === 200) { + dispatch(uploadComposeSuccess(response.data, f)); + } else if (response.status === 206) { + setTimeout(() => poll(), 1000); + } + }).catch(error => dispatch(uploadComposeFail(error))); + }; + + poll(); + } + }); }).catch(error => dispatch(uploadComposeFail(error))); }; }; diff --git a/app/javascript/flavours/glitch/actions/identity_proofs.js b/app/javascript/flavours/glitch/actions/identity_proofs.js index a7241da20..18e679aec 100644 --- a/app/javascript/flavours/glitch/actions/identity_proofs.js +++ b/app/javascript/flavours/glitch/actions/identity_proofs.js @@ -27,4 +27,5 @@ export const fetchAccountIdentityProofsFail = (accountId, err) => ({ type: IDENTITY_PROOFS_ACCOUNT_FETCH_FAIL, accountId, err, + skipNotFound: true, }); diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js index 2ef78025e..1bbdd6142 100644 --- a/app/javascript/flavours/glitch/actions/timelines.js +++ b/app/javascript/flavours/glitch/actions/timelines.js @@ -165,6 +165,7 @@ export function expandTimelineFail(timeline, error, isLoadingMore) { timeline, error, skipLoading: !isLoadingMore, + skipNotFound: timeline.startsWith('account:'), }; }; diff --git a/app/javascript/flavours/glitch/components/domain.js b/app/javascript/flavours/glitch/components/domain.js index 85729ca94..697065d87 100644 --- a/app/javascript/flavours/glitch/components/domain.js +++ b/app/javascript/flavours/glitch/components/domain.js @@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; const messages = defineMessages({ - unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, + unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' }, }); export default @injectIntl diff --git a/app/javascript/flavours/glitch/components/intersection_observer_article.js b/app/javascript/flavours/glitch/components/intersection_observer_article.js index 03b3700df..88f29892e 100644 --- a/app/javascript/flavours/glitch/components/intersection_observer_article.js +++ b/app/javascript/flavours/glitch/components/intersection_observer_article.js @@ -45,7 +45,7 @@ export default class IntersectionObserverArticle extends React.Component { intersectionObserverWrapper.observe( id, this.node, - this.handleIntersection + this.handleIntersection, ); this.componentMounted = true; diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 9754c73dc..9472e34bf 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -23,7 +23,7 @@ const messages = defineMessages({ id: 'status.sensitive_toggle', }, toggle_visible: { - defaultMessage: 'Toggle visibility', + defaultMessage: 'Hide media', id: 'media_gallery.toggle_visible', }, warning: { diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js index 62965df94..46fd1e8c0 100644 --- a/app/javascript/flavours/glitch/components/poll.js +++ b/app/javascript/flavours/glitch/components/poll.js @@ -127,15 +127,7 @@ class Poll extends ImmutablePureComponent { return ( <li key={option.get('title')}> - {showResults && ( - <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}> - {({ width }) => - <span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} /> - } - </Motion> - )} - - <label className={classNames('poll__text', { selectable: !showResults })}> + <label className={classNames('poll__option', { selectable: !showResults })}> <input name='vote-options' type={poll.get('multiple') ? 'checkbox' : 'radio'} @@ -157,12 +149,26 @@ class Poll extends ImmutablePureComponent { /> )} {showResults && <span className='poll__number'> - {!!voted && <Icon id='check' className='poll__vote__mark' title={intl.formatMessage(messages.voted)} />} {Math.round(percent)}% </span>} - <span dangerouslySetInnerHTML={{ __html: titleEmojified }} /> + <span + className='poll__option__text' + dangerouslySetInnerHTML={{ __html: titleEmojified }} + /> + + {!!voted && <span className='poll__voted'> + <Icon id='check' className='poll__voted__mark' title={intl.formatMessage(messages.voted)} /> + </span>} </label> + + {showResults && ( + <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { stiffness: 180, damping: 12 }) }}> + {({ width }) => + <span className={classNames('poll__chart', { leading })} style={{ width: `${width}%` }} /> + } + </Motion> + )} </li> ); } diff --git a/app/javascript/flavours/glitch/containers/domain_container.js b/app/javascript/flavours/glitch/containers/domain_container.js index 52d5c1613..e92e102ab 100644 --- a/app/javascript/flavours/glitch/containers/domain_container.js +++ b/app/javascript/flavours/glitch/containers/domain_container.js @@ -6,7 +6,7 @@ import Domain from '../components/domain'; import { openModal } from '../actions/modal'; const messages = defineMessages({ - blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, + blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, }); const makeMapStateToProps = () => { diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 6b4aff616..fb0f165ff 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -30,8 +30,8 @@ const messages = defineMessages({ report: { id: 'account.report', defaultMessage: 'Report @{name}' }, share: { id: 'account.share', defaultMessage: 'Share @{name}\'s profile' }, media: { id: 'account.media', defaultMessage: 'Media' }, - blockDomain: { id: 'account.block_domain', defaultMessage: 'Hide everything from {domain}' }, - unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, + blockDomain: { id: 'account.block_domain', defaultMessage: 'Block domain {domain}' }, + unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' }, hideReblogs: { id: 'account.hide_reblogs', defaultMessage: 'Hide boosts from @{name}' }, showReblogs: { id: 'account.show_reblogs', defaultMessage: 'Show boosts from @{name}' }, pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, @@ -40,7 +40,7 @@ const messages = defineMessages({ favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, - domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' }, + domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' }, mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' }, unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' }, @@ -136,7 +136,7 @@ class Header extends ImmutablePureComponent { if (me !== account.get('id') && account.getIn(['relationship', 'muting'])) { info.push(<span className='relationship-tag'><FormattedMessage id='account.muted' defaultMessage='Muted' /></span>); } else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) { - info.push(<span className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain hidden' /></span>); + info.push(<span className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>); } if (me !== account.get('id')) { diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js index 033d92adf..49e91227f 100644 --- a/app/javascript/flavours/glitch/features/audio/index.js +++ b/app/javascript/flavours/glitch/features/audio/index.js @@ -199,8 +199,8 @@ class Audio extends React.PureComponent { <div className='video-player__controls active'> <div className='video-player__buttons-bar'> <div className='video-player__buttons left'> - <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> - <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> + <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> + <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> @@ -221,7 +221,7 @@ class Audio extends React.PureComponent { </div> <div className='video-player__buttons right'> - <button type='button' aria-label={intl.formatMessage(messages.download)}> + <button type='button' title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)}> <a className='video-player__download__icon' href={this.props.src} download> <Icon id={'download'} fixedWidth /> </a> diff --git a/app/javascript/flavours/glitch/features/blocks/index.js b/app/javascript/flavours/glitch/features/blocks/index.js index 9eb6fe02e..4992689ff 100644 --- a/app/javascript/flavours/glitch/features/blocks/index.js +++ b/app/javascript/flavours/glitch/features/blocks/index.js @@ -66,7 +66,7 @@ class Blocks extends ImmutablePureComponent { bindToDocument={!multiColumn} > {accountIds.map(id => - <AccountContainer key={id} id={id} /> + <AccountContainer key={id} id={id} />, )} </ScrollableList> </Column> 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 daacbb73f..3d736e83f 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -81,18 +81,6 @@ class ComposeForm extends ImmutablePureComponent { this.props.onChange(e.target.value); } - handleKeyDown = ({ ctrlKey, keyCode, metaKey, altKey }) => { - // We submit the status on control/meta + enter. - if (keyCode === 13 && (ctrlKey || metaKey)) { - this.handleSubmit(); - } - - // Submit the status with secondary visibility on alt + enter. - if (keyCode === 13 && altKey) { - this.handleSecondarySubmit(); - } - } - handleSubmit = (overriddenVisibility = null) => { const { textarea: { value }, uploadForm } = this; const { @@ -123,7 +111,7 @@ class ComposeForm extends ImmutablePureComponent { // Submit unless there are media with missing descriptions if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) { const firstWithoutDescription = media.find(item => !item.get('description')); - onMediaDescriptionConfirm(this.context.router ? this.context.router.history : null, firstWithoutDescription.get('id')); + onMediaDescriptionConfirm(this.context.router ? this.context.router.history : null, firstWithoutDescription.get('id'), overriddenVisibility); } else if (onSubmit) { if (onChangeVisibility && overriddenVisibility) { onChangeVisibility(overriddenVisibility); @@ -171,10 +159,20 @@ class ComposeForm extends ImmutablePureComponent { } // When the escape key is released, we focus the UI. - handleKeyUp = ({ key }) => { + handleKeyUp = ({ key, ctrlKey, keyCode, metaKey, altKey }) => { if (key === 'Escape') { document.querySelector('.ui').parentElement.focus(); } + + // We submit the status on control/meta + enter. + if (keyCode === 13 && (ctrlKey || metaKey)) { + this.handleSubmit(); + } + + // Submit the status with secondary visibility on alt + enter. + if (keyCode === 13 && altKey) { + this.handleSecondarySubmit(); + } } // Sets a reference to the textarea. @@ -307,7 +305,6 @@ class ComposeForm extends ImmutablePureComponent { placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={spoilerText} onChange={this.handleChangeSpoiler} - onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} disabled={!spoiler} ref={this.handleRefSpoilerText} @@ -328,9 +325,9 @@ class ComposeForm extends ImmutablePureComponent { disabled={isSubmitting} value={this.props.text} onChange={this.handleChange} + onKeyUp={this.handleKeyUp} suggestions={this.props.suggestions} onFocus={this.handleFocus} - onKeyDown={this.handleKeyDown} onSuggestionsFetchRequested={onFetchSuggestions} onSuggestionsClearRequested={onClearSuggestions} onSuggestionSelected={this.onSuggestionSelected} diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js index 92348b000..9e332aabd 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.js +++ b/app/javascript/flavours/glitch/features/compose/components/options.js @@ -34,7 +34,7 @@ const messages = defineMessages({ id: 'content-type.change', }, direct_long: { - defaultMessage: 'Post to mentioned users only', + defaultMessage: 'Visible for mentioned users only', id: 'privacy.direct.long', }, direct_short: { @@ -66,7 +66,7 @@ const messages = defineMessages({ id: 'compose.content-type.plain', }, private_long: { - defaultMessage: 'Post to followers only', + defaultMessage: 'Visible for followers only', id: 'privacy.private.long', }, private_short: { @@ -74,7 +74,7 @@ const messages = defineMessages({ id: 'privacy.private.short', }, public_long: { - defaultMessage: 'Post to public timelines', + defaultMessage: 'Visible for all, shown in public timelines', id: 'privacy.public.long', }, public_short: { @@ -94,7 +94,7 @@ const messages = defineMessages({ id: 'advanced_options.threaded_mode.short', }, unlisted_long: { - defaultMessage: 'Do not show in public timelines', + defaultMessage: 'Visible for all, but not in public timelines', id: 'privacy.unlisted.long', }, unlisted_short: { diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_form.js b/app/javascript/flavours/glitch/features/compose/components/poll_form.js index 3d818ea20..57fac10ac 100644 --- a/app/javascript/flavours/glitch/features/compose/components/poll_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.js @@ -62,7 +62,7 @@ class Option extends React.PureComponent { return ( <li> - <label className='poll__text editable'> + <label className='poll__option editable'> <span className={classNames('poll__input', { checkbox: isPollMultiple })} /> <AutosuggestInput @@ -143,6 +143,7 @@ class PollForm extends ImmutablePureComponent { <option value='true'>{intl.formatMessage(messages.multiple_choices)}</option> </select> + {/* eslint-disable-next-line jsx-a11y/no-onchange */} <select value={expiresIn} onChange={this.handleSelectDuration}> <option value={300}>{intl.formatMessage(messages.minutes, { number: 5 })}</option> <option value={1800}>{intl.formatMessage(messages.minutes, { number: 30 })}</option> diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js index 18e2b2f39..fcd2caf1b 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js @@ -114,11 +114,16 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(changeComposeVisibility(value)); }, - onMediaDescriptionConfirm(routerHistory, mediaId) { + onMediaDescriptionConfirm(routerHistory, mediaId, overriddenVisibility = null) { dispatch(openModal('CONFIRM', { message: intl.formatMessage(messages.missingDescriptionMessage), confirm: intl.formatMessage(messages.missingDescriptionConfirm), - onConfirm: () => dispatch(submitCompose(routerHistory)), + onConfirm: () => { + if (overriddenVisibility) { + dispatch(changeComposeVisibility(overriddenVisibility)); + }; + dispatch(submitCompose(routerHistory)); + }, secondary: intl.formatMessage(messages.missingDescriptionEdit), onSecondary: () => dispatch(openModal('FOCAL_POINT', { id: mediaId })), onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)), diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js index ba01f8d5c..47b92560d 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js @@ -195,7 +195,7 @@ class Conversation extends ImmutablePureComponent { return ( <HotKeys handlers={handlers}> <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex='0'> - <div className='conversation__avatar'> + <div className='conversation__avatar' onClick={this.handleClick} role='presentation'> <AvatarComposite accounts={accounts} size={48} /> </div> diff --git a/app/javascript/flavours/glitch/features/domain_blocks/index.js b/app/javascript/flavours/glitch/features/domain_blocks/index.js index cd105a49b..acce87d5a 100644 --- a/app/javascript/flavours/glitch/features/domain_blocks/index.js +++ b/app/javascript/flavours/glitch/features/domain_blocks/index.js @@ -13,8 +13,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; const messages = defineMessages({ - heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' }, - unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, + heading: { id: 'column.domain_blocks', defaultMessage: 'Blocked domains' }, + unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' }, }); const mapStateToProps = state => ({ @@ -54,7 +54,7 @@ class Blocks extends ImmutablePureComponent { ); } - const emptyMessage = <FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />; + const emptyMessage = <FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no blocked domains yet.' />; return ( <Column bindToDocument={!multiColumn} icon='minus-circle' heading={intl.formatMessage(messages.heading)}> @@ -67,7 +67,7 @@ class Blocks extends ImmutablePureComponent { bindToDocument={!multiColumn} > {domains.map(domain => - <DomainContainer key={domain} domain={domain} /> + <DomainContainer key={domain} domain={domain} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/favourites/index.js b/app/javascript/flavours/glitch/features/favourites/index.js index 953bf171f..bd6f782ce 100644 --- a/app/javascript/flavours/glitch/features/favourites/index.js +++ b/app/javascript/flavours/glitch/features/favourites/index.js @@ -88,7 +88,7 @@ class Favourites extends ImmutablePureComponent { bindToDocument={!multiColumn} > {accountIds.map(id => - <AccountContainer key={id} id={id} withNote={false} /> + <AccountContainer key={id} id={id} withNote={false} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/follow_requests/index.js b/app/javascript/flavours/glitch/features/follow_requests/index.js index 36770aace..efbe1a23c 100644 --- a/app/javascript/flavours/glitch/features/follow_requests/index.js +++ b/app/javascript/flavours/glitch/features/follow_requests/index.js @@ -11,6 +11,7 @@ import { fetchFollowRequests, expandFollowRequests } from 'flavours/glitch/actio import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; +import { me } from 'flavours/glitch/util/initial_state'; const messages = defineMessages({ heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }, @@ -19,6 +20,8 @@ const messages = defineMessages({ const mapStateToProps = state => ({ accountIds: state.getIn(['user_lists', 'follow_requests', 'items']), hasMore: !!state.getIn(['user_lists', 'follow_requests', 'next']), + locked: !!state.getIn(['accounts', me, 'locked']), + domain: state.getIn(['meta', 'domain']), }); export default @connect(mapStateToProps) @@ -30,6 +33,8 @@ class FollowRequests extends ImmutablePureComponent { dispatch: PropTypes.func.isRequired, hasMore: PropTypes.bool, accountIds: ImmutablePropTypes.list, + locked: PropTypes.bool, + domain: PropTypes.string, intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, }; @@ -43,7 +48,7 @@ class FollowRequests extends ImmutablePureComponent { }, 300, { leading: true }); render () { - const { intl, accountIds, hasMore, multiColumn } = this.props; + const { intl, accountIds, hasMore, multiColumn, locked, domain } = this.props; if (!accountIds) { return ( @@ -54,6 +59,15 @@ class FollowRequests extends ImmutablePureComponent { } const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />; + const unlockedPrependMessage = locked ? null : ( + <div className='follow_requests-unlocked_explanation'> + <FormattedMessage + id='follow_requests.unlocked_explanation' + defaultMessage='Even though your account is not locked, the {domain} staff thought you might want to review follow requests from these accounts manually.' + values={{ domain: domain }} + /> + </div> + ); return ( <Column bindToDocument={!multiColumn} name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}> @@ -65,9 +79,10 @@ class FollowRequests extends ImmutablePureComponent { hasMore={hasMore} emptyMessage={emptyMessage} bindToDocument={!multiColumn} + prepend={unlockedPrependMessage} > {accountIds.map(id => - <AccountAuthorizeContainer key={id} id={id} /> + <AccountAuthorizeContainer key={id} id={id} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/followers/index.js b/app/javascript/flavours/glitch/features/followers/index.js index c78dcc8e4..2b86cc805 100644 --- a/app/javascript/flavours/glitch/features/followers/index.js +++ b/app/javascript/flavours/glitch/features/followers/index.js @@ -105,7 +105,7 @@ class Followers extends ImmutablePureComponent { bindToDocument={!multiColumn} > {accountIds.map(id => - <AccountContainer key={id} id={id} withNote={false} /> + <AccountContainer key={id} id={id} withNote={false} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/following/index.js b/app/javascript/flavours/glitch/features/following/index.js index df7c19c22..cf374e494 100644 --- a/app/javascript/flavours/glitch/features/following/index.js +++ b/app/javascript/flavours/glitch/features/following/index.js @@ -105,7 +105,7 @@ class Following extends ImmutablePureComponent { bindToDocument={!multiColumn} > {accountIds.map(id => - <AccountContainer key={id} id={id} withNote={false} /> + <AccountContainer key={id} id={id} withNote={false} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js index e34c9009b..acaa78fe3 100644 --- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js +++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js @@ -95,6 +95,10 @@ class Content extends ImmutablePureComponent { } else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) { link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false); } else { + let status = this.props.announcement.get('statuses').find(item => link.href === item.get('url')); + if (status) { + link.addEventListener('click', this.onStatusClick.bind(this, status), false); + } link.setAttribute('title', link.href); link.classList.add('unhandled-link'); } @@ -120,6 +124,13 @@ class Content extends ImmutablePureComponent { } } + onStatusClick = (status, e) => { + if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) { + e.preventDefault(); + this.context.router.history.push(`/statuses/${status.get('id')}`); + } + } + handleEmojiMouseEnter = ({ target }) => { target.src = target.getAttribute('data-original'); } @@ -367,6 +378,14 @@ class Announcements extends ImmutablePureComponent { index: 0, }; + static getDerivedStateFromProps(props, state) { + if (props.announcements.size > 0 && state.index >= props.announcements.size) { + return { index: props.announcements.size - 1 }; + } else { + return null; + } + } + componentDidMount () { this._markAnnouncementAsRead(); } diff --git a/app/javascript/flavours/glitch/features/lists/index.js b/app/javascript/flavours/glitch/features/lists/index.js index adde3dd5c..e384f301b 100644 --- a/app/javascript/flavours/glitch/features/lists/index.js +++ b/app/javascript/flavours/glitch/features/lists/index.js @@ -73,7 +73,7 @@ class Lists extends ImmutablePureComponent { bindToDocument={!multiColumn} > {lists.map(list => - <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} /> + <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/mutes/index.js b/app/javascript/flavours/glitch/features/mutes/index.js index c27a530d5..62dccd971 100644 --- a/app/javascript/flavours/glitch/features/mutes/index.js +++ b/app/javascript/flavours/glitch/features/mutes/index.js @@ -66,7 +66,7 @@ class Mutes extends ImmutablePureComponent { bindToDocument={!multiColumn} > {accountIds.map(id => - <AccountContainer key={id} id={id} /> + <AccountContainer key={id} id={id} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/reblogs/index.js b/app/javascript/flavours/glitch/features/reblogs/index.js index 258070358..d88916d19 100644 --- a/app/javascript/flavours/glitch/features/reblogs/index.js +++ b/app/javascript/flavours/glitch/features/reblogs/index.js @@ -89,7 +89,7 @@ class Reblogs extends ImmutablePureComponent { bindToDocument={!multiColumn} > {accountIds.map(id => - <AccountContainer key={id} id={id} withNote={false} /> + <AccountContainer key={id} id={id} withNote={false} />, )} </ScrollableList> </Column> diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 7352dc6b4..e3ee7dada 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -90,7 +90,7 @@ export default class Card extends React.PureComponent { }, }, ]), - 0 + 0, ); }; diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index c4ac8f0a6..180b11a54 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -198,8 +198,8 @@ export default class DetailedStatus extends ImmutablePureComponent { reblogIcon = 'lock'; } - if (status.get('visibility') === 'private') { - reblogLink = <Icon id={reblogIcon} />; + if (!['unlisted', 'public'].includes(status.get('visibility'))) { + reblogLink = null; } else if (this.context.router) { reblogLink = ( <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'> @@ -265,7 +265,7 @@ export default class DetailedStatus extends ImmutablePureComponent { <div className='detailed-status__meta'> <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'> <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> - </a>{applicationLink} · {reblogLink} · {favouriteLink} · <VisibilityIcon visibility={status.get('visibility')} /> + </a>{applicationLink} {!!reblogLink && ['·', reblogLink]} · {favouriteLink} · <VisibilityIcon visibility={status.get('visibility')} /> </div> </div> </div> diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 1b5fbce9f..6a8952c8d 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -488,8 +488,9 @@ class Video extends React.PureComponent { <div className='video-player__buttons-bar'> <div className='video-player__buttons left'> - <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay} autoFocus={detailed}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> - <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> + <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay} autoFocus={detailed}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button> + <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button> + <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> @@ -512,16 +513,11 @@ class Video extends React.PureComponent { </div> <div className='video-player__buttons right'> - {(!onCloseVideo && !editable && !fullscreen) && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>} - {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>} - {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>} - <button type='button' aria-label={intl.formatMessage(messages.download)}> - <a className='video-player__download__icon' href={this.props.src} download> - <Icon id={'download'} fixedWidth /> - </a> - </button> - <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button> - + {(!onCloseVideo && !editable && !fullscreen) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>} + {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><Icon id='expand' fixedWidth /></button>} + {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><Icon id='compress' fixedWidth /></button>} + <button type='button' title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)}><a className='video-player__download__icon' href={this.props.src} download><Icon id={'download'} fixedWidth /></a></button> + <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><Icon id={fullscreen ? 'compress' : 'arrows-alt'} fixedWidth /></button> </div> </div> </div> diff --git a/app/javascript/flavours/glitch/middleware/errors.js b/app/javascript/flavours/glitch/middleware/errors.js index 212c1f4ad..ade529a4e 100644 --- a/app/javascript/flavours/glitch/middleware/errors.js +++ b/app/javascript/flavours/glitch/middleware/errors.js @@ -8,7 +8,7 @@ export default function errorsMiddleware() { const isFail = new RegExp(`${defaultFailSuffix}$`, 'g'); if (action.type.match(isFail)) { - dispatch(showAlertForError(action.error)); + dispatch(showAlertForError(action.error, action.skipNotFound)); } } diff --git a/app/javascript/flavours/glitch/packs/common.js b/app/javascript/flavours/glitch/packs/common.js index 94a4e6ee4..1fedc890a 100644 --- a/app/javascript/flavours/glitch/packs/common.js +++ b/app/javascript/flavours/glitch/packs/common.js @@ -1,4 +1,4 @@ -import { start } from 'rails-ujs'; +import { start } from '@rails/ujs'; start(); diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index d8a97704f..e5a567205 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -5,7 +5,7 @@ import loadKeyboardExtensions from 'flavours/glitch/util/load_keyboard_extension function main() { const IntlMessageFormat = require('intl-messageformat').default; const { timeAgoString } = require('flavours/glitch/components/relative_timestamp'); - const { delegate } = require('rails-ujs'); + const { delegate } = require('@rails/ujs'); const emojify = require('flavours/glitch/util/emoji').default; const { getLocale } = require('locales'); const { messages } = getLocale(); @@ -97,6 +97,28 @@ function main() { delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original')); delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static')); + + delegate(document, '.status__content__spoiler-link', 'click', function() { + const contentEl = this.parentNode.parentNode.querySelector('.e-content'); + + if (contentEl.style.display === 'block') { + contentEl.style.display = 'none'; + this.parentNode.style.marginBottom = 0; + this.textContent = (new IntlMessageFormat(messages['status.show_more'] || 'Show more', locale)).format(); + } else { + contentEl.style.display = 'block'; + this.parentNode.style.marginBottom = null; + this.textContent = (new IntlMessageFormat(messages['status.show_less'] || 'Show less', locale)).format(); + } + + return false; + }); + + [].forEach.call(document.querySelectorAll('.status__content__spoiler-link'), (spoilerLink) => { + const contentEl = spoilerLink.parentNode.parentNode.querySelector('.e-content'); + const message = (contentEl.style.display === 'block') ? (messages['status.show_less'] || 'Show less') : (messages['status.show_more'] || 'Show more'); + spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format(); + }); }); delegate(document, '.sidebar__toggle__icon', 'click', () => { diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js index edf1b82e0..8a9f23505 100644 --- a/app/javascript/flavours/glitch/packs/settings.js +++ b/app/javascript/flavours/glitch/packs/settings.js @@ -3,7 +3,7 @@ import ready from 'flavours/glitch/util/ready'; import loadKeyboardExtensions from 'flavours/glitch/util/load_keyboard_extensions'; function main() { - const { delegate } = require('rails-ujs'); + const { delegate } = require('@rails/ujs'); delegate(document, '.sidebar__toggle__icon', 'click', () => { const target = document.querySelector('.sidebar ul'); diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js index 92a9859d9..f758d5c93 100644 --- a/app/javascript/flavours/glitch/reducers/compose.js +++ b/app/javascript/flavours/glitch/reducers/compose.js @@ -344,7 +344,6 @@ export default function compose(state = initialState, action) { }); case COMPOSE_SPOILERNESS_CHANGE: return state.withMutations(map => { - map.set('spoiler_text', ''); map.set('spoiler', !state.get('spoiler')); map.set('idempotencyKey', uuid()); diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js index d0eb7bb5a..31d9611a3 100644 --- a/app/javascript/flavours/glitch/reducers/notifications.js +++ b/app/javascript/flavours/glitch/reducers/notifications.js @@ -91,11 +91,11 @@ const expandNormalizedNotifications = (state, notifications, next, isLoadingRece mutable.update(usePendingItems ? 'pendingItems' : 'items', list => { const lastIndex = 1 + list.findLastIndex( - item => item !== null && (compareId(item.get('id'), items.last().get('id')) > 0 || item.get('id') === items.last().get('id')) + item => item !== null && (compareId(item.get('id'), items.last().get('id')) > 0 || item.get('id') === items.last().get('id')), ); const firstIndex = 1 + list.take(lastIndex).findLastIndex( - item => item !== null && compareId(item.get('id'), items.first().get('id')) > 0 + item => item !== null && compareId(item.get('id'), items.first().get('id')) > 0, ); return list.take(firstIndex).concat(items, list.skip(lastIndex)); diff --git a/app/javascript/flavours/glitch/reducers/timelines.js b/app/javascript/flavours/glitch/reducers/timelines.js index 1ea9ed645..be7b2441b 100644 --- a/app/javascript/flavours/glitch/reducers/timelines.js +++ b/app/javascript/flavours/glitch/reducers/timelines.js @@ -53,7 +53,7 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is return oldIds.take(firstIndex + 1).concat( isPartial && oldIds.get(firstIndex) !== null ? newIds.unshift(null) : newIds, - oldIds.skip(lastIndex) + oldIds.skip(lastIndex), ); }); } @@ -171,7 +171,7 @@ export default function timelines(state = initialState, action) { return state.update( action.timeline, initialTimeline, - map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items) + map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items), ); default: return state; diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index ab7dac66a..4a3303c36 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -146,7 +146,7 @@ export const makeGetStatus = () => { map.set('account', accountBase); map.set('filtered', filtered); }); - } + }, ); }; diff --git a/app/javascript/flavours/glitch/store/configureStore.js b/app/javascript/flavours/glitch/store/configureStore.js index 7e7472841..e18af842f 100644 --- a/app/javascript/flavours/glitch/store/configureStore.js +++ b/app/javascript/flavours/glitch/store/configureStore.js @@ -10,6 +10,6 @@ export default function configureStore() { thunk, loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }), errorsMiddleware(), - soundsMiddleware() + soundsMiddleware(), ), window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f)); }; diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 26a98c66f..0d24da4dd 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -418,6 +418,11 @@ body, } } + &--with-select strong { + display: block; + margin-bottom: 10px; + } + a { display: inline-block; color: $darker-text-color; @@ -567,19 +572,22 @@ body, } .log-entry { - margin-bottom: 20px; line-height: 20px; + padding: 15px 0; + background: $ui-base-color; + border-bottom: 1px solid lighten($ui-base-color, 4%); + + &:last-child { + border-bottom: 0; + } &__header { display: flex; justify-content: flex-start; align-items: center; - padding: 10px; - background: $ui-base-color; color: $darker-text-color; - border-radius: 4px 4px 0 0; font-size: 14px; - position: relative; + padding: 0 10px; } &__avatar { @@ -606,44 +614,6 @@ body, color: $dark-text-color; } - &__extras { - background: lighten($ui-base-color, 6%); - border-radius: 0 0 4px 4px; - padding: 10px; - color: $darker-text-color; - font-family: $font-monospace, monospace; - font-size: 12px; - word-wrap: break-word; - min-height: 20px; - } - - &__icon { - font-size: 28px; - margin-right: 10px; - color: $dark-text-color; - } - - &__icon__overlay { - position: absolute; - top: 10px; - right: 10px; - width: 10px; - height: 10px; - border-radius: 50%; - - &.positive { - background: $success-green; - } - - &.negative { - background: lighten($error-red, 12%); - } - - &.neutral { - background: $ui-highlight-color; - } - } - a, .username, .target { @@ -651,18 +621,6 @@ body, text-decoration: none; font-weight: 500; } - - .diff-old { - color: lighten($error-red, 12%); - } - - .diff-neutral { - color: $secondary-text-color; - } - - .diff-new { - color: $success-green; - } } a.name-tag, diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 6305e2a4d..491ceb6ec 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -51,7 +51,6 @@ @include avatar-radius; overflow: hidden; position: relative; - cursor: default; & div { @include avatar-radius; diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index eab6c728b..52feefd3c 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -1,5 +1,6 @@ .announcements__item__content { word-wrap: break-word; + overflow-y: auto; .emojione { width: 20px; @@ -69,17 +70,21 @@ box-sizing: border-box; width: 100%; padding: 15px; - padding-right: 15px + 18px; position: relative; font-size: 15px; line-height: 20px; word-wrap: break-word; font-weight: 400; + max-height: 50vh; + overflow: hidden; + display: flex; + flex-direction: column; &__range { display: block; font-weight: 500; margin-bottom: 10px; + padding-right: 18px; } &__unread { diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 525dcaf90..3269638eb 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -452,7 +452,8 @@ } .empty-column-indicator, -.error-column { +.error-column, +.follow_requests-unlocked_explanation { color: $dark-text-color; background: $ui-base-color; text-align: center; @@ -482,6 +483,11 @@ } } +.follow_requests-unlocked_explanation { + background: darken($ui-base-color, 4%); + contain: initial; +} + .error-column { flex-direction: column; } diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 943776010..460f75c1f 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -3,8 +3,8 @@ .emoji-picker-dropdown { position: absolute; - right: 5px; - top: 5px; + top: 0; + right: 0; ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index 160e9d811..9dfee346a 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -72,10 +72,7 @@ .emoji-button { display: block; - font-size: 24px; - line-height: 24px; - margin-left: 2px; - width: 24px; + padding: 5px 5px 2px 2px; outline: 0; cursor: pointer; @@ -91,7 +88,6 @@ margin: 0; width: 22px; height: 22px; - margin-top: 2px; } &:hover, diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index d97ab436d..50cea8b26 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1515,6 +1515,7 @@ padding: 10px; padding-top: 12px; position: relative; + cursor: pointer; } &__unread { diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 39bfaae9a..3cb076191 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -62,12 +62,6 @@ } .media-gallery__gifv { - &.autoplay { - .media-gallery__gifv__label { - display: none; - } - } - &:hover { .media-gallery__gifv__label { opacity: 1; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index fa26c4706..50b7f2a72 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -331,13 +331,11 @@ } .display-name { + color: $light-text-color; + strong { color: $inverted-text-color; } - - span { - color: $lighter-text-color; - } } .status__content { diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.scss index 9c86cca58..44338338f 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.scss @@ -14,20 +14,18 @@ } &__chart { - position: absolute; - top: 0; - left: 0; - height: 100%; - display: inline-block; border-radius: 4px; - background: darken($ui-primary-color, 14%); + display: block; + background: darken($ui-primary-color, 5%); + height: 5px; + min-width: 1%; &.leading { background: $ui-highlight-color; } } - &__text { + &__option { position: relative; display: flex; padding: 6px 0; @@ -35,6 +33,13 @@ cursor: default; overflow: hidden; + &__text { + display: inline-block; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: calc(100% - 45px - 25px); + } + input[type=radio], input[type=checkbox] { display: none; @@ -102,8 +107,8 @@ &:active, &:focus, &:hover { + border-color: lighten($valid-value-color, 15%); border-width: 4px; - background: none; } &::-moz-focus-inner { @@ -119,19 +124,18 @@ &__number { display: inline-block; - width: 52px; + width: 45px; font-weight: 700; - padding: 0 10px; - padding-left: 8px; - text-align: right; - margin-top: auto; - margin-bottom: auto; - flex: 0 0 52px; + flex: 0 0 45px; } - &__vote__mark { - float: left; - line-height: 18px; + &__voted { + padding: 0 5px; + display: inline-block; + + &__mark { + font-size: 18px; + } } &__footer { @@ -208,7 +212,7 @@ display: flex; align-items: center; - .poll__text { + .poll__option { flex: 0 0 auto; width: calc(100% - (23px + 6px)); margin-right: 6px; diff --git a/app/javascript/flavours/glitch/util/log_out.js b/app/javascript/flavours/glitch/util/log_out.js index 8e1659293..42dcee03e 100644 --- a/app/javascript/flavours/glitch/util/log_out.js +++ b/app/javascript/flavours/glitch/util/log_out.js @@ -1,4 +1,4 @@ -import Rails from 'rails-ujs'; +import Rails from '@rails/ujs'; import { signOutLink } from 'flavours/glitch/util/backend_links'; export const logOut = () => { |