Merge branch 'dev' into evo-972/translations

Hylozoic · May 8, 2023 · 68e0867 · 68e0867
2 parents 6b090d8 + ae4d462
commit 68e0867
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## [5.4.2] - 2023-05-04
+
+### Added
+- Show badges next to moderators in group sidebar
+- Send button to all comment forms 
+
+### Changed
+- Tweaked styling of group cards so they are not too big and show first two lines of description
+
 ## [5.4.1] - 2023-04-13
 
 ### Fixed

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hylo-evo",
   "description": "Hylo Frontend",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "private": true,
   "engines": {
     "node": "16.13.2",

diff --git a/src/graphql/fragments/groupFieldsFragment.js b/src/graphql/fragments/groupFieldsFragment.js
@@ -90,6 +90,12 @@ const groupFieldsFragment = ({ withTopics, withJoinQuestions, withPrerequisites,
       id
       name
       avatarUrl
+      groupRoles {
+        name
+        emoji
+        active
+        groupId
+      }
     }
   }
   parentGroups {

diff --git a/src/graphql/fragments/groupQueryFragment.js b/src/graphql/fragments/groupQueryFragment.js
@@ -187,6 +187,12 @@ export default () => {
         avatarUrl
         lastActiveAt
         name
+        groupRoles {
+          name
+          emoji
+          active
+          groupId
+        }
       }
     }
     openOffersAndRequests: posts(types: ["offer", "request"], isFulfilled: false, first: 4) {

diff --git a/src/routes/GroupSidebar/AboutSection.js b/src/routes/GroupSidebar/AboutSection.js
@@ -30,20 +30,22 @@ class AboutSection extends Component {
       expanded = true
     }
 
-    return <div styleName='about-section'>
-      <div styleName='header'>
-        {this.props.t('About {{name}}', { name })}
+    return (
+      <div styleName='about-section'>
+        <div styleName='header'>
+          {this.props.t('About {{name}}', { name })}
+        </div>
+        <div styleName={cx('description', { expanded })}>
+          {!expanded && <div styleName='gradient' />}
+          <ClickCatcher>
+            <HyloHTML element='span' html={TextHelpers.markdown(description)} />
+          </ClickCatcher>
+        </div>
+        {showExpandButton && <span styleName='expand-button' onClick={onClick}>
+          {expanded ? this.props.t('Show Less') : this.props.t('Read More')}
+        </span>}
       </div>
-      <div styleName={cx('description', { expanded })}>
-        {!expanded && <div styleName='gradient' />}
-        <ClickCatcher>
-          <HyloHTML element='span' html={TextHelpers.markdown(description)} />
-        </ClickCatcher>
-      </div>
-      {showExpandButton && <span styleName='expand-button' onClick={onClick}>
-        {expanded ? this.props.t('Show Less') : this.props.t('Read More')}
-      </span>}
-    </div>
+    )
   }
 }
 

diff --git a/src/routes/GroupSidebar/GroupSidebar.js b/src/routes/GroupSidebar/GroupSidebar.js
@@ -5,6 +5,7 @@ import { object, string, array } from 'prop-types'
 import { isEmpty } from 'lodash/fp'
 import { personUrl, groupUrl } from 'util/navigation'
 import Avatar from 'components/Avatar'
+import BadgeEmoji from 'components/BadgeEmoji'
 import Loading from 'components/Loading'
 import RoundImageRow from 'components/RoundImageRow'
 import Button from 'components/Button'
