From ac9780b8449527a6a7ab5e2031eeb37f7f2291e7 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 29 Oct 2018 14:44:04 +0100 Subject: [Glitch] Include preview cards in status entity in REST API Port 795f0107d23c1c9bd039f6449fa1e094ab7653a7 to glitch-soc --- .../flavours/glitch/features/status/components/card.js | 18 ++++++++++-------- .../features/status/containers/card_container.js | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) (limited to 'app/javascript/flavours/glitch/features') 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 ? {card.get('title')} : {card.get('title')}; - 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 = (
{title} - {!horizontal &&

{trim(card.get('description') || '', maxDescription)}

} + {!(horizontal || compact) &&

{trim(card.get('description') || '', maxDescription)}

} {provider}
); @@ -174,7 +176,7 @@ export default class Card extends React.PureComponent {
- + {horizontal && }
@@ -184,7 +186,7 @@ export default class Card extends React.PureComponent { return (
{embed} - {description} + {!compact && description}
); } 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); -- cgit From b21615e9579a6f33ed1cdf6fc37fc8a1ff24a0d5 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 29 Oct 2018 14:56:53 +0100 Subject: [Glitch] Fix dimensions of preview cards, fix crash in web UI, fix warning Port 9c38c5daa3d7298f02c763a84a74680dcc89dac2 to glitch-soc --- app/javascript/flavours/glitch/actions/cards.js | 52 ---------------------- app/javascript/flavours/glitch/actions/statuses.js | 2 - .../glitch/features/status/components/card.js | 8 ++-- .../features/status/components/detailed_status.js | 4 +- .../features/status/containers/card_container.js | 8 ---- app/javascript/flavours/glitch/reducers/cards.js | 14 ------ .../flavours/glitch/reducers/statuses.js | 5 --- 7 files changed, 6 insertions(+), 87 deletions(-) delete mode 100644 app/javascript/flavours/glitch/actions/cards.js delete mode 100644 app/javascript/flavours/glitch/features/status/containers/card_container.js delete mode 100644 app/javascript/flavours/glitch/reducers/cards.js (limited to 'app/javascript/flavours/glitch/features') 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/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 9a87f7a3f..743fe779a 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -59,7 +59,7 @@ export default class Card extends React.PureComponent { card: ImmutablePropTypes.map, maxDescription: PropTypes.number, onOpenMedia: PropTypes.func.isRequired, - compact: PropTypes.boolean, + compact: PropTypes.bool, }; static defaultProps = { @@ -120,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 (
{card.get('title')} : {card.get('title')}; - const ratio = compact ? 16 / 9 : card.get('width') / card.get('height'); - const height = card.get('width') > card.get('height') ? (width / ratio) : (width * ratio); + const ratio = card.get('width') / card.get('height'); + const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const description = (
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 = ; + } else media = ; if (status.get('application')) { applicationLink = · {status.getIn(['application', 'name'])}; 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 6170d9fd8..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(['statuses', statusId, 'card'], null), -}); - -export default connect(mapStateToProps)(Card); 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/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index 4c6387461..617d96e5d 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -23,9 +23,6 @@ import { STATUS_MUTE_SUCCESS, STATUS_UNMUTE_SUCCESS, } from 'flavours/glitch/actions/statuses'; -import { - STATUS_CARD_FETCH_SUCCESS -} from 'flavours/glitch/actions/cards'; import { TIMELINE_UPDATE, TIMELINE_DELETE, @@ -146,8 +143,6 @@ 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; } -- cgit From 7e18e95716052d5566f2e31559cbe4a68268f493 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 30 Oct 2018 14:46:48 +0100 Subject: Add a local setting for inline preview cards --- app/javascript/flavours/glitch/components/status.js | 2 +- .../flavours/glitch/features/local_settings/page/index.js | 8 ++++++++ app/javascript/flavours/glitch/reducers/local_settings.js | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 0c82ea7c6..9ff53485e 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -478,7 +478,7 @@ 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')) { + } else if (status.get('card') && settings.get('inline_preview_cards')) { media = ( + + +
), ]; 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, -- cgit From 2b2facbbdfb7c0b53e38048e932143d592af401e Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 27 Oct 2018 23:09:07 +0200 Subject: [Glitch] Port some of upstream's getting started footer links --- .../glitch/features/getting_started/index.js | 40 ++++++++++------------ .../flavours/glitch/styles/components/index.scss | 36 +++++++++++++++++++ .../flavours/glitch/util/initial_state.js | 2 ++ 3 files changed, 57 insertions(+), 21 deletions(-) (limited to 'app/javascript/flavours/glitch/features') 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 {
-
-

- - -  •  - - - -

-

- glitch-soc/mastodon, - Mastodon: Mastodon, - }} - /> -

-
+
    +
  • ·
    • + {invitesEnabled &&
  • ·
    • } +
  • ·
    • +
  • ·
    • +
  • ·
    • +
    • +
+ +

+ glitch-soc/mastodon (v{version}), + Mastodon: Mastodon }} + /> +

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/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; -- cgit