From 3d227972e2f5e10d5109e44eeb9de6032e7cc5ad Mon Sep 17 00:00:00 2001 From: epiqueras Date: Sat, 24 Nov 2018 09:58:28 +0000 Subject: [PATCH] feat(notifications): render list and implement themable icons --- package.json | 2 +- src/assets/{images => icons}/bell.svg | 0 src/assets/icons/info.svg | 4 ++ src/bootstrap/app.js | 53 +++++++++++++++++++-------- src/components/notifications.js | 22 +++++++++-- src/components/theme.css | 24 ++++++++++++ src/components/theme.less | 28 ++++++++++++++ yarn.lock | 30 ++++++++++++--- 8 files changed, 137 insertions(+), 26 deletions(-) rename src/assets/{images => icons}/bell.svg (100%) create mode 100644 src/assets/icons/info.svg diff --git a/package.json b/package.json index 1a55188..bbfa34d 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "not op_mini all" ], "devDependencies": { - "@kleros/kathari": "^0.18.0", + "@kleros/kathari": "^0.19.0", "husky": "^1.1.4", "less": "^3.8.1", "source-map-explorer": "^1.6.0", diff --git a/src/assets/images/bell.svg b/src/assets/icons/bell.svg similarity index 100% rename from src/assets/images/bell.svg rename to src/assets/icons/bell.svg diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg new file mode 100644 index 0000000..6dfa773 --- /dev/null +++ b/src/assets/icons/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/bootstrap/app.js b/src/bootstrap/app.js index 543e9da..3176697 100644 --- a/src/bootstrap/app.js +++ b/src/bootstrap/app.js @@ -19,6 +19,36 @@ const StyledMenu = styled(Menu)` line-height: 64px !important; text-align: center; ` +const notifications = [ + { + date: new Date(), + message: + 'Congratulations! You have been drawn as a juror to a case on Air Transport court.', + to: '/', + type: 'info' + }, + { + date: new Date(), + message: + 'Attention! You have 6h to vote on the case #127464 at Air Transport court.', + to: '/', + type: 'error' + }, + { + date: new Date(), + message: + 'Attention! You have 24h to vote on the case #127464 at Air Transport court.', + to: '/', + type: 'warning' + }, + { + date: new Date(), + message: + 'Congratulations! You have been drawn as a juror to a case on Air Transport court.', + to: '/', + type: 'info' + } +] export default () => ( <> @@ -60,27 +90,18 @@ export default () => ( - + - - - - - - + + + + + + diff --git a/src/components/notifications.js b/src/components/notifications.js index d74e534..c50af23 100644 --- a/src/components/notifications.js +++ b/src/components/notifications.js @@ -1,10 +1,24 @@ -import { Badge, Popover } from 'antd' -import { ReactComponent as Bell } from '../assets/images/bell.svg' +import { Badge, List, Popover } from 'antd' +import { ReactComponent as Bell } from '../assets/icons/bell.svg' +import { ReactComponent as Info } from '../assets/icons/info.svg' import { NavLink } from 'react-router-dom' import PropTypes from 'prop-types' import React from 'react' import styled from 'styled-components/macro' +const Notification = ({ date: _date, message, to: _to, type }) => ( + + } description={message} /> + +) + +Notification.propTypes = { + date: PropTypes.instanceOf(Date).isRequired, + message: PropTypes.string.isRequired, + to: PropTypes.string.isRequired, + type: PropTypes.oneOf(['info', 'error', 'warning']).isRequired +} + const StyledNavLink = styled(NavLink)` float: right; font-size: 10px; @@ -19,13 +33,13 @@ const StyledBadge = styled(Badge)` ` const Notifications = ({ notifications }) => ( } title={ <> Notifications History } - content={notifications.map(n => n.to)} + visible > diff --git a/src/components/theme.css b/src/components/theme.css index 7a97002..816d090 100644 --- a/src/components/theme.css +++ b/src/components/theme.css @@ -18588,3 +18588,27 @@ li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper:hov opacity: 0; } } +svg.primary .colored-icon { + fill: #1890ff !important; +} +svg.info .colored-icon { + fill: #1890ff !important; +} +svg.success .colored-icon { + fill: #52c41a !important; +} +svg.processing .colored-icon { + fill: #1890ff !important; +} +svg.error .colored-icon { + fill: #f5222d !important; +} +svg.highlight .colored-icon { + fill: #f5222d !important; +} +svg.warning .colored-icon { + fill: #faad14 !important; +} +svg.normal .colored-icon { + fill: #d9d9d9 !important; +} diff --git a/src/components/theme.less b/src/components/theme.less index 5a419a1..657b5bd 100644 --- a/src/components/theme.less +++ b/src/components/theme.less @@ -532,3 +532,31 @@ @list-item-meta-margin-bottom: @padding-md; @list-item-meta-avatar-margin-right: @padding-md; @list-item-meta-title-margin-bottom: @padding-sm; + +// Themed Icons +svg { + &.primary .colored-icon { + fill: @primary-color !important; + } + &.info .colored-icon { + fill: @info-color !important; + } + &.success .colored-icon { + fill: @success-color !important; + } + &.processing .colored-icon { + fill: @processing-color !important; + } + &.error .colored-icon { + fill: @error-color !important; + } + &.highlight .colored-icon { + fill: @highlight-color !important; + } + &.warning .colored-icon { + fill: @warning-color !important; + } + &.normal .colored-icon { + fill: @normal-color !important; + } +} diff --git a/yarn.lock b/yarn.lock index df4d27a..8b10637 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1055,10 +1055,10 @@ log-update "^2.3.0" strip-ansi "^3.0.1" -"@kleros/kathari@^0.18.0": - version "0.18.0" - resolved "https://registry.yarnpkg.com/@kleros/kathari/-/kathari-0.18.0.tgz#b2dc7218937df84198d815f562513bef8b513c06" - integrity sha512-b3eKXfrK135whPRz5XpytEQDil7ARdSKjT7lPaoEdZmFQiHBCAcOZTyWORNMb5dQmy2KxF7vH5jacREy07x3fw== +"@kleros/kathari@^0.19.0": + version "0.19.0" + resolved "https://registry.yarnpkg.com/@kleros/kathari/-/kathari-0.19.0.tgz#9a63a5f397092dc82aa165395f5c12f3460c5cb1" + integrity sha512-Lb/s5/Lpte38NFFopwZoZTBbo15olIAvrmY+0UqhOz15FxYQqbWy5nXZuu++8orOgh5/LYv7Qnx70vGmg/tobw== dependencies: "@commitlint/cli" "^7.2.1" "@commitlint/config-conventional" "^7.1.2" @@ -1078,8 +1078,10 @@ eslint-plugin-prettier "^3.0.0" eslint-plugin-promise "^4.0.1" eslint-plugin-react "^7.6.1" + eslint-plugin-react-perf "^2.0.9" eslint-plugin-standard "^4.0.0" eslint-plugin-unicorn "^6.0.1" + eslint-plugin-wyze "^3.4.0" lint-staged "^8.0.4" prettier "^1.13.7" solium "^1.1.8" @@ -4470,7 +4472,7 @@ docopt@^0.6.2: resolved "https://registry.yarnpkg.com/docopt/-/docopt-0.6.2.tgz#b28e9e2220da5ec49f7ea5bb24a47787405eeb11" integrity sha1-so6eIiDaXsSffqW7JKR3h0Be6xE= -doctrine@1.5.0: +doctrine@1.5.0, doctrine@^1.2.2: version "1.5.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa" integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo= @@ -4968,6 +4970,14 @@ eslint-plugin-promise@^4.0.1: resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.0.1.tgz#2d074b653f35a23d1ba89d8e976a985117d1c6a2" integrity sha512-Si16O0+Hqz1gDHsys6RtFRrW7cCTB6P7p3OJmKp3Y3dxpQE2qwOA7d3xnV+0mBmrPoi0RBnxlCKvqu70te6wjg== +eslint-plugin-react-perf@^2.0.9: + version "2.0.9" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-perf/-/eslint-plugin-react-perf-2.0.9.tgz#984982b1b6099fca68608ccb0ba5692ffbcf2fd8" + integrity sha512-znVvK7hZ+c7vR5aF4GjF0ki6usavJrPZ2OADylolNfFGA+iLYyNQogjFSRVKmyJ2R9IdZB3M+Ch5TtWoTOSBpw== + dependencies: + doctrine "^1.2.2" + jsx-ast-utils "^1.3.3" + eslint-plugin-react@7.11.1, eslint-plugin-react@^7.6.1: version "7.11.1" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c" @@ -4998,6 +5008,11 @@ eslint-plugin-unicorn@^6.0.1: lodash.upperfirst "^4.2.0" safe-regex "^1.1.0" +eslint-plugin-wyze@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-wyze/-/eslint-plugin-wyze-3.4.0.tgz#9c7219b5c6a09b6061ed820c518564ec04b085fc" + integrity sha1-nHIZtcagm2Bh7YIMUYVk7ASwhfw= + eslint-scope@3.7.1: version "3.7.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8" @@ -8133,6 +8148,11 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" +jsx-ast-utils@^1.3.3: + version "1.4.1" + resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1" + integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE= + jsx-ast-utils@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"