Merge pull request #5263 from weseek/imrpv/86904-87031-fix-design

imprv: redesign tag sidebar and modify related components

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -79,7 +79,7 @@ const SidebarNav: FC<Props> = (props: Props) => {
       <div className="grw-sidebar-nav-primary-container">
         {!isSharedUser && <PrimaryItem contents={SidebarContentsType.CUSTOM} label="Custom Sidebar" iconName="code" onItemSelected={onItemSelected} />}
         {!isSharedUser && <PrimaryItem contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onItemSelected={onItemSelected} />}
-        {!isSharedUser && <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="tag" onItemSelected={onItemSelected} /> }
+        {!isSharedUser && <PrimaryItem contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onItemSelected={onItemSelected} /> }
         {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
       </div>
       <div className="grw-sidebar-nav-secondary-container">

packages/app/src/components/Sidebar/Tag.tsx

@@ -46,11 +46,11 @@ const Tag: FC = () => {
       <h2 className="my-3">{t('popular_tags')}</h2>
 
       <div className="px-3 text-center">
-        <TagCloudBox tags={tagData} minSize={20} />
+        <TagCloudBox tags={tagData} />
       </div>
-      <div className="d-flex justify-content-center">
+      <div className="d-flex justify-content-center my-5">
         <button
-          className="btn btn-primary mt-3 mb-4 px-5"
+          className="btn btn-primary rounded px-5"
           type="button"
           onClick={() => { window.location.href = '/tags' }}
         >

packages/app/src/components/TagCloudBox.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { TagCloud } from 'react-tagcloud';
 import { ITagCountHasId } from '~/interfaces/tag';
 
@@ -6,27 +6,46 @@ type Props = {
   tags:ITagCountHasId[],
   minSize?: number,
   maxSize?: number,
-}
+  maxTagTextLength?: number,
+  isDisableRandomColor?: boolean,
+};
+
+const defaultProps = {
+  isDisableRandomColor: true,
+};
 
-const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 36;
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+const MAX_TAG_TEXT_LENGTH = 8;
+
+const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
+  const {
+    tags, minSize, maxSize, isDisableRandomColor,
+  } = props;
+  const maxTagTextLength: number = props.maxTagTextLength ?? MAX_TAG_TEXT_LENGTH;
 
-const TagCloudBox: FC<Props> = (props:Props) => {
   return (
     <>
       <TagCloud
-        minSize={props.minSize || MIN_FONT_SIZE}
-        maxSize={props.maxSize || MAX_FONT_SIZE}
-        tags={props.tags.map((tag) => {
-          return { value: tag.name, count: tag.count };
+        minSize={minSize ?? MIN_FONT_SIZE}
+        maxSize={maxSize ?? MAX_FONT_SIZE}
+        tags={tags.map((tag:ITagCountHasId) => {
+          return {
+            // text truncation
+            value: (tag.name).length > maxTagTextLength ? `${(tag.name).slice(0, maxTagTextLength)}...` : tag.name,
+            count: tag.count,
+          };
         })}
+        disableRandomColor={isDisableRandomColor}
         style={{ cursor: 'pointer' }}
-        className="simple-cloud"
+        className="simple-cloud text-secondary"
         onClick={(target) => { window.location.href = `/_search?q=tag:${encodeURIComponent(target.value)}` }}
       />
     </>
   );
 
-};
+});
+
+TagCloudBox.defaultProps = defaultProps;
 
 export default TagCloudBox;

packages/app/src/components/TagList.tsx

@@ -26,12 +26,17 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
   const { t } = useTranslation('');
 
   const generateTagList = useCallback((tagData) => {
-    return tagData.map((data) => {
-      // todo: adjust design
+    return tagData.map((tag:ITagCountHasId, index:number) => {
+      const tagListClasses: string = index === 0 ? 'list-group-item d-flex' : 'list-group-item d-flex border-top-0';
+
       return (
-        <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
-          <i className="icon-tag mr-2"></i>{data.name}
-          <span className="ml-4 list-tag-count badge badge-secondary text-muted">{data.count}</span>
+        <a
+          key={tag._id}
+          href={`/_search?q=tag:${encodeURIComponent(tag.name)}`}
+          className={tagListClasses}
+        >
+          <div className="text-truncate">{tag.name}</div>
+          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge badge-secondary text-white">{tag.count}</div>
         </a>
       );
     });