From 7e3d4d009dc901a64e497177bf6c0dcc8be95bac Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Mon, 6 Jul 2020 15:13:44 -0500 Subject: [PATCH] Uodated popover components mobile design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Updated: - popover components mobile design with cancel button at the bottom • Added: -CommentSortingOptionsPopover subtitles for options for more clarity --- .../comment_sorting_options_popover.js | 72 +++++++++++++------ .../components/popover/date_picker_popover.js | 19 +++-- .../popover/emoji_picker_popover.js | 6 +- .../popover/group_member_options_popover.js | 14 +++- .../popover/group_options_popover.js | 21 ++++-- .../components/popover/popover_layout.js | 42 ++++++++--- .../popover/profile_options_popover.js | 12 +++- .../popover/status_options_popover.js | 65 ++++++++++------- .../popover/status_visibility_popover.js | 18 +++-- .../components/popover/video_stats_popover.js | 30 ++++++-- 10 files changed, 216 insertions(+), 83 deletions(-) diff --git a/app/javascript/gabsocial/components/popover/comment_sorting_options_popover.js b/app/javascript/gabsocial/components/popover/comment_sorting_options_popover.js index 6aabac55..34c2603b 100644 --- a/app/javascript/gabsocial/components/popover/comment_sorting_options_popover.js +++ b/app/javascript/gabsocial/components/popover/comment_sorting_options_popover.js @@ -11,8 +11,15 @@ import List from '../list' const messages = defineMessages({ oldest: { id: 'comment_sort.oldest', defaultMessage: 'Oldest' }, + oldestSubtitle: { id: 'comment_sort.oldest.subtitle', defaultMessage: 'Show all comments, with the oldest comments first.' }, newest: { id: 'comment_sort.newest', defaultMessage: 'Recent' }, + newestSubtitle: { id: 'comment_sort.newest.subtitle', defaultMessage: 'Show all comments, with the newest comments first.' }, top: { id: 'comment_sort.top', defaultMessage: 'Most Liked' }, + topSubtitle: { id: 'comment_sort.top.subtitle', defaultMessage: 'Show all comments, with the most liked top-level comments first.' }, +}) + +const mapStateToProps = (state) => ({ + commentSorting: state.getIn(['settings', 'commentSorting']), }) const mapDispatchToProps = (dispatch) => ({ @@ -21,48 +28,71 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(saveSettings()) dispatch(closePopover()) }, + onClosePopover: () => dispatch(closePopover()), }) export default @injectIntl -@connect(null, mapDispatchToProps) +@connect(mapStateToProps, mapDispatchToProps) class CommentSortingOptionsPopover extends PureComponent { static propTypes = { + commentSorting: PropTypes.string.isRequired, intl: PropTypes.object.isRequired, - onSetCommentSortingSetting: PropTypes.func.isRequired, isXS: PropTypes.bool, + onClosePopover: PropTypes.func.isRequired, + onSetCommentSortingSetting: PropTypes.func.isRequired, } handleOnClick = (type) => { this.props.onSetCommentSortingSetting(type) } + handleOnClosePopover = () => { + this.props.onClosePopover() + } + render() { - const { intl, isXS } = this.props + const { + commentSorting, + intl, + isXS, + } = this.props + + const items = [ + { + hideArrow: true, + isActive: commentSorting === COMMENT_SORTING_TYPE_NEWEST, + title: intl.formatMessage(messages.newest), + subtitle: intl.formatMessage(messages.newestSubtitle), + onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_NEWEST), + }, + { + hideArrow: true, + isActive: commentSorting === COMMENT_SORTING_TYPE_OLDEST, + title: intl.formatMessage(messages.oldest), + subtitle: intl.formatMessage(messages.oldestSubtitle), + onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_OLDEST), + }, + { + hideArrow: true, + isActive: commentSorting === COMMENT_SORTING_TYPE_TOP, + title: intl.formatMessage(messages.top), + subtitle: intl.formatMessage(messages.topSubtitle), + onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_TOP), + }, + ] return ( - + this.handleOnClick(COMMENT_SORTING_TYPE_NEWEST), - }, - { - hideArrow: true, - title: intl.formatMessage(messages.oldest), - onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_OLDEST), - }, - { - hideArrow: true, - title: intl.formatMessage(messages.top), - onClick: () => this.handleOnClick(COMMENT_SORTING_TYPE_TOP), - }, - ]} + items={items} small /> diff --git a/app/javascript/gabsocial/components/popover/date_picker_popover.js b/app/javascript/gabsocial/components/popover/date_picker_popover.js index 05a9012d..eb6cdc45 100644 --- a/app/javascript/gabsocial/components/popover/date_picker_popover.js +++ b/app/javascript/gabsocial/components/popover/date_picker_popover.js @@ -5,10 +5,7 @@ import { changeScheduledAt } from '../../actions/compose' import { openModal } from '../../actions/modal' import { closePopover } from '../../actions/popover' import { me } from '../../initial_state' -import { - MODAL_PRO_UPGRADE, -} from '../../constants' -import { isMobile } from '../../utils/is_mobile' +import { MODAL_PRO_UPGRADE } from '../../constants' import PopoverLayout from './popover_layout' import Button from '../button' import Text from '../text' @@ -33,6 +30,8 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(closePopover()) } }, + + onClosePopover: () => dispatch(closePopover()) }) export default @@ -46,6 +45,7 @@ class DatePickerPopover extends PureComponent { position: PropTypes.string, small: PropTypes.bool, isXS: PropTypes.bool, + onClosePopover: PropTypes.func.isRequired, } handleSetDate = (date) => { @@ -56,13 +56,20 @@ class DatePickerPopover extends PureComponent { this.props.setScheduledAt(null, this.props.isPro) } + handleOnClosePopover = () => { + this.props.onClosePopover() + } + render() { const { date, isPro, isXS } = this.props - const datePickerDisabled = !isPro return ( - +
+ ({ dispatch(closePopover()) dispatch(createRemovedAccount(groupId, accountId)) }, + onClosePopover:() => dispatch(closePopover()), }) export default @@ -25,8 +26,9 @@ class GroupMemberOptionsPopover extends PureComponent { accountId: PropTypes.string.isRequired, groupId: PropTypes.string.isRequired, isXS: PropTypes.bool, - onUpdateRole: PropTypes.func.isRequired, + onClosePopover: PropTypes.func.isRequired, onCreateRemovedAccount: PropTypes.func.isRequired, + onUpdateRole: PropTypes.func.isRequired, } handleOnRemoveFromGroup = () => { @@ -37,6 +39,10 @@ class GroupMemberOptionsPopover extends PureComponent { this.props.onUpdateRole(this.props.groupId, this.props.accountId, 'admin') } + handleOnClosePopover = () => { + this.props.onClosePopover() + } + render() { const { isXS } = this.props @@ -56,7 +62,11 @@ class GroupMemberOptionsPopover extends PureComponent { ] return ( - + ({ dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId })) }, + onClosePopover: () => dispatch(closePopover()) + }); export default @@ -43,12 +45,13 @@ export default class GroupOptionsPopover extends ImmutablePureComponent { static defaultProps = { - intl: PropTypes.object.isRequired, group: ImmutablePropTypes.map.isRequired, - onOpenEditGroup: PropTypes.func.isRequired, - onOpenRemovedMembers: PropTypes.func.isRequired, - onOpenGroupMembers: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, isXS: PropTypes.bool, + onClosePopover: PropTypes.func.isRequired, + onOpenEditGroup: PropTypes.func.isRequired, + onOpenGroupMembers: PropTypes.func.isRequired, + onOpenRemovedMembers: PropTypes.func.isRequired, } updateOnProps = ['group'] @@ -65,6 +68,10 @@ class GroupOptionsPopover extends ImmutablePureComponent { this.props.onOpenGroupMembers(this.props.group.get('id')) } + handleOnClosePopover = () => { + this.props.onClosePopover() + } + render() { const { intl, isXS } = this.props @@ -90,7 +97,11 @@ class GroupOptionsPopover extends ImmutablePureComponent { ] return ( - + { + this.props.onClose() + } + render() { const { children, @@ -22,20 +29,35 @@ export default class PopoverLayout extends PureComponent { title, } = this.props + console.log("popoverlayout props:", this.props) + if (isXS) { return ( -
- { - !!title && -
- - {title} - +
+
+ { + !!title && +
+ + {title} + +
+ } +
+ {children}
- } -
- {children}
+ +
) } diff --git a/app/javascript/gabsocial/components/popover/profile_options_popover.js b/app/javascript/gabsocial/components/popover/profile_options_popover.js index b09216d3..f0ebab4f 100644 --- a/app/javascript/gabsocial/components/popover/profile_options_popover.js +++ b/app/javascript/gabsocial/components/popover/profile_options_popover.js @@ -124,6 +124,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ })); }, + onClosePopover: () => dispatch(closePopover()), + }); @@ -261,12 +263,20 @@ class ProfileOptionsPopover extends PureComponent { // : todo : } + handleOnClosePopover = () => { + this.props.onClosePopover() + } + render() { const { isXS } = this.props const listItems = this.makeMenu() return ( - + { this.props.onClosePopover() } @@ -383,35 +387,10 @@ class StatusOptionsPopover extends ImmutablePureComponent { title: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), onClick: this.handleReport, }) - - if (withGroupAdmin) { - menu.push({ - icon: 'trash', - hideArrow: true, - title: intl.formatMessage(messages.group_remove_account), - onClick: this.handleGroupRemoveAccount, - }) - menu.push({ - icon: 'trash', - hideArrow: true, - title: intl.formatMessage(messages.group_remove_post), - onClick: this.handleGroupRemovePost, - }) - } - - if (isStaff) { - menu.push({ - title: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), - href: `/admin/accounts/${status.getIn(['account', 'id'])}` - }) - menu.push({ - title: intl.formatMessage(messages.admin_status), - href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` - }) - } } } + menu.push(null) menu.push({ icon: 'copy', hideArrow: true, @@ -431,8 +410,40 @@ class StatusOptionsPopover extends ImmutablePureComponent { onClick: this.handleOnOpenEmbedModal, }) + if (withGroupAdmin) { + menu.push(null) + menu.push({ + icon: 'trash', + hideArrow: true, + title: intl.formatMessage(messages.group_remove_account), + onClick: this.handleGroupRemoveAccount, + }) + menu.push({ + icon: 'trash', + hideArrow: true, + title: intl.formatMessage(messages.group_remove_post), + onClick: this.handleGroupRemovePost, + }) + } + + if (isStaff) { + menu.push(null) + + menu.push({ + title: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), + href: `/admin/accounts/${status.getIn(['account', 'id'])}` + }) + menu.push({ + title: intl.formatMessage(messages.admin_status), + href: `/admin/accounts/${status.getIn(['account', 'id'])}/statuses/${status.get('id')}` + }) + } + return ( - + ({ }) const mapDispatchToProps = (dispatch) => ({ - onChange (value) { dispatch(changeComposeVisibility(value)) dispatch(closePopover()) }, - + onClosePopover: () => dispatch(closePopover()), }) export default @@ -38,16 +37,21 @@ export default class StatusVisibilityDropdown extends PureComponent { static propTypes = { - value: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, isXS: PropTypes.bool, + onChange: PropTypes.func.isRequired, + onClosePopover: PropTypes.func.isRequired, + value: PropTypes.string.isRequired, } handleChange = (value) => { this.props.onChange(value) } + handleOnClosePopover = () => { + this.props.onClosePopover() + } + render () { const { intl, value, isXS } = this.props @@ -73,7 +77,11 @@ class StatusVisibilityDropdown extends PureComponent { ] return ( - +
{ options.map((option, i) => { diff --git a/app/javascript/gabsocial/components/popover/video_stats_popover.js b/app/javascript/gabsocial/components/popover/video_stats_popover.js index 4abe3dbb..1cc78565 100644 --- a/app/javascript/gabsocial/components/popover/video_stats_popover.js +++ b/app/javascript/gabsocial/components/popover/video_stats_popover.js @@ -2,6 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { defineMessages, injectIntl } from 'react-intl' import { closePopover } from '../../actions/popover' +import { CX } from '../../constants' import PopoverLayout from './popover_layout' import Button from '../button' import Text from '../text' @@ -67,9 +68,21 @@ class VideoStatsPopover extends ImmutablePureComponent { 'bitrate', ] + const containerClasses = CX({ + default: 1, + bgBlack: !isXS, + bgPrimary: !isXS, + px10: 1, + py10: 1, + }) + return ( - -
+ +