random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-05-07 01:55:24 -04:00
parent a026d86b86
commit a390662e4f
29 changed files with 347 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/gabsocial/components/card_view.js
View File

@@ -8,7 +8,7 @@ export default class CardView extends PureComponent {
const { children } = this.props
return (
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
<div title='cardview' className={[_s.default].join(' ')}>
{children}
</div>
)

24
app/javascript/gabsocial/components/group_header.js
View File

@@ -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}
/>
</div>
</div>

68
app/javascript/gabsocial/components/modal/group_editor_modal.js
View File

@@ -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: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
// confirm: intl.formatMessage(messages.unfollowConfirm),
// onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
// }));
return (
<ConfirmationModal
title={`Mute @${account.get('acct')}`}
message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
onConfirm={() => {
// dispatch(blockDomain(domain))
// dispatch(blockDomain(domain))
}}
/>
)
}
}

17
app/javascript/gabsocial/components/modal/group_members_modal.js
View File

@@ -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 (
<ModalLayout
title={intl.formatMessage(messages.title)}
width={440}
onClose={onClose}
noPadding
>
<GroupCreate onCloseModal={onClose} />
<GroupMembers groupId={groupId} onCloseModal={onClose} />
</ModalLayout>
)
}

37
app/javascript/gabsocial/components/modal/group_removed_accounts_modal.js Normal file
View File

@@ -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 (
<ModalLayout
title={intl.formatMessage(messages.title)}
width={440}
onClose={onClose}
noPadding
>
<GroupRemovedAccounts groupId={groupId} onCloseModal={onClose} />
</ModalLayout>
)
}
}

12
app/javascript/gabsocial/components/modal/modal_base.js
View File

@@ -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}
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
{children}
</Responsive>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<CardView>
{children}
</CardView>
</Responsive>
</div>
</Fragment>
}

9
app/javascript/gabsocial/components/modal/modal_root.js
View File

