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

Progress on mobile modal and popover dialogs

Browse Source
This commit is contained in:
mgabdev 2020-05-12 20:36:54 -04:00
parent 2fcbd4131f
commit ccc3206f8f
22 changed files with 166 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,11 +73,11 @@ class ModalBase extends PureComponent {
}
}
componentDidMount () {
componentDidMount() {
window.addEventListener('keyup', this.handleKeyUp, false)
}
componentWillReceiveProps (nextProps) {
componentWillReceiveProps(nextProps) {
if (!!nextProps.children && !this.props.children) {
this.activeElement = document.activeElement
@ -92,7 +92,7 @@ class ModalBase extends PureComponent {
}
}
componentDidUpdate (prevProps) {
componentDidUpdate(prevProps) {
if (!this.props.children && !!prevProps.children) {
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'))
}
@ -104,7 +104,7 @@ class ModalBase extends PureComponent {
}
}
componentWillUnmount () {
componentWillUnmount() {
window.removeEventListener('keyup', this.handleKeyUp)
}
@ -120,7 +120,7 @@ class ModalBase extends PureComponent {
this.dialog = n
}
render () {
render() {
const { children } = this.props
const visible = !!children
@ -142,14 +142,26 @@ class ModalBase extends PureComponent {
role='presentation'
className={[_s.default, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
/>
<div
ref={this.setDialog}
role='dialog'
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}
</div>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div
ref={this.setDialog}
role='dialog'
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}
</div>
</Responsive>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div
ref={this.setDialog}
role='dialog'
onClick={this.handleOnClose}
className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentEnd, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
>
{children}
</div>
</Responsive>
</Fragment>
}
</div>

2
app/javascript/gabsocial/components/modal/modal_layout.js
View File

@ -49,7 +49,7 @@ class ModalLayout extends PureComponent {
})
return (
<div style={{width: `${width}px`}}>
<div style={{width: `${width}px`}} className={_s.modal}>
<Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
<Heading size='h2'>

9
app/javascript/gabsocial/components/popover/content_warning_popover.js
View File

@ -1,9 +0,0 @@
export default class ContentWarningPopover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

7
app/javascript/gabsocial/components/popover/date_picker_popover.js
View File

@ -38,12 +38,14 @@ const mapDispatchToProps = (dispatch, { isPro }) => ({
export default
@connect(mapStateToProps, mapDispatchToProps)
class DatePickerPopover extends PureComponent {
static propTypes = {
date: PropTypes.instanceOf(Date),
setScheduledAt: PropTypes.func.isRequired,
isPro: PropTypes.bool,
position: PropTypes.string,
small: PropTypes.bool,
isXS: PropTypes.bool,
}
handleSetDate = (date) => {
@ -55,13 +57,13 @@ class DatePickerPopover extends PureComponent {
}
render() {
const { date, isPro } = this.props
const { date, isPro, isXS } = this.props
const datePickerDisabled = !isPro
const withPortal = isMobile(window.innerWidth)
return (
<PopoverLayout width={331}>
<PopoverLayout width={331} isXS={isXS}>
<div className={[_s.default].join(' ')}>
<DatePicker
inline
@ -116,4 +118,5 @@ class DatePickerPopover extends PureComponent {
</PopoverLayout>
)
}
}

4
app/javascript/gabsocial/components/popover/emoji_picker_popover.js
View File

@ -237,6 +237,7 @@ class EmojiPickerPopover extends ImmutablePureComponent {
onSkinTone: PropTypes.func.isRequired,
skinTone: PropTypes.number.isRequired,
onClosePopover: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
state = {
@ -269,12 +270,13 @@ class EmojiPickerPopover extends ImmutablePureComponent {
skinTone,
frequentlyUsedEmojis,
customEmojis,
isXS,
} = this.props
const { loading } = this.state
return (
<PopoverLayout width={340}>
<PopoverLayout width={340} isXS={isXS}>
<EmojiPickerMenu
customEmojis={customEmojis}
loading={loading}

12
app/javascript/gabsocial/components/popover/group_info_popover.js
View File

@ -1,12 +0,0 @@
import PopoverLayout from './popover_layout'
import Text from '../text'
export default class UserInfoPopover extends PureComponent {
render() {
return (
<PopoverLayout>
<Text>testing</Text>
</PopoverLayout>
)
}
}

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

@ -48,6 +48,7 @@ class GroupOptionsPopover extends ImmutablePureComponent {
onOpenEditGroup: PropTypes.func.isRequired,
onOpenRemovedMembers: PropTypes.func.isRequired,
onOpenGroupMembers: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
updateOnProps = ['group']
@ -65,7 +66,7 @@ class GroupOptionsPopover extends ImmutablePureComponent {
}
render() {
const { intl } = this.props
const { intl, isXS } = this.props
const listItems = [
{
@ -89,7 +90,7 @@ class GroupOptionsPopover extends ImmutablePureComponent {
]
return (
<PopoverLayout width={210}>
<PopoverLayout width={210} isXS={isXS}>
<List
scrollKey='group_options'
items={listItems}

7
app/javascript/gabsocial/components/popover/popover_base.js
View File

@ -2,7 +2,6 @@ import detectPassiveEvents from 'detect-passive-events'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { Manager, Reference, Popper } from 'react-popper'
import { closePopover } from '../../actions/popover'
import { CX } from '../../constants'
import { isUserTouching } from '../../utils/is_mobile'
@ -13,12 +12,8 @@ const mapStateToProps = (state) => ({
popoverPlacement: state.getIn(['popover', 'placement']),
})
const mapDispatchToProps = (dispatch) => ({
onClose: (type) => dispatch(closePopover(type)),
})
export default
@connect(mapStateToProps, mapDispatchToProps)
@connect(mapStateToProps)
class PopoverBase extends ImmutablePureComponent {
static contextTypes = {

33
app/javascript/gabsocial/components/popover/popover_layout.js
View File

@ -1,10 +1,13 @@
import Block from '../block'
import Heading from '../heading'
export default class PopoverLayout extends PureComponent {
static propTypes = {
children: PropTypes.node,
className: PropTypes.string,
width: PropTypes.number,
isXS: PropTypes.bool,
title: PropTypes.string,
}
static defaultProps = {
@ -12,14 +15,38 @@ export default class PopoverLayout extends PureComponent {
}
render() {
const { children, className, width } = this.props
const {
children,
width,
isXS,
title,
} = this.props
if (isXS) {
return (
<div className={[_s.default, _s.bgPrimary, _s.overflowHidden, _s.modal, _s.topRightRadiusSmall, _s.topLeftRadiusSmall].join(' ')}>
{
!!title &&
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
<Heading size='h2'>
{title}
</Heading>
</div>
}
<div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
{children}
</div>
</div>
)
}
return (
<div className={className} style={{width: `${width}px`}}>
<div style={{ width: `${width}px` }} className={_s.modal}>
<Block>
{children}
</Block>
</div>
)
}
}

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

@ -1,8 +1,7 @@
import {
POPOVER_CONTENT_WARNING,
BREAKPOINT_EXTRA_SMALL,
POPOVER_DATE_PICKER,
POPOVER_EMOJI_PICKER,
POPOVER_GROUP_INFO,
POPOVER_GROUP_OPTIONS,
POPOVER_PROFILE_OPTIONS,
POPOVER_REPOST_OPTIONS,
@ -14,10 +13,8 @@ import {
POPOVER_USER_INFO,
} from '../../constants'
import {
ContentWarningPopover,
DatePickerPopover,
EmojiPickerPopover,
GroupInfoPopover,
GroupOptionsPopover,
ProfileOptionsPopover,
RepostOptionsPopover,
@ -28,14 +25,18 @@ import {
StatusVisibilityPopover,
UserInfoPopover,
} from '../../features/ui/util/async_components'
import { closePopover } from '../../actions/popover'
import { getWindowDimension } from '../../utils/is_mobile'
import Bundle from '../../features/ui/util/bundle'
import ModalBase from '../modal/modal_base'
import PopoverBase from './popover_base'
const initialState = getWindowDimension()
const POPOVER_COMPONENTS = {}
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
@ -51,13 +52,37 @@ const mapStateToProps = (state) => ({
props: state.getIn(['popover', 'popoverProps'], {}),
})
const mapDispatchToProps = (dispatch) => ({
onClose: (type) => dispatch(closePopover(type)),
})
export default
@connect(mapStateToProps)
@connect(mapStateToProps, mapDispatchToProps)
class PopoverRoot extends PureComponent {
static propTypes = {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired,
}
state = {
width: initialState.width,
}
componentDidMount() {
this.handleResize()
window.addEventListener('resize', this.handleResize, false)
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize, false)
}
handleResize = () => {
const { width } = getWindowDimension()
this.setState({ width })
}
renderEmpty = () => {
@ -65,11 +90,17 @@ class PopoverRoot extends PureComponent {
}
render() {
const { type, props } = this.props
const { type, props, onClose } = this.props
const { width } = this.state
const visible = !!type
const isXS = width <= BREAKPOINT_EXTRA_SMALL
const Wrapper = isXS ? ModalBase : PopoverBase
return (
<PopoverBase
<Wrapper
onClose={onClose}
visible={visible}
innerRef={this.setRef}
{...props}
@ -83,11 +114,11 @@ class PopoverRoot extends PureComponent {
renderDelay={200}
>
{
(Component) => <Component {...props} />
(Component) => <Component isXS={isXS} {...props} />
}
</Bundle>
}
</PopoverBase>
</Wrapper>
)
}

7
app/javascript/gabsocial/components/popover/profile_options_popover.js
View File

@ -142,6 +142,10 @@ export default
@connect(makeMapStateToProps, mapDispatchToProps)
class ProfileOptionsPopover extends PureComponent {
static defaultProps = {
isXS: PropTypes.bool,
}
makeMenu() {
const { account, intl, domain } = this.props;
@ -302,10 +306,11 @@ class ProfileOptionsPopover extends PureComponent {
}
render() {
const { isXS } = this.props
const listItems = this.makeMenu()
return (
<PopoverLayout className={_s.width250PX}>
<PopoverLayout width={250} isXS={isXS}>
<List
scrollKey='profile_options'
items={listItems}

5
app/javascript/gabsocial/components/popover/repost_options_popover.js
View File

@ -78,6 +78,7 @@ class RepostOptionsPopover extends ImmutablePureComponent {
onQuote: PropTypes.func.isRequired,
onRepost: PropTypes.func.isRequired,
status: ImmutablePropTypes.map.isRequired,
isXS: PropTypes.bool,
}
updateOnProps = [
@ -93,12 +94,12 @@ class RepostOptionsPopover extends ImmutablePureComponent {
}
render() {
const { intl, status } = this.props
const { intl, status, isXS } = this.props
const alreadyReposted = status.get('reblogged')
return (
<PopoverLayout width={220}>
<PopoverLayout width={220} isXS={isXS}>
<List
scrollKey='repost_options'
size='large'

7
app/javascript/gabsocial/components/popover/sidebar_more_popover.js
View File

@ -27,6 +27,7 @@ class SidebarMorePopover extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onOpenDisplayModal: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
handleOnOpenDisplayModal = () => {
@ -34,10 +35,12 @@ class SidebarMorePopover extends PureComponent {
}
render() {
const { intl } = this.props
const { intl, isXS } = this.props
if (isXS) return null
return (
<PopoverLayout className={_s.width240PX}>
<PopoverLayout width={240}>
<List
size='large'
scrollKey='profile_options'

6
app/javascript/gabsocial/components/popover/status_options_popover.js
View File

@ -194,11 +194,13 @@ class StatusOptionsPopover extends ImmutablePureComponent {
onPin: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
onFetchGroupRelationships: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
updateOnProps = [
'status',
'groupRelationships',
'isXS',
]
componentDidMount() {
@ -256,13 +258,13 @@ class StatusOptionsPopover extends ImmutablePureComponent {
status,
intl,
groupRelationships,
isXS,
} = this.props
const mutingConversation = status.get('muted')
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'))
const isReply = !!status.get('in_reply_to_id')
const withGroupAdmin = !!groupRelationships ? groupRelationships.get('admin') : false
console.log("withGroupAdmin:", withGroupAdmin, groupRelationships ? groupRelationships.get('admin') : '')
let menu = []
@ -362,7 +364,7 @@ class StatusOptionsPopover extends ImmutablePureComponent {
}
return (
<PopoverLayout>
<PopoverLayout isXS={isXS}>
<List
size='large'
scrollKey='profile_options'

5
app/javascript/gabsocial/components/popover/status_share_popover.js
View File

@ -35,6 +35,7 @@ class StatusSharePopover extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
onClosePopover: PropTypes.func.isRequired,
onOpenEmbedModal: PropTypes.func.isRequired,
isXS: PropTypes.bool,
}
handleOnOpenEmbedModal = () => {
@ -63,12 +64,12 @@ class StatusSharePopover extends ImmutablePureComponent {
}
render() {
const { intl, status } = this.props
const { intl, status, isXS } = this.props
const mailToHref = !status ? undefined : `mailto:?subject=Gab&body=${status.get('url')}`
return (
<PopoverLayout width={220}>
<PopoverLayout width={220} isXS={isXS}>
<List
size='large'
scrollKey='status_share_options'

5
app/javascript/gabsocial/components/popover/status_visibility_popover.js
View File

@ -41,6 +41,7 @@ class StatusVisibilityDropdown extends PureComponent {
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
}
handleChange = (value) => {
@ -48,7 +49,7 @@ class StatusVisibilityDropdown extends PureComponent {
}
render () {
const { intl, value } = this.props
const { intl, value, isXS } = this.props
const options = [
{
@ -72,7 +73,7 @@ class StatusVisibilityDropdown extends PureComponent {
]
return (
<PopoverLayout width={300}>
<PopoverLayout width={300} isXS={isXS}>
<div className={[_s.default].join(' ')}>
{
options.map((option, i) => {

6
app/javascript/gabsocial/components/popover/user_info_popover.js
View File

@ -7,12 +7,16 @@ import Avatar from '../avatar'
import DisplayName from '../display_name'
export default class UserInfoPopover extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
isXS: PropTypes.bool,
}
render() {
const { account } = this.props
const { account, isXS } = this.props
if (isXS) return null
const content = !account ? null : { __html: account.get('note_emojified') }
const to = !account ? '' : `/${account.get('acct')}`

2
app/javascript/gabsocial/constants.js
View File

@ -18,10 +18,8 @@ export const URL_DISSENTER_SHOP = 'https://shop.dissenter.com'
export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
export const POPOVER_CONTENT_WARNING = 'CONTENT_WARNING'
export const POPOVER_DATE_PICKER = 'DATE_PICKER'
export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
export const POPOVER_GROUP_INFO = 'GROUP_INFO'
export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
export const POPOVER_REPOST_OPTIONS = 'REPOST_OPTIONS'

2
app/javascript/gabsocial/features/ui/util/async_components.js
View File

@ -12,7 +12,6 @@ export function Compose() { return import(/* webpackChunkName: "features/compose
export function ComposeForm() { return import(/* webpackChunkName: "components/compose_form" */'../../compose/components/compose_form') }
export function ComposeModal() { return import(/* webpackChunkName: "components/compose_modal" */'../../../components/modal/compose_modal') }
export function ConfirmationModal() { return import(/* webpackChunkName: "components/confirmation_modal" */'../../../components/modal/confirmation_modal') }
export function ContentWarningPopover() { return import(/* webpackChunkName: "components/content_warning_popover" */'../../../components/popover/content_warning_popover') }
export function DatePickerPopover() { return import(/* webpackChunkName: "components/date_picker_popover" */'../../../components/popover/date_picker_popover') }
export function DisplayOptionsModal() { return import(/* webpackChunkName: "components/display_options_modal" */'../../../components/modal/display_options_modal') }
export function EditProfileModal() { return import(/* webpackChunkName: "components/edit_profile_modal" */'../../../components/modal/edit_profile_modal') }
@ -31,7 +30,6 @@ export function GroupCreateModal() { return import(/* webpackChunkName: "compone
export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
export function GroupRemovedAccountsModal() { return import(/* webpackChunkName: "components/group_removed_accounts_modal" */'../../../components/modal/group_removed_accounts_modal') }
export function GroupMembersModal() { return import(/* webpackChunkName: "components/group_members_modal" */'../../../components/modal/group_members_modal') }
export function GroupInfoPopover() { return import(/* webpackChunkName: "components/group_info_popover" */'../../../components/popover/group_info_popover') }
export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }

4
app/javascript/gabsocial/utils/is_mobile.js
View File

@ -9,10 +9,8 @@ import {
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
const LAYOUT_BREAKPOINT = 630
export function isMobile(width) {
return width <= LAYOUT_BREAKPOINT
return width <= BREAKPOINT_EXTRA_SMALL
}
export function breakpointExtraLarge(width) {

2
app/javascript/gabsocial/utils/numbers.js
View File

@ -12,7 +12,7 @@ export const shortNumberFormat = (number) => {
return (
<Fragment>
<FormattedNumber value={number / 1000} maximumFractionDigits={1} />
<FormattedNumber value={number / 1000} maximumFractionDigits={1} />k
</Fragment>
)
}

25
app/javascript/styles/global.css
View File

@ -619,6 +619,31 @@ body {
.width1255PX {
width: 100%;
}
:global(.emoji-mart) {
border: 0 !important;
border-radius: 0 !important;
width: 100% !important;
min-width: 100% !important;
}
.modal {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
.modal:after {
content: '';
display: block;
position: absolute;
width: 70px;
height: 6px;
background-color: var(--solid_color_primary);
border-radius: var(--radius-circle);
left: calc(100% / 2 - 35px);
top: -20px;
}
}
.textAlignLeft { text-align: left; }