diff options
6 files changed, 54 insertions, 11 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 449532ea4..3a22f165b 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')) { + media = ( + <Card + onOpenMedia={this.props.onOpenMedia} + card={status.get('card')} + compact + /> + ); + //TODO: set mediaIcon? } // Here we prepare extra data-* attributes for CSS selectors. diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index b52f3c4fa..9a87f7a3f 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.boolean, }; static defaultProps = { maxDescription: 50, + compact: false, }; state = { @@ -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 ratio = compact ? 16 / 9 : card.get('width') / card.get('height'); const height = card.get('width') > card.get('height') ? (width / ratio) : (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/containers/card_container.js b/app/javascript/flavours/glitch/features/status/containers/card_container.js index a97404de1..6170d9fd8 100644 --- a/app/javascript/flavours/glitch/features/status/containers/card_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/card_container.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import Card from '../components/card'; const mapStateToProps = (state, { statusId }) => ({ - card: state.getIn(['cards', statusId], null), + card: state.getIn(['statuses', statusId, 'card'], null), }); export default connect(mapStateToProps)(Card); 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/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index 617d96e5d..4c6387461 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -24,6 +24,9 @@ import { STATUS_UNMUTE_SUCCESS, } from 'flavours/glitch/actions/statuses'; import { + STATUS_CARD_FETCH_SUCCESS +} from 'flavours/glitch/actions/cards'; +import { TIMELINE_UPDATE, TIMELINE_DELETE, TIMELINE_EXPAND_SUCCESS, @@ -143,6 +146,8 @@ export default function statuses(state = initialState, action) { return normalizeStatuses(state, action.statuses); case TIMELINE_DELETE: return deleteStatus(state, action.id, action.references); + case STATUS_CARD_FETCH_SUCCESS: + return state.setIn([action.id, 'card'], fromJS(action.card)); default: return state; } 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; |