Progress on mobile modal and popover dialogs

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