From 14a51b6332ceeab94706ad4fb0bb910dc474c940 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 6 Sep 2016 22:37:29 -0400 Subject: [PATCH] add share modal --- client/components/Nav.js | 9 ++-- client/constants.js | 3 ++ client/modules/IDE/actions/ide.js | 12 +++++ client/modules/IDE/components/PreviewFrame.js | 2 +- client/modules/IDE/components/ShareModal.js | 48 +++++++++++++++++++ client/modules/IDE/pages/IDEView.js | 19 +++++++- client/modules/IDE/reducers/ide.js | 7 ++- client/styles/components/_modal.scss | 26 ++++++++++ 8 files changed, 119 insertions(+), 7 deletions(-) create mode 100644 client/modules/IDE/components/ShareModal.js 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 ( +
    +
    +

    Share Sketch

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