Merge pull request #59 from havfo/feat/notifications-layout

Push out notifications when opening sidebar

app/lib/components/Notifications.jsx

@@ -6,10 +6,15 @@ import * as appPropTypes from './appPropTypes';
 import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
 
-const Notifications = ({ notifications, onClick }) =>
+const Notifications = ({ notifications, onClick, toolAreaOpen }) =>
 {
 	return (
-		<div data-component='Notifications'>
+		<div
+			data-component='Notifications'
+			className={classnames({
+				'toolarea-open' : toolAreaOpen
+			})}
+		>
 			{
 				notifications.map((notification) =>
 				{
@@ -33,14 +38,18 @@ const Notifications = ({ notifications, onClick }) =>
 Notifications.propTypes =
 {
 	notifications : PropTypes.arrayOf(appPropTypes.Notification).isRequired,
-	onClick       : PropTypes.func.isRequired
+	onClick       : PropTypes.func.isRequired,
+	toolAreaOpen  : PropTypes.bool
 };
 
 const mapStateToProps = (state) =>
 {
 	const { notifications } = state;
 
-	return { notifications };
+	return {
+		notifications,
+		toolAreaOpen : state.toolarea.toolAreaOpen
+	};
 };
 
 const mapDispatchToProps = (dispatch) =>

app/stylus/components/Notifications.styl

@@ -2,14 +2,19 @@
 	position: absolute;
 	z-index: 1010;
 	pointer-events: none;
-	top: 0;
+	top: 45px;
-	right: 65px;
+	right: 0;
 	bottom: 0;
 	padding: 20px;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 	align-items: flex-end;
+	transition: right 0.3s;
+	
+	&.toolarea-open {
+		right: 25%;
+	}
 
 	+desktop() {
 		padding: 10px;