diff --git a/client/components/Nav.js b/client/components/Nav.js
index 578ed393..edc10d9b 100644
--- a/client/components/Nav.js
+++ b/client/components/Nav.js
@@ -47,9 +47,9 @@ function Nav(props) {
if (props.project.id) {
return (
-
- Fullscreen
-
+
+ Share
+
);
}
@@ -134,7 +134,8 @@ Nav.propTypes = {
id: PropTypes.string
}),
logoutUser: PropTypes.func.isRequired,
- stopSketch: PropTypes.func.isRequired
+ stopSketch: PropTypes.func.isRequired,
+ showShareModal: PropTypes.func.isRequired
};
export default Nav;
diff --git a/client/constants.js b/client/constants.js
index fdedc38b..37c2482c 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -72,5 +72,8 @@ export const CLOSE_NEW_FOLDER_MODAL = 'CLOSE_NEW_FOLDER_MODAL';
export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN';
export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
+export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL';
+export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL';
+
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';
diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index 1cc1fe1c..e4ab0cf0 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -126,3 +126,15 @@ export function closeNewFolderModal() {
type: ActionTypes.CLOSE_NEW_FOLDER_MODAL
};
}
+
+export function showShareModal() {
+ return {
+ type: ActionTypes.SHOW_SHARE_MODAL
+ };
+}
+
+export function closeShareModal() {
+ return {
+ type: ActionTypes.CLOSE_SHARE_MODAL
+ };
+}
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 892bf1c9..16545376 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -148,7 +148,7 @@ class PreviewFrame extends React.Component {
// one level down...
htmlFile = hijackConsoleLogsScript() + htmlFile;
- const mediaFiles = this.props.files.filder(file => file.url);
+ const mediaFiles = this.props.files.filter(file => file.url);
const jsFiles = [];
this.props.jsFiles.forEach(jsFile => {
diff --git a/client/modules/IDE/components/ShareModal.js b/client/modules/IDE/components/ShareModal.js
new file mode 100644
index 00000000..7b54fbf4
--- /dev/null
+++ b/client/modules/IDE/components/ShareModal.js
@@ -0,0 +1,48 @@
+import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+function ShareModal(props) {
+ const hostname = window.location.origin;
+ return (
+
+ );
+}
+
+ShareModal.propTypes = {
+ projectId: PropTypes.string.isRequired,
+ closeShareModal: PropTypes.func.isRequired
+};
+
+export default ShareModal;
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index a1cc2710..bffff702 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -7,6 +7,7 @@ import TextOutput from '../components/TextOutput';
import Preferences from '../components/Preferences';
import NewFileModal from '../components/NewFileModal';
import NewFolderModal from '../components/NewFolderModal';
+import ShareModal from '../components/ShareModal';
import Nav from '../../../components/Nav';
import Console from '../components/Console';
import { bindActionCreators } from 'redux';
@@ -121,6 +122,7 @@ class IDEView extends React.Component {
project={this.props.project}
logoutUser={this.props.logoutUser}
stopSketch={this.props.stopSketch}
+ showShareModal={this.props.showShareModal}
/>
{ // eslint-disable-line
+ if (this.props.ide.shareModalVisible) {
+ return (
+
+
+
+ );
+ }
+ })()}
);
@@ -323,7 +337,8 @@ IDEView.propTypes = {
consoleIsExpanded: PropTypes.bool.isRequired,
preferencesIsVisible: PropTypes.bool.isRequired,
projectOptionsVisible: PropTypes.bool.isRequired,
- newFolderModalVisible: PropTypes.bool.isRequired
+ newFolderModalVisible: PropTypes.bool.isRequired,
+ shareModalVisible: PropTypes.bool.isRequired
}).isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
@@ -396,6 +411,8 @@ IDEView.propTypes = {
closeNewFolderModal: PropTypes.func.isRequired,
createFolder: PropTypes.func.isRequired,
createFile: PropTypes.func.isRequired,
+ showShareModal: PropTypes.func.isRequired,
+ closeShareModal: PropTypes.func.isRequired
};
function mapStateToProps(state) {
diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js
index b8d6f906..cc9c8518 100644
--- a/client/modules/IDE/reducers/ide.js
+++ b/client/modules/IDE/reducers/ide.js
@@ -12,7 +12,8 @@ const initialState = {
consoleIsExpanded: false,
preferencesIsVisible: false,
projectOptionsVisible: false,
- newFolderModalVisible: false
+ newFolderModalVisible: false,
+ shareModalVisible: false
};
const ide = (state = initialState, action) => {
@@ -55,6 +56,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { newFolderModalVisible: true });
case ActionTypes.CLOSE_NEW_FOLDER_MODAL:
return Object.assign({}, state, { newFolderModalVisible: false });
+ case ActionTypes.SHOW_SHARE_MODAL:
+ return Object.assign({}, state, { shareModalVisible: true });
+ case ActionTypes.CLOSE_SHARE_MODAL:
+ return Object.assign({}, state, { shareModalVisible: false });
default:
return state;
}
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index ea85740a..b66994e2 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -47,4 +47,30 @@
height: #{200 / $base-font-size}rem;
width: 100%;
text-align: center;
+}
+
+.share-modal {
+ @extend %modal;
+ padding: #{20 / $base-font-size}rem;
+ width: #{500 / $base-font-size}rem;
+}
+
+.share-modal__header {
+ display: flex;
+ justify-content: space-between;
+}
+
+.share-modal__section {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding: #{10 / $base-font-size}rem 0;
+}
+
+.share-modal__label {
+ width: #{86 / $base-font-size}rem;
+}
+
+.share-modal__input {
+ flex: 1;
}
\ No newline at end of file