Progress

app/javascript/gabsocial/actions/compose.js

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import { CancelToken, isCancel } from 'axios';
 import throttle from 'lodash.throttle'
 import moment from 'moment-mini'
+import { isMobile } from '../utils/is_mobile'
 import { search as emojiSearch } from '../components/emoji/emoji_mart_search_light';
 import { urlRegex } from '../features/ui/util/url_regex'
 import { tagHistory } from '../settings';
@@ -171,20 +172,30 @@ export function replyCompose(status, router, showModal) {
       status: status,
     });
 
-    if (showModal) {
+    if (isMobile(window.innerWidth)) {
-      dispatch(openModal('COMPOSE'));
+      router.history.push('/compose')
+    } else {
+      if (showModal) {
+        dispatch(openModal('COMPOSE'));
+      }
     }
   };
 };
 
-export function quoteCompose(status) {
+export function quoteCompose(status, router) {
   return (dispatch) => {
     dispatch({
       type: COMPOSE_QUOTE,
       status: status,
     });
 
-    dispatch(openModal('COMPOSE'));
+    if (isMobile(window.innerWidth)) {
+      router.history.push('/compose')
+    } else {
+      if (showModal) {
+        dispatch(openModal('COMPOSE'));
+      }
+    }
   };
 };
 
@@ -249,7 +260,7 @@ export function handleComposeSubmit(dispatch, getState, response, status) {
   }
 }
 
