Merge branch 'video-thread' into dev

Author: mydearxym

containers/VideoViewer/BodyHeader.js

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { ICON_CMD } from '../../config'
+
+import { Labeler } from '..'
+import { Popover } from '../../components'
+
+// import ArticleOptions from '../../containers/ArticleViwer/ArticleOptions'
+import {
+  Wrapper,
+  MoreWrapper,
+  MoreIcon,
+  LablerWrapper,
+  RefinedLabel,
+  RefinedIcon,
+  RefinedText,
+} from './styles/body_header'
+
+// import { Wrapper } from './styles/body_header'
+
+/* content={<ArticleOptions thread={thread} />} */
+
+const BodyHeader = () => (
+  <Wrapper>
+    <MoreWrapper>
+      <Popover content={<div>...</div>} placement="bottomLeft" trigger="click">
+        <div>
+          <MoreIcon src={`${ICON_CMD}/more.svg`} />
+        </div>
+      </Popover>
+    </MoreWrapper>
+    <LablerWrapper>
+      <Labeler />
+    </LablerWrapper>
+    <RefinedLabel>
+      <RefinedIcon src={`${ICON_CMD}/diamond_frame.svg`} />
+      <RefinedText>精 华</RefinedText>
+    </RefinedLabel>
+  </Wrapper>
+)
+
+export default BodyHeader

containers/VideoViewer/index.js

@@ -15,6 +15,7 @@ import InfoBoard from './InfoBoard'
 import { makeDebugger, storePlug } from '../../utils'
 
 import Header from './Header'
+import BodyHeader from './BodyHeader'
 
 import * as logic from './logic'
 /* eslint-disable no-unused-vars */
@@ -35,6 +36,7 @@ class VideoViewerContainer extends React.Component {
     return (
       <Wrapper>
         <Header data={viewingData} />
+        <BodyHeader />
         <PlayWindow poster={viewingData.poster} />
         <InfoBoard data={viewingData} />
       </Wrapper>

containers/VideoViewer/styles/body_header.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+
+import Img from '../../../components/Img'
+import { theme } from '../../../utils'
+
+export const Wrapper = styled.div`
+  background-color: ${theme('preview.articleBg')};
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px 35px;
+  padding-bottom: 5px;
+`
+export const MoreWrapper = styled.div`
+  display: flex;
+  cursor: pointer;
+`
+export const MoreIcon = styled(Img)`
+  fill: #6a868a;
+  width: 15px;
+  height: 15px;
+`
+export const LablerWrapper = styled.div``
+
+export const RefinedLabel = styled.div`
+  display: flex;
+  align-items: center;
+  color: tomato;
+  border: 1px dashed tomato;
+  padding: 0 5px;
+  border-radius: 5px;
+  margin-top: -2px;
+`
+export const RefinedIcon = styled(Img)`
+  fill: tomato;
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+  margin-top: -2px;
+  display: block;
+`
+export const RefinedText = styled.div``

containers/VideoViewer/styles/header.js

@@ -9,7 +9,6 @@ export const Wrapper = styled.div`
   padding-right: 30px;
   padding-top: 10px;
   padding-bottom: 6px;
-  background: ${theme('preview.articleBg')};
 `
 export const Divider = styled.span`
   margin: 0 8px;
@@ -19,33 +18,28 @@ export const Divider = styled.span`
   border-right: 1px solid;
   border-right-color: ${theme('preview.divider')};
 `
-
 export const UserInfo = styled.div`
   flex-grow: 1;
   display: flex;
+  align-items: center;
 `
-
 export const UserName = styled.div`
-  margin-bottom: 2px;
-  font-size: 1.2em;
+  font-size: 1rem;
   color: ${theme('banner.title')};
 `
 export const PublishAt = styled.div`
-  font-size: 0.9em;
+  font-size: 0.8rem;
   color: ${theme('banner.desc')};
 `
-
 export const Avatar = styled.img`
   border-radius: 100%;
-  width: 40px;
-  height: 40px;
+  width: 35px;
+  height: 35px;
   margin-right: 10px;
 `
-
 export const ReactionWrapper = styled.div`
   display: flex;
 `
-
 export const ReactionAction = styled.div`
   display: flex;
   padding: 0 3px;
@@ -56,7 +50,6 @@ export const ReactionAction = styled.div`
     border-radius: 6px;
   }
 `
-
 export const ReactionName = styled.div`
   align-self: center;
   color: ${theme('article.reactionTitle')};
@@ -73,14 +66,12 @@ export const ReactionUserNum = styled.div`
     text-decoration: underline;
   }
 `
-
 export const ReactionIcon = styled(Img)`
   margin-top: 4px;
   fill: ${theme('article.reactionTitle')};
   width: ${({ width }) => width || '1.5em'};
   height: ${({ height }) => height || '1.5em'};
 `
-
 export const Reaction = styled.div`
   align-self: center;
   font-size: 1.2em;