diff --git a/src/components/NoticeIcon/NoticeList.js b/src/components/NoticeIcon/NoticeList.js index 1d09b3ed4d0e6bee48e1f88c83c826a201005a4c..e8383313c9d7ff8ec1c3078f3569e62f362c102a 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 1a7b0452ac87abc1d9a706c760b98e8514c1c02e..8f96643bc6819b7de95e9fbeed056d5c9dbabf55 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 f4ecafddf30b8db189e7bd341253e01a88f8991f..379e59c7d790c1e229fba7744455710ff8bc07d8 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 63b2f8d54e66ed2053b2197fddc178c2aa3b0956..ac7a51bd0faa9ac49b9f1b87ceb0794fec38d355 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 5e2ff1b376f9d2fa84cfcffd775ebf8dc23d06ff..98e63d5718be24e3bb7cc066ebfdd7222a24da70 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 f0b1b120f9f3f310d1b1e1a2c48001163d4d3ef2..ea540998810a9591522b8bbe85eae1f32baa665c 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 7a20b762cfe250c6be59e63e17b262bdc6cfde57..ff0abd873843596452404350ed12bf30bc7086a2 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; });