Progress

2020-04-28 22:24:35 -04:00
parent c3d0d8bde2
commit 5efe40f301
34 changed files with 448 additions and 557 deletions
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -83,6 +83,7 @@ class Account extends ImmutablePureComponent {
    expanded: PropTypes.bool,
    showDismiss: PropTypes.bool,
    dismissAction: PropTypes.func,
+    withBio: PropTypes.bool,
  }

  updateOnProps = [
@@ -91,6 +92,7 @@ class Account extends ImmutablePureComponent {
    'compact',
    'expanded',
    'showDismiss',
+    'withBio',
  ]

  handleAction = () => {
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -246,24 +246,21 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
      return (
        <Fragment>
          <div className={[_s.default, _s.flexGrow1, _s.maxWidth100PC].join(' ')}>
-            <div className={[_s.default].join(' ')}>
+            <Composer
+              inputRef={this.setTextbox}
+              disabled={disabled}
+              placeholder={placeholder}
+              autoFocus={autoFocus}
+              value={value}
+              onChange={this.onChange}
+              onKeyDown={this.onKeyDown}
+              onKeyUp={onKeyUp}
+              onFocus={this.onFocus}
+              onBlur={this.onBlur}
+              onPaste={this.onPaste}
+              small={small}
+            />

-              <Composer
-                inputRef={this.setTextbox}
-                disabled={disabled}
-                placeholder={placeholder}
-                autoFocus={autoFocus}
-                value={value}
-                onChange={this.onChange}
-                onKeyDown={this.onKeyDown}
-                onKeyUp={onKeyUp}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onPaste={this.onPaste}
-                small={small}
-              />
-
-            </div>
            {children}
          </div>
          { /* : todo :  put in popover */ }
--- a/app/javascript/gabsocial/components/column_header.js
+++ b/app/javascript/gabsocial/components/column_header.js
@@ -55,8 +55,11 @@ export default class ColumnHeader extends PureComponent {
            {title}
          </Heading>
        </div>
-
-        <TabBar tabs={tabs} />
+        
+        {
+          !!tabs &&
+          <TabBar tabs={tabs} />
+        }

        {
          !!actions &&
@@ -65,10 +68,10 @@ export default class ColumnHeader extends PureComponent {
              actions.map((action, i) => (
                <Button
                  backgroundColor='none'
-                  color='secondary'
+                  color='primary'
                  onClick={() => action.onClick()}
                  key={`column-header-action-btn-${i}`}
-                  className={[_s.ml5, _s.fillColorBrand_onHover, _s.backgroundColorBrandLightOpaque_onHover, _s.px10].join(' ')}
+                  className={[_s.ml5, _s.px10].join(' ')}
                  icon={action.icon}
                  iconClassName={_s.inheritFill}
                  iconSize='15px'
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -60,7 +60,7 @@ class Comment extends ImmutablePureComponent {
              <Avatar account={status.get('account')} size={32} />
            </NavLink>

-            <div className={_s.default}>
+            <div className={[_s.default, _s.flexNormal].join(' ')}>
              <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundColorSubtle].join(' ')}>
                <CommentHeader status={status} />
                <StatusContent
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -8,7 +8,7 @@ import {
 } from 'draft-js'
 import { draftToMarkdown } from 'markdown-draft-js'
 // import draftToMarkdown from 'draftjs-to-markdown'
-import { urlRegex } from '../features/compose/util/url_regex'
+import { urlRegex } from '../features/ui/util/url_regex'
 import classNames from 'classnames/bind'
 import RichTextEditorBar from './rich_text_editor_bar'

--- a/app/javascript/gabsocial/components/group_header.js
+++ b/app/javascript/gabsocial/components/group_header.js
@@ -1,36 +1,45 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
-import classNames from 'classnames/bind'
+import { defineMessages, injectIntl } from 'react-intl'
 import { openPopover, closePopover } from '../actions/popover'
-import { initReport } from '../actions/reports'
 import { openModal } from '../actions/modal'
-import { unfollowModal, me } from '../initial_state'
-import Avatar from './avatar'
+import { joinGroup, leaveGroup } from '../actions/groups'
+import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants'
 import Button from './button'
 import Block from './block'
-import Icon from './icon'
 import Image from './image'
 import TabBar from './tab_bar'
 import Text from './text'

-const cx = classNames.bind(_s)
-
 const messages = defineMessages({
-  follow: { id: 'follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'unfollow', defaultMessage: 'Unfollow' },
-  requested: { id: 'requested', defaultMessage: 'Requested' },
-  unblock: { id: 'unblock', defaultMessage: 'Unblock' },
-  followers: { id: 'account.followers', defaultMessage: 'Followers' },
-  follows: { id: 'account.follows', defaultMessage: 'Follows' },
-  profile: { id: 'account.profile', defaultMessage: 'Profile' },
+  join: { id: 'groups.join', defaultMessage: 'Join group' },
+  leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
+  share: { id: 'status.share', defaultMessage: 'Share' },
+  removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
+  group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
+  group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
 })

 const mapDispatchToProps = (dispatch, { intl }) => ({

+  toggleMembership(group, relationships) {
+    if (relationships.get('member')) {
+      dispatch(leaveGroup(group.get('id')));
+    } else {
+      dispatch(joinGroup(group.get('id')));
+    }
+  },
+
+  onShare() {
+
+  },
+
+  onOpenGroupOptions() {
+
+  },
+
  openProfileOptionsPopover(props) {
-    console.log('props:', props)
-    dispatch(openPopover('PROFILE_OPTIONS', props))
+    dispatch(openPopover('GROUP_OPTIONS', props))
  },

 });
@@ -41,65 +50,95 @@ export default
 class GroupHeader extends ImmutablePureComponent {

  static propTypes = {
-    intl: PropTypes.object.isRequired,
    group: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+    onToggleMembership: PropTypes.func.isRequired,
+    onShare: PropTypes.func.isRequired,
+    onOpenGroupOptions: PropTypes.func.isRequired,
    relationships: ImmutablePropTypes.map,
  }

-  
+  handleOnToggleMembership = () => {
+    const { group, relationships } = this.props
+    this.props.onToggleMembership(group, relationships);
+  }
+
  render() {
-    const { intl, relationships, group } = this.props
+    const {
+      group,
+      intl,
+      onShare,
+      onOpenGroupOptions,
+      relationships,
+    } = this.props

    const tabs = !group ? null : [
      {
        to: `/groups/${group.get('id')}`,
        title: 'Latest',
      },
-      {
-        to: `/groups/${group.get('id')}/pinned`,
-        title: 'Pinned',
-      },
-      {
-        to: `/groups/${group.get('id')}/popular`,
-        title: 'Popular',
-      },
    ]

-    const coverSrc = !!group ? group.get('cover_image_url') : undefined
+    const coverSrc = !!group ? group.get('cover_image_url') : ''
+    const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
    const title = !!group ? group.get('title') : undefined

+    let actionButtonTitle
+    let actionButtonOptions = {}
+    if (relationships) {
+      const isMember = relationships.get('member')
+      actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave)
+      if (isMember) {
+        actionButtonOptions = {
+          backgroundColor: 'tertiary',
+          color: 'primary',
+        }
+      }
+    }
+
+    // : todo :
+    // {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
+
+    // const adminMenu = [
+    // 	{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
+    // 	{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
+    // ]
+
    return (
      <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
        <Block>
          <div className={[_s.default, _s.width100PC].join(' ')}>
            
            {
-              !!coverSrc &&
+              coverSrc && !coverSrcMissing &&
              <Image className={_s.height350PX} src={coverSrc} alt={title} />
            }
-            
+
            <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
              <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
                <TabBar tabs={tabs} />
                <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
-                  <Button
-                    color='primary'
-                    backgroundColor='tertiary'
-                    radiusSmall
-                    className={_s.mr5}
-                  >
-                    <Text color='inherit' size='small'>
-                      Leave/Join
+                  {
+                    !!actionButtonTitle &&
+                    <Button
+                      radiusSmall
+                      className={_s.mr5}
+                      {...actionButtonOptions}
+                    >
+                      <Text color='inherit' size='small'>
+                        {actionButtonTitle}
                      </Text>
-                  </Button>
+                    </Button>
+                  }
                  <Button
                    color='primary'
                    backgroundColor='tertiary'
                    radiusSmall
                    className={_s.mr5}
+                    onClick={onShare}
                  >
                    <Text color='inherit' size='small'>
-                      Share
+                      {intl.formatMessage(messages.share)}
                    </Text>
                  </Button>
                  <Button
@@ -108,6 +147,7 @@ class GroupHeader extends ImmutablePureComponent {
                    backgroundColor='tertiary'
                    className={_s.mr5}
                    icon='ellipsis'
+                    onClick={onOpenGroupOptions}
                  />
                </div>
              </div>
--- a/app/javascript/gabsocial/components/hashtag_item.js
+++ b/app/javascript/gabsocial/components/hashtag_item.js
@@ -9,12 +9,13 @@ export default class HashtagItem extends ImmutablePureComponent {

  static propTypes = {
    hashtag: ImmutablePropTypes.map.isRequired,
+    isCompact: PropTypes.bool,
  }

  updateOnProps = ['hashtag']

  render() {
-    const { hashtag } = this.props
+    const { hashtag, isCompact } = this.props

    const count = hashtag.get('history').map((block) => {
      return parseInt(block.get('uses'))
@@ -31,22 +32,28 @@ export default class HashtagItem extends ImmutablePureComponent {
              {hashtag.get('name')}
            </Text>
          </div>
-          <Button
-            isText
-            backgroundColor='none'
-            color='none'
-            title='Remove'
-            icon='close'
-            iconSize='8px'
-            iconClassName={_s.fillColorSecondary}
-            className={_s.mlAuto}
-          />
+          {
+            !isCompact &&
+            <Button
+              isText
+              backgroundColor='none'
+              color='none'
+              title='Remove'
+              icon='close'
+              iconSize='8px'
+              iconClassName={_s.fillColorSecondary}
+              className={_s.mlAuto}
+            />
+          }
        </div>
-        <Text color='secondary' size='small' className={_s.py2}>
-          <FormattedMessage id='number_of_gabs' defaultMessage='{count} Gabs' values={{
-            count,
-          }} />
-        </Text>
+        {
+          !isCompact &&
+          <Text color='secondary' size='small' className={_s.py2}>
+            <FormattedMessage id='number_of_gabs' defaultMessage='{count} Gabs' values={{
+              count,
+            }} />
+          </Text>
+        }
      </NavLink>
    )
  }
--- a/app/javascript/gabsocial/components/input.js
+++ b/app/javascript/gabsocial/components/input.js
@@ -22,7 +22,7 @@ export default class Input extends PureComponent {
    small: PropTypes.bool,
    readOnly: PropTypes.string,
    inputRef: PropTypes.func,
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
    hideLabel: PropTypes.bool,
  }

@@ -71,13 +71,6 @@ export default class Input extends PureComponent {
      pr15: !hasClear,
    })

-    const titleClasses = cx({
-      default: 1,
-      mb10: 1,
-      pl15: 1,
-      displayNone: hideLabel,
-    })
-
    const btnClasses = cx({
      displayNone: !value || value.length === 0,
      px10: 1,
@@ -87,8 +80,8 @@ export default class Input extends PureComponent {
    return (
      <Fragment>
        {
-          !!title &&
-          <div className={titleClasses}>
+          !!title && !hideLabel &&
+          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
            <Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
              {title}
            </Text>
@@ -100,6 +93,11 @@ export default class Input extends PureComponent {
            <Icon id={prependIcon} size='16px' className={[_s.fillColorPrimary, _s.ml15, _s.mr5].join(' ')} />
          }

+          {
+            !!title && hideLabel &&
+            <label className={_s.visiblyHidden} htmlFor={id}>{title}</label>
+          }
+          
          <input
            id={id}
            className={inputClasses}
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -0,0 +1,73 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { NavLink } from 'react-router-dom'
+import { BREAKPOINT_EXTRA_SMALL } from '../constants'
+import { me } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import Responsive from '../features/ui/util/responsive_component'
+import ColumnHeader from './column_header'
+import Search from './search'
+import Icon from './icon'
+
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+})
+
+export default
+@connect(mapStateToProps)
+class NavigationBar extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    actions: PropTypes.array,
+    tabs: PropTypes.array,
+    title: PropTypes.string,
+    showBackBtn: PropTypes.bool,
+  }
+
+  render() {
+    const {
+      title,
+      showBackBtn,
+      actions,
+      tabs,
+      account,
+    } = this.props
+
+    const isPro = account.get('is_pro')
+
+    return (
+      <div className={[_s.default, _s.height53PX, _s.flexRow, _s.backgroundColorPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+        <div className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+          <div className={[_s.default, _s.width240PX].join(' ')}>
+            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX].join(' ')}>
+              <h1 className={[_s.default].join(' ')}>
+                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.flexRow, _s.noSelect, _s.noUnderline, _s.height50PX, _s.cursorPointer, _s.px10].join(' ')}>
+                  <Icon id='gab-logo' />
+                </NavLink>
+              </h1>
+            </div>
+          </div>
+        </div>
+        <div className={[_s.default, _s.flexShrink1, _s.flexGrow1].join(' ')}>
+          <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+            <div className={[_s.default, _s.width645PX].join(' ')}>
+              <ColumnHeader
+                title={title}
+                showBackBtn={showBackBtn}
+                actions={actions}
+                tabs={tabs}
+              />
+            </div>
+            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
+              <div className={[_s.default, _s.width340PX].join(' ')}>
+                <Search />
+              </div>
+            </Responsive>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/panel/groups_panel.js
+++ b/app/javascript/gabsocial/components/panel/groups_panel.js
@@ -37,6 +37,12 @@ class GroupSidebarPanel extends ImmutablePureComponent {
    fetched: false,
  }

+  componentDidMount() {
+    if (!this.props.isLazy) {
+      this.props.onFetchGroups('member')
+    }
+  }
+
  static getDerivedStateFromProps(nextProps, prevState) {
    if (!nextProps.isHidden && nextProps.isIntersecting && !prevState.fetched) {
      return {
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -105,13 +105,16 @@ class Search extends PureComponent {
          hasClear
          value={value}
          inputRef={this.setTextbox}
+          id='search'
          prependIcon='search'
-          placeholder='Search on Gab...'
+          placeholder='Search Gab'
          onChange={this.handleChange}
          onKeyUp={this.handleKeyUp}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          onClear={onClear}
+          hideLabel
+          title='Search'
        />

        {
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -113,23 +113,21 @@ export default class SidebarSectionItem extends PureComponent {
        className={[_s.default, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.width100PC, _s.backgroundTransparent].join(' ')}
      >
        <div className={containerClasses}>
-          <div className={[_s.default]}>
-            {
-              icon && 
-              <Icon id={icon} className={iconClasses} size={iconSize} />
-            }
-            
-            {
-              image &&
-              <Image
-                alt={title}
-                className={_s.circle}
-                width={iconSize}
-                height={iconSize}
-                src={image}
-              />
-            }
-          </div>
+          {
+            icon && 
+            <Icon id={icon} className={iconClasses} size={iconSize} />
+          }
+          
+          {
+            image &&
+            <Image
+              alt={title}
+              className={_s.circle}
+              width={iconSize}
+              height={iconSize}
+              src={image}
+            />
+          }
          
          <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
            <span className={textClasses}>{title}</span>
--- a/app/javascript/gabsocial/components/trends_item.js
+++ b/app/javascript/gabsocial/components/trends_item.js
@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import classNames from 'classnames/bind'
-import { urlRegex } from '../features/compose/util/url_regex'
+import { urlRegex } from '../features/ui/util/url_regex'
 import Button from './button'
 import DotTextSeperator from './dot_text_seperator'
 import Image from './image'
--- a/app/javascript/gabsocial/components/zoomable_image.js
+++ b/app/javascript/gabsocial/components/zoomable_image.js
@@ -24,7 +24,7 @@ const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
 //     @include max-size($media-modal-media-max-width, $media-modal-media-max-height);
 //   }
 // }
-
+// : todo :

 export default class ZoomableImage extends PureComponent {