Progress on mobile modal and popover dialogs

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(' ')}
             />
-            <div
+            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              ref={this.setDialog}
+              <div
-              role='dialog'
+                ref={this.setDialog}
-              onClick={this.handleOnClose}
+                role='dialog'
-              className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+                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>
+                {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>

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -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'>

app/javascript/gabsocial/components/popover/content_warning_popover.js

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

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 (
-      <PopoverLayout width={331}>
+      <PopoverLayout width={331} isXS={isXS}>
         <div className={[_s.default].join(' ')}>
           <DatePicker
             inline
@@ -116,4 +118,5 @@ class DatePickerPopover extends PureComponent {
       </PopoverLayout>
     )
   }
+  
 }

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 (
-      <PopoverLayout width={340}>
+      <PopoverLayout width={340} isXS={isXS}>
         <EmojiPickerMenu
           customEmojis={customEmojis}
           loading={loading}

app/javascript/gabsocial/components/popover/group_info_popover.js

@@ -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>
-    )
-  }
-}

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 (
-      <PopoverLayout width={210}>
+      <PopoverLayout width={210} isXS={isXS}>
         <List
           scrollKey='group_options'
           items={listItems}

app/javascript/gabsocial/components/popover/popover_base.js

@@ -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 = {

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 (
+        <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>
     )
   }
+
 }

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 (
-      <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>
     )
   }
 

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 (
-      <PopoverLayout className={_s.width250PX}>
+      <PopoverLayout width={250} isXS={isXS}>
         <List
           scrollKey='profile_options'
           items={listItems}

app/javascript/gabsocial/components/popover/repost_options_popover.js

@@ -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'

app/javascript/gabsocial/components/popover/sidebar_more_popover.js

@@ -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'

app/javascript/gabsocial/components/popover/status_options_popover.js

@@ -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'

app/javascript/gabsocial/components/popover/status_share_popover.js

@@ -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'

app/javascript/gabsocial/components/popover/status_visibility_popover.js

@@ -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) => {

app/javascript/gabsocial/components/popover/user_info_popover.js

@@ -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')}`

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'

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') }

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) {

app/javascript/gabsocial/utils/numbers.js

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

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; }