From 848a8d95f5563504f9c483ed7cae1307ac0aa744 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 11 Oct 2017 15:53:42 +0800 Subject: [PATCH] renew NoticeIcon --- src/components/NoticeIcon/NoticeList.js | 36 +++++++++++++---------- src/components/NoticeIcon/NoticeList.less | 35 +++++++--------------- src/components/NoticeIcon/demo/popover.md | 25 ++++++++++++++-- src/components/NoticeIcon/index.js | 9 ++++-- src/components/NoticeIcon/index.less | 10 ++----- src/components/NoticeIcon/index.md | 1 + src/layouts/BasicLayout.js | 2 +- 7 files changed, 64 insertions(+), 54 deletions(-) diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js index 1d09b3ed..e8383313 100644 --- a/src/components/NoticeIcon/NoticeList.js +++ b/src/components/NoticeIcon/NoticeList.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Avatar, Icon } from 'antd'; +import { Avatar, Icon, List } from 'antd'; import classNames from 'classnames'; import styles from './NoticeList.less'; @@ -14,28 +14,34 @@ export default function NoticeList({ data = [], onClick, onClear, title, locale } return (
- +
{locale.clear}{title}
diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less index 1a7b0452..8f96643b 100644 --- a/src/components/NoticeIcon/NoticeList.less +++ b/src/components/NoticeIcon/NoticeList.less @@ -7,31 +7,18 @@ transition: all .3s; overflow: hidden; cursor: pointer; + padding-left: 24px; + padding-right: 24px; - .wrapper { - margin: 0 32px; - padding: 12px 0; - border-bottom: 1px solid @border-color-split; - } &.read { opacity: .4; } - &:last-child .wrapper { + &:last-child { border-bottom: 0; } &:hover { background: @primary-1; } - .content { - position: relative; - overflow: hidden; - } - .avatar { - margin-right: 16px; - float: left; - margin-top: 4px; - background: #fff; - } .title { font-weight: normal; color: @text-color; @@ -40,21 +27,19 @@ white-space: nowrap; } .description { - color: @text-color-secondary; font-size: 12px; - margin-top: 8px; + line-height: @line-height-base; } .datetime { - color: @text-color-secondary; font-size: 12px; margin-top: 4px; + line-height: @line-height-base; } .extra { - position: absolute; - right: 0; - top: 0; + float: right; color: @text-color-secondary; - font-size: 12px; + font-weight: normal; + margin-right: 0; } } } @@ -77,13 +62,13 @@ height: 46px; line-height: 46px; text-align: center; - color: @text-color-secondary; + color: @text-color; border-radius: 0 0 @border-radius-base @border-radius-base; border-top: 1px solid @border-color-split; transition: all .3s; cursor: pointer; &:hover { - color: @text-color; + color: @heading-color; } } diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md index f4ecafdd..379e59c7 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/src/components/NoticeIcon/demo/popover.md @@ -3,11 +3,12 @@ order: 2 title: 带浮层卡片 --- -点击展开通知卡片,展现多种类型的通知。 +点击展开通知卡片,展现多种类型的通知,通常放在顶部通栏。 ````jsx import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; import moment from 'moment'; +import { Tag } from 'antd'; const data = [{ key: '1', @@ -27,11 +28,29 @@ const data = [{ title: '标题', description: '这种模板用于提醒谁与你发生了互动,左侧放『谁』的头像', datetime: moment('2017-08-07').fromNow(), + extra: 标签, }]; +function onItemClick(item, tabProps) { + console.log(item, tabProps); +} + +function onClear(tabTitle) { + console.log(tabTitle); +} + ReactDOM.render( -
- +
+ diff --git a/src/components/NoticeIcon/index.js b/src/components/NoticeIcon/index.js index 63b2f8d5..ac7a51bd 100644 --- a/src/components/NoticeIcon/index.js +++ b/src/components/NoticeIcon/index.js @@ -63,7 +63,7 @@ export default class NoticeIcon extends PureComponent { ); } render() { - const { className, count, popupAlign } = this.props; + const { className, count, popupAlign, onPopupVisibleChange } = this.props; const noticeButtonClass = classNames(className, styles.noticeButton); const notificationBox = this.getNotificationBox(); const trigger = ( @@ -76,6 +76,10 @@ export default class NoticeIcon extends PureComponent { if (!notificationBox) { return trigger; } + const popoverProps = {}; + if ('popupVisible' in this.props) { + popoverProps.visible = this.props.popupVisible; + } return ( {trigger} diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less index 5e2ff1b3..98e63d57 100644 --- a/src/components/NoticeIcon/index.less +++ b/src/components/NoticeIcon/index.less @@ -14,23 +14,17 @@ } .icon { - font-size: 20px; + font-size: 16px; + padding: 4px; } .tabs { :global { - .ant-tabs-nav-container { - font-size: 14px; - } .ant-tabs-nav-scroll { text-align: center; } .ant-tabs-bar { margin-bottom: 0; } - .ant-tabs-nav .ant-tabs-tab { - padding-top: 16px; - padding-bottom: 16px; - } } } diff --git a/src/components/NoticeIcon/index.md b/src/components/NoticeIcon/index.md index f0b1b120..ea540998 100644 --- a/src/components/NoticeIcon/index.md +++ b/src/components/NoticeIcon/index.md @@ -19,6 +19,7 @@ onItemClick | 点击列表项的回调 | function(item, tabProps) | - onTabChange | 切换页签的回调 | function(tabTitle) | - popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | - onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | - +popupVisible | 控制弹层显隐 | boolean | - locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }` ### NoticeIcon.Tab diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 7a20b762..ff0abd87 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -126,7 +126,7 @@ class BasicLayout extends React.PureComponent { urgent: 'red', doing: 'yellow', })[newNotice.status]; - newNotice.extra = {newNotice.extra}; + newNotice.extra = {newNotice.extra}; } return newNotice; }); -- GitLab