Progress

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

@@ -0,0 +1,12 @@
+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/popover_base.js

@@ -2,8 +2,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { Manager, Reference, Popper } from 'react-popper'
 import classnames from 'classnames/bind'
-import spring from 'react-motion/lib/spring'
-import Motion from '../../features/ui/util/optional_motion'
 import { openPopover, closePopover } from '../../actions/popover'
 import { openModal, closeModal } from '../../actions/modal'
 import { isUserTouching } from '../../utils/is_mobile'
@@ -117,7 +115,6 @@ class PopoverBase extends ImmutablePureComponent {
       targetRef,
       innerRef,
     } = this.props
-    const open = this.state.id === openPopoverType
 
     const containerClasses = cx({
       default: 1,
@@ -125,8 +122,6 @@ class PopoverBase extends ImmutablePureComponent {
       displayNone: !visible,
     })
 
-    console.log('targetRef:', targetRef)
-
     return (
       <Manager>
         <Popper

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

@@ -1,37 +1,51 @@
 import detectPassiveEvents from 'detect-passive-events'
 import { closePopover } from '../../actions/popover'
+import {
+  POPOVER_CONTENT_WARNING,
+  POPOVER_DATE_PICKER,
+  POPOVER_EMOJI_PICKER,
+  POPOVER_GROUP_INFO,
+  POPOVER_PROFILE_OPTIONS,
+  POPOVER_REPOST_OPTIONS,
+  POPOVER_SEARCH,
+  POPOVER_SIDEBAR_MORE,
+  POPOVER_STATUS_OPTIONS,
+  POPOVER_STATUS_SHARE,
+  POPOVER_STATUS_VISIBILITY,
+  POPOVER_USER_INFO,
+} from '../../constants'
+import {
+  ContentWarningPopover,
+  DatePickerPopover,
+  EmojiPickerPopover,
+  GroupInfoPopover,
+  ProfileOptionsPopover,
+  RepostOptionsPopover,
+  SearchPopover,
+  SidebarMorePopover,
+  StatusOptionsPopover,
+  StatusSharePopover,
+  StatusVisibilityPopover,
+  UserInfoPopover,
+} from '../../features/ui/util/async_components'
 import Bundle from '../../features/ui/util/bundle'
-import BundleModalError from '../bundle_modal_error'
 import PopoverBase from './popover_base'
-import ContentWarningPopover from './content_warning_popover'
-import DatePickerPopover from './date_picker_popover'
-import EmojiPickerPopover from './emoji_picker_popover'
-import GroupInfoPopover from './group_info_popover'
-import ProfileOptionsPopover from './profile_options_popover'
-import RepostOptionsPopover from './repost_options_popover'
-import SearchPopover from './search_popover'
-import SidebarMorePopover from './sidebar_more_popover'
-import StatusOptionsPopover from './status_options_popover'
-import StatusSharePopover from './status_share_popover'
-import StatusVisibilityPopover from './status_visibility_popover'
-import UserInfoPopover from './user_info_popover'
 
 const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
 
-const POPOVER_COMPONENTS = {
-  CONTENT_WARNING: () => Promise.resolve({ default: ContentWarningPopover }),
-  DATE_PICKER: () => Promise.resolve({ default: DatePickerPopover }),
-  EMOJI_PICKER: () => Promise.resolve({ default: EmojiPickerPopover }),
-  GROUP_INFO: () => GroupInfoPopover,
-  PROFILE_OPTIONS: () => Promise.resolve({ default: ProfileOptionsPopover }),
-  REPOST_OPTIONS: () => Promise.resolve({ default: RepostOptionsPopover }),
-  SEARCH: () => Promise.resolve({ default: SearchPopover }),
-  SIDEBAR_MORE: () => Promise.resolve({ default: SidebarMorePopover }),
-  STATUS_OPTIONS: () => Promise.resolve({ default: StatusOptionsPopover }),
-  STATUS_SHARE: () => Promise.resolve({ default: StatusSharePopover }),
-  STATUS_VISIBILITY: () => Promise.resolve({ default: StatusVisibilityPopover }),
-  USER_INFO: () => Promise.resolve({ default: UserInfoPopover }),
-}
+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_PROFILE_OPTIONS] = ProfileOptionsPopover
+POPOVER_COMPONENTS[POPOVER_REPOST_OPTIONS] = RepostOptionsPopover
+POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover
+POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
+POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
+POPOVER_COMPONENTS[POPOVER_STATUS_SHARE] = StatusSharePopover
+POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
+POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
 
 const mapStateToProps = (state) => ({
   type: state.getIn(['popover', 'popoverType']),
@@ -84,14 +98,10 @@ class PopoverRoot extends PureComponent {
     document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions)
   }
 
-  setRef = c => {
+  setRef = (c) => {
     this.node = c
   }
 
-  setFocusRef = c => {
-    this.focusedItem = c
-  }
-
   handleKeyDown = e => {
     const items = Array.from(this.node.getElementsByTagName('a'))
     const index = items.indexOf(document.activeElement)
@@ -150,8 +160,6 @@ class PopoverRoot extends PureComponent {
     const { type, props } = this.props
     const visible = !!type
 
-    console.log("POPOVER_COMPONENTS[type]:", type, POPOVER_COMPONENTS[type]);
-
     return (
       <PopoverBase
         visible={visible}
@@ -162,12 +170,12 @@ class PopoverRoot extends PureComponent {
           visible &&
           <Bundle
             fetchComponent={POPOVER_COMPONENTS[type]}
-            loading={this.renderLoading(type)}
+            loading={this.renderLoading()}
             error={this.renderError}
             renderDelay={200}
           >
             {
-              (SpecificComponent) => <SpecificComponent {...props} />
+              (Component) => <Component {...props} />
             }
           </Bundle>
         }

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

@@ -1,8 +1,39 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import {  MODAL_DISPLAY_OPTIONS } from '../../constants'
+import { openModal } from '../../actions/modal'
 import PopoverLayout from './popover_layout'
 import List from '../list'
 
-export default class SidebarMorePopover extends PureComponent {
+const messages = defineMessages({
+  display: { id: 'display_options', defaultMessage: 'Display Options' },
+  help: { id: 'getting_started.help', defaultMessage: 'Help' },
+  settings: { id: 'settings', defaultMessage: 'Settings' },
+  logout: { 'id': 'confirmations.logout.confirm', 'defaultMessage': 'Log out' },
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onOpenDisplayModal: () => {
+    dispatch(openModal(MODAL_DISPLAY_OPTIONS))
+  },
+})
+
+export default
+@injectIntl
+@connect(null, mapDispatchToProps)
+class SidebarMorePopover extends PureComponent {
+  
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onOpenDisplayModal: PropTypes.func.isRequired,
+  }
+
+  handleOnOpenDisplayModal = () => {
+    this.props.onOpenDisplayModal()
+  }
+
   render() {
+    const { intl } = this.props
+
     return (
       <PopoverLayout className={_s.width240PX}>
         <List
@@ -10,15 +41,19 @@ export default class SidebarMorePopover extends PureComponent {
           scrollKey='profile_options'
           items={[
             {
-              title: 'Help',
+              title: intl.formatMessage(messages.help),
               href: 'https://help.gab.com',
             },
             {
-              title: 'Settings',
+              title: intl.formatMessage(messages.display),
+              onClick: this.handleOnOpenDisplayModal,
+            },
+            {
+              title: intl.formatMessage(messages.settings),
               href: '/settings',
             },
             {
-              title: 'Log Out',
+              title: intl.formatMessage(messages.logout),
               href: '/auth/log_out',
             },
           ]}

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

@@ -47,7 +47,7 @@ class StatusVisibilityDropdown extends PureComponent {
     this.props.onChange(value)
   }
 
-  componentWillMount () {
+  componentDidMount () {
     const { intl } = this.props
 
     this.options = [