;
+ return messages;
};
class CommonMessage extends PureComponent {
@@ -50,43 +46,52 @@ class CommonMessage extends PureComponent {
timeout: null
};
+ this.timerList = Immutable.List();
this.checkToAssignTimer = this.checkToAssignTimer.bind(this);
}
- setTimer(id) {
- const {timeout} = this.state;
- clearTimeout(timeout);
-
- this.setState({
- timeout: setTimeout(
+ // Only the most recent message has an associated timer.
+ // Other messages will not have a timer until they are shown.
+ setTimer(id, index) {
+ if (index === 0) {
+ this.timerList = this.timerList.push(setTimeout(
this.props.clearMessage.bind(this, id), Config.commonMessageModule.timeout
- )
- });
+ ));
+ } else {
+ this.timerList.forEach((timer, index) => {
+ if (index !== this.timerList.size-1) {
+ clearTimeout(timer);
+ }
+ });
+
+ }
}
checkToAssignTimer(messages) {
- messages.forEach((msg) => {
+ messages.forEach((msg, index) => {
let msgType = msg.get('messageType');
if (msgType === MessageType.SUCCESS || msgType === MessageType.INFO) {
- this.setTimer(msg.get('id'));
+ this.setTimer(msg.get('id'), index);
}
});
}
- componentDidUpdate(prevProps) {
- let propsMerged = this.props.headerMessages.concat(this.props.sideBarMessages);
- let prevPropsMerged = prevProps.headerMessages.concat(prevProps.sideBarMessages);
+ componentDidUpdate(prevProps) {
// Use lodash for a deep comparison of the merged messages.
- if (!_.isEqual(propsMerged, prevPropsMerged)) {
- this.checkToAssignTimer(propsMerged);
+ if (!_.isEqual(this.props.headerMessages, prevProps.headerMessages)) {
+ this.checkToAssignTimer(this.props.headerMessages);
}
}
-
+
+ componentDidMount() {
+ this.checkToAssignTimer(this.props.headerMessages);
+ }
+
render() {
return (
-
+
{compileMessage(this.props)}
);
@@ -98,47 +103,34 @@ const mapStateToProps = (state) => {
const messages = state.commonMessage;
let headerMessages = messages.get('headerMessages');
- let sideBarMessages = messages.get('sideBarMessages');
const numOfCommonMessageToDisplay = Config.commonMessageModule.numOfCommonMessageToDisplay;
if (reverse) {
headerMessages = headerMessages.reverse();
- sideBarMessages = sideBarMessages.reverse();
}
// Determine the number of messages for calculating the heigh offset needed.
let numOfheaderMessages = headerMessages.size;
- let numOfsideBarMessages = sideBarMessages.size;
if (numOfheaderMessages > numOfCommonMessageToDisplay) {
numOfheaderMessages = numOfCommonMessageToDisplay;
}
- if (numOfsideBarMessages > numOfCommonMessageToDisplay) {
- numOfsideBarMessages = numOfCommonMessageToDisplay;
- }
-
- //Calculate the heights of the exchange child div and the betslip child div.
- const exchangeMessagingHeight = 36 * numOfheaderMessages;
-
-
- // Dynamically apply a style to the split panes.
- const messagingDivExist = document.getElementsByClassName('messaging').length > 0;
+ //Calculate the heights of the header child div and the betslip child div.
+ const messagingHeight = 35 * numOfheaderMessages;
+ const domLoaded = document.getElementsByClassName('main').length > 0 &&
+ document.getElementsByClassName('aside').length > 0;
- if (messagingDivExist) {
- const messagingExchange = document.getElementsByClassName('messaging')[0]
- .children[1].children[0];
-
- const messagingBetslip = document.getElementsByClassName('messaging')[0]
- .children[1].children[2];
+ if (domLoaded) {
+ // Add padding to the main.
+ document.getElementsByClassName('main')[0].style.paddingTop = messagingHeight + 'px';
- messagingExchange.style.height = 'calc(100% - ' + exchangeMessagingHeight + 'px)';
- messagingBetslip.style.height = 'calc(100% - ' + exchangeMessagingHeight + 'px)';
+ // Due to the nature of the aside, we need to modify the top value.
+ document.getElementsByClassName('aside')[0].style.marginTop = messagingHeight + 'px';
}
return {
headerMessages,
- sideBarMessages,
numOfCommonMessageToDisplay
};
};
diff --git a/src/components/CommonMessage/CommonMessage.scss b/src/components/CommonMessage/CommonMessage.scss
index 0eb24e95a..1a9ccf834 100644
--- a/src/components/CommonMessage/CommonMessage.scss
+++ b/src/components/CommonMessage/CommonMessage.scss
@@ -1,57 +1,58 @@
-.c-common-message {
- &__background{
- position: fixed;
- margin-top: 54px;
- width: 100%;
- top: -36px;
- height: 36px;
- padding: 5px 0;
- display: table;
- z-index: 1;
- color: white;
- animation-name: slideDown;
- animation-duration: 0.2s;
- animation-timing-function: ease-in-out;
- animation-fill-mode: forwards;
- p {
- float: right;
- &:hover {
- cursor: pointer;
- }
- }
- &.info {
- background-color: fade-in(#204496, 1);
- }
- &.error {
- background-color: fade-in(#D60D2E, 1);
- }
- &.warning {
- background-color: fade-in(#FF9603, 1);
- }
- &.success {
- background-color: fade-in(#02A04A, 1);
- }
- &.none {
- display: none;
- }
- }
- &__content {
- text-align: left;
- display: table-cell;
- vertical-align: middle;
- padding: 0 1vw;
- }
+.cmn-msg {
+ position: fixed;
+ top: 55px;
+ width: 100%;
+ height: 35px;
+ z-index: 1;
+ color: white;
+
+ &__bkg{
+ animation-name: slideDown;
+ animation-duration: 0.2s;
+ animation-timing-function: ease-in-out;
+ animation-fill-mode: forwards;
+
+ &--info {
+ background-color: fade-in(#204496, 1);
+ }
+ &--error {
+ background-color: fade-in(#D60D2E, 1);
+ }
+ &--warning {
+ background-color: fade-in(#FF9603, 1);
+ }
+ &--success {
+ background-color: fade-in(#02A04A, 1);
+ }
+ &--none {
+ display: none;
+ }
+ }
+
+ &__cont {
+ display: grid;
+ grid-template-columns: auto 30px;
+ grid-template-areas: 'msg dismiss';
+ padding: 7.25px 1vw;
+
+ &-dismiss {
+ justify-self: end;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
}
@keyframes slideDown {
- 0% {
- transform: translateY(0%);
- opacity: 0;
- }
- 30% {
- opacity: 1;
- }
- 100% {
- transform: translateY(100%);
- }
-}
+ 0% {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ 30% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(0%);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Dashboard/Balances/Balances.jsx b/src/components/Dashboard/Balances/Balances.jsx
index 647333ee9..8fb4538c3 100644
--- a/src/components/Dashboard/Balances/Balances.jsx
+++ b/src/components/Dashboard/Balances/Balances.jsx
@@ -131,7 +131,7 @@ const mapStateToProps = (state) => {
precision: dashboard.precision,
decimals: dashboard.decimals,
showHiddenAssets: dashboard.showHiddenAssets,
- hiddenAssets: state.settings.hiddenAssets
+ hiddenAssets: state.settings.hiddenAssets,
};
};
@@ -142,7 +142,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators(
toggleAssetHidden: DashboardPageActions.toggleAssetHidden,
toggleShowHiddenAssets: DashboardPageActions.toggleShowHiddenAssets,
navigateToSend: NavigateActions.navigateToSend,
- navigateToDepositWithDraw: NavigateActions.navigateToDepositWithDraw
+ navigateToDepositWithDraw: NavigateActions.navigateToDepositWithDraw,
},
dispatch
);
diff --git a/src/components/Dashboard/Balances/Side.jsx b/src/components/Dashboard/Balances/Side.jsx
index 7a590df9d..8ea22fa54 100644
--- a/src/components/Dashboard/Balances/Side.jsx
+++ b/src/components/Dashboard/Balances/Side.jsx
@@ -8,8 +8,6 @@ import asset_utils from 'common/asset_utils';
import AppActions from 'actions/AppActions';
import SideVesting from './SideVesting';
import {bindActionCreators} from 'redux';
-import CommonMessage from '../../CommonMessage';
-
class Side extends React.Component {
componentWillMount() {
@@ -25,10 +23,6 @@ class Side extends React.Component {
this.props.navigateToDepositWithDraw();
}
- getTopMargin() {
- return this.props.activeNotification ? '35px' : '0px';
- }
-
render() {
let {
availableBalances,
@@ -37,8 +31,7 @@ class Side extends React.Component {
let availableKeys = Object.keys(availableBalances);
return (
-