diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
| -rw-r--r-- | app/javascript/flavours/glitch/components/column_header.js | 57 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/features/notifications/index.js | 55 |
2 files changed, 55 insertions, 57 deletions
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index be45c9535..01bd4a246 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -2,18 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { createPortal } from 'react-dom'; import classNames from 'classnames'; -import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; -import ImmutablePropTypes from 'react-immutable-proptypes'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import Icon from 'flavours/glitch/components/icon'; -import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container'; - const messages = defineMessages({ show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' }, moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' }, - enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' }, }); export default @injectIntl @@ -28,27 +24,21 @@ class ColumnHeader extends React.PureComponent { 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, - onEnterCleaningMode: PropTypes.func, children: PropTypes.node, pinned: PropTypes.bool, placeholder: PropTypes.bool, onPin: PropTypes.func, onMove: PropTypes.func, onClick: PropTypes.func, - intl: PropTypes.object.isRequired, appendContent: PropTypes.node, }; state = { collapsed: true, animating: false, - animatingNCD: false, }; historyBack = (skip) => { @@ -90,10 +80,6 @@ class ColumnHeader extends React.PureComponent { this.setState({ animating: false }); } - handleTransitionEndNCD = () => { - this.setState({ animatingNCD: false }); - } - handlePin = () => { if (!this.props.pinned) { this.historyBack(); @@ -101,16 +87,9 @@ class ColumnHeader extends React.PureComponent { this.props.onPin(); } - onEnterCleaningMode = () => { - this.setState({ animatingNCD: true }); - this.props.onEnterCleaningMode(!this.props.notifCleaningActive); - } - render () { - const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder, appendContent } = this.props; - const { collapsed, animating, animatingNCD } = this.state; - - let title = this.props.title; + const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props; + const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { 'active': active, @@ -129,20 +108,8 @@ class ColumnHeader extends React.PureComponent { 'active': !collapsed, }); - const notifCleaningButtonClassName = classNames('column-header__button', { - 'active': notifCleaningActive, - }); - - const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', { - 'collapsed': !notifCleaningActive, - 'animating': animatingNCD, - }); - let extraContent, pinButton, moveButtons, backButton, collapseButton; - //*glitch - const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning); - if (children) { extraContent = ( <div key='extra-content' className='column-header__collapsible__extra'> @@ -203,28 +170,10 @@ class ColumnHeader extends React.PureComponent { <div className='column-header__buttons'> {hasTitle && backButton} {extraButton} - { notifCleaning ? ( - <button - aria-label={msgEnterNotifCleaning} - title={msgEnterNotifCleaning} - onClick={this.onEnterCleaningMode} - className={notifCleaningButtonClassName} - > - <Icon id='eraser' /> - </button> - ) : null} {collapseButton} </div> </h1> - { notifCleaning ? ( - <div className={notifCleaningDrawerClassName} onTransitionEnd={this.handleTransitionEndNCD}> - <div className='column-header__collapsible-inner nopad-drawer'> - {(notifCleaningActive || animatingNCD) ? (<NotificationPurgeButtonsContainer />) : null } - </div> - </div> - ) : null} - <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}> <div className='column-header__collapsible-inner'> {(!collapsed || animating) && collapsedContent} diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js index 7f06d70c5..26710feff 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.js +++ b/app/javascript/flavours/glitch/features/notifications/index.js @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Column from 'flavours/glitch/components/column'; @@ -22,9 +23,13 @@ import { List as ImmutableList } from 'immutable'; import { debounce } from 'lodash'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import LoadGap from 'flavours/glitch/components/load_gap'; +import Icon from 'flavours/glitch/components/icon'; + +import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container'; const messages = defineMessages({ title: { id: 'column.notifications', defaultMessage: 'Notifications' }, + enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' }, }); const getNotifications = createSelector([ @@ -94,6 +99,10 @@ class Notifications extends React.PureComponent { trackScroll: true, }; + state = { + animatingNCD: false, + }; + handleLoadGap = (maxId) => { this.props.dispatch(expandNotifications({ maxId })); }; @@ -176,8 +185,19 @@ class Notifications extends React.PureComponent { } } + handleTransitionEndNCD = () => { + this.setState({ animatingNCD: false }); + } + + onEnterCleaningMode = () => { + this.setState({ animatingNCD: true }); + this.props.onEnterCleaningMode(!this.props.notifCleaningActive); + } + render () { const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar } = this.props; + const { notifCleaning, notifCleaningActive } = this.props; + const { animatingNCD } = this.state; const pinned = !!columnId; const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />; @@ -232,6 +252,36 @@ class Notifications extends React.PureComponent { </ScrollableList> ); + const notifCleaningButtonClassName = classNames('column-header__button', { + 'active': notifCleaningActive, + }); + + const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', { + 'collapsed': !notifCleaningActive, + 'animating': animatingNCD, + }); + + const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning); + + const notifCleaningButton = ( + <button + aria-label={msgEnterNotifCleaning} + title={msgEnterNotifCleaning} + onClick={this.onEnterCleaningMode} + className={notifCleaningButtonClassName} + > + <Icon id='eraser' /> + </button> + ); + + const notifCleaningDrawer = ( + <div className={notifCleaningDrawerClassName} onTransitionEnd={this.handleTransitionEndNCD}> + <div className='column-header__collapsible-inner nopad-drawer'> + {(notifCleaningActive || animatingNCD) ? (<NotificationPurgeButtonsContainer />) : null } + </div> + </div> + ); + return ( <Column bindToDocument={!multiColumn} @@ -250,9 +300,8 @@ class Notifications extends React.PureComponent { pinned={pinned} multiColumn={multiColumn} localSettings={this.props.localSettings} - notifCleaning - notifCleaningActive={this.props.notifCleaningActive} // this is used to toggle the header text - onEnterCleaningMode={this.props.onEnterCleaningMode} + extraButton={notifCleaningButton} + appendContent={notifCleaningDrawer} > <ColumnSettingsContainer /> </ColumnHeader> |