Merge pull request #2029 from ecency/nt/post-header-improvements

Nt/post header improvements

src/components/basicUIElements/view/tag/tagContainer.js

@@ -30,6 +30,7 @@ const TagContainer = ({
   disabled,
   communityTitle,
   prefix,
+  suffix,
 }) => {
   const [label, setLabel] = useState(value);
   const [isCommunity, setIsCommunity] = useState(false);
@@ -94,6 +95,7 @@ const TagContainer = ({
       textStyle={textStyle}
       disabled={disabled}
       prefix={prefix}
+      suffix={suffix}
     />
   );
 };

src/components/basicUIElements/view/tag/tagView.js

@@ -13,6 +13,7 @@ const Tag = ({
   textStyle,
   disabled,
   prefix,
+  suffix,
 }) => (
   <TouchableOpacity
     hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
@@ -36,7 +37,7 @@ const Tag = ({
           textStyle,
         ]}
       >
-        {`${prefix ? prefix : ''} ${label} `}
+        {`${prefix ? prefix : ''} ${label}${suffix ? suffix : ''}`}
       </Text>
     </View>
   </TouchableOpacity>

src/components/comment/view/commentView.js

@@ -69,10 +69,11 @@ const CommentView = ({
           date={getTimeFromNow(comment.created)}
           name={comment.author}
           reputation={comment.author_reputation}
-          size={avatarSize || 36}
+          size={avatarSize || 40}
           currentAccountUsername={currentAccountUsername}
           isShowOwnerIndicator={mainAuthor === comment.author}
           isHideImage={isHideImage}
+          inlineTime={true}
         />
         <View style={[{ marginLeft: 34 }, styles.bodyWrapper]}>
           <CommentBody

src/components/postElements/headerDescription/view/postHeaderDescription.js

@@ -86,8 +86,8 @@ class PostHeaderDescription extends PureComponent {
       isShowOwnerIndicator,
       isPromoted,
       intl,
+      inlineTime,
     } = this.props;
-    const _reputationText = `(${reputation})`;
 
     return (
       <View>
@@ -97,13 +97,18 @@ class PostHeaderDescription extends PureComponent {
             onPress={() => this._handleOnUserPress(name)}
           >
             {!isHideImage && (
-              <UserAvatar
-                style={[styles.avatar, { width: size, height: size, borderRadius: size / 2 }]}
-                disableSize
-                username={name}
-                defaultSource={DEFAULT_IMAGE}
-                noAction
-              />
+              <>
+                <UserAvatar
+                  style={[styles.avatar, { width: size, height: size, borderRadius: size / 2 }]}
+                  disableSize
+                  username={name}
+                  defaultSource={DEFAULT_IMAGE}
+                  noAction
+                />
+                <View style={styles.reputationWrapper}>
+                  <Text style={styles.reputation}>{reputation}</Text>
+                </View>
+              </>
             )}
           </TouchableOpacity>
           <View style={styles.leftContainer}>
@@ -113,41 +118,46 @@ class PostHeaderDescription extends PureComponent {
                 onPress={() => this._handleOnUserPress(name)}
               >
                 <Text style={styles.name}>{name}</Text>
-                <Text style={styles.reputation}>{_reputationText}</Text>
               </TouchableOpacity>
+
+              {inlineTime && (
+                <Text style={styles.date}>
+                  {isPromoted ? intl.formatMessage({ id: 'post.sponsored' }) : date}
+                </Text>
+              )}
+
               {isShowOwnerIndicator && (
                 <Icon style={styles.ownerIndicator} name="stars" iconType="MaterialIcons" />
               )}
             </View>
+
             <View style={styles.secondaryDetails}>
               {content && (
                 <TouchableOpacity onPress={() => this._handleOnTagPress(content)}>
-                  <View style={styles.tagDetails}>
-                    <Tag
-                      style={styles.topic}
-                      textStyle={styles.topicText}
-                      prefix={intl.formatMessage({ id: 'post.in' })}
-                      value={content.category}
-                      communityTitle={content.community_title}
-                    />
-                    <Text style={styles.date}>
-                      {isPromoted ? intl.formatMessage({ id: 'post.sponsored' }) : date}
-                    </Text>
-                  </View>
+                  <Tag
+                    style={styles.topic}
+                    textStyle={styles.topicText}
+                    prefix={intl.formatMessage({ id: 'post.in' })}
+                    suffix={' '}
+                    value={content.category}
+                    communityTitle={content.community_title}
+                  />
                 </TouchableOpacity>
               )}
+
               {!!tag && (
                 <TouchableOpacity
                   onPress={() => (tagOnPress && tagOnPress()) || this._handleOnTagPress(tag)}
                 >
-                  <View style={styles.tagDetails}>
-                    <Tag isPostCardTag={!isPromoted} isPin value={tag} />
-                    <Text style={[styles.date, { marginVertical: 3 }]}>
-                      {isPromoted ? intl.formatMessage({ id: 'post.sponsored' }) : date}
-                    </Text>
-                  </View>
+                  <Tag isPostCardTag={!isPromoted} isPin value={tag} suffix={' '} />
                 </TouchableOpacity>
               )}
+
+              {!inlineTime && (
+                <Text style={styles.date}>
+                  {isPromoted ? intl.formatMessage({ id: 'post.sponsored' }) : date}
+                </Text>
+              )}
             </View>
           </View>
         </View>

src/components/postElements/headerDescription/view/postHeaderDescriptionStyles.js

@@ -10,13 +10,16 @@ export default EStyleSheet.create({
   },
   primaryDetails: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   secondaryDetails: {
     flexDirection: 'row',
+    alignItems: 'center',
     marginHorizontal: 3,
   },
   tagDetails: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   rightContainer: {
     flexDirection: 'column',
@@ -37,21 +40,31 @@ export default EStyleSheet.create({
     fontWeight: 'bold',
     alignSelf: 'center',
   },
+  reputationWrapper: {
+    position: 'absolute',
+    bottom: -2,
+    left: -2,
+    backgroundColor: '$white',
+    borderRadius: 20,
+    borderWidth: EStyleSheet.hairlineWidth,
+    borderColor: '$primaryDarkGray',
+  },
   reputation: {
-    fontSize: 12,
+    fontSize: 10,
     color: '$primaryDarkGray',
-    marginRight: 8,
     alignSelf: 'center',
+    fontWeight: 'bold',
+    padding: 4,
   },
   date: {
     fontSize: 14,
     fontWeight: '300',
-    marginVertical: 5,
     color: '$primaryDarkGray',
   },
   topic: {
     marginVertical: 3,
     marginRight: 0,
+    paddingRight: 0,
     marginLeft: 0,
     paddingLeft: 0,
     borderRadius: 0,

src/components/postView/view/postDisplayView.js

@@ -221,7 +221,8 @@ const PostDisplayView = ({
                 name={author || post.author}
                 currentAccountUsername={name}
                 reputation={post.author_reputation}
-                size={36}
+                size={40}
+                inlineTime={true}
               />
               <PostBody body={post.body} onLoadEnd={_handleOnPostBodyLoad} />
               {!postBodyLoading && (

src/screens/application/container/applicationContainer.js

@@ -106,7 +106,7 @@ import darkTheme from '../../../themes/darkTheme';
 import lightTheme from '../../../themes/lightTheme';
 import persistAccountGenerator from '../../../utils/persistAccountGenerator';
 import parseVersionNumber from '../../../utils/parseVersionNumber';
-import { getTimeFromNow } from '../../../utils/time';
+import { getTimeFromNow, setMomentLocale } from '../../../utils/time';
 
 // Workaround
 let previousAppState = 'background';
@@ -180,6 +180,8 @@ class ApplicationContainer extends Component {
       }
     });
 
+    setMomentLocale();
+
     ReceiveSharingIntent.getReceivedFiles(
       () => {
         navigate({

src/utils/time.js

@@ -52,6 +52,28 @@ export const getTimeFromNowNative = (d) => {
   }
   return { unit: 'day', value: future ? Math.round(diff / DAY) : -Math.round(diff / DAY) };
 };
+
+export const setMomentLocale = () => {
+  moment.locale('en', {
+    relativeTime: {
+      future: 'in %s',
+      past: '%s',
+      s: '1s',
+      ss: '%ss',
+      m: '1m',
+      mm: '%dm',
+      h: '1h',
+      hh: '%dh',
+      d: '1d',
+      dd: '%dd',
+      M: '1M',
+      MM: '%dM',
+      y: '1Y',
+      yy: '%dY',
+    },
+  });
+};
+
 export const getTimeFromNow = (value, isWithoutUtc) => {
   if (!value) {
     return null;