refactor(jobviewer): ui: add homepage link & popver .. etc

Author: mydearxym

components/ArticleHeader/CompanyInfo.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import TimeAgo from 'timeago-react'
 
+import { ICON_CMD } from '../../config'
+
 import { DotDivider } from '..'
 
 import {
@@ -9,6 +11,9 @@ import {
   Title,
   PublishAt,
   Username,
+  HomtPage,
+  HomeIcon,
+  HomepageLink,
 } from './styles/company_info'
 
 import { cutFrom } from '../../utils'
@@ -18,6 +23,16 @@ const CompanyInfo = ({ company, insertedAt, author }) => (
     <Logo src={company.logo} alt="user_avatar" />
     <div>
       <Title>{cutFrom(company.title, 14)}</Title>
+      <HomtPage>
+        <HomeIcon src={`${ICON_CMD}/home.svg`} />
+        <HomepageLink
+          href="https://github.com"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          https://github.com/mydearxym
+        </HomepageLink>
+      </HomtPage>
       <PublishAt>
         <Username>{author.nickname}</Username>
         <DotDivider />

components/ArticleHeader/styles/company_info.js

@@ -14,6 +14,24 @@ export const Title = styled.div`
   color: ${theme('thread.articleTitle')};
   margin-top: 2px;
 `
+export const HomtPage = styled.div`
+  display: flex;
+  align-items: center;
+`
+export const HomeIcon = styled(Img)`
+  fill: ${theme('thread.articleDigest')};
+  width: 15px;
+  height: 15px;
+  display: block;
+`
+export const HomepageLink = styled.a`
+  color: ${theme('thread.articleDigest')};
+  margin-left: 3px;
+  &:hover {
+    text-decoration: underline;
+    color: ${theme('thread.articleTitle')};
+  }
+`
 export const Username = styled.div`
   font-size: 0.9rem;
 `
@@ -25,7 +43,7 @@ export const PublishAt = styled.div`
 `
 export const Logo = styled(Img)`
   border-radius: 3px;
-  width: 44px;
-  height: 44px;
-  margin-right: 10px;
+  width: 64px;
+  height: 64px;
+  margin-right: 12px;
 `

containers/Labeler/Selected.js

@@ -3,6 +3,7 @@ import R from 'ramda'
 
 import { Maybe } from '../../components'
 import { Wrapper, Item, Hightlight } from './styles/selected'
+import { uid } from '../../utils'
 
 const renderItems = items => {
   if (items.length === 1) {
@@ -31,7 +32,9 @@ const renderReadonlyItems = items => {
 
   return (
     <Item>
-      <Hightlight>{items[0]}, ..</Hightlight>
+      {items.map(item => (
+        <Hightlight key={uid.gen()}>{item}</Hightlight>
+      ))}
     </Item>
   )
 }

containers/Labeler/index.js

@@ -12,7 +12,7 @@ import { inject, observer } from 'mobx-react'
 import { Popover, Maybe } from '../../components'
 import Options from './Options'
 import Selected from './Selected'
-import { Wrapper, LabelItem, LabelIcon, Title } from './styles'
+import { Wrapper, LabelItem, LabelIcon, Title, PopHint } from './styles'
 
 import optionMap from './option_map'
 import { makeDebugger, storePlug, uid } from '../../utils'
@@ -64,12 +64,18 @@ class LabelerContainer extends React.Component {
     return (
       <Wrapper>
         <Maybe test={readonly}>
-          <LabelItem>
-            <LabelIcon src={optionMap[label].iconSrc} />
-            <Title>
-              <Selected items={selected} readonly={readonly} />
-            </Title>
-          </LabelItem>
+          <Popover
+            content={<PopHint>{trans[label]}</PopHint>}
+            placement="bottom"
+            trigger="hover"
+          >
+            <LabelItem>
+              <LabelIcon src={optionMap[label].iconSrc} />
+              <Title>
+                <Selected items={selected} readonly={readonly} />
+              </Title>
+            </LabelItem>
+          </Popover>
         </Maybe>
         <Maybe test={!readonly}>
           {targetIndex >= 0 ? (

containers/Labeler/styles/index.js

@@ -34,3 +34,7 @@ export const Title = styled.div`
     color: ${theme('editor.footerHover')};
   }
 `
+export const PopHint = styled.div`
+  padding: 5px 8px;
+  color: ${theme('thread.articleDigest')};
+`