progress

2020-05-03 01:22:49 -04:00
parent 196a906cec
commit 055b5a430f
85 changed files with 1110 additions and 1051 deletions
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
@@ -8,7 +8,7 @@ import SettingSwitch from '../setting_switch'
 import Text from '../text'

 const messages = defineMessages({
-  title: { id: 'community_timeline_settings', defaultMessage: 'Community Timeline Settings' },
+  title: { id: 'community_timeline_settings', defaultMessage: 'Community Feed Settings' },
  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
  onlyMedia: { id: 'community.column_settings.media_only', defaultMessage: 'Media Only' },
  showInSidebar: { id: 'show_in_sidebar', defaultMessage: 'Show in Sidebar' },
@@ -18,17 +18,15 @@ const mapStateToProps = (state) => ({
  settings: state.getIn(['settings', 'community']),
 })

-const mapDispatchToProps = (dispatch, { onClose }) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['community', ...key], checked))
-    },
-    onSave() {
-      dispatch(saveSettings())
-      onClose()
-    },
-  }
-}
+const mapDispatchToProps = (dispatch, { onClose }) => ({
+  onChange(key, checked) {
+    dispatch(changeSetting(['community', ...key], checked))
+  },
+  onSave() {
+    dispatch(saveSettings())
+    onClose()
+  },
+})

 export default
@connect(mapStateToProps, mapDispatchToProps)
@@ -39,6 +37,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    settings: ImmutablePropTypes.map.isRequired,
    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    onSave: PropTypes.func.isRequired,
  }

