feat(misc): banner & search & style improve

mydearxym · mydearxym · commit 8afe539a34af · 2018-12-20T14:00:55.000+08:00
diff --git a/components/TimeStampCell/styles/index.js b/components/TimeStampCell/styles/index.js
@@ -6,6 +6,7 @@ import styled from 'styled-components'
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
 `
 export const Content = styled.div`
   display: flex;
diff --git a/containers/CommunitiesBanner/CategoryBanner.js b/containers/CommunitiesBanner/CategoryBanner.js
@@ -1,15 +1,13 @@
 import React from 'react'
 
 import { ICON_CMD } from '../../config'
-import { Tag, Popover, BannerCountBrief } from '../../components'
+import { BannerCountBrief } from '../../components'
 
 import {
   BannerContentWrapper,
   Operation,
   OperationItem,
   OperationDivider,
-  OperationTitle,
-  FilterTags,
   OperationIcon,
   OperationIconChart,
 } from './styles/common_banner'
@@ -32,29 +30,14 @@ class CategoryBanner extends React.Component {
           unit="个"
         />
         <Operation>
-          <OperationItem>
-            <OperationIcon src={`${ICON_CMD}/filter2.svg`} />
-            <Popover
-              content={<div>兼容各个页面的 Filter 菜单</div>}
-              trigger="hover"
-            >
-              <OperationTitle>过滤</OperationTitle>
-            </Popover>
-            <FilterTags>
-              <Tag closable>最多xx</Tag>
-              <Tag closable>最少..</Tag>
-            </FilterTags>
-          </OperationItem>
-          <OperationDivider />
           <OperationItem onClick={logic.onAdd.bind(this, 'categories')}>
             <OperationIconChart src={`${ICON_CMD}/plus.svg`} />
             添加
           </OperationItem>
           <OperationDivider />
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
-            {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/EditorsBanner.js b/containers/CommunitiesBanner/EditorsBanner.js
@@ -54,7 +54,7 @@ class EditorsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/IndexBanner.js b/containers/CommunitiesBanner/IndexBanner.js
@@ -42,10 +42,14 @@ class IndexBanner extends React.Component {
             </Popover>
             <FilterTags>
               <Tag closable>最多xx</Tag>
-              <Tag closable>最少..</Tag>
             </FilterTags>
           </OperationItem>
           <OperationDivider />
+          <OperationItem onClick={logic.onSearch}>
+            <OperationIconChart src={`${ICON_CMD}/search2.svg`} />
+            搜索
+          </OperationItem>
+          <OperationDivider />
           <OperationItem onClick={logic.onAdd.bind(this, 'communities')}>
             <OperationIconChart src={`${ICON_CMD}/plus.svg`} />
             添加
@@ -54,7 +58,7 @@ class IndexBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/JobsBanner.js b/containers/CommunitiesBanner/JobsBanner.js
@@ -53,7 +53,7 @@ class JobsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/PostsBanner.js b/containers/CommunitiesBanner/PostsBanner.js
@@ -52,7 +52,7 @@ class PostsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/TagsBanner.js b/containers/CommunitiesBanner/TagsBanner.js
@@ -53,7 +53,7 @@ class TagsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/ThreadsBanner.js b/containers/CommunitiesBanner/ThreadsBanner.js
@@ -54,7 +54,7 @@ class ThreadsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunitiesBanner/logic.js b/containers/CommunitiesBanner/logic.js
@@ -45,6 +45,10 @@ export function loadJobs() {
   sr71$.query(S.pagedJobs, { filter: {} })
 }
 
+export function onSearch() {
+  store.openDoraemon()
+}
+
 export const loadCategories = () =>
   sr71$.query(S.pagedCategories, { filter: {} })
 
diff --git a/containers/CommunitiesBanner/store.js b/containers/CommunitiesBanner/store.js
@@ -41,6 +41,9 @@ const CommunitiesBannerStore = t
     },
   }))
   .actions(self => ({
+    openDoraemon() {
+      self.root.openDoraemon()
+    },
     markState(sobj) {
       markStates(sobj, self)
     },
diff --git a/containers/CommunitiesContent/CategoriesContent.js b/containers/CommunitiesContent/CategoriesContent.js
@@ -1,8 +1,6 @@
 import React from 'react'
-import TimeAgo from 'timeago-react'
 import ReactTooltip from 'react-tooltip'
 
-import { cutFrom } from '../../utils'
 import {
   Pagi,
   Table,
@@ -11,9 +9,11 @@ import {
   Space,
   UserCell,
   CommunityCell,
+  TimeStampCell,
 } from '../../components'
 
 import { OperationWrapper } from './styles'
+import { Trans } from '../../utils'
 import * as logic from './logic'
 
 /* eslint-disable react/display-name */
@@ -30,17 +30,14 @@ const columns = [
     dataIndex: 'title',
     align: 'center',
     render: text => {
-      return <div>{cutFrom(text, 15)}</div>
+      return <div>{Trans(text)}</div>
     },
   },
   {
     title: 'raw',
     width: 150,
     dataIndex: 'raw',
     align: 'center',
-    render: text => {
-      return <div>{cutFrom(text, 15)}</div>
-    },
   },
   {
     title: '社区',
@@ -53,29 +50,19 @@ const columns = [
   },
   {
     title: '创建者',
-    width: 160,
+    width: 180,
     dataIndex: 'author',
     align: 'center',
     render: author => {
       return <UserCell user={author} />
     },
   },
   {
-    title: '创建时间',
-    width: 150,
-    dataIndex: 'insertedAt',
+    title: '时间戳',
+    width: 120,
     align: 'center',
-    render: text => {
-      return <TimeAgo datetime={text} locale="zh_CN" />
-    },
-  },
-  {
-    title: '上次更新',
-    width: 150,
-    dataIndex: 'updatedAt',
-    align: 'center',
-    render: text => {
-      return <TimeAgo datetime={text} locale="zh_CN" />
+    render: (text, record) => {
+      return <TimeStampCell data={record} />
     },
   },
   {
@@ -117,10 +104,7 @@ class CategoriesContent extends React.Component {
   }
 
   render() {
-    const {
-      data,
-      restProps: { categoriesLoading },
-    } = this.props
+    const { data, restProps: { categoriesLoading } } = this.props
 
     return (
       <div>
diff --git a/containers/CommunitiesContent/IndexContent.js b/containers/CommunitiesContent/IndexContent.js
@@ -117,7 +117,7 @@ const columns = [
   },
   {
     title: '时间戳',
-    width: 150,
+    width: 120,
     align: 'center',
     render: (text, record) => {
       return <TimeStampCell data={record} />
@@ -161,7 +161,10 @@ class IndexContent extends React.Component {
   }
 
   render() {
-    const { data, restProps: { communitiesLoading } } = this.props
+    const {
+      data,
+      restProps: { communitiesLoading },
+    } = this.props
 
     return (
       <React.Fragment>
diff --git a/containers/CommunityBanner/PostsBanner.js b/containers/CommunityBanner/PostsBanner.js
@@ -51,8 +51,7 @@ class PostsBanner extends React.Component {
           <OperationDivider />
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
-            {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunityBanner/SubscribersBanner.js b/containers/CommunityBanner/SubscribersBanner.js
@@ -56,7 +56,7 @@ class SubscribersBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunityBanner/TagsBanner.js b/containers/CommunityBanner/TagsBanner.js
@@ -54,7 +54,7 @@ class TagsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/CommunityBanner/ThreadsBanner.js b/containers/CommunityBanner/ThreadsBanner.js
@@ -52,7 +52,7 @@ class ThreadsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/Header/index.js b/containers/Header/index.js
@@ -22,7 +22,6 @@ import {
   MiniMapTitle,
   MiniMapDivider,
   Admin,
-  Search,
   Notification,
   HeaderIcon,
   UserAvatar,
@@ -137,9 +136,6 @@ const Header = ({ curRoute, leftOffset, fixed, isLogin, accountInfo }) => (
     </Admin>
 
     <Operations>
-      <Search onClick={logic.openDoraemon}>
-        <HeaderIcon src={`${ICON_CMD}/search2.svg`} />
-      </Search>
       <Notification onClick={logic.openPreview.bind(this, 'post')}>
         <HeaderIcon src={`${ICON_CMD}/notification_none.svg`} />
       </Notification>
diff --git a/containers/Header/logic.js b/containers/Header/logic.js
@@ -65,10 +65,6 @@ export function openPreview() {
   })
 }
 
-export function openDoraemon() {
-  store.openDoraemon()
-}
-
 const DataSolver = [
   {
     match: asyncRes('sessionState'),
diff --git a/containers/UsersBanner/IndexBanner.js b/containers/UsersBanner/IndexBanner.js
@@ -56,7 +56,7 @@ class IndexBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/UsersBanner/PassportsBanner.js b/containers/UsersBanner/PassportsBanner.js
@@ -56,7 +56,7 @@ class PassportsBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/UsersBanner/PaysBanner.js b/containers/UsersBanner/PaysBanner.js
@@ -56,7 +56,7 @@ class PaysBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/containers/UsersBanner/RolesBanner.js b/containers/UsersBanner/RolesBanner.js
@@ -56,7 +56,7 @@ class RolesBanner extends React.Component {
           <OperationItem>
             <OperationIcon src={`${ICON_CMD}/chart.svg`} />
             {/* <OperationIconChart src={`${ICON_CMD}/list.svg`} /> */}
-            统计
+            图表
           </OperationItem>
         </Operation>
       </BannerContentWrapper>
diff --git a/utils/themes/skins/cyan.js b/utils/themes/skins/cyan.js
@@ -7,7 +7,7 @@ import { lighten, darken } from 'polished'
 const primaryColor = '#717084' // '#5EABB3'
 
 const bannerBg = '#464652'
-const contentBg = '#E4EEED'
+const contentBg = '#FFFFFF'
 const contentBoxBg = '#f9fcfc'
 const fontColor = primaryColor
 const sidebarBg = '#1C4752'

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import styled from 'styled-components'`
`6`	`6`	export const Wrapper = styled.div`
`7`	`7`	`display: flex;`
`8`	`8`	`flex-direction: column;`
	`9`	`+ align-items: center;`
`9`	`10`	`
`10`	`11`	export const Content = styled.div`
`11`	`12`	`display: flex;`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,10 @@ export function loadJobs() {`
`45`	`45`	`sr71$.query(S.pagedJobs, { filter: {} })`
`46`	`46`	`}`
`47`	`47`
	`48`	`+export function onSearch() {`
	`49`	`+ store.openDoraemon()`
	`50`	`+}`
	`51`	`+`
`48`	`52`	`export const loadCategories = () =>`
`49`	`53`	`sr71$.query(S.pagedCategories, { filter: {} })`
`50`	`54`