fix notifybox styling
This commit is contained in:
parent
69552fbf10
commit
a7b43c2854
|
@ -3,32 +3,38 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
import type { State } from '../reducers';
|
||||||
|
|
||||||
function getStyle(notification) {
|
|
||||||
if (!notification) return {};
|
|
||||||
|
|
||||||
if (typeof notification === 'string') {
|
const NotifyBox = ({ notification }) => {
|
||||||
return {
|
const [className, setClassName] = useState('notifybox');
|
||||||
width: 50,
|
const [value, setValue] = useState(notification);
|
||||||
};
|
|
||||||
|
if (notification) {
|
||||||
|
let newClassName = 'notifybox';
|
||||||
|
if (notification && typeof notification !== 'string') {
|
||||||
|
if (notification > 0) newClassName += ' green';
|
||||||
|
else newClassName += ' red';
|
||||||
|
}
|
||||||
|
if (newClassName !== className) {
|
||||||
|
setClassName(newClassName);
|
||||||
|
}
|
||||||
|
if (notification !== value) {
|
||||||
|
setValue(notification);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return {
|
|
||||||
backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const NotifyBox = ({ notification }) => (
|
return (
|
||||||
<div
|
<div
|
||||||
className={(notification) ? 'notifyboxvis' : 'notifyboxhid'}
|
className={(notification) ? `${className} show` : className}
|
||||||
style={getStyle(notification)}
|
>
|
||||||
>
|
{value}
|
||||||
{notification}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
};
|
||||||
|
|
||||||
function mapStateToProps(state: State) {
|
function mapStateToProps(state: State) {
|
||||||
const { notification } = state.user;
|
const { notification } = state.user;
|
||||||
|
|
|
@ -35,7 +35,7 @@ tr:nth-child(even) {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
|
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect, .notifybox {
|
||||||
background-color: rgba(59, 59, 59, 0.8);
|
background-color: rgba(59, 59, 59, 0.8);
|
||||||
color: #f4f4f4;
|
color: #f4f4f4;
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
|
@ -107,9 +107,8 @@ tr:nth-child(even) {
|
||||||
color: #ecc9ff;
|
color: #ecc9ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifyboxvis, .notifyboxhid {
|
.notifybox.green, .notifybox.red {
|
||||||
background-color: rgba(59, 59, 59, 0.8);
|
color: black;
|
||||||
border-radius: 21px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||||
|
|
|
@ -34,7 +34,7 @@ tr:nth-child(even) {
|
||||||
background-color: rgba(59, 59, 59, 0.8);
|
background-color: rgba(59, 59, 59, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect {
|
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect, .notifybox {
|
||||||
background-color: rgba(59, 59, 59, 0.8);
|
background-color: rgba(59, 59, 59, 0.8);
|
||||||
color: #f4f4f4;
|
color: #f4f4f4;
|
||||||
}
|
}
|
||||||
|
@ -104,8 +104,8 @@ tr:nth-child(even) {
|
||||||
color: #ecc9ff;
|
color: #ecc9ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifyboxvis, .notifyboxhid {
|
.notifybox.green, .notifybox.red {
|
||||||
background-color: rgba(59, 59, 59, 0.8);
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
.actionbuttons:hover, .coorbox:hover, .menu > div:hover {
|
||||||
|
|
|
@ -431,14 +431,14 @@ tr:nth-child(even) {
|
||||||
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
box-shadow:0 0 3px 2px rgba(0,0,0,.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifyboxvis, .notifyboxhid {
|
.notifybox {
|
||||||
background-color: rgba(226, 226, 226, 0.80);
|
background-color: rgba(226, 226, 226, 0.80);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 57px;
|
top: 57px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: 20px;
|
width: 50px;
|
||||||
color: black;
|
color: black;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
|
@ -450,17 +450,26 @@ tr:nth-child(even) {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
transition: visibility 0.5s, opacity 0.5s linear;
|
||||||
|
|
||||||
.notifyboxvis {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
transition: visibility 0s, opacity 0.5s linear;
|
|
||||||
}
|
|
||||||
.notifyboxhid {
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: visibility 0.5s, opacity 0.5s linear;
|
}
|
||||||
|
|
||||||
|
.notifybox.show {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifybox.green, .notifybox.red {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifybox.green {
|
||||||
|
background-color: #a9ffb0cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifybox.red {
|
||||||
|
background-color: #ffa9a9cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cooldownbox {
|
.cooldownbox {
|
||||||
|
|
|
@ -10,6 +10,6 @@
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notifyboxvis, .notifyboxhid {
|
.notifybox {
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user