Progress

2020-04-28 01:33:58 -04:00
parent 763694b5ab
commit c3d0d8bde2
87 changed files with 1392 additions and 826 deletions
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
@@ -51,7 +51,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {

    return (
      <ModalLayout
-        width='320'
+        width={320}
        title={intl.formatMessage(messages.title)}
      >
      
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/app/javascript/gabsocial/components/modal/display_options_modal.js
@@ -0,0 +1,58 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  title: { id: 'display_options', defaultMessage: 'Display Options' },
+})
+
+const mapStateToProps = (state) => ({
+  
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  
+})
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class DisplayOptionsModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  // document.documentElement.style.setProperty("--color-surface", "black");
+  
+  render() {
+    const { account, intl } = this.props
+
+    return (
+      <ModalLayout
+        width={320}
+        title={intl.formatMessage(messages.title)}
+      >
+      </ModalLayout> 
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/edit_profile_modal.js
+++ b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
@@ -28,10 +28,11 @@ class EditProfileModal extends ImmutablePureComponent {
  static propTypes = {
    account: ImmutablePropTypes.map,
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

  render() {
-    const { account, intl } = this.props
+    const { account, intl, onClose } = this.props
    
    const headerSrc = !!account ? account.get('header') : ''

@@ -40,6 +41,7 @@ class EditProfileModal extends ImmutablePureComponent {
        title={intl.formatMessage(messages.edit_profile)}
        noPadding
        width={460}
+        onClose={onClose}
      >
        <div className={[_s.default, _s.py5, _s.px5, _s.width100PC, _s.overflowHidden].join(' ')}>
          <Image
--- a/app/javascript/gabsocial/components/modal/group_create_modal.js
+++ b/app/javascript/gabsocial/components/modal/group_create_modal.js
@@ -4,7 +4,7 @@ import ModalLayout from './modal_layout'
 import GroupCreate from '../../features/group_create'

 const messages = defineMessages({
-  title: { id: 'create_group', defaultMessage: 'Create Group' },
+  title: { id: 'create_group', defaultMessage: 'Create group' },
 })

 export default
@@ -22,7 +22,7 @@ class GroupCreateModal extends ImmutablePureComponent {
    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
-        width='440'
+        width={440}
        onClose={onClose}
      >
        <GroupCreate onCloseModal={onClose} />
--- a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
@@ -54,7 +54,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {

    return (
      <ModalLayout
-        width='320'
+        width={320}
        title={intl.formatMessage(messages.title)}
        onClose={onClose}
      >
--- a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
@@ -55,7 +55,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {

    return (
      <ModalLayout
-        width='320'
+        width={320}
        title={intl.formatMessage(messages.title)}
        onClose={onClose}
      >
--- a/app/javascript/gabsocial/components/modal/list_create_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_create_modal.js
@@ -22,10 +22,10 @@ class ListCreateModal extends ImmutablePureComponent {
    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
-        width='500'
+        width={500}
        onClose={onClose}
      >
-        <ListCreate />
+        <ListCreate isModal />
      </ModalLayout>
    )
  }
--- a/app/javascript/gabsocial/components/modal/list_delete_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_delete_modal.js
@@ -1,6 +1,5 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import { makeGetAccount } from '../../selectors'
-import { blockAccount } from '../../actions/accounts'
+import { deleteList } from '../../actions/lists'
 import ConfirmationModal from './confirmation_modal'

 const messages = defineMessages({
@@ -10,14 +9,14 @@ const messages = defineMessages({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onConfirm(account) {
-    // dispatch(blockAccount(account.get('id')))
+  onConfirm(listId) {
+    dispatch(deleteList(listId))
  },
 })

 export default
-@connect(null, mapDispatchToProps)
@injectIntl
+@connect(null, mapDispatchToProps)
 class ListDeleteModal extends PureComponent {

  static propTypes = {
@@ -27,17 +26,17 @@ class ListDeleteModal extends PureComponent {
  }

  handleClick = () => {
-    this.props.onConfirm(this.props.account)
+    this.props.onConfirm(this.props.list.get('id'))
  }

  render() {
    const { list, intl, onClose } = this.props

    const title = intl.formatMessage(messages.title, {
-      list: !!list ? account.get('title') : '',
+      list: !!list ? list.get('title') : '',
    })
    const message = intl.formatMessage(messages.listMessage, {
-      list: !!list ? account.get('title') : '',
+      list: !!list ? list.get('title') : '',
    })

    return (
--- a/app/javascript/gabsocial/components/modal/list_editor_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_editor_modal.js
@@ -1,68 +1,33 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ModalLayout from './modal_layout'
+import ListEdit from '../../features/list_edit'

 const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-})
-
-const mapStateToProps = (state) => ({
-  isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-  account: state.getIn(['mutes', 'new', 'account']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  onConfirm(account, notifications) {
-    dispatch(muteAccount(account.get('id'), notifications))
-  },
+  title: { id: 'lists.edit', defaultMessage: 'Edit list' },
 })

 export default
-@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
-class UnfollowModal extends PureComponent {
+class ListEditorModal extends ImmutablePureComponent {

  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
-  }
-
-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
-  }
-
-  handleCancel = () => {
-    this.props.onClose()
+    onClose: PropTypes.func.isRequired,
+    listId: PropTypes.string.isRequired,
  }

  render() {
-    const { account, intl } = this.props
-
-    // , {
-    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-    //   confirm: intl.formatMessage(messages.unfollowConfirm),
-    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-    // }));
+    const { intl, onClose, listId } = this.props

    return (
-      <ConfirmationModal
-        title={`Mute @${account.get('acct')}`}
-        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
-        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
-        onConfirm={() => {
-          // dispatch(blockDomain(domain))
-          // dispatch(blockDomain(domain))
-        }}
-      />
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={500}
+        onClose={onClose}
+      >
+        <ListEdit listId={listId} />
+      </ModalLayout>
    )
  }
-
 }
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -55,7 +55,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {

    return (
      <ModalLayout
-        width='320'
+        width={320}
        title={intl.formatMessage(messages.title)}
        onClose={onClose}
      >
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -17,7 +17,6 @@ class ModalLayout extends PureComponent {
    title: PropTypes.string,
    children: PropTypes.node,
    onClose: PropTypes.func.isRequired,
-    handleCloseModal: PropTypes.func.isRequired,
    width: PropTypes.number,
    hideClose: PropTypes.bool,
    noPadding: PropTypes.bool,
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -2,73 +2,101 @@ import { closeModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
 import Bundle from '../../features/ui/util/bundle'
 import {
-  MuteModal,
-  ReportModal,
+  MODAL_ACTIONS,
+  MODAL_BLOCK_ACCOUNT,
+  MODAL_BLOCK_DOMAIN,
+  MODAL_BOOST,
+  MODAL_COMMUNITY_TIMELINE_SETTINGS,
+  MODAL_COMPOSE,
+  MODAL_CONFIRM,
+  MODAL_DISPLAY_OPTIONS,
+  MODAL_EDIT_PROFILE,
+  MODAL_EMBED,
+  MODAL_GIF_PICKER,
+  MODAL_GROUP_CREATE,
+  MODAL_GROUP_DELETE,
+  MODAL_GROUP_EDITOR,
+  MODAL_HASHTAG_TIMELINE_SETTINGS,
+  MODAL_HOME_TIMELINE_SETTINGS,
+  MODAL_HOTKEYS,
+  MODAL_LIST_CREATE,
+  MODAL_LIST_DELETE,
+  MODAL_LIST_EDITOR,
+  MODAL_LIST_TIMELINE_SETTINGS,
+  MODAL_MEDIA,
+  MODAL_MUTE,
+  MODAL_PRO_UPGRADE,
+  MODAL_REPORT,
+  MODAL_STATUS_REVISIONS,
+  MODAL_UNAUTHORIZED,
+  MODAL_UNFOLLOW,
+  MODAL_VIDEO,
+} from '../../constants'
+import {
+  ActionsModal,
+  BlockAccountModal,
+  BlockDomainModal,
+  BoostModal,
+  CommunityTimelineSettingsModal,
+  ComposeModal,
+  ConfirmationModal,
+  DisplayOptionsModal,
+  EditProfileModal,
  EmbedModal,
-  // ListEditor,
-  // ListAdder,
+  GifPickerModal,
+  GroupCreateModal,
+  GroupDeleteModal,
+  GroupEditorModal,
+  HashtagTimelineSettingsModal,
+  HomeTimelineSettingsModal,
+  HotkeysModal,
+  ListCreateModal,
+  ListDeleteModal,
+  ListEditorModal,
+  ListTimelineSettingsModal,
+  MediaModal,
+  MuteModal,
+  ProUpgradeModal,
+  ReportModal,
  StatusRevisionsModal,
+  UnauthorizedModal,
+  UnfollowModal,
+  VideoModal,
 } from '../../features/ui/util/async_components'

 import ModalBase from './modal_base'
 import BundleModalError from '../bundle_modal_error'

-import ActionsModal from './actions_modal'
-import BlockAccountModal from './block_account_modal'
-import BlockDomainModal from './block_domain_modal'
-import BoostModal from './boost_modal'
-import CommunityTimelineSettingsModal from './community_timeline_settings_modal'
-import ComposeModal from './compose_modal'
-import ConfirmationModal from './confirmation_modal'
-import EditProfileModal from './edit_profile_modal'
-import GifPickerModal from './gif_picker_modal'
-import GroupCreateModal from './group_create_modal'
-import GroupDeleteModal from './group_delete_modal'
-import GroupEditorModal from './group_editor_modal'
-import HashtagTimelineSettingsModal from './hashtag_timeline_settings_modal'
-import HomeTimelineSettingsModal from './home_timeline_settings_modal'
-import HotkeysModal from './hotkeys_modal'
-import ListCreateModal from './list_create_modal'
-import ListDeleteModal from './list_delete_modal'
-import ListEditorModal from './list_editor_modal'
-import ListTimelineSettingsModal from './list_timeline_settings_modal'
-import MediaModal from './media_modal'
-import ModalLoading from './modal_loading'
-import ProUpgradeModal from './pro_upgrade_modal'
-import VideoModal from './video_modal'
-import UnauthorizedModal from './unauthorized_modal'
-import UnfollowModal from './unfollow_modal'
-
-const MODAL_COMPONENTS = {
-  ACTIONS: () => Promise.resolve({ default: ActionsModal }),
-  BLOCK_ACCOUNT: () => Promise.resolve({ default: BlockAccountModal }),
-  BLOCK_DOMAIN: () => Promise.resolve({ default: BlockDomainModal }),
-  BOOST: () => Promise.resolve({ default: BoostModal }),
-  COMMUNITY_TIMELINE_SETTINGS: () => Promise.resolve({ default: CommunityTimelineSettingsModal }),
-  COMPOSE: () => Promise.resolve({ default: ComposeModal }),
-  CONFIRM: () => Promise.resolve({ default: ConfirmationModal }),
-  EDIT_PROFILE: () => Promise.resolve({ default: EditProfileModal }),
-  EMBED: () => Promise.resolve({ default: EmbedModal }),
-  GIF_PICKER: () => Promise.resolve({ default: GifPickerModal }),
-  GROUP_CREATE: () => Promise.resolve({ default: GroupCreateModal }),
-  GROUP_DELETE: () => Promise.resolve({ default: GroupDeleteModal }),
-  GROUP_EDITOR: () => Promise.resolve({ default: GroupEditorModal }),
-  HASHTAG_TIMELINE_SETTINGS: () => Promise.resolve({ default: HashtagTimelineSettingsModal }),
-  HOME_TIMELINE_SETTINGS: () => Promise.resolve({ default: HomeTimelineSettingsModal }),
-  HOTKEYS: () => Promise.resolve({ default: HotkeysModal }),
-  LIST_CREATE: () => Promise.resolve({ default: ListCreateModal }),
-  LIST_DELETE: () => Promise.resolve({ default: ListDeleteModal }),
-  LIST_EDITOR: () => Promise.resolve({ default: ListEditorModal }),
-  LIST_TIMELINE_SETTINGS: () => Promise.resolve({ default: ListTimelineSettingsModal }),
-  MEDIA: () => Promise.resolve({ default: MediaModal }),
-  MUTE: MuteModal,
-  PRO_UPGRADE: () => Promise.resolve({ default: ProUpgradeModal }),
-  REPORT: ReportModal,
-  STATUS_REVISIONS: StatusRevisionsModal,
-  UNAUTHORIZED: () => Promise.resolve({ default: UnauthorizedModal }),
-  UNFOLLOW: () => Promise.resolve({ default: UnfollowModal }),
-  VIDEO: () => Promise.resolve({ default: VideoModal }),
-}
+const MODAL_COMPONENTS = {}
+MODAL_COMPONENTS[MODAL_ACTIONS] = ActionsModal
+MODAL_COMPONENTS[MODAL_BLOCK_ACCOUNT] = BlockAccountModal
+MODAL_COMPONENTS[MODAL_BLOCK_DOMAIN] = BlockDomainModal
+MODAL_COMPONENTS[MODAL_BOOST] = BoostModal
+MODAL_COMPONENTS[MODAL_COMMUNITY_TIMELINE_SETTINGS] = CommunityTimelineSettingsModal
+MODAL_COMPONENTS[MODAL_COMPOSE] = ComposeModal
+MODAL_COMPONENTS[MODAL_CONFIRM] = ConfirmationModal
+MODAL_COMPONENTS[MODAL_DISPLAY_OPTIONS] = DisplayOptionsModal
+MODAL_COMPONENTS[MODAL_EDIT_PROFILE] = EditProfileModal
+MODAL_COMPONENTS[MODAL_EMBED] = EmbedModal
+MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal
+MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
+MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal
+MODAL_COMPONENTS[MODAL_GROUP_EDITOR] = GroupEditorModal
+MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal
+MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal
+MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal
+MODAL_COMPONENTS[MODAL_LIST_CREATE] = ListCreateModal
+MODAL_COMPONENTS[MODAL_LIST_DELETE] = ListDeleteModal
+MODAL_COMPONENTS[MODAL_LIST_EDITOR] = ListEditorModal
+MODAL_COMPONENTS[MODAL_LIST_TIMELINE_SETTINGS] = ListTimelineSettingsModal
+MODAL_COMPONENTS[MODAL_MEDIA] = MediaModal
+MODAL_COMPONENTS[MODAL_MUTE] = MuteModal
+MODAL_COMPONENTS[MODAL_PRO_UPGRADE] = ProUpgradeModal
+MODAL_COMPONENTS[MODAL_REPORT] = ReportModal
+MODAL_COMPONENTS[MODAL_STATUS_REVISIONS] = StatusRevisionsModal
+MODAL_COMPONENTS[MODAL_UNAUTHORIZED] = UnauthorizedModal
+MODAL_COMPONENTS[MODAL_UNFOLLOW] = UnfollowModal
+MODAL_COMPONENTS[MODAL_VIDEO] = VideoModal

 const mapStateToProps = (state) => ({
  type: state.getIn(['modal', 'modalType']),
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -25,7 +25,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
-        width='460'
+        width={460}
        onClose={onClose}
      >
        <Text>
--- a/app/javascript/gabsocial/components/modal/status_revisions_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_revisions_modal.js
@@ -5,7 +5,6 @@ import classNames from 'classnames/bind'
 import { loadStatusRevisions } from '../../actions/status_revisions'
 import ModalLayout from './modal_layout'
 import RelativeTimestamp from '../relative_timestamp'
-import ScrollableList from '../scrollable_list'
 import Text from '../text'

 const cx = classNames.bind(_s)
@@ -56,42 +55,40 @@ class StatusRevisionsModal extends ImmutablePureComponent {
    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
-        width='480'
+        width={480}
        onClose={onClose}
      >
        <div className={[_s.default]}>
-          <ScrollableList>
-            {
-              revisions.map((revision, i) => {
-                const isFirst = i === 0
-                const isLast = i === revisions.size - 1
+          {
+            revisions.map((revision, i) => {
+              const isFirst = i === 0
+              const isLast = i === revisions.size - 1

-                const containerClasses = cx({
-                  default: 1,
-                  pt5: 1,
-                  pb10: 1,
-                  mt5: !isFirst,
-                  borderColorSecondary: !isLast,
-                  borderBottom1PX: !isLast,
-                })
-
-                return (
-                  <div key={`status-revision-${i}`} className={containerClasses}>
-                    <div className={[_s.default, _s.pb5].join(' ')}>
-                      <Text size='medium'>
-                        {revision.get('text')}
-                      </Text>
-                    </div>
-                    <div className={[_s.default]}>
-                      <Text size='small' color='secondary'>
-                        Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
-                      </Text>
-                    </div>
-                  </div>
-                )
+              const containerClasses = cx({
+                default: 1,
+                pt5: 1,
+                pb10: 1,
+                mt5: !isFirst,
+                borderColorSecondary: !isLast,
+                borderBottom1PX: !isLast,
              })
-            }
-          </ScrollableList>
+
+              return (
+                <div key={`status-revision-${i}`} className={containerClasses}>
+                  <div className={[_s.default, _s.pb5].join(' ')}>
+                    <Text size='medium'>
+                      {revision.get('text')}
+                    </Text>
+                  </div>
+                  <div className={[_s.default]}>
+                    <Text size='small' color='secondary'>
+                      Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
+                    </Text>
+                  </div>
+                </div>
+              )
+            })
+          }
        </div>
      </ModalLayout>
    )