yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-18 13:02:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

notifications UI fix

Browse Source 
Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
This commit is contained in:
Virginie Ky 2020-01-23 09:36:25 +01:00
parent b4a04724cd
commit 002ef5f99e
3 changed files with 101 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
packages/strapi-admin/admin/src/components/Notification/Li.js
View File

@ -2,104 +2,122 @@ import styled, { createGlobalStyle } from 'styled-components';
import PropTypes from 'prop-types';
const GlobalNotification = createGlobalStyle`
.notificationIcon {
position: relative;
display: block;
width: 60px;
height: 60px;
> div {
position: absolute;
width: 20px;
height: 20px;
top: 20px; left:20px;
border-radius: 10px;
border: 1px solid ${props => props.theme.main.colors.green};
display: flex;
i, svg {
margin: auto;
font-size: 1.2rem;
color: ${props => props.theme.main.colors.green};
.notificationIcon {
position: relative;
display: block;
width: 60px;
height: 60px;
> div {
position: absolute;
width: 20px;
height: 20px;
top: 19px;
left:20px;
border-radius: 10px;
border: 1px solid ${props => props.theme.main.colors.green};
display: flex;
svg {
margin: auto;
color: ${props => props.theme.main.colors.green};
width: 10px;
height: 9px;
}
}
}
}
.notificationContent {
display: flex;
align-items: center;
width: 220px;
margin: 0;
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.notificationTitle {
margin-bottom: 0;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.8rem;
}
.notificationClose {
cursor: pointer;
opacity: 0.6;
position: relative;
display: flex;
width: 20px;
font-size: 1.4rem;
color: #BBC2BF;
transition: opacity 0.1s ease;
-webkit-font-smoothing: antialiased;
&:hover {
opacity: 1;
.notificationContent {
display: flex;
align-items: center;
width: 220px;
margin: 0;
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
svg {
margin: auto;
font-size: 1.3rem;
font-weight: 100!important;
.notificationTitle {
margin-bottom: 0;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.8rem;
}
}
.notificationSuccess{
background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props =>
.notificationClose {
cursor: pointer;
opacity: 0.6;
position: relative;
display: flex;
width: 20px;
font-size: 1.4rem;
color: #BBC2BF;
transition: opacity 0.1s ease;
-webkit-font-smoothing: antialiased;
margin-right: 15px
&:hover {
opacity: 1;
}
svg {
margin: auto;
font-size: 1.3rem;
font-weight: 100!important;
}
}
.notificationSuccess{
background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props =>
props.theme.main.colors.white};
}
.notificationIcon {
div {
border-color: ${props => props.theme.main.colors.green};
}
svg {
color: ${props => props.theme.main.colors.green};
}
}
}
.notificationWarning {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props =>
.notificationWarning {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props =>
props.theme.main.colors.white};
.notificationIcon:before {
padding-top: 4px;
border-color: ${props => props.theme.main.colors.orange};
color: ${props => props.theme.main.colors.orange};
.notificationIcon {
div {
border-color: ${props => props.theme.main.colors.orange};
}
svg {
color: ${props => props.theme.main.colors.orange};
}
}
}
}
.notificationError {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
.notificationError {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
.notificationIcon:before {
padding-top: 4px;
border-color: $brand-danger; // red
border-color: ${props => props.theme.main.colors.red};
color: ${props => props.theme.main.colors.red};
.notificationIcon {
div {
border-color: ${props => props.theme.main.colors.red};
}
svg {
color: ${props => props.theme.main.colors.red};
}
}
}
}
.notificationInfo {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
.notificationInfo {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
props.theme.main.colors.white};
.notificationIcon:before {
border-color: ${props => props.theme.main.colors.blue};
color: ${props => props.theme.main.colors.blue};
.notificationIcon {
div {
border-color: ${props => props.theme.main.colors.blue};
}
svg {
color: ${props => props.theme.main.colors.blue};
}
}
}
}
`;
const Li = styled.li`
@ -116,6 +134,7 @@ const Li = styled.li`
transition: all 0.15s ease;
overflow: hidden;
z-index: 10;
border-left: 2px solid ${props => props.theme.main.colors.green};
// The last notification must appear from
// the background of the previous one.

3
packages/strapi-admin/admin/src/components/Notification/index.js
View File

@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { isObject } from 'lodash';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Remove } from '@buffetjs/icons';
import Li, { GlobalNotification } from './Li';
class Notification extends React.Component {
// eslint-disable-line react/prefer-stateless-function
@ -73,7 +74,7 @@ class Notification extends React.Component {
<p className="notificationTitle">{content}</p>
</div>
<div className={`notificationClose`}>
<FontAwesomeIcon icon="times" onClick={this.handleCloseClicked} />
<Remove onClick={this.handleCloseClicked} />
</div>
</Li>
</>

2
packages/strapi-admin/admin/src/themes/colors.js
View File

@ -4,7 +4,7 @@ const colors = {
red: '#ff203c',
orange: '#ff5d00',
yellow: '#ffd500',
green: '#27b70f',
green: '#6dbb1a',
blue: '#0097f7',
teal: '#5bc0de',
pink: '#ff5b77',