yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-18 21:08:54 +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'; import PropTypes from 'prop-types';
const GlobalNotification = createGlobalStyle` const GlobalNotification = createGlobalStyle`
.notificationIcon { .notificationIcon {
position: relative; position: relative;
display: block; display: block;
width: 60px; width: 60px;
height: 60px; height: 60px;
> div { > div {
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
top: 20px; left:20px; top: 19px;
border-radius: 10px; left:20px;
border: 1px solid ${props => props.theme.main.colors.green}; border-radius: 10px;
display: flex; border: 1px solid ${props => props.theme.main.colors.green};
i, svg { display: flex;
margin: auto; svg {
font-size: 1.2rem; margin: auto;
color: ${props => props.theme.main.colors.green}; color: ${props => props.theme.main.colors.green};
width: 10px;
height: 9px;
}
} }
} }
}
.notificationContent { .notificationContent {
display: flex; display: flex;
align-items: center; align-items: center;
width: 220px; width: 220px;
margin: 0; margin: 0;
padding-right: 10px; padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, 0.3); 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;
} }
svg { .notificationTitle {
margin: auto; margin-bottom: 0;
font-size: 1.3rem; font-size: 1.4rem;
font-weight: 100!important; font-weight: 400;
line-height: 1.8rem;
} }
}
.notificationSuccess{ .notificationClose {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props => 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}; props.theme.main.colors.white};
}
.notificationIcon {
div {
border-color: ${props => props.theme.main.colors.green};
}
svg {
color: ${props => props.theme.main.colors.green};
}
}
}
.notificationWarning { .notificationWarning {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props => background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props =>
props.theme.main.colors.white}; props.theme.main.colors.white};
.notificationIcon:before { .notificationIcon {
padding-top: 4px; div {
border-color: ${props => props.theme.main.colors.orange}; border-color: ${props => props.theme.main.colors.orange};
color: ${props => props.theme.main.colors.orange}; }
svg {
color: ${props => props.theme.main.colors.orange};
}
}
} }
}
.notificationError { .notificationError {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white; background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
.notificationIcon:before { .notificationIcon {
padding-top: 4px; div {
border-color: $brand-danger; // red border-color: ${props => props.theme.main.colors.red};
border-color: ${props => props.theme.main.colors.red}; }
color: ${props => props.theme.main.colors.red}; svg {
color: ${props => props.theme.main.colors.red};
}
}
} }
}
.notificationInfo { .notificationInfo {
background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props => background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
props.theme.main.colors.white}; props.theme.main.colors.white};
.notificationIcon:before { .notificationIcon {
border-color: ${props => props.theme.main.colors.blue}; div {
color: ${props => props.theme.main.colors.blue}; border-color: ${props => props.theme.main.colors.blue};
}
svg {
color: ${props => props.theme.main.colors.blue};
}
}
} }
}
`; `;
const Li = styled.li` const Li = styled.li`
@ -116,6 +134,7 @@ const Li = styled.li`
transition: all 0.15s ease; transition: all 0.15s ease;
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
border-left: 2px solid ${props => props.theme.main.colors.green};
// The last notification must appear from // The last notification must appear from
// the background of the previous one. // 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 { FormattedMessage } from 'react-intl';
import { isObject } from 'lodash'; import { isObject } from 'lodash';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Remove } from '@buffetjs/icons';
import Li, { GlobalNotification } from './Li'; import Li, { GlobalNotification } from './Li';
class Notification extends React.Component { class Notification extends React.Component {
// eslint-disable-line react/prefer-stateless-function // eslint-disable-line react/prefer-stateless-function
@ -73,7 +74,7 @@ class Notification extends React.Component {
<p className="notificationTitle">{content}</p> <p className="notificationTitle">{content}</p>
</div> </div>
<div className={`notificationClose`}> <div className={`notificationClose`}>
<FontAwesomeIcon icon="times" onClick={this.handleCloseClicked} /> <Remove onClick={this.handleCloseClicked} />
</div> </div>
</Li> </Li>
</> </>

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

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