Progress

2020-03-08 19:02:28 -04:00
parent 2f9dbfa91d
commit 0b94033011
16 changed files with 324 additions and 167 deletions
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -106,6 +106,7 @@ export default class Button extends PureComponent {

      colorPrimary: color === COLORS.primary,
      colorSecondary: color === COLORS.secondary,
+      colorTertiary: color === COLORS.tertiary,
      colorWhite: color === COLORS.white,
      colorBrand: color === COLORS.brand,

--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -3,31 +3,127 @@ import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { me } from '../initial_state'
+import { makeGetStatus } from '../selectors';
+import CommentHeader from './comment_header'
 import Avatar from './avatar'
-import DisplayName from './display_name'
 import Button from './button'
+import DisplayName from './display_name'
+import DotTextSeperator from './dot_text_seperator'
+import RelativeTimestamp from './relative_timestamp'
 import Text from './text'
+import StatusContent from './status_content'

 const messages = defineMessages({
  follow: { id: 'follow', defaultMessage: 'Follow' },
 })

+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = (state, props) => ({
+    status: getStatus(state, props),
+  });
+
+  return mapStateToProps;
+};
+
 export default
@injectIntl
+@connect(makeMapStateToProps)
 class Comment extends ImmutablePureComponent {

  static propTypes = {
    status: ImmutablePropTypes.map.isRequired,
  }

-  render() {
+  handleClick = () => {
+    // if (this.props.onClick) {
+    //   this.props.onClick();
+    //   return;
+    // }

-    //
+    // if (!this.context.router) return;
+
+    // this.context.router.history.push(
+    //   `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
+    // )
+  }
+
+  render() {
+    const { status } = this.props
+
+    console.log("status:", status)

    return (
-      <div>
+      <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX, _s.paddingVertical5PX].join(' ')} data-comment={status.get('id')}>
+        <div className={[_s.default].join(' ')}>

+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <NavLink
+              to={`/${status.getIn(['account', 'acct'])}`}
+              title={status.getIn(['account', 'acct'])}
+              className={[_s.default, _s.marginRight10PX, _s.paddingTop5PX].join(' ')}
+            >
+              <Avatar account={status.get('account')} size={32} />
+            </NavLink>
+
+            <div className={[_s.default, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical5PX, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
+                <div className={_s.paddingTop2PX}>
+                  <CommentHeader status={status} />
+                </div>
+                <div className={[_s.paddingVertical5PX].join(' ')}>
+                  <StatusContent
+                    status={status}
+                    onClick={this.handleClick}
+                    isComment
+                    collapsable
+                  />
+                </div>
+              </div>
+              <div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
+                
+                <Button
+                  text
+                  radiusSmall
+                  backgroundColor='none'
+                  color='tertiary'
+                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                >
+                  <Text size='extraSmall' color='inherit' weight='bold'>
+                    Like
+                  </Text>
+                </Button>
+
+                <Button
+                  text
+                  radiusSmall
+                  backgroundColor='none'
+                  color='tertiary'
+                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                >
+                  <Text size='extraSmall' color='inherit' weight='bold'>
+                    Reply
+                  </Text>
+                </Button>
+
+                <Button
+                  text
+                  radiusSmall
+                  backgroundColor='none'
+                  color='tertiary'
+                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                >
+                  <Text size='extraSmall' color='inherit' weight='bold'>
+                    ···
+                  </Text>
+                </Button>
+
+              </div>
+            </div>
+          </div>
+
+        </div>
      </div>
    )
  }
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -0,0 +1,120 @@
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Avatar from './avatar'
+import Button from './button'
+import DisplayName from './display_name'
+import DotTextSeperator from './dot_text_seperator'
+import RelativeTimestamp from './relative_timestamp'
+import Text from './text'
+
+export default
+@injectIntl
+class CommentHeader extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+  }
+
+  render() {
+    const { status } = this.props
+
+    const repostCount = 12 // status.get('reblogs_count')
+    const favoriteCount = 2 // status.get('favourites_count') // : todo :
+
+    const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
+
+    return (
+      <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1].join(' ')}>
+
+        <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+          <NavLink
+            className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
+            to={`/${status.getIn(['account', 'acct'])}`}
+            title={status.getIn(['account', 'acct'])}
+          >
+            <DisplayName account={status.get('account')} small />
+          </NavLink>
+
+          {
+            status.get('revised_at') !== null &&
+            <Fragment>
+              <DotTextSeperator />
+              <Button
+                text
+                underlineOnHover
+                backgroundColor='none'
+                color='tertiary'
+                onClick={this.handleOpenStatusEdits}
+                className={_s.marginLeft5PX}
+              >
+                <Text size='extraSmall' color='inherit'>
+                  Edited
+                </Text>
+              </Button>
+            </Fragment>
+          }
+
+          {
+            favoriteCount > 0 &&
+            <Fragment>
+              <DotTextSeperator />
+                <Button
+                  text
+                  underlineOnHover
+                  backgroundColor='none'
+                  color='tertiary'
+                  to={statusUrl}
+                  className={_s.marginLeft5PX}
+                >
+                <Text size='extraSmall' color='inherit'>
+                  {favoriteCount}
+                  &nbsp;Likes
+                </Text>
+              </Button>
+            </Fragment>
+          }
+
+          {
+            repostCount > 0 &&
+            <Fragment>
+              <DotTextSeperator />
+                <Button
+                  text
+                  underlineOnHover
+                  backgroundColor='none'
+                  color='tertiary'
+                  to={statusUrl}
+                  className={_s.marginLeft5PX}
+                >
+                <Text size='extraSmall' color='inherit'>
+                  {repostCount}
+                  &nbsp;Reposts
+                </Text>
+              </Button>
+            </Fragment>
+          }
+
+          <DotTextSeperator />
+
+          <Button
+            text
+            underlineOnHover
+            backgroundColor='none'
+            color='tertiary'
+            to={statusUrl}
+            className={_s.marginLeft5PX}
+          >
+            <Text size='extraSmall' color='inherit'>
+              <RelativeTimestamp timestamp={status.get('created_at')} />
+            </Text>
+          </Button>
+
+        </div>
+      </div>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -26,6 +26,7 @@ class DisplayName extends ImmutablePureComponent {
    openUserInfoPopover: PropTypes.func.isRequired,
    closeUserInfoPopover: PropTypes.func.isRequired,
    multiline: PropTypes.bool,
+    small: PropTypes.bool,
    large: PropTypes.bool,
    noHover: PropTypes.bool,
    noUsername: PropTypes.bool,
@@ -47,7 +48,8 @@ class DisplayName extends ImmutablePureComponent {
      multiline,
      large,
      noHover,
-      noUsername
+      noUsername,
+      small
    } = this.props

    if (!account) return null
@@ -70,10 +72,11 @@ class DisplayName extends ImmutablePureComponent {
      whiteSpaceNoWrap: 1,
      fontWeightBold: 1,
      colorPrimary: 1,
-      lineHeight125: 1,
      marginRight2PX: 1,
+      lineHeight125: !small,
+      fontSize14PX: small,
      fontSize15PX: !large,
-      fontSize24PX: large,
+      fontSize24PX: large && !small,
    })

    const usernameClasses = cx({
@@ -88,11 +91,14 @@ class DisplayName extends ImmutablePureComponent {
      lineHeight15: multiline,
      lineHeight125: !multiline,
      marginLeft5PX: !multiline,
+      fontSize14PX: small,
      fontSize15PX: !large,
-      fontSize16PX: large
+      fontSize16PX: large && !small,
    })

-    const iconSize = !!large ? '19px' : '16px'
+    const iconSize =
+      !!large ? '19px' :
+      !!small ? '14px' : '16px'

    // : todo :
    return (
--- a/app/javascript/gabsocial/components/dot_text_seperator.js
+++ b/app/javascript/gabsocial/components/dot_text_seperator.js
@@ -4,7 +4,7 @@ export default class DotTextSeperator extends PureComponent {

  render() {
    return (
-      <Text size='small' color='secondary' className={_s.marginLeft5PX}>•</Text>
+      <Text size='small' color='secondary' className={_s.marginLeft5PX}>·</Text>
    )
  }

--- a/app/javascript/gabsocial/components/status/status.js
+++ b/app/javascript/gabsocial/components/status/status.js
@@ -13,7 +13,7 @@ import Avatar from '../avatar';
 import StatusQuote from '../status_quote';
 import RelativeTimestamp from '../relative_timestamp';
 import DisplayName from '../display_name';
-import StatusContent from '../status_content';
+import StatusContent from '../status_content'
 import StatusActionBar from '../status_action_bar';
 import Block from '../block';
 import Icon from '../icon';
@@ -104,6 +104,7 @@ class Status extends ImmutablePureComponent {
    promoted: PropTypes.bool,
    onOpenProUpgradeModal: PropTypes.func,
    intl: PropTypes.object.isRequired,
+    borderless: PropTypes.bool,
  };

  // Avoid checking props that are functions (and whose equality will always
@@ -279,7 +280,8 @@ class Status extends ImmutablePureComponent {
      unread,
      showThread,
      group,
-      promoted
+      promoted,
+      borderless
    } = this.props

    let media = null
@@ -450,12 +452,21 @@ class Status extends ImmutablePureComponent {

    const containerClasses = cx({
      default: 1,
-      marginBottom15PX: 1,
+      marginBottom15PX: !borderless,
+      backgroundColorPrimary: 1,
      paddingBottom15PX: featured,
      borderBottom1PX: featured,
      borderColorSecondary: featured,
    })

+    const innerContainerClasses = cx({
+      default: 1,
+      overflowHidden: 1,
+      radiusSmall: !borderless,
+      borderColorSecondary: !borderless,
+      border1PX: !borderless,
+    })
+
    return (
      <HotKeys handlers={handlers}>
        <div
@@ -465,7 +476,7 @@ class Status extends ImmutablePureComponent {
          aria-label={textForScreenReader(intl, status, rebloggedByText)}
          ref={this.handleRef}
        >
-          <Block>
+          <div className={innerContainerClasses}>

            {prepend}

@@ -497,11 +508,11 @@ class Status extends ImmutablePureComponent {
            ) */ }

              <StatusActionBar status={status} account={account} {...other} />
-              {/*<div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.paddingHorizontal15PX, _s.marginBottom10PX].join(' ')}>
+              <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.paddingHorizontal15PX, _s.marginBottom10PX].join(' ')}>
                <ComposeFormContainer statusId={status.get('id')} shouldCondense />
-          </div>*/}
+              </div>
            </div>
-          </Block>
+          </div>
        </div>
      </HotKeys>
    );
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -132,7 +132,7 @@ class StatusActionBar extends ImmutablePureComponent {
    const repostCount = status.get('reblogs_count')
    const repostTitle = !publicStatus ? formatMessage(messages.cannot_repost) : formatMessage(messages.repost)

-    const favoriteCount = status.get('favorites_count') // : todo :
+    const favoriteCount = status.get('favourites_count') // : todo :

    const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
      <IconButton className='status-action-bar-button' title={formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
--- a/app/javascript/gabsocial/components/status_content/status_content.js
+++ b/app/javascript/gabsocial/components/status_content/status_content.js
@@ -33,6 +33,7 @@ class StatusContent extends ImmutablePureComponent {
    onClick: PropTypes.func,
    collapsable: PropTypes.bool,
    intl: PropTypes.object.isRequired,
+    isComment: PropTypes.bool,
  };

  state = {
@@ -155,7 +156,7 @@ class StatusContent extends ImmutablePureComponent {
  }

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

    if (status.get('content').length === 0) return null;

@@ -208,7 +209,7 @@ class StatusContent extends ImmutablePureComponent {
      const hasMarginBottom = !!status.get('card') || !!status.get('poll') || status.get('media_attachments').size > 0

      const containerClasses = cx({
-        paddingHorizontal15PX: 1,
+        paddingHorizontal15PX: !isComment,
        marginBottom15PX: hasMarginBottom,
      })