@@ -47,10 +46,16 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl, settings, onChange, onClose } = this.props
+    const {
+      intl,
+      settings,
+      onChange,
+      onClose,
+    } = this.props

    return (
      <ModalLayout
+        onClose={onClose}
        width={320}
        title={intl.formatMessage(messages.title)}
      >
--- a/app/javascript/gabsocial/components/modal/confirmation_modal.js
+++ b/app/javascript/gabsocial/components/modal/confirmation_modal.js
@@ -14,8 +14,6 @@ class ConfirmationModal extends PureComponent {
    confirm: PropTypes.any.isRequired,
    onClose: PropTypes.func.isRequired,
    onConfirm: PropTypes.func.isRequired,
-    secondary: PropTypes.string,
-    onSecondary: PropTypes.func,
    intl: PropTypes.object.isRequired,
    onCancel: PropTypes.func,
  }
@@ -29,11 +27,6 @@ class ConfirmationModal extends PureComponent {
    this.props.onConfirm()
  }

-  handleSecondary = () => {
-    this.props.onClose()
-    this.props.onSecondary()
-  }
-
  handleCancel = () => {
    const { onClose, onCancel } = this.props
    onClose()
@@ -49,7 +42,6 @@ class ConfirmationModal extends PureComponent {
      title,
      message,
      confirm,
-      secondary
    } = this.props

    return (
@@ -74,19 +66,11 @@ class ConfirmationModal extends PureComponent {
                    onClick={this.handleCancel}
                    className={[_s.mr10, _s.flexGrow1].join(' ')}
                  >
-                    <Text size='medium' weight='bold' color='inherit'>
+                    <Text size='medium' weight='bold' align='center' color='inherit'>
                      <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
                    </Text>
                  </Button>
-                  
-                  { /**
-                    : todo :
-                     */
-                    secondary !== undefined && (
-                      <Button text={secondary} onClick={this.handleSecondary} />
-                    )
-                  }
-
+                
                  <Button 
                    backgroundColor='brand'
                    color='white'
@@ -94,7 +78,7 @@ class ConfirmationModal extends PureComponent {
                    ref={this.setRef}
                    className={_s.flexGrow1}
                  >
-                    <Text size='medium' weight='bold' color='inherit'>
+                    <Text size='medium' weight='bold' align='center' color='inherit'>
                      {confirm}
                    </Text>
                  </Button>
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/app/javascript/gabsocial/components/modal/display_options_modal.js
@@ -1,6 +1,12 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import {
+  DEFAULT_THEME,
+  DEFAULT_FONT_SIZE,
+  FONT_SIZES,
+} from '../../constants'
 import ModalLayout from './modal_layout'
 import Button from '../button'
 import Text from '../text'
@@ -12,12 +18,15 @@ const messages = defineMessages({
 })

 const mapStateToProps = (state) => ({
-  settings: state.getIn(['notifications', 'filter']),
+  displayOptionsSettings: state.getIn(['settings', 'displayOptions']),
+  fontSize: state.getIn(['settings', 'displayOptions', 'fontSize'], DEFAULT_FONT_SIZE),
+  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
 })

 const mapDispatchToProps = (dispatch) => ({
-  onChange(path, value) {
-    dispatch(setFilter(path, value))
+  onChange(key, value) {
+    dispatch(changeSetting(['displayOptions', key], value))
+    dispatch(saveSettings())
  },
 })

@@ -27,34 +36,47 @@ export default
 class DisplayOptionsModal extends ImmutablePureComponent {

  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
+    fontSize: PropTypes.string,
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    displayOptionsSettings: ImmutablePropTypes.map,
+    theme: PropTypes.string,
    onChange: PropTypes.func.isRequired,
-    settings: ImmutablePropTypes.map.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
+  updateOnProps = [
+    'fontSize',
+    'displayOptionsSettings',
+    'theme',
+  ]
+
+  handleOnFontSizeChange = (e) => {
+    const fontSizeNames = Object.keys(FONT_SIZES)
+    const index = fontSizeNames[e.target.value]
+
+    this.props.onChange('fontSize', index)
+  }
+
+  handleOnThemeSelected = (e) => {
+    this.props.onChange('theme', e.target.value)
+  }
+
+  handleOnRadiusKeyDisabled = (key, checked) => {
+    this.props.onChange(key, checked)
  }

-  // document.documentElement.style.setProperty("--color-surface", "black");
-  
  render() {
    const {
-      account,
+      fontSize,
+      displayOptionsSettings,
      intl,
-      settings,
-      onChange,
+      theme,
      onClose,
    } = this.props

-    // theme - light, muted, dark
-    // text size - extra small, small, normal, medium, large, extra large
-    // rounded borders
+    const fontSizeNames = Object.keys(FONT_SIZES)
+    const currentFontSizeIndex = fontSizeNames.indexOf(fontSize)

    return (
      <ModalLayout
@@ -64,86 +86,165 @@ class DisplayOptionsModal extends ImmutablePureComponent {
      >

        <div className={[_s.default, _s.mb15].join(' ')}>
-          <Text>
+          <Text align='center' color='secondary' size='medium'>
            {intl.formatMessage(messages.message)}
          </Text>
        </div>

-        <div className={[_s.default, _s.mb10].join(' ')}>
-          <Text weight='bold' color='secondary'>
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text weight='bold' size='small' color='secondary'>
            Font Size
          </Text>
          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
-            test
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '12px'}}>
+                Aa
+              </span>
+              <input
+                type='range'
+                min='0'
+                value={currentFontSizeIndex}
+                max={fontSizeNames.length - 1}
+                onInput={this.handleOnFontSizeChange}
+                onChange={this.handleOnFontSizeChange}
+                className={[_s.flexGrow1, _s.outlineNone, _s.ml15, _s.mr15].join(' ')}
+              />
+              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '18px'}}>
+                Aa
+              </span>
+            </div>
          </div>
        </div>

-        <div className={[_s.default, _s.mb10].join(' ')}>
-          <Text weight='bold' color='secondary'>
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text weight='bold' size='small' color='secondary'>
            Rounded
          </Text>
          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
            <SettingSwitch
-              prefix='notification'
-              settings={settings}
-              settingPath={'onlyVerified'}
-              onChange={onChange}
-              label={'Small Radius'}
+              prefix='displayOptions'
+              settings={displayOptionsSettings}
+              settingPath={'radiusSmallDisabled'}
+              onChange={this.handleOnRadiusKeyDisabled}
+              label={'Small Radius Disabled'}
            />

            <SettingSwitch
-              prefix='notification'
-              settings={settings}
-              settingPath={'onlyVerified'}
-              onChange={onChange}
-              label={'Circle Radius'}
+              prefix='displayOptions'
+              settings={displayOptionsSettings}
+              settingPath={'radiusCircleDisabled'}
+              onChange={this.handleOnRadiusKeyDisabled}
+              label={'Circles Disabled'}
            />
          </div>
        </div>

        <div className={[_s.default, _s.mb10].join(' ')}>
-          <Text weight='bold' color='secondary'>
+          <Text weight='bold' size='small' color='secondary'>
            Theme
          </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>

-            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
-                <Text>
-                  Light
-                </Text>
-              </div>
-            </div>
+            <ThemeBlock
+              title='Light'
+              value='light'
+              checked={theme === 'light'}
+              onChange={this.handleOnThemeSelected}
+              style={{
+                borderColor: '#ececed',
+                backgroundColor: '#fff',
+                color: '#2d3436',
+              }}
+            />

-            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
-                <Text>
-                  Muted
-                </Text>
-              </div>
-            </div>
+            <ThemeBlock
+              title='Muted'
+              value='muted'
+              checked={theme === 'muted'}
+              onChange={this.handleOnThemeSelected}
+              style={{
+                borderColor: '#424141',
+                backgroundColor: '#222',
+                color: '#fff',
+              }}
+            />

-            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
-                <Text>
-                  Black
-                </Text>
-              </div>
-            </div>
+            <ThemeBlock
+              title='Black'
+              value='black'
+              checked={theme === 'black'}
+              onChange={this.handleOnThemeSelected}
+              style={{
+                borderColor: '#212020',
+                backgroundColor: '#13171b',
+                color: '#cccbcb',
+              }}
+            />

          </div>
        </div>
-        
-        <div className={[_s.mlAuto, _s.mrAuto].join(' ')}>
-          <Button>
-            <Text size='medium' color='inherit'>
+
+        <div className={[_s.mlAuto, _s.my10, _s.mrAuto].join(' ')}>
+          <Button onClick={onClose}>
+            <Text size='medium' color='inherit' className={_s.px10}>
              Done
            </Text>
          </Button>
        </div>

-      </ModalLayout> 
+      </ModalLayout>
    )
  }

 }
+
+class ThemeBlock extends PureComponent {
+
+  static propTypes = {
+    checked: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+  }
+
+  render() {
+    const {
+      checked,
+      onChange,
+      title,
+      value,
+      style,
+    } = this.props
+
+    const id = `theme-${value}`
+
+    return (
+      <label className={[_s.default, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
+        <div
+          className={[_s.default, _s.borderBottom6PX, _s.alignItemsCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
+          style={style}
+        >
+          <input
+            type='radio'
+            name='theme'
+            value={value}
+            id={id}
+            checked={checked}
+            onChange={onChange}
+          />
+          <Text
+            align='center'
+            size='medium'
+            weight='bold'
+            color='inherit'
+            className={[_s.py10, _s.flexGrow1].join(' ')}
+          >
+            {title}
+          </Text>
+        </div>
+      </label>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/list_delete_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_delete_modal.js
@@ -1,3 +1,5 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
 import { deleteList } from '../../actions/lists'
 import ConfirmationModal from './confirmation_modal'
@@ -9,24 +11,24 @@ const messages = defineMessages({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onConfirm(listId) {
-    dispatch(deleteList(listId))
-  },
+  onConfirm: (listId) => dispatch(deleteList(listId)),
 })

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

  static propTypes = {
-    list: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
+    list: ImmutablePropTypes.map.isRequired,
    intl: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
  }

  handleClick = () => {
    this.props.onConfirm(this.props.list.get('id'))
+    // : todo :
+    // redirect back to /lists
  }

  render() {
--- a/app/javascript/gabsocial/components/modal/list_editor_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_editor_modal.js
@@ -14,19 +14,20 @@ class ListEditorModal extends ImmutablePureComponent {
  static propTypes = {
    intl: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired,
-    listId: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
  }

  render() {
-    const { intl, onClose, listId } = this.props
+    const { intl, onClose, id } = this.props

    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
        width={500}
        onClose={onClose}
+        noPadding
      >
-        <ListEdit listId={listId} />
+        <ListEdit id={id} />
      </ModalLayout>
    )
  }
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -21,17 +21,15 @@ const mapStateToProps = (state) => ({
  settings: state.getIn(['settings', 'list']),
 })

-const mapDispatchToProps = (dispatch, { onClose }) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['list', ...key], checked))
-    },
-    onSave() {
-      dispatch(saveSettings())
-      onClose()
-    },
-  }
-}
+const mapDispatchToProps = (dispatch, { onClose }) => ({
+  onChange(key, checked) {
+    dispatch(changeSetting(['list', ...key], checked))
+  },
+  onSave() {
+    dispatch(saveSettings())
+    onClose()
+  },
+})

 export default
@connect(mapStateToProps, mapDispatchToProps)
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -29,6 +29,8 @@ import {
  MODAL_MUTE,
  MODAL_PRO_UPGRADE,
  MODAL_REPORT,
+  MODAL_STATUS_LIKES,
+  MODAL_STATUS_REPOSTS,
  MODAL_STATUS_REVISIONS,
  MODAL_UNAUTHORIZED,
  MODAL_UNFOLLOW,
@@ -60,6 +62,8 @@ import {
  MuteModal,
  ProUpgradeModal,
  ReportModal,
+  StatusLikesModal,
+  StatusRepostsModal,
  StatusRevisionsModal,
  UnauthorizedModal,
  UnfollowModal,
@@ -92,6 +96,8 @@ 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_LIKES] = StatusLikesModal
+MODAL_COMPONENTS[MODAL_STATUS_REPOSTS] = StatusRepostsModal
 MODAL_COMPONENTS[MODAL_STATUS_REVISIONS] = StatusRevisionsModal
 MODAL_COMPONENTS[MODAL_UNAUTHORIZED] = UnauthorizedModal
 MODAL_COMPONENTS[MODAL_UNFOLLOW] = UnfollowModal
--- a/app/javascript/gabsocial/components/modal/status_likes_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_likes_modal.js
@@ -0,0 +1,44 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import StatusLikes from '../../features/status_likes'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'likes', defaultMessage: 'Likes' },
+})
+
+export default
+@injectIntl
+class StatusLikesModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+      status,
+    } = this.props
+
+    const params = {
+      statusId: status.get('id'),
+    }
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={460}
+        onClose={onClose}
+        noPadding
+      >
+        <StatusLikes params={params} />
+      </ModalLayout>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/status_reposts_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_reposts_modal.js
@@ -0,0 +1,44 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import StatusReposts from '../../features/status_reposts'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'reposts', defaultMessage: 'Reposts' },
+})
+
+export default
+@injectIntl
+class StatusRepostsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+      status,
+    } = this.props
+
+    const params = {
+      statusId: status.get('id'),
+    }
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={460}
+        onClose={onClose}
+        noPadding
+      >
+        <StatusReposts params={params} />
+      </ModalLayout>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/status_stats_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_stats_modal.js
@@ -1,68 +0,0 @@
-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' },
-  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))
-  },
-})
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class UnfollowModal extends PureComponent {
-
-  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()
-  }
-
-  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'))),
-    // }));
-
-    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))
-        }}
-      />
-    )
-  }
-
-}