@@ -27,28 +28,32 @@ class GroupSidebar extends Component {
 
     const { description, memberCount, moderatorDescriptorPlural, name, slug } = group
 
-    return <div styleName='group-sidebar'>
-      <SettingsLink canModerate={canModerate} group={group} />
-      {canModerate && <Link to={groupUrl(slug, 'settings/invite')} styleName='invite-link'>
-        <Button styleName='settings-link'><Icon name='Invite' styleName='invite-icon' /> {this.props.t('Invite People')}</Button>
-      </Link>}
-      <AboutSection name={name} description={description} />
-      <MemberSection
-        members={members}
-        memberCount={memberCount}
-        slug={slug}
-        canModerate={canModerate} />
-      <GroupLeaderSection leaders={leaders} slug={slug} descriptor={moderatorDescriptorPlural} />
-    </div>
+    return (
+      <div styleName='group-sidebar'>
+        <SettingsLink canModerate={canModerate} group={group} />
+        {canModerate && <Link to={groupUrl(slug, 'settings/invite')} styleName='invite-link'>
+          <Button styleName='settings-link'><Icon name='Invite' styleName='invite-icon' /> {this.props.t('Invite People')}</Button>
+        </Link>}
+        <AboutSection name={name} description={description} />
+        <MemberSection
+          members={members}
+          memberCount={memberCount}
+          slug={slug}
+          canModerate={canModerate} />
+        <GroupLeaderSection leaders={leaders} slug={slug} descriptor={moderatorDescriptorPlural} groupId={group.id} />
+      </div>
+    )
   }
 }
 
 export function SettingsLink ({ canModerate, group }) {
   const { t } = useTranslation()
   if (!canModerate) return null
-  return <Link styleName='settings-link' to={groupUrl(group.slug, 'settings')}>
-    <Icon name='Settings' styleName='settings-icon' /> {t('Group Settings')}
-  </Link>
+  return (
+    <Link styleName='settings-link' to={groupUrl(group.slug, 'settings')}>
+      <Icon name='Settings' styleName='settings-icon' /> {t('Group Settings')}
+    </Link>
+  )
 }
 
 export function MemberSection ({ members, memberCount, slug, canModerate }) {
@@ -60,33 +65,46 @@ export function MemberSection ({ members, memberCount, slug, canModerate }) {
 
   const showTotal = memberCount - members.length > 0
 
-  return <div styleName='member-section'>
-    <Link to={groupUrl(slug, 'members')} styleName='members-link'>
-      <div styleName='header'>{t('Members')}</div>
-      <div styleName='images-and-count'>
-        <RoundImageRow imageUrls={members.map(m => m.avatarUrl)} styleName='image-row' />
-        {showTotal && <span styleName='members-total'>
-          {formatTotal(memberCount - members.length)}
-        </span>}
-      </div>
-    </Link>
-  </div>
+  return (
+    <div styleName='member-section'>
+      <Link to={groupUrl(slug, 'members')} styleName='members-link'>
+        <div styleName='header'>{t('Members')}</div>
+        <div styleName='images-and-count'>
+          <RoundImageRow imageUrls={members.map(m => m.avatarUrl)} styleName='image-row' />
+          {showTotal &&
+            <span styleName='members-total'>
+              {formatTotal(memberCount - members.length)}
+            </span>}
+        </div>
+      </Link>
+    </div>
+  )
 }
 
-export function GroupLeaderSection ({ descriptor, leaders, slug }) {
+export function GroupLeaderSection ({ descriptor, leaders, groupId, slug }) {
   const { t } = useTranslation()
-  return <div styleName='leader-section'>
-    <div styleName='header leader-header'>{t('Group {{locationDescriptor}}', { locationDescriptor: descriptor })}</div>
-    {leaders.map(l => <GroupLeader leader={l} slug={slug} key={l.id} />)}
-  </div>
+  return (
+    <div styleName='leader-section'>
+      <div styleName='header leader-header'>{t('Group {{locationDescriptor}}', { locationDescriptor: descriptor })}</div>
+      {leaders.map(l => <GroupLeader leader={l} slug={slug} key={l.id} groupId={groupId} />)}
+    </div>
+  )
 }
 
-export function GroupLeader ({ leader, slug }) {
+export function GroupLeader ({ groupId, leader, slug }) {
   const { name, avatarUrl } = leader
-  return <div styleName='leader'>
-    <Avatar url={personUrl(leader.id, slug)} avatarUrl={avatarUrl} styleName='leader-image' medium />
-    <Link to={personUrl(leader.id, slug)} styleName='leader-name'>{name}</Link>
-  </div>
+  const badges = leader.groupRoles?.filter(role => role.groupId === groupId) || []
+  return (
+    <div styleName='leader'>
+      <Avatar url={personUrl(leader.id, slug)} avatarUrl={avatarUrl} styleName='leader-image' medium />
+      <Link to={personUrl(leader.id, slug)} styleName='leader-name'>{name}</Link>
+      <div styleName='badges'>
+        {badges.map(badge => (
+          <BadgeEmoji key={badge.name} expanded {...badge} id={leader.id} />
+        ))}
+      </div>
+    </div>
+  )
 }
 
 export default withTranslation()(GroupSidebar)
diff --git a/src/routes/GroupSidebar/GroupSidebar.scss b/src/routes/GroupSidebar/GroupSidebar.scss
@@ -161,7 +161,7 @@ $about-height: 116px;
 }
 
 .leader-image {
-  margin-right: $space-4x;
+  margin-right: $space-2x;
 }
 
 .leader-name {
@@ -172,3 +172,9 @@ $about-height: 116px;
     text-decoration: none;
   }
 }
+
+.badges {
+  display: flex;
+  margin-left: 4px;
+  grid-gap: 2px;
+}
diff --git a/src/routes/GroupSidebar/__snapshots__/GroupSidebar.test.js.snap b/src/routes/GroupSidebar/__snapshots__/GroupSidebar.test.js.snap
@@ -38,6 +38,7 @@ exports[`GroupSidebar renders correctly 1`] = `
     slug="great-cause"
   />
   <GroupLeaderSection
+    groupId={1}
     leaders={
       Array [
         Object {

diff --git a/src/routes/Groups/Groups.scss b/src/routes/Groups/Groups.scss
@@ -1,4 +1,5 @@
 .container {
+
 }
 
 .add-group {
@@ -122,15 +123,17 @@
     width: 100%;
     text-decoration: none;
     color: white;
+    max-height: 36px;
+    overflow: hidden;
 
     span {
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       display: block;
       text-decoration: none;
       color: white;
       font-size: 14px;
+      line-height: 18px;
     }
   }
 

diff --git a/src/routes/PostDetail/Comments/CommentForm/CommentForm.js b/src/routes/PostDetail/Comments/CommentForm/CommentForm.js
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { withTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import { IoSend } from 'react-icons/io5'
 import AttachmentManager from 'components/AttachmentManager'
+import Button from 'components/Button'
 import HyloEditor from 'components/HyloEditor'
 import Icon from 'components/Icon'
 import Loading from 'components/Loading'
@@ -102,15 +104,28 @@ class CommentForm extends Component {
             >
               {this.prop.t('Sign up to reply')}
             </Link>
-            : <UploadAttachmentButton
-              type='comment'
-              id='new'
-              allowMultiple
-              onSuccess={addAttachment}
-              customRender={renderProps => (
-                <UploadButton {...renderProps} styleName='upload-button' />
-              )}
-            />
+            : (
+              <>
+                <div styleName='send-message-container'>
+                  <Button
+                    borderRadius='6px'
+                    onClick={() => this.handleOnEnter(this.editor.current.getHTML())}
+                    styleName='send-message-button'
+                  >
+                    <IoSend color='white' />
+                  </Button>
+                </div>
+                <UploadAttachmentButton
+                  type='comment'
+                  id='new'
+                  allowMultiple
+                  onSuccess={addAttachment}
+                  customRender={renderProps => (
+                    <UploadButton {...renderProps} styleName='upload-button' />
+                  )}
+                />
+              </>
+            )
           }
         </div>
       </div>

diff --git a/src/routes/PostDetail/Comments/CommentForm/CommentForm.scss b/src/routes/PostDetail/Comments/CommentForm/CommentForm.scss
@@ -14,6 +14,22 @@
   margin-right: 7px;
 }
 
+.send-message-container {
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.send-message-button {
+  padding: 0;
+  line-height: 26px;
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 6px;
+}
+
 .prompt {
   display: flex;
   border-radius: 4px;