diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index ae90b6f81f..bfad6467d5 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -23,12 +23,12 @@ export default class ColumnHeader extends React.PureComponent { static propTypes = { intl: PropTypes.object.isRequired, - title: PropTypes.node.isRequired, - icon: PropTypes.string.isRequired, + title: PropTypes.node, + icon: PropTypes.string, active: PropTypes.bool, localSettings : ImmutablePropTypes.map, multiColumn: PropTypes.bool, - focusable: PropTypes.bool, + extraButton: PropTypes.node, showBackButton: PropTypes.bool, notifCleaning: PropTypes.bool, // true only for the notification column notifCleaningActive: PropTypes.bool, @@ -41,10 +41,6 @@ export default class ColumnHeader extends React.PureComponent { intl: PropTypes.object.isRequired, }; - static defaultProps = { - focusable: true, - } - state = { collapsed: true, animating: false, @@ -91,7 +87,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; + const { intl, icon, active, children, pinned, onPin, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; const { collapsed, animating, animatingNCD } = this.state; let title = this.props.title; @@ -167,18 +163,26 @@ export default class ColumnHeader extends React.PureComponent { } if (children || multiColumn) { - collapseButton = ; + collapseButton = ; } + const hasTitle = icon && title; + return (
-

- - - {title} - +

+ {hasTitle && ( + + )} + + {!hasTitle && backButton} +
- {backButton} + {hasTitle && backButton} + {extraButton} { notifCleaning ? ( + )} + />
@@ -374,7 +389,7 @@ export default class Status extends ImmutablePureComponent { onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} expanded={isExpanded} - setExpansion={setExpansion} + onToggleHidden={this.handleExpandedToggle} /> ; + if (icon) { + iconElement = ; } return ( -
- {icon} - {type} -
+

+ +

); } diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index f14fcea1e8..bc5bc18043 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -62,16 +62,20 @@ const normalizeStatus = (state, status) => { normalStatus.reblog = status.reblog.id; } - const searchContent = [status.spoiler_text, status.content].join('\n\n').replace(/
/g, '\n').replace(/<\/p>

/g, '\n\n'); + // Only calculate these values when status first encountered + // Otherwise keep the ones already in the reducer + if (!state.has(status.id)) { + const searchContent = [status.spoiler_text, status.content].join('\n\n').replace(/
/g, '\n').replace(/<\/p>

/g, '\n\n'); - const emojiMap = normalStatus.emojis.reduce((obj, emoji) => { - obj[`:${emoji.shortcode}:`] = emoji; - return obj; - }, {}); + const emojiMap = normalStatus.emojis.reduce((obj, emoji) => { + obj[`:${emoji.shortcode}:`] = emoji; + return obj; + }, {}); - normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent; - normalStatus.contentHtml = emojify(normalStatus.content, emojiMap); - normalStatus.spoilerHtml = emojify(escapeTextContentForBrowser(normalStatus.spoiler_text || ''), emojiMap); + normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent; + normalStatus.contentHtml = emojify(normalStatus.content, emojiMap); + normalStatus.spoilerHtml = emojify(escapeTextContentForBrowser(normalStatus.spoiler_text || ''), emojiMap); + } return state.update(status.id, ImmutableMap(), map => map.mergeDeep(fromJS(normalStatus))); }; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 5dcfab4d1a..34175685eb 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -243,7 +243,6 @@ .column-header { display: flex; font-size: 16px; - padding: 15px; background: lighten($ui-base-color, 4%); flex: 0 0 auto; cursor: pointer; @@ -255,7 +254,7 @@ & > button { margin: 0; border: none; - padding: 15px 0 15px 15px; + padding: 15px; color: inherit; background: transparent; font: inherit; @@ -266,6 +265,10 @@ flex: 1; } + & > .column-header__back-button { + color: $ui-highlight-color; + } + &.active { box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); @@ -303,7 +306,6 @@ .column-header__buttons { height: 48px; display: flex; - margin: -15px; margin-left: 0; }