From a390662e4f2ba9efba9c7b06d183fdc7be82f6ac Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Thu, 7 May 2020 01:55:24 -0400 Subject: [PATCH] Progress --- .../gabsocial/components/card_view.js | 2 +- .../gabsocial/components/group_header.js | 24 ++-- .../components/modal/group_editor_modal.js | 68 ----------- .../components/modal/group_members_modal.js | 17 ++- .../modal/group_removed_accounts_modal.js | 37 ++++++ .../gabsocial/components/modal/modal_base.js | 12 +- .../gabsocial/components/modal/modal_root.js | 9 +- .../gabsocial/components/navigation_bar.js | 33 ++++-- .../components/panel/group_info_panel.js | 22 +++- .../components/panel/who_to_follow_panel.js | 4 +- .../popover/group_options_popover.js | 93 ++++++++------- .../components/popover/popover_root.js | 3 + .../gabsocial/components/pull_to_refresher.js | 10 +- .../gabsocial/components/scrollable_list.js | 4 + .../gabsocial/components/status_card.js | 7 +- app/javascript/gabsocial/constants.js | 3 +- .../gabsocial/features/account_timeline.js | 2 - .../gabsocial/features/group_members.js | 109 ++++++++++-------- .../features/group_removed_accounts.js | 68 +++++------ .../gabsocial/features/list_edit.js | 2 +- app/javascript/gabsocial/features/ui/ui.js | 7 +- .../features/ui/util/async_components.js | 3 +- .../gabsocial/layouts/default_layout.js | 3 + app/javascript/gabsocial/pages/basic_page.js | 1 + app/javascript/gabsocial/pages/group_page.js | 2 +- app/javascript/gabsocial/pages/home_page.js | 4 + app/javascript/gabsocial/pages/search_page.js | 8 ++ app/javascript/gabsocial/reducers/settings.js | 3 - app/javascript/styles/global.css | 44 ++++++- 29 files changed, 347 insertions(+), 257 deletions(-) delete mode 100644 app/javascript/gabsocial/components/modal/group_editor_modal.js create mode 100644 app/javascript/gabsocial/components/modal/group_removed_accounts_modal.js diff --git a/app/javascript/gabsocial/components/card_view.js b/app/javascript/gabsocial/components/card_view.js index 4f050e89..736959ba 100644 --- a/app/javascript/gabsocial/components/card_view.js +++ b/app/javascript/gabsocial/components/card_view.js @@ -8,7 +8,7 @@ export default class CardView extends PureComponent { const { children } = this.props return ( -
+
{children}
) diff --git a/app/javascript/gabsocial/components/group_header.js b/app/javascript/gabsocial/components/group_header.js index 6b921121..2fcba058 100644 --- a/app/javascript/gabsocial/components/group_header.js +++ b/app/javascript/gabsocial/components/group_header.js @@ -29,12 +29,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, - onOpenGroupOptions() { - - }, - - openProfileOptionsPopover(props) { - dispatch(openPopover('GROUP_OPTIONS', props)) + onOpenGroupOptions(targetRef, group) { + dispatch(openPopover('GROUP_OPTIONS', { + targetRef, + group, + position: 'top', + })) }, }); @@ -57,11 +57,18 @@ class GroupHeader extends ImmutablePureComponent { this.props.onToggleMembership(group, relationships); } + handleOnOpenGroupOptions = () => { + this.props.onOpenGroupOptions(this.infoBtn, this.props.group) + } + + setInfoBtn = (c) => { + this.infoBtn = c; + } + render() { const { group, intl, - onOpenGroupOptions, relationships, } = this.props @@ -131,7 +138,8 @@ class GroupHeader extends ImmutablePureComponent { backgroundColor='tertiary' className={_s.mr5} icon='ellipsis' - onClick={onOpenGroupOptions} + onClick={this.handleOnOpenGroupOptions} + buttonRef={this.setInfoBtn} />
diff --git a/app/javascript/gabsocial/components/modal/group_editor_modal.js b/app/javascript/gabsocial/components/modal/group_editor_modal.js deleted file mode 100644 index 723ad7e0..00000000 --- a/app/javascript/gabsocial/components/modal/group_editor_modal.js +++ /dev/null @@ -1,68 +0,0 @@ -import { injectIntl, defineMessages } from 'react-intl' -import { muteAccount } from '../../actions/accounts' - -const messages = defineMessages({ - muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' }, - cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' }, - confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' }, -}) - -const mapStateToProps = (state) => ({ - isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']), - account: state.getIn(['mutes', 'new', 'account']), -}) - -const mapDispatchToProps = (dispatch) => ({ - onConfirm(account, notifications) { - dispatch(muteAccount(account.get('id'), notifications)) - }, -}) - -export default -@connect(mapStateToProps, mapDispatchToProps) -@injectIntl -class UnfollowModal extends PureComponent { - - static propTypes = { - isSubmitting: PropTypes.bool.isRequired, - account: PropTypes.object.isRequired, - onConfirm: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - } - - componentDidMount() { - this.button.focus() - } - - handleClick = () => { - this.props.onClose() - this.props.onConfirm(this.props.account, this.props.notifications) - } - - handleCancel = () => { - this.props.onClose() - } - - render() { - const { account, intl } = this.props - - // , { - // message: @{account.get('acct')} }} />, - // confirm: intl.formatMessage(messages.unfollowConfirm), - // onConfirm: () => dispatch(unfollowAccount(account.get('id'))), - // })); - - return ( - } - confirm={} - onConfirm={() => { - // dispatch(blockDomain(domain)) - // dispatch(blockDomain(domain)) - }} - /> - ) - } - -} diff --git a/app/javascript/gabsocial/components/modal/group_members_modal.js b/app/javascript/gabsocial/components/modal/group_members_modal.js index a5a09729..7ff10161 100644 --- a/app/javascript/gabsocial/components/modal/group_members_modal.js +++ b/app/javascript/gabsocial/components/modal/group_members_modal.js @@ -1,31 +1,36 @@ import { defineMessages, injectIntl } from 'react-intl' -import ImmutablePureComponent from 'react-immutable-pure-component' import ModalLayout from './modal_layout' -import GroupCreate from '../../features/group_create' +import GroupMembers from '../../features/group_members' const messages = defineMessages({ - title: { id: 'create_group', defaultMessage: 'Create group' }, + title: { id: 'group_members', defaultMessage: 'Group members' }, }) export default @injectIntl -class GroupMembersModal extends ImmutablePureComponent { +class GroupMembersModal extends PureComponent { static propTypes = { + groupId: PropTypes.string.isRequired, intl: PropTypes.object.isRequired, onClose: PropTypes.func.isRequired, } render() { - const { intl, onClose } = this.props + const { + intl, + onClose, + groupId, + } = this.props return ( - + ) } diff --git a/app/javascript/gabsocial/components/modal/group_removed_accounts_modal.js b/app/javascript/gabsocial/components/modal/group_removed_accounts_modal.js new file mode 100644 index 00000000..3c411c99 --- /dev/null +++ b/app/javascript/gabsocial/components/modal/group_removed_accounts_modal.js @@ -0,0 +1,37 @@ +import { defineMessages, injectIntl } from 'react-intl' +import ModalLayout from './modal_layout' +import GroupRemovedAccounts from '../../features/group_removed_accounts' + +const messages = defineMessages({ + title: { id: 'group_removed', defaultMessage: 'Removed accounts' }, +}) + +export default +@injectIntl +class GroupRemovedAccountsModal extends PureComponent { + + static propTypes = { + groupId: PropTypes.string.isRequired, + intl: PropTypes.object.isRequired, + onClose: PropTypes.func.isRequired, + } + + render() { + const { + intl, + onClose, + groupId, + } = this.props + + return ( + + + + ) + } +} diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js index 8277d510..ba7820e0 100644 --- a/app/javascript/gabsocial/components/modal/modal_base.js +++ b/app/javascript/gabsocial/components/modal/modal_base.js @@ -3,6 +3,9 @@ import { injectIntl, FormattedMessage, defineMessages } from 'react-intl' import classNames from 'classnames/bind' import { openModal } from '../../actions/modal' import { cancelReplyCompose } from '../../actions/compose' +import { BREAKPOINT_EXTRA_SMALL } from '../../constants' +import Responsive from '../../features/ui/util/responsive_component' +import CardView from '../card_view' const messages = defineMessages({ confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -145,7 +148,14 @@ class ModalBase extends PureComponent { onClick={this.handleOnClose} className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')} > - {children} + + {children} + + + + {children} + + } diff --git a/app/javascript/gabsocial/components/modal/modal_root.js b/app/javascript/gabsocial/components/modal/modal_root.js index 8398fbac..4dec0ca3 100644 --- a/app/javascript/gabsocial/components/modal/modal_root.js +++ b/app/javascript/gabsocial/components/modal/modal_root.js @@ -1,3 +1,4 @@ +import { Fragment } from 'react' import { closeModal } from '../../actions/modal' import { cancelReplyCompose } from '../../actions/compose' import Bundle from '../../features/ui/util/bundle' @@ -17,8 +18,8 @@ import { MODAL_GIF_PICKER, MODAL_GROUP_CREATE, MODAL_GROUP_DELETE, - MODAL_GROUP_EDITOR, MODAL_GROUP_MEMBERS, + MODAL_GROUP_REMOVED_ACCOUNTS, MODAL_HASHTAG_TIMELINE_SETTINGS, MODAL_HOME_TIMELINE_SETTINGS, MODAL_HOTKEYS, @@ -51,8 +52,8 @@ import { GifPickerModal, GroupCreateModal, GroupDeleteModal, - GroupEditorModal, GroupMembersModal, + GroupRemovedAccountsModal, HashtagTimelineSettingsModal, HomeTimelineSettingsModal, HotkeysModal, @@ -86,8 +87,8 @@ MODAL_COMPONENTS[MODAL_EMBED] = EmbedModal MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal -MODAL_COMPONENTS[MODAL_GROUP_EDITOR] = GroupEditorModal MODAL_COMPONENTS[MODAL_GROUP_MEMBERS] = GroupMembersModal +MODAL_COMPONENTS[MODAL_GROUP_REMOVED_ACCOUNTS] = GroupRemovedAccountsModal MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal @@ -159,8 +160,6 @@ class ModalRoot extends PureComponent { const { type, props } = this.props const visible = !!type - // : todo : init card view if mobile - return ( { diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar.js index 420cffcc..d88964c1 100644 --- a/app/javascript/gabsocial/components/navigation_bar.js +++ b/app/javascript/gabsocial/components/navigation_bar.js @@ -61,7 +61,7 @@ class NavigationBar extends ImmutablePureComponent { return (
-
+
@@ -71,8 +71,16 @@ class NavigationBar extends ImmutablePureComponent {

-

@@ -131,7 +139,7 @@ class NavigationBar extends ImmutablePureComponent { className={[_s.height53PX, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')} icon='arrow-left' iconSize='32px' - iconClassName={[_s.mr5, _s.fillPrimary].join(' ')} + iconClassName={[_s.mr5, _s.fillNavigation].join(' ')} onClick={this.handleBackClick} /> } @@ -139,7 +147,9 @@ class NavigationBar extends ImmutablePureComponent {
- {title} + + {title} +
@@ -157,8 +167,8 @@ class NavigationBar extends ImmutablePureComponent { key={`action-btn-${i}`} className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')} icon={action.icon} - iconClassName={_s.fillPrimary} - iconSize='14px' + iconClassName={_s.fillNavigation} + iconSize='18px' /> )) } @@ -181,7 +191,7 @@ class NavigationBarButtonDivider extends PureComponent { render() { return ( -
+
) } @@ -218,18 +228,18 @@ class NavigationBarButton extends PureComponent { cursorPointer: 1, bgTransparent: 1, noUnderline: 1, + colorNavigation: 1, px10: !!title, px5: !title, colorWhite: !!title, fs13PX: !!title, fontWeightNormal: !!title, textUppercase: !!title, - bgBrandDark_onHover: !!title, }) const iconClasses = CX({ - fillWhite: !!title || active, - fillBrandDark: !title, + fillNavigation: !!title || active, + fillNavigationBlend: !title, mr10: !!title, }) @@ -240,7 +250,6 @@ class NavigationBarButton extends PureComponent { to={to} href={href} attrTitle={attrTitle} - color='white' className={classes} noClasses > diff --git a/app/javascript/gabsocial/components/panel/group_info_panel.js b/app/javascript/gabsocial/components/panel/group_info_panel.js index f87d425f..348fe5cd 100644 --- a/app/javascript/gabsocial/components/panel/group_info_panel.js +++ b/app/javascript/gabsocial/components/panel/group_info_panel.js @@ -2,11 +2,12 @@ import { Fragment } from 'react' import { defineMessages, injectIntl, FormattedMessage } from 'react-intl' import ImmutablePureComponent from 'react-immutable-pure-component' import ImmutablePropTypes from 'react-immutable-proptypes' +import { openModal } from '../../actions/modal' +import { MODAL_GROUP_MEMBERS } from '../../constants' import { shortNumberFormat } from '../../utils/numbers' import PanelLayout from './panel_layout' import Button from '../button' import Divider from '../divider' -import Heading from '../heading' import Icon from '../icon' import Text from '../text' import RelativeTimestamp from '../relative_timestamp' @@ -16,20 +17,31 @@ const messages = defineMessages({ members: { id: 'members', defaultMessage: 'Members' }, }) +const mapDispatchToProps = (dispatch) => ({ + onOpenGroupMembersModal(groupId) { + console.log("onOpenGroupMembersModal:", groupId) + dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId })) + }, +}) + export default @injectIntl +@connect(null, mapDispatchToProps) class GroupInfoPanel extends ImmutablePureComponent { static propTypes = { - group: ImmutablePropTypes.list.isRequired, + group: ImmutablePropTypes.map.isRequired, intl: PropTypes.object.isRequired, + onOpenGroupMembersModal: PropTypes.func.isRequired, + } + + handleOnOpenGroupMembersModal = () => { + this.props.onOpenGroupMembersModal(this.props.group.get('id')) } render() { const { intl, group } = this.props - console.log("group:", group) - return ( { @@ -53,10 +65,10 @@ class GroupInfoPanel extends ImmutablePureComponent {