Progress

2020-05-04 14:44:37 -04:00
parent 4cf0713b37
commit 498f163880
66 changed files with 1192 additions and 246 deletions
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -235,6 +235,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
      bgTransparent: 1,
      outlineNone: 1,
      lineHeight125: 1,
+      colorPrimary: 1,
      height100PC: small,
      width100PC: !small,
      pt15: !small,
@@ -265,7 +266,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
              className={textareaClasses}
              disabled={disabled}
              placeholder={placeholder}
-            dautoFocus={false}
+              autoFocus={false}
              value={value}
              onChange={this.onChange}
              // onKeyDown={this.onKeyDown}
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -30,7 +30,7 @@ const makeMapStateToProps = (state, props) => ({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onReply (status, router) {
+  onReply(status, router) {
    if (!me) return dispatch(openModal('UNAUTHORIZED'))

    dispatch((_, getState) => {
@@ -46,7 +46,7 @@ const mapDispatchToProps = (dispatch) => ({
      }
    })
  },
-  onFavorite (status) {
+  onFavorite(status) {
    if (!me) return dispatch(openModal('UNAUTHORIZED'))

    if (status.get('favourited')) {
@@ -58,6 +58,12 @@ const mapDispatchToProps = (dispatch) => ({
  onOpenStatusOptions(status) {
    dispatch(openPopover('STATUS_OPTOINS', { status }))
  },
+  onOpenLikes(status) {
+    dispatch(openModal('STATUS_LIKES', { status }))
+  },
+  onOpenReposts(status) {
+    dispatch(openModal('STATUS_REPOSTS', { status }))
+  },
 })

 export default
@@ -74,6 +80,8 @@ class Comment extends ImmutablePureComponent {
    onReply: PropTypes.func.isRequired,
    onFavorite: PropTypes.func.isRequired,
    onOpenStatusOptions: PropTypes.func.isRequired,
+    onOpenLikes: PropTypes.func.isRequired,
+    onOpenReposts: PropTypes.func.isRequired,
  }

  updateOnProps = [
@@ -85,6 +93,8 @@ class Comment extends ImmutablePureComponent {

  state = {
    showMedia: defaultMediaVisibility(this.props.status),
+    statusId: undefined,
+    height: undefined,
  }

  handleOnReply = () => {
@@ -117,7 +127,7 @@ class Comment extends ImmutablePureComponent {
    }

    const style = {
-      paddingLeft: `${indent * 40}px`,
+      paddingLeft: `${indent * 42}px`,
    }

    return (
@@ -133,9 +143,13 @@ class Comment extends ImmutablePureComponent {
              <Avatar account={status.get('account')} size={32} />
            </NavLink>

-            <div className={[_s.default, _s.flexNormal].join(' ')}>
+            <div className={[_s.default, _s.flexShrink1, _s.maxWidth100PC42PX].join(' ')}>
              <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.bgSubtle].join(' ')}>
-                <CommentHeader status={status} />
+                <CommentHeader
+                  status={status}
+                  onOpenLikes={this.props.onOpenLikes}
+                  onOpenReposts={this.props.onOpenReposts}
+                />
                <StatusContent
                  status={status}
                  onClick={this.handleClick}
@@ -159,7 +173,7 @@ class Comment extends ImmutablePureComponent {

              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
                <CommentButton
-                  title={intl.formatMessage(status.get('favourited') ? messages.unlike: messages.like)}
+                  title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)}
                  onClick={this.handleOnFavorite}
                />
                <CommentButton
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -1,7 +1,7 @@
 import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
-import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Button from './button'
 import DisplayName from './display_name'
@@ -9,16 +9,36 @@ import DotTextSeperator from './dot_text_seperator'
 import RelativeTimestamp from './relative_timestamp'
 import Text from './text'

+const messages = defineMessages({
+  edited: { id: 'status.edited', defaultMessage: 'Edited' },
+  likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
+  repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
+})
+
 export default
@injectIntl
 class CommentHeader extends ImmutablePureComponent {

  static propTypes = {
+    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map.isRequired,
+    openLikesList: PropTypes.func.isRequired,
+    openRepostsList: PropTypes.func.isRequired,
+  }
+
+  openLikesList = () => {
+    this.props.onOpenLikes(this.props.status)
+  }
+
+  openRepostsList = () => {
+    this.props.onOpenReposts(this.props.status)
  }

  render() {
-    const { status } = this.props
+    const {
+      intl,
+      status,
+    } = this.props

    const repostCount = status.get('reblogs_count')
    const favoriteCount = status.get('favourites_count')
@@ -50,7 +70,7 @@ class CommentHeader extends ImmutablePureComponent {
                className={_s.ml5}
              >
                <Text size='extraSmall' color='inherit'>
-                  Edited
+                  {intl.formatMessage(messages.edited)}
                </Text>
              </Button>
            </Fragment>
@@ -65,12 +85,13 @@ class CommentHeader extends ImmutablePureComponent {
                  underlineOnHover
                  backgroundColor='none'
                  color='tertiary'
-                  to={statusUrl}
                  className={_s.ml5}
+                  onClick={this.openLikesList}
                >
                <Text size='extraSmall' color='inherit'>
-                  {favoriteCount}
-                  &nbsp;Likes
+                  {intl.formatMessage(messages.likesLabel, {
+                    number: favoriteCount,
+                  })}
                </Text>
              </Button>
            </Fragment>
@@ -85,12 +106,13 @@ class CommentHeader extends ImmutablePureComponent {
                  underlineOnHover
                  backgroundColor='none'
                  color='tertiary'
-                  to={statusUrl}
                  className={_s.ml5}
+                  onClick={this.openRepostsList}
                >
                <Text size='extraSmall' color='inherit'>
-                  {repostCount}
-                  &nbsp;Reposts
+                  {intl.formatMessage(messages.repostsLabel, {
+                    number: repostCount,
+                  })}
                </Text>
              </Button>
            </Fragment>
--- a/app/javascript/gabsocial/components/comment_list.js
+++ b/app/javascript/gabsocial/components/comment_list.js
@@ -11,24 +11,23 @@ export default class CommentList extends ImmutablePureComponent {
  static propTypes = {
    commentsLimited: PropTypes.bool,
    descendants: ImmutablePropTypes.list,
-  }
-
-  handleLoadMore = () => {
-    //
+    onViewComments: PropTypes.func.isRequired,
  }

  render() {
    const {
      descendants,
      commentsLimited,
+      onViewComments
    } = this.props

-    const upperLimit = 6
    const size = descendants.size
+    const upperLimit = commentsLimited ? 6 : size
    const max = Math.min(commentsLimited ? 2 : upperLimit, size)

+    console.log("size, max:", size, max)
+
    const Wrapper = !commentsLimited ? ScrollableList : DummyContainer
-    console.log("Wrapper:", Wrapper)

    return (
      <div>
@@ -50,7 +49,7 @@ export default class CommentList extends ImmutablePureComponent {
              isText
              backgroundColor='none'
              color='tertiary'
-              onClick={this.handleLoadMore}
+              onClick={onViewComments}
            >
              <Text weight='bold' color='inherit'>
                View more comments
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -17,7 +17,6 @@ import CogIcon from '../assets/cog_icon'
 import CommentIcon from '../assets/comment_icon'
 import CopyIcon from '../assets/copy_icon'
 import DissenterIcon from '../assets/dissenter_icon'
-import DonorIcon from '../assets/donor_icon'
 import EllipsisIcon from '../assets/ellipsis_icon'
 import EmailIcon from '../assets/email_icon'
 import ErrorIcon from '../assets/error_icon'
@@ -31,7 +30,6 @@ import GroupAddIcon from '../assets/group_add_icon'
 import HappyIcon from '../assets/happy_icon'
 import HiddenIcon from '../assets/hidden_icon'
 import HomeIcon from '../assets/home_icon'
-import InvestorIcon from '../assets/investor_icon'
 import ItalicIcon from '../assets/italic_icon'
 import LikeIcon from '../assets/like_icon'
 import LikedIcon from '../assets/liked_icon'
@@ -52,7 +50,6 @@ import PencilIcon from '../assets/pencil_icon'
 import PinIcon from '../assets/pin_icon'
 import PlayIcon from '../assets/play_icon'
 import PollIcon from '../assets/poll_icon'
-import ProIcon from '../assets/pro_icon'
 import RepostIcon from '../assets/repost_icon'
 import RichTextIcon from '../assets/rich_text_icon'
 import SearchIcon from '../assets/search_icon'
@@ -90,7 +87,6 @@ const ICONS = {
  'comment': CommentIcon,
  'copy': CopyIcon,
  'dissenter': DissenterIcon,
-  'donor': DonorIcon,
  'ellipsis': EllipsisIcon,
  'email': EmailIcon,
  'error': ErrorIcon,
@@ -104,7 +100,6 @@ const ICONS = {
  'hidden': HiddenIcon,
  'happy': HappyIcon,
  'home': HomeIcon,
-  'investor': InvestorIcon,
  'italic': ItalicIcon,
  'like': LikeIcon,
  'liked': LikedIcon,
@@ -125,7 +120,6 @@ const ICONS = {
  'pin': PinIcon,
  'play': PlayIcon,
  'poll': PollIcon,
-  'pro': ProIcon,
  'repost': RepostIcon,
  'rich-text': RichTextIcon,
  'search': SearchIcon,
--- a/app/javascript/gabsocial/components/intersection_observer_article.js
+++ b/app/javascript/gabsocial/components/intersection_observer_article.js
@@ -45,21 +45,8 @@ class IntersectionObserverArticle extends React.Component {
  }

  state = {
-    isHidden: false, // set to true in requestIdleCallback to trigger un-render
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const isUnrendered = !this.state.isIntersecting && (this.state.isHidden || this.props.cachedHeight);
-    const willBeUnrendered = !nextState.isIntersecting && (nextState.isHidden || nextProps.cachedHeight);
-
-    // If we're going from rendered to unrendered (or vice versa) then update
-    if (!!isUnrendered !== !!willBeUnrendered) {
-      return true;
-    }
-
-    // Otherwise, diff based on props
-    const propsToDiff = isUnrendered ? updateOnPropsForUnrendered : updateOnPropsForRendered;
-    return !propsToDiff.every(prop => is(nextProps[prop], this.props[prop]));
+    isIntersecting: false,
+    isHidden: true,
  }

  componentDidMount() {
@@ -81,6 +68,20 @@ class IntersectionObserverArticle extends React.Component {
    this.componentMounted = false;
  }

+  shouldComponentUpdate(nextProps, nextState) {
+    const isUnrendered = !this.state.isIntersecting && (this.state.isHidden || this.props.cachedHeight);
+    const willBeUnrendered = !nextState.isIntersecting && (nextState.isHidden || nextProps.cachedHeight);
+
+    // If we're going from rendered to unrendered (or vice versa) then update
+    if (!!isUnrendered !== !!willBeUnrendered) {
+      return true;
+    }
+
+    // Otherwise, diff based on props
+    const propsToDiff = isUnrendered ? updateOnPropsForUnrendered : updateOnPropsForRendered;
+    return !propsToDiff.every(prop => is(nextProps[prop], this.props[prop]));
+  }
+  
  handleIntersection = (entry) => {
    this.entry = entry;

@@ -113,9 +114,6 @@ class IntersectionObserverArticle extends React.Component {
  hideIfNotIntersecting = () => {
    if (!this.componentMounted) return

-    // When the browser gets a chance, test if we're still not intersecting,
-    // and if so, set our isHidden to true to trigger an unrender. The point of
-    // this is to save DOM nodes and avoid using up too much memory.
    this.setState((prevState) => ({ isHidden: !prevState.isIntersecting }))
  }

--- a/app/javascript/gabsocial/components/modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal.js
@@ -163,18 +163,14 @@ class MediaModal extends ImmutablePureComponent {
          outlineNone: 1,
          circle: 1,
          cursorPointer: 1,
-          colorPrimary: i === index,
-          lineHeight0825: i === index,
          bgPrimaryOpaque: i !== index,
          bgPrimary: i === index,
+          boxShadowDot: i === index,
        })
-        const activeText = i === index ? '•' : ''

        return (
          <li className={[_s.default, _s.px5].join(' ')} key={`media-pagination-${i}`}>
-            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i}>
-              {activeText}
-            </button>
+            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i} />
          </li>
        )
      })
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js
@@ -91,9 +91,24 @@ class ProfileInfoPanel extends ImmutablePureComponent {
            <Fragment>
              <Divider isSmall />
              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-                { isPro && <Icon id='pro' size='16px' className={_s.mr5} /> }
-                { isInvestor && <Icon id='investor' size='16px' className={_s.mr5} /> }
-                { isDonor && <Icon id='donor' size='16px' /> }
+                { 
+                  isPro &&
+                  <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
+                    <Text weight='bold' size='small' color='white' isBadge>PRO</Text>
+                  </div>
+                }
+                {
+                  isInvestor && 
+                  <div className={[_s.mr5, _s.radiusSmall, _s.bgInvestor, _s.py2, _s.px5].join(' ')}>
+                    <Text weight='bold' size='small' color='white' isBadge>INVESTOR</Text>
+                  </div>
+                }
+                {
+                  isDonor &&
+                  <div className={[_s.mr5, _s.radiusSmall, _s.bgDonor, _s.py2, _s.px5].join(' ')}>
+                    <Text weight='bold' size='small' color='white' isBadge>DONOR</Text>
+                  </div>
+                }
              </div>
            </Fragment>
          }
--- a/app/javascript/gabsocial/components/panel/progress_panel.js
+++ b/app/javascript/gabsocial/components/panel/progress_panel.js
@@ -25,8 +25,6 @@ class ProgressPanel extends PureComponent {

    const value = Math.min(parseFloat(monthlyExpensesComplete), 100)

-    console.log("monthlyExpensesComplete:", monthlyExpensesComplete)
-
    return (
      <PanelLayout
        title={intl.formatMessage(messages.operationsTitle)}
--- a/app/javascript/gabsocial/components/panel/search_filter_panel.js
+++ b/app/javascript/gabsocial/components/panel/search_filter_panel.js
@@ -19,12 +19,13 @@ export default
 class SearchFilterPanel extends ImmutablePureComponent {

  static propTypes = {
-    group: ImmutablePropTypes.list.isRequired,
    intl: PropTypes.object.isRequired,
  }

  render() {
-    const { intl, group } = this.props
+    const { intl } = this.props
+
+    // verified or not

    return (
      <PanelLayout title={intl.formatMessage(messages.title)}>
--- a/app/javascript/gabsocial/components/popover/emoji_picker_popover.js
+++ b/app/javascript/gabsocial/components/popover/emoji_picker_popover.js
@@ -221,7 +221,6 @@ const mapDispatchToProps = (dispatch) => ({

  onPickEmoji: (emoji) => {
    dispatch(useEmoji(emoji))
-    console.log("emoji:", emoji)
    dispatch(insertEmojiCompose(0, emoji, false))
  },
 })
--- a/app/javascript/gabsocial/components/popover/group_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/group_options_popover.js
@@ -84,7 +84,7 @@ class GroupOptionsPopover extends ImmutablePureComponent {
    ]

    return (
-      <PopoverLayout width={220}>
+      <PopoverLayout>
        <List
          scrollKey='repost_options'
          items={listItems}
--- a/app/javascript/gabsocial/components/popover/search_popover.js
+++ b/app/javascript/gabsocial/components/popover/search_popover.js
@@ -1,5 +1,6 @@
 export default class SearchPopover extends PureComponent {
  render() {
+    // : todo :
    // <div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
    //   <Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
    //     {({ opacity, scaleX, scaleY }) => (
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -4,14 +4,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { HotKeys } from 'react-hotkeys'
 import classNames from 'classnames/bind'
 import { me, displayMedia, compactMode } from '../initial_state'
-import StatusCard from './status_card'
-import { MediaGallery, Video } from '../features/ui/util/async_components'
 import ComposeFormContainer from '../features/compose/containers/compose_form_container'
 import StatusContent from './status_content'
 import StatusPrepend from './status_prepend'
 import StatusActionBar from './status_action_bar'
 import StatusMedia from './status_media'
-import Poll from './poll'
 import StatusHeader from './status_header'
 import CommentList from './comment_list'

@@ -26,13 +23,14 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {

  const displayName = status.getIn(['account', 'display_name'])

+  // : todo :
  const values = [
-    displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
-    status.get('spoiler_text') && status.get('hidden')
-      ? status.get('spoiler_text')
-      : status.get('search_index').slice(status.get('spoiler_text').length),
-    intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
-    `@${status.getIn(['account', 'acct'])}`,
+    // displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
+    // status.get('spoiler_text') && status.get('hidden')
+    //   ? status.get('spoiler_text')
+    //   : status.get('search_index').slice(status.get('spoiler_text').length),
+    // intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
+    // `@${status.getIn(['account', 'acct'])}`,
  ]

  if (rebloggedByText) {
@@ -64,6 +62,7 @@ class Status extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map,
    descendantsIds: ImmutablePropTypes.list,
+    ancestorStatus: ImmutablePropTypes.map,
    isChild: PropTypes.bool,
    isPromoted: PropTypes.bool,
    isFeatured: PropTypes.bool,
@@ -136,7 +135,7 @@ class Status extends ImmutablePureComponent {

    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
      return {
-        loadedComments: false,
+        loadedComments: false, //reset
        showMedia: defaultMediaVisibility(nextProps.status),
        statusId: nextProps.status.get('id'),
      }
@@ -418,6 +417,8 @@ class Status extends ImmutablePureComponent {
      bgSubtle_onHover: isChild,
    })

+    console.log("status:", status)
+
    return (
      <HotKeys handlers={handlers}>
        <div
@@ -496,6 +497,7 @@ class Status extends ImmutablePureComponent {
                <CommentList
                  commentsLimited={commentsLimited}
                  descendants={descendantsIds}
+                  onViewComments={this.handleClick}
                />
              }
            </div>
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -78,20 +78,6 @@ class StatusContent extends ImmutablePureComponent {
      } else {
        link.setAttribute('title', link.href)
      }
-
-      const descendents = link.getElementsByTagName('*')
-      for (let j = 0; j < descendents.length; j++) {
-        const descendent = descendents[j];
-        
-        if (descendent.classList.contains('invisible')) {
-          descendent.classList.remove('invisible')
-          descendent.classList.add(_s.fs0, _s.text, _s.inherit)
-        }
-        if (descendent.classList.contains('ellipsis')) {
-          descendent.classList.remove('ellipsis')
-          descendent.classList.add(_s.noSelect, _s.text, _s.inherit)
-        } 
-      }
    }

    if (
@@ -299,7 +285,7 @@ class StatusContent extends ImmutablePureComponent {

      const statusContentClasses = cx({
        statusContent: 1,
-        height220PX: collapsed,
+        height215PX: collapsed,
        overflowHidden: collapsed,
      })

--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -16,6 +16,7 @@ import Button from './button'
 import Avatar from './avatar'

 const messages = defineMessages({
+  edited: { id: 'status.edited', defaultMessage: 'Edited' },
  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
  public_long: { id: 'privacy.public.long', defaultMessage: 'Visible for anyone on or off Gab' },
  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
@@ -193,7 +194,7 @@ class StatusHeader extends ImmutablePureComponent {
                    className={_s.ml5}
                  >
                    <Text size='small' color='secondary'>
-                      Edited
+                      {intl.formatMessage(messages.edited)}
                    </Text>
                  </Button>
                </Fragment>
--- a/app/javascript/gabsocial/components/trends_item.js
+++ b/app/javascript/gabsocial/components/trends_item.js
@@ -50,7 +50,7 @@ export default class TrendingItem extends ImmutablePureComponent {

    if (!trend) return null

-    const title = trend.get('title') || ''
+    const title = `${trend.get('title')}`.trim()
    const description = trend.get('description') || ''
      
    const correctedAuthor = trend.getIn(['author', 'name'], '').replace('www.', '')