-export function submitCompose(group, replyToId = null) {
+export function submitCompose(group, replyToId = null, router) {
   return function (dispatch, getState) {
     if (!me) return;
 
@@ -288,6 +299,10 @@ export function submitCompose(group, replyToId = null) {
     const scheduled_at = getState().getIn(['compose', 'scheduled_at'], null);
     if (scheduled_at !== null) scheduled_at = moment.utc(scheduled_at).toDate();
 
+    if (isMobile(window)) {
+      router.history.goBack()
+    }
+
     api(getState)[method](endpoint, {
       status,
       markdown,

app/javascript/gabsocial/components/comment.js

@@ -83,6 +83,10 @@ export default
 @connect(makeMapStateToProps, mapDispatchToProps)
 class Comment extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
   static propTypes = {
     indent: PropTypes.number,
     intl: PropTypes.object.isRequired,
@@ -118,7 +122,7 @@ class Comment extends ImmutablePureComponent {
   }
 
   handleOnReply = () => {
-    this.props.onReply(this.props.status)
+    this.props.onReply(this.props.status, this.context.router)
   }
 
   handleOnFavorite = () => {

app/javascript/gabsocial/components/floating_action_button.js

@@ -37,7 +37,7 @@ class FloatingActionButton extends PureComponent {
         className={[_s.posFixed, _s.z4, _s.mb15, _s.mr15, _s.bottom55PX, _s.right0].join(' ')}
       >
         <Button
-          onClick={onOpenCompose}
+          to='/compose'
           className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
           title={message}
           aria-label={message}

app/javascript/gabsocial/components/navigation_bar.js

@@ -1,11 +1,15 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { openSidebar } from '../actions/sidebar'
+import { openPopover } from '../actions/popover'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 import Responsive from '../features/ui/util/responsive_component'
-import { CX } from '../constants'
+import {
+  CX,
+  POPOVER_NAV_SETTINGS,
+} from '../constants'
 import Avatar from './avatar'
 import BackButton from './back_button'
 import Button from './button'
@@ -23,8 +27,11 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openSidebar())
   },
 
-  onOpenNavSettingsPopover() {
+  onOpenNavSettingsPopover(targetRef) {
-    dispatch(openPopover())
+    dispatch(openPopover(POPOVER_NAV_SETTINGS, {
+      targetRef,
+      position: 'top',
+    }))
   }
 })
 
@@ -42,9 +49,12 @@ class NavigationBar extends ImmutablePureComponent {
     onOpenNavSettingsPopover: PropTypes.func.isRequired,
   }
 
-  handleProfileClick = () => {
+  handleOnOpenNavSettingsPopover = () => {
-    // : todo :
+    this.props.onOpenNavSettingsPopover(this.avatarNode)
-    // open menu
+  }
+
+  setAvatarNode = (c) => {
+    this.avatarNode = c
   }
 
   render() {
@@ -104,8 +114,9 @@ class NavigationBar extends ImmutablePureComponent {
                   {
                     !!account &&
                     <button
+                      ref={this.setAvatarNode}
                       title={account.get('display_name')}
-                      onClick={this.handleProfileClick}
+                      onClick={this.handleOnOpenNavSettingsPopover}
                       className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}
                     >
                       <Avatar account={account} size={32} noHover />

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

@@ -3,6 +3,7 @@ import {
   POPOVER_DATE_PICKER,
   POPOVER_EMOJI_PICKER,
   POPOVER_GROUP_OPTIONS,
+  POPOVER_NAV_SETTINGS,
   POPOVER_PROFILE_OPTIONS,
   POPOVER_REPOST_OPTIONS,
   POPOVER_SEARCH,
@@ -16,6 +17,7 @@ import {
   DatePickerPopover,
   EmojiPickerPopover,
   GroupOptionsPopover,
+  NavSettingsPopover,
   ProfileOptionsPopover,
   RepostOptionsPopover,
   SearchPopover,
@@ -38,6 +40,7 @@ const POPOVER_COMPONENTS = {}
 POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
 POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
 POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
+POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
 POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
 POPOVER_COMPONENTS[POPOVER_REPOST_OPTIONS] = RepostOptionsPopover
 POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover

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

@@ -86,7 +86,7 @@ class RepostOptionsPopover extends ImmutablePureComponent {
   ]
 
   handleOnQuote = () => {
-    this.props.onQuote(this.props.status, this.context.router.history)
+    this.props.onQuote(this.props.status, this.context.router)
   }
 
   handleOnRepost = () => {

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

@@ -180,6 +180,10 @@ export default
 @connect(mapStateToProps, mapDispatchToProps)
 class StatusOptionsPopover extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+  
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
     groupRelationships: ImmutablePropTypes.map,

app/javascript/gabsocial/components/sidebar_xs.js

@@ -137,36 +137,36 @@ class SidebarXS extends ImmutablePureComponent {
         onClick: this.handleSidebarClose,
         title: intl.formatMessage(messages.lists),
       },
-      {
+      // {
-        icon: 'group',
+      //   icon: 'group',
-        to: '/follow_requests',
+      //   to: '/follow_requests',
-        onClick: this.handleSidebarClose,
+      //   onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.follow_requests),
+      //   title: intl.formatMessage(messages.follow_requests),
-      },
+      // },
-      {
+      // {
-        icon: 'block',
+      //   icon: 'block',
-        to: '/blocks',
+      //   to: '/blocks',
-        onClick: this.handleSidebarClose,
+      //   onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.blocks),
+      //   title: intl.formatMessage(messages.blocks),
-      },
+      // },
-      {
+      // {
-        icon: 'website',
+      //   icon: 'website',
-        to: '/domain_blocks',
+      //   to: '/settings/domain_blocks',
-        onClick: this.handleSidebarClose,
+      //   onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.domain_blocks),
+      //   title: intl.formatMessage(messages.domain_blocks),
-      },
+      // },
-      {
+      // {
-        icon: 'audio-mute',
+      //   icon: 'audio-mute',
-        to: '/mutes',
+      //   to: '/mutes',
-        onClick: this.handleSidebarClose,
+      //   onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.mutes),
+      //   title: intl.formatMessage(messages.mutes),
-      },
+      // },
-      {
+      // {
-        icon: 'report',
+      //   icon: 'report',
-        to: '/filters',
+      //   to: '/filters',
-        onClick: this.handleSidebarClose,
+      //   onClick: this.handleSidebarClose,
-        title: intl.formatMessage(messages.filters),
+      //   title: intl.formatMessage(messages.filters),
-      },
+      // },
       {
         onClick: this.props.onOpenDisplayModel, //on open display model
         title: intl.formatMessage(messages.display),

app/javascript/gabsocial/components/status.js

@@ -284,9 +284,13 @@ class Status extends ImmutablePureComponent {
     this.props.onOpenVideo(media, startTime)
   }
 
-  handleHotkeyReply = e => {
+  handleHotkeyReply = (e) => {
     e.preventDefault()
-    this.props.onReply(this._properStatus(), this.context.router.history)
+    this.props.onReply(this._properStatus(), this.context.router)
+  }
+
+  handleOnReply = (status) => {
+    this.props.onReply(status || this._properStatus(), this.context.router)
   }
 
   handleHotkeyFavorite = () => {
@@ -299,7 +303,7 @@ class Status extends ImmutablePureComponent {
 
   handleHotkeyMention = e => {
     e.preventDefault()
-    this.props.onMention(this._properStatus().get('account'), this.context.router.history)
+    this.props.onMention(this._properStatus().get('account'), this.context.router)
   }
 
   handleHotkeyOpen = () => {
@@ -532,7 +536,7 @@ class Status extends ImmutablePureComponent {
                     <StatusActionBar
                       status={status}
                       onFavorite={this.props.onFavorite}
-                      onReply={this.props.onReply}
+                      onReply={this.handleOnReply}
                       onRepost={this.props.onRepost}
                       onShare={this.props.onShare}
                       onOpenLikes={this.props.onOpenLikes}

app/javascript/gabsocial/constants.js

@@ -22,6 +22,7 @@ export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
 export const POPOVER_DATE_PICKER = 'DATE_PICKER'
 export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
 export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
+export const POPOVER_NAV_SETTINGS = 'NAV_SETTINGS'
 export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
 export const POPOVER_REPOST_OPTIONS = 'REPOST_OPTIONS'
 export const POPOVER_SEARCH = 'SEARCH'

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -141,7 +141,7 @@ class ComposeForm extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onSubmit(this.props.group, this.props.replyToId);
+    this.props.onSubmit(this.props.group, this.props.replyToId, this.context.router);
   }
 
   onSuggestionsClearRequested = () => {

app/javascript/gabsocial/features/compose/compose.js

@@ -5,7 +5,7 @@ export default class Compose extends PureComponent {
   render () {
     return (
       <div className={[_s.default, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-        <ComposeFormContainer />
+        <ComposeFormContainer isStandalone />
       </div>
     )
   }

app/javascript/gabsocial/features/compose/containers/compose_form_container.js

@@ -12,10 +12,10 @@ import {
 } from '../../../actions/compose'
 import { me } from '../../../initial_state'
 
-const mapStateToProps = (state, { replyToId }) => {
+const mapStateToProps = (state, { replyToId, isStandalone }) => {
 
   const reduxReplyToId = state.getIn(['compose', 'in_reply_to'])
-  const isModalOpen = state.getIn(['modal', 'modalType']) === 'COMPOSE'
+  const isModalOpen = state.getIn(['modal', 'modalType']) === 'COMPOSE' || isStandalone
   let isMatch;
 
   if (!!reduxReplyToId && !!replyToId && replyToId === reduxReplyToId) {
@@ -55,10 +55,6 @@ const mapStateToProps = (state, { replyToId }) => {
     }
   }
 
-  // console.log("isMatch:", isMatch, reduxReplyToId, replyToId, state.getIn(['compose', 'text']))
-
-  // console.log("reduxReplyToId:", reduxReplyToId, isModalOpen)
-
   return {
     isMatch,
     isModalOpen,
@@ -91,8 +87,8 @@ const mapDispatchToProps = (dispatch, { reduxReplyToId, replyToId }) => ({
     dispatch(changeCompose(text, markdown, newReplyToId))
   },
 
-  onSubmit(group, replyToId) {
+  onSubmit(group, replyToId, router) {
-    dispatch(submitCompose(group, replyToId))
+    dispatch(submitCompose(group, replyToId, router))
   },
 
   onClearSuggestions() {

app/javascript/gabsocial/features/ui/ui.js

@@ -185,10 +185,10 @@ class SwitchingArea extends PureComponent {
         <WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Billing} content={children} />
         */ }
 
-        <WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={BlockedAccounts} content={children} componentParams={{ title: 'Blocked Accounts' }} />
+        { /* <WrappedRoute path='/settings/blocks' exact page={SettingsPage} component={BlockedAccounts} content={children} componentParams={{ title: 'Blocked Accounts' }} />
         <WrappedRoute path='/settings/domain-blocks' exact page={SettingsPage} component={BlockedDomains} content={children} componentParams={{ title: 'Blocked Domains' }} />
-        { /* <WrappedRoute path='/settings/filters' exact page={SettingsPage} component={Filters} content={children} componentParams={{ title: 'Muted Words' }} /> */ }
+        <WrappedRoute path='/settings/filters' exact page={SettingsPage} component={Filters} content={children} componentParams={{ title: 'Muted Words' }} />
-        <WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} componentParams={{ title: 'Muted Accounts' }} />
+        <WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} componentParams={{ title: 'Muted Accounts' }} /> */ }
 
         <Redirect from='/@:username' to='/:username' exact />
         <WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -52,6 +52,7 @@ export function MediaModal() { return import(/* webpackChunkName: "components/me
 export function ModalLoading() { return import(/* webpackChunkName: "components/modal_loading" */'../../../components/modal/modal_loading') }
 export function Mutes() { return import(/* webpackChunkName: "features/mutes" */'../../mutes') }
 export function MuteModal() { return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/mute_modal') }
+export function NavSettingsPopover() { return import(/* webpackChunkName: "modals/nav_settings_popover" */'../../../components/popover/nav_settings_popover') }
 export function Notifications() { return import(/* webpackChunkName: "features/notifications" */'../../notifications') }
 export function ProfileOptionsPopover() { return import(/* webpackChunkName: "components/profile_options_popover" */'../../../components/popover/profile_options_popover') }
 export function ProUpgradeModal() { return import(/* webpackChunkName: "components/pro_upgrade_modal" */'../../../components/modal/pro_upgrade_modal') }

app/javascript/gabsocial/reducers/compose.js

@@ -263,6 +263,7 @@ export default function compose(state = initialState, action) {
   case COMPOSE_REPLY:
     return state.withMutations(map => {
       map.set('in_reply_to', action.status.get('id'));
+      map.set('quote_of_id', null);
       map.set('text', statusToTextMentions(state, action.status));
       map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
       map.set('focusDate', new Date());
@@ -275,6 +276,7 @@ export default function compose(state = initialState, action) {
   case COMPOSE_QUOTE:
     return state.withMutations(map => {
       map.set('quote_of_id', action.status.get('id'));
+      map.set('in_reply_to', null);
       map.set('text', '');
       map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
       map.set('focusDate', new Date());