@@ -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 (
<ModalBase onClose={this.onClickClose} type={type}>
{

33
app/javascript/gabsocial/components/navigation_bar.js
View File

@@ -61,7 +61,7 @@ class NavigationBar extends ImmutablePureComponent {
return (
<div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.height53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
@@ -71,8 +71,16 @@ class NavigationBar extends ImmutablePureComponent {
<div className={[_s.default, _s.flexRow].join(' ')}>
<h1 className={[_s.default, _s.mr15].join(' ')}>
<Button to='/' isText title='Gab' aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
<Icon id='gab-logo' className={_s.fillWhite} />
<Button
to='/'
isText
title='Gab'
aria-label='Gab'
color='none'
backgroundColor='none'
className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
>
<Icon id='gab-logo' className={_s.fillNavigationBrand} />
</Button>
</h1>
@@ -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 {
<div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
<Heading size='h1'>
{title}
<span className={_s.colorNavigation}>
{title}
</span>
</Heading>
</div>
@@ -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 (
<div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgBrandDark].join(' ')} />
<div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
)
}
@@ -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
>

22
app/javascript/gabsocial/components/panel/group_info_panel.js
View File

@@ -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 (
<PanelLayout title={intl.formatMessage(messages.title)}>
{
@@ -53,10 +65,10 @@ class GroupInfoPanel extends ImmutablePureComponent {
</div>
<Button
isText
to={`/groups/${group.get('id')}/members`}
color='brand'
backgroundColor='none'
className={_s.mlAuto}
onClick={this.handleOnOpenGroupMembersModal}
>
<Text color='inherit' weight='medium' size='normal' className={_s.underline_onHover}>
{shortNumberFormat(group.get('member_count'))}

4
app/javascript/gabsocial/components/panel/who_to_follow_panel.js
View File

@@ -65,8 +65,8 @@ class WhoToFollowPanel extends ImmutablePureComponent {
<PanelLayout
noPadding
title={intl.formatMessage(messages.title)}
footerButtonTitle={intl.formatMessage(messages.show_more)}
footerButtonTo='/explore'
// footerButtonTitle={intl.formatMessage(messages.show_more)}
// footerButtonTo='/explore'
>
<div className={_s.default}>
{

93
app/javascript/gabsocial/components/popover/group_options_popover.js
View File

@@ -1,48 +1,42 @@
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
import { quoteCompose } from '../../actions/compose'
import { repost, unrepost } from '../../actions/interactions'
import {
MODAL_GROUP_CREATE,
MODAL_GROUP_MEMBERS,
MODAL_GROUP_REMOVED_ACCOUNTS,
} from '../../constants'
import { openModal } from '../../actions/modal'
import { boostModal, me } from '../../initial_state'
import { closePopover } from '../../actions/popover'
import { me } from '../../initial_state'
import PopoverLayout from './popover_layout'
import List from '../list'
const messages = defineMessages({
repost: { id: 'repost', defaultMessage: 'Repost' },
repostWithComment: { id: 'repost_with_comment', defaultMessage: 'Repost with comment' },
groupMembers: { id: 'group_members', defaultMessage: 'Group members' },
removedMembers: { id: 'group_removed_members', defaultMessage: 'Removed accounts' },
editGroup: { id: 'edit_group', defaultMessage: 'Edit group' },
});
const mapDispatchToProps = (dispatch, { intl }) => ({
onQuote (status, router) {
if (!me) return dispatch(openModal('UNAUTHORIZED'))
const mapDispatchToProps = (dispatch) => ({
dispatch((_, getState) => {
const state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) {
dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.quoteMessage),
confirm: intl.formatMessage(messages.quoteConfirm),
onConfirm: () => dispatch(quoteCompose(status, router)),
}));
} else {
dispatch(quoteCompose(status, router));
}
});
onOpenEditGroup(group) {
dispatch(closePopover())
dispatch(openModal(MODAL_GROUP_CREATE, { group }))
},
onRepost (status) {
if (!me) return dispatch(openModal('UNAUTHORIZED'))
if (status.get('reblogged')) {
dispatch(unrepost(status));
} else {
dispatch(repost(status));
}
onOpenRemovedMembers(groupId) {
dispatch(closePopover())
dispatch(openModal(MODAL_GROUP_REMOVED_ACCOUNTS, { groupId }))
},
onOpenGroupMembers(groupId) {
dispatch(closePopover())
dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
},
});
export default
@injectIntl
@connect(null, mapDispatchToProps)
@@ -50,19 +44,24 @@ class GroupOptionsPopover extends ImmutablePureComponent {
static defaultProps = {
intl: PropTypes.object.isRequired,
status: ImmutablePropTypes.map.isRequired,
onQuote: PropTypes.func.isRequired,
onRepost: PropTypes.func.isRequired,
group: ImmutablePropTypes.map.isRequired,
onOpenEditGroup: PropTypes.func.isRequired,
onOpenRemovedMembers: PropTypes.func.isRequired,
onOpenGroupMembers: PropTypes.func.isRequired,
}
updateOnProps = ['status']
updateOnProps = ['group']
handleOnRepost = () => {
handleEditGroup = () => {
this.props.onOpenEditGroup(this.props.group)
}
handleOnQuote = () => {
handleOnOpenRemovedMembers = () => {
this.props.onOpenRemovedMembers(this.props.group.get('id'))
}
handleOnOpenGroupMembers = () => {
this.props.onOpenGroupMembers(this.props.group.get('id'))
}
render() {
@@ -71,22 +70,28 @@ class GroupOptionsPopover extends ImmutablePureComponent {
const listItems = [
{
hideArrow: true,
icon: 'repost',
title: intl.formatMessage(messages.repost),
onClick: this.handleOnRepost,
icon: 'group',
title: intl.formatMessage(messages.groupMembers),
onClick: this.handleOnOpenGroupMembers,
},
{
hideArrow: true,
icon: 'block',
title: intl.formatMessage(messages.removedMembers),
onClick: this.handleOnOpenRemovedMembers,
},
{
hideArrow: true,
icon: 'pencil',
title: intl.formatMessage(messages.repostWithComment),
onClick: this.handleBlockDomain,
title: intl.formatMessage(messages.editGroup),
onClick: this.handleEditGroup,
}
]
return (
<PopoverLayout>
<PopoverLayout width={210}>
<List
scrollKey='repost_options'
scrollKey='group_options'
items={listItems}
size='large'
/>

3
app/javascript/gabsocial/components/popover/popover_root.js
View File

@@ -3,6 +3,7 @@ import {
POPOVER_DATE_PICKER,
POPOVER_EMOJI_PICKER,
POPOVER_GROUP_INFO,
POPOVER_GROUP_OPTIONS,
POPOVER_PROFILE_OPTIONS,
POPOVER_REPOST_OPTIONS,
POPOVER_SEARCH,
@@ -17,6 +18,7 @@ import {
DatePickerPopover,
EmojiPickerPopover,
GroupInfoPopover,
GroupOptionsPopover,
ProfileOptionsPopover,
RepostOptionsPopover,
SearchPopover,
@@ -34,6 +36,7 @@ POPOVER_COMPONENTS[POPOVER_CONTENT_WARNING] = ContentWarningPopover
POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
POPOVER_COMPONENTS[POPOVER_GROUP_INFO] = GroupInfoPopover
POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
POPOVER_COMPONENTS[POPOVER_REPOST_OPTIONS] = RepostOptionsPopover
POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover

10
app/javascript/gabsocial/components/pull_to_refresher.js
View File

@@ -4,17 +4,11 @@ import Icon from './icon'
export default class PullToRefresher extends PureComponent {
static propTypes = {
children: PropTypes.any,
}
render() {
const { children } = this.props
return (
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.posAbs, _s.left0, _s.right0, _s.topNeg60PX].join(' ')}>
<Icon id='loading' size='20px' />
<div className={[_s.default, _s.alignItemsCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg80PX].join(' ')}>
<Icon id='loading' size='24px' />
</div>
</Responsive>
)

4
app/javascript/gabsocial/components/scrollable_list.js
View File

@@ -128,6 +128,10 @@ export default class ScrollableList extends PureComponent {
const { innerHeight } = this.window;
const offset = scrollHeight - scrollTop - innerHeight;
if (scrollTop < -60 && this.props.onReload) {
// reload
}
if (600 > offset && this.props.onLoadMore && this.props.hasMore && !this.props.isLoading) {
this.props.onLoadMore();
}

7
app/javascript/gabsocial/components/status_card.js
View File

@@ -141,21 +141,22 @@ export default class StatusCard extends ImmutablePureComponent {
const horizontal = (card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded
const interactive = card.get('type') !== 'link'
const cardTitle = `${card.get('title')}`.trim()
const title = interactive ?
(
<a
className={[_s.default, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fs15PX, _s.fontWeightMedium].join(' ')}
href={card.get('url')}
title={card.get('title')}
title={cardTitle}
rel={DEFAULT_REL}
target='_blank'
>
{card.get('title')}
{cardTitle}
</a>
)
: (
<span className={[_s.default, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fs15PX, _s.fontWeightMedium].join(' ')}>
{card.get('title')}
{cardTitle}
</span>
)