diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js index 7366bfe1..b549ea21 100644 --- a/app/javascript/gabsocial/components/modal/modal_base.js +++ b/app/javascript/gabsocial/components/modal/modal_base.js @@ -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(' ')} /> -
- {children} -
+ +
+ {children} +
+
+ +
+ {children} +
+
} diff --git a/app/javascript/gabsocial/components/modal/modal_layout.js b/app/javascript/gabsocial/components/modal/modal_layout.js index edf532b4..b81f7393 100644 --- a/app/javascript/gabsocial/components/modal/modal_layout.js +++ b/app/javascript/gabsocial/components/modal/modal_layout.js @@ -49,7 +49,7 @@ class ModalLayout extends PureComponent { }) return ( -
+
diff --git a/app/javascript/gabsocial/components/popover/content_warning_popover.js b/app/javascript/gabsocial/components/popover/content_warning_popover.js deleted file mode 100644 index 011ff2a2..00000000 --- a/app/javascript/gabsocial/components/popover/content_warning_popover.js +++ /dev/null @@ -1,9 +0,0 @@ -export default class ContentWarningPopover extends PureComponent { - render() { - return ( -
- { /* */ } -
- ) - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/popover/date_picker_popover.js b/app/javascript/gabsocial/components/popover/date_picker_popover.js index 2e02a3f8..390c5f7e 100644 --- a/app/javascript/gabsocial/components/popover/date_picker_popover.js +++ b/app/javascript/gabsocial/components/popover/date_picker_popover.js @@ -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 ( - +
) } + } \ No newline at end of file diff --git a/app/javascript/gabsocial/components/popover/emoji_picker_popover.js b/app/javascript/gabsocial/components/popover/emoji_picker_popover.js index 9c9022f1..356f37f5 100644 --- a/app/javascript/gabsocial/components/popover/emoji_picker_popover.js +++ b/app/javascript/gabsocial/components/popover/emoji_picker_popover.js @@ -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 ( - + - testing - - ) - } -} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/popover/group_options_popover.js b/app/javascript/gabsocial/components/popover/group_options_popover.js index d54de58e..db91ddf7 100644 --- a/app/javascript/gabsocial/components/popover/group_options_popover.js +++ b/app/javascript/gabsocial/components/popover/group_options_popover.js @@ -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 ( - + ({ 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 = { diff --git a/app/javascript/gabsocial/components/popover/popover_layout.js b/app/javascript/gabsocial/components/popover/popover_layout.js index 017ede8a..676d2698 100644 --- a/app/javascript/gabsocial/components/popover/popover_layout.js +++ b/app/javascript/gabsocial/components/popover/popover_layout.js @@ -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 ( +
+ { + !!title && +
+ + {title} + +
+ } +
+ {children} +
+
+ ) + } return ( -
+
{children}
) } + } \ No newline at end of file diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js index 1946ecc8..91ea33b7 100644 --- a/app/javascript/gabsocial/components/popover/popover_root.js +++ b/app/javascript/gabsocial/components/popover/popover_root.js @@ -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 ( - { - (Component) => + (Component) => } } - + ) } diff --git a/app/javascript/gabsocial/components/popover/profile_options_popover.js b/app/javascript/gabsocial/components/popover/profile_options_popover.js index ee9c16aa..d65986cd 100644 --- a/app/javascript/gabsocial/components/popover/profile_options_popover.js +++ b/app/javascript/gabsocial/components/popover/profile_options_popover.js @@ -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 ( - + + { @@ -34,10 +35,12 @@ class SidebarMorePopover extends PureComponent { } render() { - const { intl } = this.props + const { intl, isXS } = this.props + + if (isXS) return null return ( - + + { @@ -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 ( - + { @@ -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 ( - +
{ options.map((option, i) => { diff --git a/app/javascript/gabsocial/components/popover/user_info_popover.js b/app/javascript/gabsocial/components/popover/user_info_popover.js index 94c9225f..3975626c 100644 --- a/app/javascript/gabsocial/components/popover/user_info_popover.js +++ b/app/javascript/gabsocial/components/popover/user_info_popover.js @@ -7,13 +7,17 @@ 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')}` diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js index 8a80b033..5646c199 100644 --- a/app/javascript/gabsocial/constants.js +++ b/app/javascript/gabsocial/constants.js @@ -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' diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js index 7edd4e0f..86b3bc39 100644 --- a/app/javascript/gabsocial/features/ui/util/async_components.js +++ b/app/javascript/gabsocial/features/ui/util/async_components.js @@ -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') } diff --git a/app/javascript/gabsocial/utils/is_mobile.js b/app/javascript/gabsocial/utils/is_mobile.js index 665fcb48..7f1151ea 100644 --- a/app/javascript/gabsocial/utils/is_mobile.js +++ b/app/javascript/gabsocial/utils/is_mobile.js @@ -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) { diff --git a/app/javascript/gabsocial/utils/numbers.js b/app/javascript/gabsocial/utils/numbers.js index afbf9019..0823c059 100644 --- a/app/javascript/gabsocial/utils/numbers.js +++ b/app/javascript/gabsocial/utils/numbers.js @@ -12,7 +12,7 @@ export const shortNumberFormat = (number) => { return ( - + k ) } diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css index 6dd45693..fb0461ef 100644 --- a/app/javascript/styles/global.css +++ b/app/javascript/styles/global.css @@ -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; }