Commiting

app/javascript/gabsocial/features/messages/components/message_item.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { NavLink } from 'react-router-dom'
+import { CX } from '../../../constants'
+import Input from '../../../components/input'
+import Avatar from '../../../components/avatar'
+import Button from '../../../components/button'
+import Text from '../../../components/text'
+import RelativeTimestamp from '../../../components/relative_timestamp'
+import { makeGetAccount } from '../../../selectors'
+
+class MessagesItem extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  state = {
+    hovering: false,
+  }
+
+  handleOnMouseEnter = () => {
+    this.setState({ isHovering: true }) 
+  }
+  
+  handleOnMouseLeave = () => {
+    this.setState({ isHovering: false })
+  }
+
+  render() {
+    const {
+      account,
+      intl,
+      alt,
+    } = this.props
+    const { isHovering } = this.state
+
+    const content = { __html: 'REEEE i heard you have the sauce2?' }
+    const messageContainerClasses = CX({
+      d: 1,
+      flexRow: !alt,
+      flexRowReverse: alt,
+    })
+    const messageInnerContainerClasses = CX({
+      d: 1,
+      px15: 1,
+      py5: 1,
+      bgSecondary: !alt,
+      bgBrandLight: alt,
+      circle: 1,
+      ml10: 1,
+      mr10: 1,
+    })
+
+    const lowerContainerClasses = CX({
+      d: 1,
+      pt10: 1,
+      pl50: !alt,
+      pr50: alt,
+    })
+
+    const buttonContainerClasses = CX({
+      d: 1,
+      flexRow: 1,
+      displayNone: !isHovering,
+    })
+
+    return (
+      <div
+        className={[_s.d, _s.w100PC, _s.pb10].join(' ')}
+        onMouseEnter={this.handleOnMouseEnter}
+        onMouseLeave={this.handleOnMouseLeave}
+      >
+        <div className={[_s.d, _s.w100PC, _s.pb15].join(' ')}>
+
+          <div className={messageContainerClasses}>
+            <Avatar account={account} size={38} />
+            <div className={messageInnerContainerClasses}>
+              <div className={[_s.py5, _s.dangerousContent].join(' ')} dangerouslySetInnerHTML={content} />
+            </div>
+            <div className={buttonContainerClasses}>
+              <Button
+                onClick={undefined}
+                color='tertiary'
+                backgroundColor='none'
+                icon='ellipsis'
+                iconSize='18px'
+              />
+            </div>
+          </div>
+          <div className={lowerContainerClasses}>
+            <Text size='small' color='tertiary' align={alt ? 'right' : 'left'}>
+              Apr 16, 2020, 8:20 AM
+              { /* <RelativeTimestamp timestamp={'2020-20-10'} /> */ }
+            </Text>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+MessagesItem.propTypes = {
+  intl: PropTypes.object.isRequired,
+  alt: PropTypes.bool,
+}
+
+export default connect(mapStateToProps)(MessagesItem)

app/javascript/gabsocial/features/messages/components/messages_header.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Heading from '../../../components/heading'
+import Button from '../../../components/button'
+
+class MessagesHeader extends ImmutablePureComponent {
+
+  render() {
+    const {
+      account,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.w100PC, _s.h60PX, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.pl15, _s.pr5, _s.py15].join(' ')}>
+          <Heading size='h1'>
+            Messages
+          </Heading>
+          <div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
+            <Button
+              isNarrow
+              onClick={undefined}
+              className={[_s.ml5, _s.px15].join(' ')}
+            >
+              New
+            </Button>
+            <Button
+              isNarrow
+              onClick={undefined}
+              color='brand'
+              backgroundColor='none'
+              className={_s.ml5}
+              icon='cog'
+              iconSize='18px'
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default MessagesHeader

app/javascript/gabsocial/features/messages/components/messages_list.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import MessagesListItem from './messages_list_item'
+import { makeGetAccount } from '../../../selectors'
+
+class MessagesList extends ImmutablePureComponent {
+
+  render() {
+    const {
+      account,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <MessagesListItem />
+        <MessagesListItem selected />
+        <MessagesListItem />
+        <MessagesListItem />
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+MessagesList.propTypes = {
+  intl: PropTypes.object.isRequired,
+}
+
+export default connect(mapStateToProps)(MessagesList)

app/javascript/gabsocial/features/messages/components/messages_list_item.js

@@ -0,0 +1,107 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { NavLink } from 'react-router-dom'
+import { CX } from '../../../constants'
+import Input from '../../../components/input'
+import DisplayName from '../../../components/display_name'
+import Avatar from '../../../components/avatar'
+import Text from '../../../components/text'
+import RelativeTimestamp from '../../../components/relative_timestamp'
+import { makeGetAccount } from '../../../selectors'
+
+class MessagesListItem extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  state = {
+    composeFocused: false,
+  }
+
+  render() {
+    const {
+      account,
+      intl,
+      selected,
+    } = this.props
+
+    const buttonClasses = CX({
+      d: 1,
+      pt2: 1,
+      pr5: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      flexNormal: 1,
+      flexRow: 1,
+      aiStart: 1,
+      aiCenter: 1,
+    })
+
+    const containerClasses = CX({
+      d: 1,
+      bgSubtle_onHover: 1,
+      borderBottom1PX: 1,
+      borderColorSecondary: 1,
+      noUnderline: 1,
+    })
+
+    const innerContainerClasses = CX({
+      d: 1,
+      flexRow: 1,
+      aiStart: 1,
+      aiCenter: 0,
+      px15: 1,
+      py15: 1,
+      borderRight4PX: selected,
+      borderColorBrand: selected,
+    })
+
+    const avatarSize = 49
+    const content = { __html: 'REEEE i heard you have the sauce?' }
+
+    return (
+        <NavLink
+          className={containerClasses}
+          title={account.get('acct')}
+          to={`/messages/conversation-id`}
+        >
+          <div className={innerContainerClasses}>
+
+            <Avatar account={account} size={avatarSize} noHover />
+
+            <div className={[_s.d, _s.pl10, _s.overflowHidden, _s.flexNormal].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+                <div className={buttonClasses}>
+                  <div className={_s.maxW100PC42PX}>
+                    <DisplayName account={account} noHover />
+                  </div>
+                  <Text size='extraSmall' color='secondary' className={_s.mlAuto}>
+                    May 1
+                    { /* <RelativeTimestamp timestamp={'2020-20-10'} /> */ }
+                  </Text>
+                </div>
+              </div>
+
+              <div className={[_s.py5, _s.dangerousContent].join(' ')} dangerouslySetInnerHTML={content} />
+            </div>
+          </div>
+        </NavLink>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+MessagesListItem.propTypes = {
+  intl: PropTypes.object.isRequired,
+  selected: PropTypes.bool,
+}
+
+export default connect(mapStateToProps)(MessagesListItem)

app/javascript/gabsocial/features/messages/components/messages_search.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import Input from '../../../components/input'
+
+class MessagesSearch extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  }
+
+  state = {
+    composeFocused: false,
+  }
+
+  render() {
+    const {
+      intl,
+    } = this.props
+
+    return (
+      <div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+        <Input
+          type='search'
+          placeholder='Search for messages'
+          id='messages-search'
+          prependIcon='search'
+        />
+      </div>
+    )
+  }
+
+}
+
+const messages = defineMessages({
+  placeholder: { id: 'compose_form.placeholder', defaultMessage: "What's on your mind?" },
+})
+
+MessagesSearch.propTypes = {
+  intl: PropTypes.object.isRequired,
+}
+
+export default injectIntl(MessagesSearch)

app/javascript/gabsocial/features/messages/index.js

@@ -0,0 +1 @@
+export { default } from './messages'

app/javascript/gabsocial/features/messages/messages.js

@@ -0,0 +1,103 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { makeGetAccount } from '../../selectors'
+import Text from '../../components/text'
+import Button from '../../components/button'
+import Avatar from '../../components/avatar'
+import DisplayName from '../../components/display_name'
+import Input from '../../components/input'
+import EmojiPickerButton from '../compose/components/emoji_picker_button'
+import UploadButton from '../compose/components/media_upload_button'
+import MessageItem from './components/message_item'
+
+// import MessagesContainer from './containers/messages_container'
+
+class Messages extends React.PureComponent {
+
+  render () {
+    const { account } = this.props
+    
+    const selectedMessage = true
+
+    return (
+      <div className={[_s.d, _s.bgPrimary, _s.h100PC, _s.w100PC].join(' ')}>
+        {
+          !selectedMessage &&
+          <div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+            <Text weight='bold' size='extraLarge'>
+              You don’t have a message selected
+            </Text>
+            <Text size='medium' color='secondary' className={_s.py10}>
+              Choose one from your existing messages, or start a new one.
+            </Text>
+            <Button className={_s.mt10}>
+              <Text color='inherit' weight='bold' className={_s.px15}>
+                New Message
+              </Text>
+            </Button>
+          </div>
+        }
+        {
+          selectedMessage &&
+          <div className={[_s.d, _s.h100PC, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.posAbs, _s.top0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.h60PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
+              <Avatar account={account} size={34} />
+              <div className={[_s.d, _s.pl10, _s.maxW100PC86PX, _s.overflowHidden].join(' ')}>
+                <DisplayName account={account} isMultiline />
+              </div>
+              <Button
+                isNarrow
+                onClick={undefined}
+                color='brand'
+                backgroundColor='none'
+                className={_s.mlAuto}
+                icon='more'
+                iconSize='18px'
+              />
+            </div>
+
+            <div className={[_s.d, _s.posAbs, _s.bottom60PX, _s.left0, _s.right0, _s.px15, _s.py15, _s.top60PX, _s.w100PC, _s.overflowYScroll].join(' ')}>
+              <MessageItem />
+              <MessageItem />
+              <MessageItem alt />
+              <MessageItem />
+              <MessageItem alt />
+              <MessageItem alt />
+              <MessageItem />
+              <MessageItem />
+              <MessageItem />
+              <MessageItem alt />
+              <MessageItem />
+            </div>
+            
+            <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.h60PX, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
+              <EmojiPickerButton />
+              <UploadButton />
+              <div className={[_s.d, _s.px15, _s.flexGrow1].join(' ')}>
+                <Input
+                  placeholder='Type a message...'
+                />
+              </div>
+              <Button>
+                Send
+              </Button>
+            </div>
+          </div>
+        }
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, props) => ({
+  account: makeGetAccount()(state, '1'),
+})
+
+Messages.propTypes = {
+  intl: PropTypes.object.isRequired,
+  selected: PropTypes.bool,
+}
+
+export default connect(mapStateToProps)(Messages)