diff options
Diffstat (limited to 'app/javascript/flavours')
17 files changed, 141 insertions, 119 deletions
diff --git a/app/javascript/flavours/glitch/actions/cards.js b/app/javascript/flavours/glitch/actions/cards.js deleted file mode 100644 index c897daf58..000000000 --- a/app/javascript/flavours/glitch/actions/cards.js +++ /dev/null @@ -1,52 +0,0 @@ -import api from 'flavours/glitch/util/api'; - -export const STATUS_CARD_FETCH_REQUEST = 'STATUS_CARD_FETCH_REQUEST'; -export const STATUS_CARD_FETCH_SUCCESS = 'STATUS_CARD_FETCH_SUCCESS'; -export const STATUS_CARD_FETCH_FAIL = 'STATUS_CARD_FETCH_FAIL'; - -export function fetchStatusCard(id) { - return (dispatch, getState) => { - if (getState().getIn(['cards', id], null) !== null) { - return; - } - - dispatch(fetchStatusCardRequest(id)); - - api(getState).get(`/api/v1/statuses/${id}/card`).then(response => { - if (!response.data.url) { - return; - } - - dispatch(fetchStatusCardSuccess(id, response.data)); - }).catch(error => { - dispatch(fetchStatusCardFail(id, error)); - }); - }; -}; - -export function fetchStatusCardRequest(id) { - return { - type: STATUS_CARD_FETCH_REQUEST, - id, - skipLoading: true, - }; -}; - -export function fetchStatusCardSuccess(id, card) { - return { - type: STATUS_CARD_FETCH_SUCCESS, - id, - card, - skipLoading: true, - }; -}; - -export function fetchStatusCardFail(id, error) { - return { - type: STATUS_CARD_FETCH_FAIL, - id, - error, - skipLoading: true, - skipAlert: true, - }; -}; diff --git a/app/javascript/flavours/glitch/actions/statuses.js b/app/javascript/flavours/glitch/actions/statuses.js index fa8845002..6183f3c03 100644 --- a/app/javascript/flavours/glitch/actions/statuses.js +++ b/app/javascript/flavours/glitch/actions/statuses.js @@ -1,7 +1,6 @@ import api from 'flavours/glitch/util/api'; import { deleteFromTimelines } from './timelines'; -import { fetchStatusCard } from './cards'; export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST'; export const STATUS_FETCH_SUCCESS = 'STATUS_FETCH_SUCCESS'; @@ -38,7 +37,6 @@ export function fetchStatus(id) { const skipLoading = getState().getIn(['statuses', id], null) !== null; dispatch(fetchContext(id)); - dispatch(fetchStatusCard(id)); if (skipLoading) { return; diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 449532ea4..9ff53485e 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -7,6 +7,7 @@ import StatusIcons from './status_icons'; import StatusContent from './status_content'; import StatusActionBar from './status_action_bar'; import AttachmentList from './attachment_list'; +import Card from '../features/status/components/card'; import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { MediaGallery, Video } from 'flavours/glitch/util/async-components'; @@ -477,6 +478,15 @@ export default class Status extends ImmutablePureComponent { if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) { background = attachments.getIn([0, 'preview_url']); } + } else if (status.get('card') && settings.get('inline_preview_cards')) { + media = ( + <Card + onOpenMedia={this.props.onOpenMedia} + card={status.get('card')} + compact + /> + ); + mediaIcon = 'link'; } // Here we prepare extra data-* attributes for CSS selectors. diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index c1897cc33..ce1ae50e4 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -8,7 +8,7 @@ import { openModal } from 'flavours/glitch/actions/modal'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { me } from 'flavours/glitch/util/initial_state'; +import { me, invitesEnabled, version } from 'flavours/glitch/util/initial_state'; import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; import { List as ImmutableList } from 'immutable'; import { createSelector } from 'reselect'; @@ -163,26 +163,24 @@ export default class GettingStarted extends ImmutablePureComponent { </div> <div className='getting-started__footer'> - <div className='static-content getting-started'> - <p> - <a href='https://docs.joinmastodon.org' target='_blank'> - <FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /> - </a> • - <a href='https://joinmastodon.org/apps' target='_blank' rel='noopener'> - <FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /> - </a> - </p> - <p> - <FormattedMessage - id='getting_started.open_source_notice' - defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.' - values={{ - github: <a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc/mastodon</a>, - Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a>, - }} - /> - </p> - </div> + <ul> + <li><a href='https://bridge.joinmastodon.org/' target='_blank'><FormattedMessage id='getting_started.find_friends' defaultMessage='Find friends from Twitter' /></a> · </li> + {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>} + <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this instance' /></a> · </li> + <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li> + <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li> + <li><a href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a></li> + </ul> + + <p> + <FormattedMessage + id='getting_started.open_source_notice' + defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.' + values={{ + github: <span><a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc/mastodon</a> (v{version})</span>, + Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a> }} + /> + </p> </div> </div> </Column> diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 4f1b8525f..6defdfbb6 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -304,6 +304,14 @@ export default class LocalSettingsPage extends React.PureComponent { > <FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' /> </LocalSettingsPageItem> + <LocalSettingsPageItem + settings={settings} + item={['inline_preview_cards']} + id='mastodon-settings--inline-preview-cards' + onChange={onChange} + > + <FormattedMessage id='settings.inline_preview_cards' defaultMessage='Inline preview cards for external links' /> + </LocalSettingsPageItem> </div> ), ]; diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index b52f3c4fa..743fe779a 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -59,10 +59,12 @@ export default class Card extends React.PureComponent { card: ImmutablePropTypes.map, maxDescription: PropTypes.number, onOpenMedia: PropTypes.func.isRequired, + compact: PropTypes.bool, }; static defaultProps = { maxDescription: 50, + compact: false, }; state = { @@ -118,7 +120,7 @@ export default class Card extends React.PureComponent { const content = { __html: addAutoPlay(card.get('html')) }; const { width } = this.state; const ratio = card.get('width') / card.get('height'); - const height = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio); + const height = width / ratio; return ( <div @@ -131,25 +133,25 @@ export default class Card extends React.PureComponent { } render () { - const { card, maxDescription } = this.props; - const { width, embedded } = this.state; + const { card, maxDescription, compact } = this.props; + const { width, embedded } = this.state; if (card === null) { return null; } const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); - const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width) || card.get('type') !== 'link'; - const className = classnames('status-card', { horizontal }); + const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded; const interactive = card.get('type') !== 'link'; + const className = classnames('status-card', { horizontal, compact, interactive }); const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>; const ratio = card.get('width') / card.get('height'); - const height = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio); + const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const description = ( <div className='status-card__content'> {title} - {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} + {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} <span className='status-card__host'>{provider}</span> </div> ); @@ -174,7 +176,7 @@ export default class Card extends React.PureComponent { <div className='status-card__actions'> <div> <button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button> - <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a> + {horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a>} </div> </div> </div> @@ -184,7 +186,7 @@ export default class Card extends React.PureComponent { return ( <div className={className} ref={this.setRef}> {embed} - {description} + {!compact && description} </div> ); } else if (card.get('image')) { 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 2e61e6d8c..1fe0c069d 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -8,7 +8,7 @@ import MediaGallery from 'flavours/glitch/components/media_gallery'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import { Link } from 'react-router-dom'; import { FormattedDate, FormattedNumber } from 'react-intl'; -import CardContainer from '../containers/card_container'; +import Card from './card'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Video from 'flavours/glitch/features/video'; import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon'; @@ -83,7 +83,7 @@ export default class DetailedStatus extends ImmutablePureComponent { ); mediaIcon = 'picture-o'; } - } else media = <CardContainer onOpenMedia={this.props.onOpenMedia} statusId={status.get('id')} />; + } else media = <Card onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />; if (status.get('application')) { applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>; diff --git a/app/javascript/flavours/glitch/features/status/containers/card_container.js b/app/javascript/flavours/glitch/features/status/containers/card_container.js deleted file mode 100644 index a97404de1..000000000 --- a/app/javascript/flavours/glitch/features/status/containers/card_container.js +++ /dev/null @@ -1,8 +0,0 @@ -import { connect } from 'react-redux'; -import Card from '../components/card'; - -const mapStateToProps = (state, { statusId }) => ({ - card: state.getIn(['cards', statusId], null), -}); - -export default connect(mapStateToProps)(Card); diff --git a/app/javascript/flavours/glitch/reducers/accounts.js b/app/javascript/flavours/glitch/reducers/accounts.js index c2f016a87..860c13534 100644 --- a/app/javascript/flavours/glitch/reducers/accounts.js +++ b/app/javascript/flavours/glitch/reducers/accounts.js @@ -72,7 +72,7 @@ const normalizeAccount = (state, account) => { delete account.statuses_count; const emojiMap = makeEmojiMap(account); - const displayName = account.display_name.length === 0 ? account.username : account.display_name; + const displayName = account.display_name.trim().length === 0 ? account.username : account.display_name; account.display_name_html = emojify(escapeTextContentForBrowser(displayName), emojiMap); account.note_emojified = emojify(account.note, emojiMap); diff --git a/app/javascript/flavours/glitch/reducers/cards.js b/app/javascript/flavours/glitch/reducers/cards.js deleted file mode 100644 index 92ecfd086..000000000 --- a/app/javascript/flavours/glitch/reducers/cards.js +++ /dev/null @@ -1,14 +0,0 @@ -import { STATUS_CARD_FETCH_SUCCESS } from 'flavours/glitch/actions/cards'; - -import { Map as ImmutableMap, fromJS } from 'immutable'; - -const initialState = ImmutableMap(); - -export default function cards(state = initialState, action) { - switch(action.type) { - case STATUS_CARD_FETCH_SUCCESS: - return state.set(action.id, fromJS(action.card)); - default: - return state; - } -}; diff --git a/app/javascript/flavours/glitch/reducers/index.js b/app/javascript/flavours/glitch/reducers/index.js index 218a5ac8f..ae9e2b639 100644 --- a/app/javascript/flavours/glitch/reducers/index.js +++ b/app/javascript/flavours/glitch/reducers/index.js @@ -15,7 +15,6 @@ import settings from './settings'; import local_settings from './local_settings'; import push_notifications from './push_notifications'; import status_lists from './status_lists'; -import cards from './cards'; import mutes from './mutes'; import reports from './reports'; import contexts from './contexts'; @@ -47,7 +46,6 @@ const reducers = { settings, local_settings, push_notifications, - cards, mutes, reports, contexts, diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index 19233a963..bf42810e9 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -15,6 +15,7 @@ const initialState = ImmutableMap({ always_show_spoilers_field: false, confirm_missing_media_description: false, preselect_on_reply: true, + inline_preview_cards: true, content_warnings : ImmutableMap({ auto_unfold : false, filter : null, diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index cbf968ec4..7d71f0d1d 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -732,6 +732,42 @@ a { color: $dark-text-color; } + + &__footer { + flex: 0 0 auto; + padding: 10px; + padding-top: 20px; + + ul { + margin-bottom: 10px; + } + + ul li { + display: inline; + } + + p { + color: $dark-text-color; + font-size: 13px; + margin-bottom: 20px; + + a { + color: $dark-text-color; + text-decoration: underline; + } + } + + a { + text-decoration: none; + color: $darker-text-color; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } } .column-link__badge { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index aa49aba55..38ead06cf 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -731,6 +731,9 @@ a.status-card { display: block; margin-top: 5px; font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .status-card__image { @@ -755,6 +758,31 @@ a.status-card { } } +.status-card.compact { + border-color: lighten($ui-base-color, 4%); + + &.interactive { + border: 0; + } + + .status-card__content { + padding: 8px; + padding-top: 10px; + } + + .status-card__title { + white-space: nowrap; + } + + .status-card__image { + flex: 0 0 60px; + } +} + +a.status-card.compact:hover { + background-color: lighten($ui-base-color, 4%); +} + .status-card__image-image { border-radius: 4px 0 0 4px; display: block; diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss index d4618440d..9e0a93ec2 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.scss @@ -210,12 +210,16 @@ body.rtl { margin-left: 5px; } - .simple_form .check_boxes .checkbox label, - .simple_form .input.with_label.boolean label.checkbox { + .simple_form .check_boxes .checkbox label { padding-left: 0; padding-right: 25px; } + .simple_form .input.with_label.boolean label.checkbox { + padding-left: 25px; + padding-right: 0; + } + .simple_form .check_boxes .checkbox input[type="checkbox"], .simple_form .input.boolean input[type="checkbox"] { left: auto; @@ -381,4 +385,9 @@ body.rtl { padding-left: 0; padding-right: 10px; } + + .simple_form .input.radio_buttons .radio > label input { + left: auto; + right: 0; + } } diff --git a/app/javascript/flavours/glitch/styles/stream_entries.scss b/app/javascript/flavours/glitch/styles/stream_entries.scss index 80e2d0ca0..45dcf70ed 100644 --- a/app/javascript/flavours/glitch/styles/stream_entries.scss +++ b/app/javascript/flavours/glitch/styles/stream_entries.scss @@ -175,12 +175,6 @@ .embed, .public-layout { .status { - .status__info .status__display-name { - display: block; - max-width: 100%; - padding-right: 25px; - } - .status__info { font-size: 15px; display: initial; @@ -200,6 +194,10 @@ max-width: 100%; padding-right: 25px; margin: initial; + + .display-name strong { + display: inline; + } } .status__avatar { @@ -210,3 +208,11 @@ } } } + +.rtl { + .embed, .public-layout { + .status .status__relative-time { + float: left; + } + } +} diff --git a/app/javascript/flavours/glitch/util/initial_state.js b/app/javascript/flavours/glitch/util/initial_state.js index 0aaf65904..d12c05c0d 100644 --- a/app/javascript/flavours/glitch/util/initial_state.js +++ b/app/javascript/flavours/glitch/util/initial_state.js @@ -22,6 +22,8 @@ export const deleteModal = getMeta('delete_modal'); export const me = getMeta('me'); export const searchEnabled = getMeta('search_enabled'); export const maxChars = (initialState && initialState.max_toot_chars) || 500; +export const invitesEnabled = getMeta('invites_enabled'); +export const version = getMeta('version'); export const isStaff = getMeta('is_staff'); export default initialState; |