Wal 123 common msg component removing all msgs

src/actions/CommonMessageActions.js

@@ -45,8 +45,6 @@ class CommonMessageActions {
 
         if (loc === MessageLocation.HEADER) {
           id = 'h' + id;
-        } else {
-          id = 's' + id;
         }
       }
 

src/assets/stylesheets/_layout.scss

@@ -39,21 +39,12 @@ body {
 
 .wrapper {
   background: $body-bg;
-  position: relative;
   overflow: hidden;
   z-index: 2;
-  min-height: 100%;
-  height: auto !important;
 
   &-with-footer {
     padding-bottom: 50px;
   }
-  .message {
-    margin-top: 85px;
-  }
-  .no-message {
-    margin-top: 55px;
-  }
 }
 
 #content {
@@ -209,6 +200,7 @@ a {
   padding: 0 $defXPad;
   //max-width: $maxWidth;
   margin: 0 auto;
+  padding-top: 55px;
 
   &-inPadding {
     //padding: 50px 0;

src/assets/stylesheets/modules/_header.scss

@@ -1,6 +1,5 @@
 .header {
   position: fixed;
-  //overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;

src/components/AppContainer.jsx

@@ -14,7 +14,6 @@ import HelpModal from '../components/Help/HelpModal';
 import intlData from 'components/Utility/intlData';
 import CommonMessage from 'components/CommonMessage';
 
-
 /* Other */
 import {routerShape} from 'react-router/lib/PropTypes';
 
@@ -56,16 +55,13 @@ class App extends React.Component {
       document.getElementsByTagName('body')[0].className = 'loginBg';
       content = (<div className='wrapper wrapper-with-footer'>{this.props.children}</div>);
     } else {
-
       content = (
         <div className='wrapper wrapper-with-footer'>
           <Header pathname={ pathname }/>
-          <CommonMessage location='header' />
-          {this.props.activeNotification ?
-            <div className='message'>{this.props.children}</div>
-            :
-            <div className='no-message'>{this.props.children}</div>
-          }
+          <div>
+            <CommonMessage location='header'/>
+            <div>{this.props.children}</div>
+          </div>
         </div>
       );
     }
@@ -107,6 +103,7 @@ const mapStateToProps = (state) => {
     showHelpPopup: state.helpReducer.showHelpModal,
     locale: state.settings.locale,
     activeNotification: state.commonMessage.get('activeMessage'),
+    headerMessages: state.commonMessage.get('headerMessages')
   };
 };
 

src/components/CommonMessage/CommonMessage.jsx

@@ -6,6 +6,7 @@ import Config from '../../../config/Config';
 import MessageType from '../../constants/MessageTypes';
 import _ from 'lodash';
 import './CommonMessage.scss';
+import Immutable from 'immutable';
 
 const compileMessage = (props) => {
   let messageList;
@@ -14,10 +15,6 @@ const compileMessage = (props) => {
     messageList = props.headerMessages;
   }
 
-  if (props.location === 'sideBar') {
-    messageList = props.sideBarMessages;
-  }
-
   // Filter the message list to only show the number of messages configured.
   messageList = messageList.slice(0, props.numOfCommonMessageToDisplay);
 
@@ -27,19 +24,18 @@ const compileMessage = (props) => {
 
     return (
       <div
-        className={ 'c-common-message__background ' + messageType }
+        className={ 'cmn-msg__bkg cmn-msg__bkg--' + messageType }
         key={ key }
         id={ id }
       >
-        <div className='c-common-message__content'>
-          <span>{pair.get('content') }
-            <p onClick={ () => props.clearMessage(id) }>X</p>
-          </span>
+        <div className='cmn-msg__cont'>
+          <span className='cmn-msg__cont-txt'>{pair.get('content') }</span>
+          <p className='cmn-msg__cont-dismiss'onClick={ () => props.clearMessage(id) }>X</p>
         </div>
       </div>
     );
   });
-  return <div>{messages}</div>;
+  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 (
-      <div>
+      <div className='cmn-msg'>
         {compileMessage(this.props)}
       </div>
     );
@@ -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
   };
 };

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%);
+  }
+}

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
 );