diff options
Diffstat (limited to 'app/javascript/flavours/glitch/components')
4 files changed, 72 insertions, 57 deletions
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index ae90b6f81..bfad6467d 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 = <button className={collapsibleButtonClassName} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>; + collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders' /></button>; } + const hasTitle = icon && title; + return ( <div className={wrapperClassName}> - <h1 tabIndex={focusable ? 0 : null} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}> - <i className={`fa fa-fw fa-${icon} column-header__icon`} /> - <span className='column-header__title'> - {title} - </span> + <h1 className={buttonClassName}> + {hasTitle && ( + <button onClick={this.handleTitleClick}> + <i className={`fa fa-fw fa-${icon} column-header__icon`} /> + {title} + </button> + )} + + {!hasTitle && backButton} + <div className='column-header__buttons'> - {backButton} + {hasTitle && backButton} + {extraButton} { notifCleaning ? ( <button aria-label={msgEnterNotifCleaning} diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 120772201..a6c08ba1c 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -47,10 +47,12 @@ export default class Status extends ImmutablePureComponent { onMoveDown: PropTypes.func, getScrollPosition: PropTypes.func, updateScrollBottom: PropTypes.func, + expanded: PropTypes.bool, }; state = { - isExpanded: null, + isExpanded: this.props.expanded, + isCollapsed: false, autoCollapsed: false, } @@ -71,6 +73,7 @@ export default class Status extends ImmutablePureComponent { updateOnStates = [ 'isExpanded', + 'isCollapsed', ] // If our settings have changed to disable collapsed statuses, then we @@ -83,18 +86,21 @@ export default class Status extends ImmutablePureComponent { // uncollapse our status accordingly. componentWillReceiveProps (nextProps) { if (!nextProps.settings.getIn(['collapsed', 'enabled'])) { - if (this.state.isExpanded === false) { - this.setExpansion(null); + if (this.state.isCollapsed) { + this.setCollapsed(false); } } else if ( nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined - ) this.setExpansion(nextProps.collapse ? false : null); + ) this.setCollapsed(nextProps.collapse); + if (nextProps.expanded !== this.props.expanded && + nextProps.expanded !== undefined + ) this.setExpansion(nextProps.expanded); } // When mounting, we just check to see if our status should be collapsed, // and collapse it if so. We don't need to worry about whether collapsing - // is enabled here, because `setExpansion()` already takes that into + // is enabled here, because `setCollapsed()` already takes that into // account. // The cases where a status should be collapsed are: @@ -138,7 +144,7 @@ export default class Status extends ImmutablePureComponent { return false; } }()) { - this.setExpansion(false); + this.setCollapsed(true); // Hack to fix timeline jumps on second rendering when auto-collapsing this.setState({ autoCollapsed: true }); } @@ -164,23 +170,26 @@ export default class Status extends ImmutablePureComponent { } } - // `setExpansion()` sets the value of `isExpanded` in our state. It takes - // one argument, `value`, which gives the desired value for `isExpanded`. - // The default for this argument is `null`. + // `setCollapsed()` sets the value of `isCollapsed` in our state, that is, + // whether the toot is collapsed or not. - // `setExpansion()` automatically checks for us whether toot collapsing + // `setCollapsed()` automatically checks for us whether toot collapsing // is enabled, so we don't have to. + setCollapsed = (value) => { + if (this.props.settings.getIn(['collapsed', 'enabled'])) { + this.setState({ isCollapsed: value }); + if (value) { + this.setExpansion(false); + } + } else { + this.setState({ isCollapsed: false }); + } + } + setExpansion = (value) => { - switch (true) { - case value === undefined || value === null: - this.setState({ isExpanded: null }); - break; - case !value && this.props.settings.getIn(['collapsed', 'enabled']): - this.setState({ isExpanded: false }); - break; - case !!value: - this.setState({ isExpanded: true }); - break; + this.setState({ isExpanded: value }); + if (value) { + this.setCollapsed(false); } } @@ -192,7 +201,7 @@ export default class Status extends ImmutablePureComponent { parseClick = (e, destination) => { const { router } = this.context; const { status } = this.props; - const { isExpanded } = this.state; + const { isCollapsed } = this.state; if (!router) return; if (destination === undefined) { destination = `/statuses/${ @@ -200,9 +209,9 @@ export default class Status extends ImmutablePureComponent { }`; } if (e.button === 0) { - if (isExpanded === false) this.setExpansion(null); + if (isCollapsed) this.setCollapsed(false); else if (e.shiftKey) { - this.setExpansion(false); + this.setCollapsed(true); document.getSelection().removeAllRanges(); } else router.history.push(destination); e.preventDefault(); @@ -219,7 +228,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); } }; @@ -278,6 +287,7 @@ export default class Status extends ImmutablePureComponent { handleRef, parseClick, setExpansion, + setCollapsed, } = this; const { router } = this.context; const { @@ -295,7 +305,7 @@ export default class Status extends ImmutablePureComponent { featured, ...other } = this.props; - const { isExpanded } = this.state; + const { isExpanded, isCollapsed } = this.state; let background = null; let attachments = null; let media = null; @@ -414,8 +424,8 @@ export default class Status extends ImmutablePureComponent { }; const computedClass = classNames('status', `status-${status.get('visibility')}`, { - collapsed: isExpanded === false, - 'has-background': isExpanded === false && background, + collapsed: isCollapsed, + 'has-background': isCollapsed && background, muted, }, 'focusable'); @@ -423,7 +433,7 @@ export default class Status extends ImmutablePureComponent { <HotKeys handlers={handlers}> <div className={computedClass} - style={isExpanded === false && background ? { backgroundImage: `url(${background})` } : null} + style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null} {...selectorAttribs} ref={handleRef} tabIndex='0' @@ -439,11 +449,11 @@ export default class Status extends ImmutablePureComponent { notificationId={this.props.notificationId} /> ) : null} - {!muted || isExpanded !== false ? ( + {!muted || !isCollapsed ? ( <StatusHeader status={status} friend={account} - collapsed={isExpanded === false} + collapsed={isCollapsed} parseClick={parseClick} /> ) : null} @@ -452,8 +462,8 @@ export default class Status extends ImmutablePureComponent { status={status} mediaIcon={mediaIcon} collapsible={settings.getIn(['collapsed', 'enabled'])} - collapsed={isExpanded === false} - setExpansion={setExpansion} + collapsed={isCollapsed} + setCollapsed={setCollapsed} /> </header> <StatusContent @@ -461,11 +471,11 @@ export default class Status extends ImmutablePureComponent { media={media} mediaIcon={mediaIcon} expanded={isExpanded} - setExpansion={setExpansion} + onExpandedToggle={this.handleExpandedToggle} parseClick={parseClick} disabled={!router} /> - {isExpanded !== false || !muted ? ( + {!isCollapsed || !muted ? ( <StatusActionBar {...other} status={status} diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 3bb3c7a12..32b0770cb 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -11,7 +11,8 @@ export default class StatusContent extends React.PureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, expanded: PropTypes.bool, - setExpansion: PropTypes.func, + collapsed: PropTypes.bool, + onExpandedToggle: PropTypes.func, media: PropTypes.element, mediaIcon: PropTypes.string, parseClick: PropTypes.func, @@ -64,7 +65,7 @@ export default class StatusContent extends React.PureComponent { } onLinkClick = (e) => { - if (this.props.expanded === false) { + if (this.props.collapsed) { if (this.props.parseClick) this.props.parseClick(e); } } @@ -111,8 +112,8 @@ export default class StatusContent extends React.PureComponent { handleSpoilerClick = (e) => { e.preventDefault(); - if (this.props.setExpansion) { - this.props.setExpansion(this.props.expanded ? null : true); + if (this.props.onExpandedToggle) { + this.props.onExpandedToggle(); } else { this.setState({ hidden: !this.state.hidden }); } @@ -131,7 +132,7 @@ export default class StatusContent extends React.PureComponent { disabled, } = this.props; - const hidden = this.props.setExpansion ? !this.props.expanded : this.state.hidden; + const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; const content = { __html: status.get('contentHtml') }; const spoilerContent = { __html: status.get('spoilerHtml') }; diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js index 4f585175c..e354c45e4 100644 --- a/app/javascript/flavours/glitch/components/status_icons.js +++ b/app/javascript/flavours/glitch/components/status_icons.js @@ -22,15 +22,15 @@ export default class StatusIcons extends React.PureComponent { mediaIcon: PropTypes.string, collapsible: PropTypes.bool, collapsed: PropTypes.bool, - setExpansion: PropTypes.func.isRequired, + setCollapsed: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; // Handles clicks on collapsed button handleCollapsedClick = (e) => { - const { collapsed, setExpansion } = this.props; + const { collapsed, setCollapsed } = this.props; if (e.button === 0) { - setExpansion(collapsed ? null : false); + setCollapsed(!collapsed); e.preventDefault(); } } |