Progress

2020-12-15 19:31:30 -05:00
parent de0c977950
commit 75d52c841e
129 changed files with 2559 additions and 910 deletions
--- a/app/javascript/gabsocial/features/messages/components/chat_conversations_list_item.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_conversations_list_item.js
@@ -35,16 +35,17 @@ class ChatConversationsListItem extends ImmutablePureComponent {

    if (!chatConversation) return <div/>

+    console.log("chatConversation:", chatConversation)
+
    const containerClasses = CX({
      d: 1,
      w100PC: 1,
      bgTransparent: 1,
      bgSubtle_onHover: 1,
-      borderBottom1PX: 1,
-      borderColorSecondary: 1,
      noUnderline: 1,
      outlineNone: 1,
      cursorPointer: 1,
+      pl15: 1,
    })

    const innerContainerClasses = CX({
@@ -71,6 +72,9 @@ class ChatConversationsListItem extends ImmutablePureComponent {
        className={containerClasses}
        onClick={this.handleOnClick}
      >
+        
+        { chatConversation.get('is_unread') && <div className={[_s.d, _s.posAbs, _s.left0, _s.top50PC, _s.ml10, _s.mtNeg5PX, _s.circle, _s.w10PX, _s.h10PX, _s.bgBrand].join(' ')} /> }
+        
        <div className={innerContainerClasses}>
          <AvatarGroup accounts={otherAccounts} size={avatarSize} noHover />

@@ -88,6 +92,7 @@ class ChatConversationsListItem extends ImmutablePureComponent {

            <div className={[_s.py5, _s.dangerousContent, _s.textAlignLeft].join(' ')} dangerouslySetInnerHTML={content} />
          </div>
+          <div className={[_s.d, _s.posAbs, _s.h1PX, _s.w100PC, _s.bottom0, _s.right0, _s.bgSecondary].join(' ')} />
        </div>
      </button>
    )
--- a/app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js
@@ -8,6 +8,7 @@ import { openModal } from '../../../actions/modal'
 import { sendChatMessage } from '../../../actions/chat_messages'
 import { CX } from '../../../constants'
 import Button from '../../../components/button'
+import Icon from '../../../components/icon'
 import Input from '../../../components/input'
 import Text from '../../../components/text'

@@ -23,6 +24,10 @@ class ChatMessagesComposeForm extends React.PureComponent {
    this.setState({ value: '' })
  }

+  handleOnExpire = () => {
+    //
+  }
+
  onChange = (e) => {
    this.setState({ value: e.target.value })
  }
@@ -68,6 +73,10 @@ class ChatMessagesComposeForm extends React.PureComponent {
    this.sendBtn = c
  }

+  setExpiresBtn = (c) => {
+    this.expiresBtn = c
+  }
+
  render () {
    const { isXS, chatConversationId } = this.props
    const { value } = this.state
@@ -85,9 +94,7 @@ class ChatMessagesComposeForm extends React.PureComponent {
      px10: 1,
      fs14PX: 1,
      maxH200PX: 1,
-      borderColorSecondary: 1,
-      border1PX: 1,
-      radiusRounded: 1,
+      w100PC: 1,
      py10: 1,
    })

@@ -105,6 +112,7 @@ class ChatMessagesComposeForm extends React.PureComponent {
        onBlur={this.onBlur}
        onKeyDown={this.onKeyDown}
        aria-autocomplete='list'
+        maxLength={1600}
      />
    )

@@ -114,18 +122,33 @@ class ChatMessagesComposeForm extends React.PureComponent {
        disabled={disabled}
        onClick={this.handleOnSendChatMessage}
      >
-        <Text color='inherit' weight='medium' className={_s.px10}>Send</Text>
+        <Text color='inherit' weight='medium' className={isXS ? undefined : _s.px10}>Send</Text>
      </Button>
    )

+    const expiresBtn = (
+      <button
+        ref={this.setExpiresBtn}
+        className={[_s.d, _s.bgSubtle, _s.borderRight1PX, _s.borderColorSecondary, _s.w40PX, _s.h100PC, _s.aiCenter, _s.jcCenter, _s.cursorPointer, _s.outlineNone].join(' ')}
+        onClick={this.handleOnExpire}
+      >
+        <Icon id='stopwatch' className={[_s.cPrimary, _s.ml2].join(' ')} size='15px' />
+      </button>
+    )
+
    if (isXS) {
      return (
        <div className={[_s.d, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
          <div className={[_s.d, _s.minH58PX, _s.bgPrimary, _s.aiCenter, _s.z3, _s.bottom0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
            <div className={[_s.d, _s.w100PC, _s.pb5, _s.px15, _s.aiCenter, _s.jcCenter, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
              <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px10].join(' ')}>
-                <div className={[_s.d, _s.pr15, _s.flexGrow1, _s.py10].join(' ')}>
-                  {textarea}
+                <div className={[_s.d, _s.flexRow, _s.radiusRounded, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden].join(' ')}>
+                  <div className={_s.d}>  
+                    {expiresBtn}
+                  </div>
+                  <div className={[_s.d, _s.flexGrow1].join(' ')}>
+                    {textarea}
+                  </div>
                </div>
                <div className={[_s.d, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
                  {button}
@@ -140,9 +163,16 @@ class ChatMessagesComposeForm extends React.PureComponent {
    return (
      <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.bgPrimary, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
        <div className={[_s.d, _s.pr15, _s.flexGrow1, _s.py10].join(' ')}>
-          {textarea}
+          <div className={[_s.d, _s.flexRow, _s.radiusRounded, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden].join(' ')}>
+            <div className={_s.d}>  
+              {expiresBtn}
+            </div>
+            <div className={[_s.d, _s.flexGrow1].join(' ')}>
+              {textarea}
+            </div>
+          </div>
        </div>
-        <div className={[_s.d, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s.d, _s.h100PC, _s.mtAuto, _s.mb10, _s.aiCenter, _s.jcCenter].join(' ')}>
          {button}
        </div>
      </div>
@@ -163,4 +193,4 @@ ChatMessagesComposeForm.propTypes = {
  onSendMessage: PropTypes.func.isRequired,
 }

-export default connect(null, mapDispatchToProps)(ChatMessagesComposeForm)
+export default connect(mapDispatchToProps)(ChatMessagesComposeForm)
--- a/app/javascript/gabsocial/features/messages/components/chat_message_item.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_item.js
@@ -8,7 +8,7 @@ import { NavLink } from 'react-router-dom'
 import { openPopover } from '../../../actions/popover'
 import {
  CX,
-  POPOVER_CHAT_MESSAGE_DELETE,
+  POPOVER_CHAT_MESSAGE_OPTIONS,
 } from '../../../constants'
 import { me } from '../../../initial_state'
 import Input from '../../../components/input'
@@ -51,7 +51,7 @@ class ChatMessageItem extends ImmutablePureComponent {
  }

  handleMoreClick = () => {
-    this.props.onOpenChatMessageDeletePopover(this.props.chatMessageId, this.deleteBtnRef)
+    this.props.onOpenChatMessageOptionsPopover(this.props.chatMessageId, this.deleteBtnRef)
  }

  setDeleteBtnRef = (c) => {
@@ -122,7 +122,7 @@ class ChatMessageItem extends ImmutablePureComponent {
    const buttonContainerClasses = CX({
      d: 1,
      flexRow: 1,
-      displayNone: !isHovering && alt,
+      displayNone: !isHovering,
    })

    return (
@@ -145,19 +145,16 @@ class ChatMessageItem extends ImmutablePureComponent {
            <div className={messageInnerContainerClasses}>
              <div className={[_s.py5, _s.dangerousContent, _s.cPrimary].join(' ')} dangerouslySetInnerHTML={content} />
            </div>
-            {
-              alt &&
-              <div className={buttonContainerClasses}>
-                <Button
-                  buttonRef={this.setDeleteBtnRef}
-                  onClick={this.handleMoreClick}
-                  color='tertiary'
-                  backgroundColor='none'
-                  icon='ellipsis'
-                  iconSize='18px'
-                />
-              </div>
-              }
+            <div className={buttonContainerClasses}>
+              <Button
+                buttonRef={this.setDeleteBtnRef}
+                onClick={this.handleMoreClick}
+                color='tertiary'
+                backgroundColor='none'
+                icon='ellipsis'
+                iconSize='18px'
+              />
+            </div>
          </div>
          <div className={lowerContainerClasses}>
            <Text size='extraSmall' color='tertiary' align={alt ? 'right' : 'left'}>
@@ -178,8 +175,8 @@ const mapStateToProps = (state, { lastChatMessageId, chatMessageId }) => ({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onOpenChatMessageDeletePopover(chatMessageId, targetRef) {
-    dispatch(openPopover(POPOVER_CHAT_MESSAGE_DELETE, {
+  onOpenChatMessageOptionsPopover(chatMessageId, targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_MESSAGE_OPTIONS, {
      targetRef,
      chatMessageId,
      position: 'top',
--- a/app/javascript/gabsocial/features/messages/components/chat_message_scrolling_list.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_scrolling_list.js
@@ -15,6 +15,7 @@ import {
  expandChatMessages,
  scrollBottomChatMessageConversation,
 } from '../../../actions/chat_conversation_messages'
+import { readChatConversation } from '../../../actions/chat_conversations'
 import IntersectionObserverArticle from '../../../components/intersection_observer_article'
 import IntersectionObserverWrapper from '../../ui/util/intersection_observer_wrapper'
 import ChatMessagePlaceholder from '../../../components/placeholder/chat_message_placeholder'
@@ -58,7 +59,6 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
    // Reset the scroll position when a new child comes in in order not to
    // jerk the scrollbar around if you're already scrolled down the page.
    if (snapshot !== null && this.scrollContainerRef) {
-      console.log("snapshot:", snapshot)
      this.setScrollTop(this.scrollContainerRef.scrollHeight - snapshot)
    }

@@ -68,6 +68,7 @@ class ChatMessageScrollingList extends ImmutablePureComponent {

    if (prevProps.chatMessageIds.size === 0 && this.props.chatMessageIds.size > 0 && this.scrollContainerRef) {
      this.scrollContainerRef.scrollTop = this.scrollContainerRef.scrollHeight
+      this.props.onReadChatConversation(this.props.chatConversationId)
    }
  }

@@ -363,6 +364,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
  onSetChatConversationSelected: (chatConversationId) => {
    dispatch(setChatConversationSelected(chatConversationId))
  },
+  onReadChatConversation(chatConversationId) {
+    dispatch(readChatConversation(chatConversationId))
+  },
 })

 ChatMessageScrollingList.propTypes = {