diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index 717f99d4a..7e1658dbb 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -29,6 +29,7 @@ import { initReport } from 'flavours/glitch/actions/reports';
import { makeGetStatus } from 'flavours/glitch/selectors';
import { ScrollContainer } from 'react-router-scroll-4';
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
+import ColumnHeader from '../../components/column_header';
import StatusContainer from 'flavours/glitch/containers/status_container';
import { openModal } from 'flavours/glitch/actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
@@ -41,6 +42,8 @@ const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
+ revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
+ hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
});
const makeMapStateToProps = () => {
@@ -76,7 +79,8 @@ export default class Status extends ImmutablePureComponent {
state = {
fullscreen: false,
- isExpanded: null,
+ isExpanded: false,
+ threadExpanded: null,
};
componentWillMount () {
@@ -96,7 +100,7 @@ export default class Status extends ImmutablePureComponent {
handleExpandedToggle = () => {
if (this.props.status.get('spoiler_text')) {
- this.setExpansion(this.state.isExpanded ? null : true);
+ this.setExpansion(!this.state.isExpanded);
}
};
@@ -190,6 +194,11 @@ export default class Status extends ImmutablePureComponent {
}
}
+ handleToggleAll = () => {
+ const { isExpanded } = this.state;
+ this.setState({ isExpanded: !isExpanded, threadExpanded: !isExpanded });
+ }
+
handleBlockClick = (account) => {
const { dispatch, intl } = this.props;
@@ -285,6 +294,7 @@ export default class Status extends ImmutablePureComponent {
@@ -292,7 +302,7 @@ export default class Status extends ImmutablePureComponent {
}
setExpansion = value => {
- this.setState({ isExpanded: value ? true : null });
+ this.setState({ isExpanded: value });
}
setRef = c => {
@@ -327,7 +337,7 @@ export default class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
const { setExpansion } = this;
- const { status, settings, ancestorsIds, descendantsIds } = this.props;
+ const { status, settings, ancestorsIds, descendantsIds, intl } = this.props;
const { fullscreen, isExpanded } = this.state;
if (status === null) {
@@ -360,7 +370,12 @@ export default class Status extends ImmutablePureComponent {
return (
-
+
+ )}
+ />
@@ -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 f14fcea1e..bc5bc1804 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 5dcfab4d1..34175685e 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;
}