From d4b9f52ab7536904bdd7cbabc5564a6c8df794f5 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Fri, 14 Sep 2018 14:22:57 -0400
Subject: [PATCH] Beginning to add alerts component.
---
src/components/alerts/alert.css | 25 +++++++++++++++++++++++++
src/components/alerts/alerts.jsx | 25 +++++++++++++++++++++++++
src/components/gui/gui.jsx | 5 +++++
src/containers/alerts.jsx | 26 ++++++++++++++++++++++++++
src/containers/gui.jsx | 1 +
src/reducers/alerts.js | 28 ++++++++++++++++++++++++++++
src/reducers/gui.js | 3 +++
7 files changed, 113 insertions(+)
create mode 100644 src/components/alerts/alert.css
create mode 100644 src/components/alerts/alerts.jsx
create mode 100644 src/containers/alerts.jsx
create mode 100644 src/reducers/alerts.js
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
new file mode 100644
index 000000000..236af5caf
--- /dev/null
+++ b/src/components/alerts/alert.css
@@ -0,0 +1,25 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+@import "../../css/z-index.css";
+
+.alert-container {
+ position:absolute;
+ z-index: $z-index-card;
+ margin: 0.5rem 2rem;
+}
+
+.alert {
+ border: 1px solid $ui-tertiary;
+ border-radius: 0.75rem;
+ display: flex;
+ flex-direction: column;
+ cursor: move;
+ background: orange;
+ height: 60px;
+ width: 300px;
+ z-index: 20;
+ overflow: hidden;
+ box-shadow: 0px 5px 25px 5px $ui-black-transparent;
+ align-items: center;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
new file mode 100644
index 000000000..357ce5b04
--- /dev/null
+++ b/src/components/alerts/alerts.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Draggable from 'react-draggable';
+
+import styles from './alert.css';
+
+// this is a functional component, declared with arrow syntax
+const Alerts = props => (
+ <Draggable
+ bounds="parent"
+ position={{x: 550, y: 0}}
+ >
+ <div className={styles.alertContainer}>
+ <div className={styles.alert}>
+ {props.message}
+ </div>
+ </div>
+ </Draggable>
+);
+
+Alerts.propTypes = {
+ message: PropTypes.string.isRequired
+};
+
+export default Alerts;
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index aa1dfc039..6d38a85fb 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -27,6 +27,7 @@ import ImportModal from '../../containers/import-modal.jsx';
import WebGlModal from '../../containers/webgl-modal.jsx';
import TipsLibrary from '../../containers/tips-library.jsx';
import Cards from '../../containers/cards.jsx';
+import Alerts from '../../containers/alerts.jsx';
import DragLayer from '../../containers/drag-layer.jsx';
import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
@@ -53,6 +54,7 @@ let isRendererSupported = null;
const GUIComponent = props => {
const {
activeTabIndex,
+ alertsVisible,
basePath,
backdropLibraryVisible,
backpackOptions,
@@ -133,6 +135,9 @@ const GUIComponent = props => {
{cardsVisible ? (
<Cards />
) : null}
+ {alertsVisible ? (
+ <Alerts />
+ ) : null}
{costumeLibraryVisible ? (
<CostumeLibrary
vm={vm}
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
new file mode 100644
index 000000000..51cedc903
--- /dev/null
+++ b/src/containers/alerts.jsx
@@ -0,0 +1,26 @@
+import {connect} from 'react-redux';
+
+import AlertsComponent from '../components/alerts/alerts.jsx';
+
+const mapStateToProps = state => ({
+ visible: state.scratchGui.alerts.visible,
+ message: state.scratchGui.alerts.message
+});
+
+/* const mapDispatchToProps = dispatch => ({
+ onActivateDeckFactory: id => () => dispatch(activateDeck(id)),
+ onShowAll: () => {
+ dispatch(openTipsLibrary());
+ dispatch(closeCards());
+ },
+ onCloseCards: () => dispatch(closeCards()),
+ onNextStep: () => dispatch(nextStep()),
+ onPrevStep: () => dispatch(prevStep()),
+ onDrag: (e_, data) => dispatch(dragCard(data.x, data.y)),
+ onStartDrag: () => dispatch(startDrag()),
+ onEndDrag: () => dispatch(endDrag())
+}); */
+
+export default connect(
+ mapStateToProps
+)(AlertsComponent);
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 04c6142dc..6ef14439b 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -125,6 +125,7 @@ GUI.propTypes = {
const mapStateToProps = (state, ownProps) => ({
activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
+ alertsVisible: state.scratchGui.alerts.visible,
backdropLibraryVisible: state.scratchGui.modals.backdropLibrary,
blocksTabVisible: state.scratchGui.editorTab.activeTabIndex === BLOCKS_TAB_INDEX,
cardsVisible: state.scratchGui.cards.visible,
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
new file mode 100644
index 000000000..2be24f28d
--- /dev/null
+++ b/src/reducers/alerts.js
@@ -0,0 +1,28 @@
+const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
+
+const initialState = {
+ message: 'testing alerts!!',
+ visible: true
+};
+
+const reducer = function (state, action) {
+ if (typeof state === 'undefined') state = initialState;
+ switch (action.type) {
+ case CLOSE_ALERT:
+ return Object.assign({}, state, {
+ message: 'closing alert!'
+ });
+ default:
+ return state;
+ }
+};
+
+const closeAlert = function () {
+ return {type: CLOSE_ALERT};
+};
+
+export {
+ reducer as default,
+ initialState as alertsInitialState,
+ closeAlert
+};
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index cfad8f682..71d4de93d 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -1,4 +1,5 @@
import {applyMiddleware, compose, combineReducers} from 'redux';
+import alertsReducer, {alertsInitialState} from './alerts';
import assetDragReducer, {assetDragInitialState} from './asset-drag';
import cardsReducer, {cardsInitialState} from './cards';
import colorPickerReducer, {colorPickerInitialState} from './color-picker';
@@ -24,6 +25,7 @@ import throttle from 'redux-throttle';
const guiMiddleware = compose(applyMiddleware(throttle(300, {leading: true, trailing: true})));
const guiInitialState = {
+ alerts: alertsInitialState,
assetDrag: assetDragInitialState,
blockDrag: blockDragInitialState,
cards: cardsInitialState,
@@ -68,6 +70,7 @@ const initFullScreen = function (currentState) {
};
const guiReducer = combineReducers({
+ alerts: alertsReducer,
assetDrag: assetDragReducer,
blockDrag: blockDragReducer,
cards: cardsReducer,
--
GitLab