From 64d8d0464dedeabf09b5a651151f177dba2053df Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 28 Mar 2018 19:56:46 +0200 Subject: [PATCH] Add show more/less toggle for entire threads in web UI Inspired from b6003afcdb1b89eb967a2b211e3b4e26aed9ac9d but using component properties instead of redux store for hidden/revealed state. --- .../glitch/components/column_header.js | 27 ++++++++++++------- .../flavours/glitch/components/status.js | 8 ++++-- .../glitch/components/status_content.js | 8 +++--- .../status/components/detailed_status.js | 6 +++-- .../flavours/glitch/features/status/index.js | 21 ++++++++++++--- .../glitch/styles/components/columns.scss | 4 +++ 6 files changed, 54 insertions(+), 20 deletions(-) diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index cd977c4cae..bfad6467d5 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -23,11 +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, + extraButton: PropTypes.node, showBackButton: PropTypes.bool, notifCleaning: PropTypes.bool, // true only for the notification column notifCleaningActive: PropTypes.bool, @@ -86,7 +87,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, onPin, multiColumn, 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; @@ -162,18 +163,26 @@ export default class ColumnHeader extends React.PureComponent { } if (children || multiColumn) { - collapseButton = ; + collapseButton = ; } + const hasTitle = icon && title; + return (

- + {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} /> .column-header__back-button { + color: $ui-highlight-color; + } + &.active { box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);