Ivan - Frontend - Create modals and add example to demo page [skip ci]

client/src/actions/modal-actions.js

@@ -0,0 +1,16 @@
+
+export default {
+    openModal(content) {
+        return {
+            type: 'OPEN_MODAL',
+            payload: content
+        }
+    },
+
+    closeModal() {
+        return {
+            type: 'CLOSE_MODAL',
+            payload: {}
+        };
+    }
+};

client/src/app-components/are-you-sure.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import i18n from 'lib-app/i18n';
+import Button from 'core-components/button';
+
+class AreYouSure extends React.Component {
+    static propTypes = {
+        description: React.PropTypes.string,
+        onYes: React.PropTypes.func
+    };
+
+    static contextTypes = {
+        closeModal: React.PropTypes.func
+    };
+
+    render() {
+        return (
+            <div className="are-you-sure">
+                <div className="are-you-sure__header">
+                    {i18n('ARE_YOU_SURE')}
+                </div>
+                <div className="are-you-sure__description">
+                    {this.props.description}
+                </div>
+                <div className="are-you-sure__buttons">
+                    <div className="are-you-sure__yes-button">
+                        <Button type="secondary" size="small" onClick={this.onYes.bind(this)}>
+                            {i18n('YES')}
+                        </Button>
+                    </div>
+                    <div className="are-you-sure__no-button">
+                        <Button type="link" size="auto" onClick={this.onNo.bind(this)}>
+                            {i18n('CANCEL')}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    onYes() {
+        this.closeModal();
+
+        if (this.props.onYes) {
+            this.props.onYes();
+        }
+    }
+
+    onNo() {
+        this.closeModal();
+    }
+
+    closeModal() {
+        if (this.context.closeModal) {
+            this.context.closeModal();
+        }
+    }
+}
+
+export default AreYouSure;

client/src/app-components/are-you-sure.scss

@@ -0,0 +1,30 @@
+@import "../scss/vars";
+
+.are-you-sure {
+    width: 400px;
+    text-align: center;
+
+    &__header {
+        color: $primary-red;
+        font-size: $font-size--xl;
+        font-weight: bold;
+        margin-bottom: 20px;
+
+    }
+
+    &__description {
+        color: $dark-grey;
+        font-size: $font-size--md;
+        margin-bottom: 50px;
+    }
+
+    &__butttons {
+        margin: 0 auto;
+    }
+
+    &__yes-button,
+    &__no-button {
+        display: inline-block;
+        margin-right: 10px;
+    }
+}

client/src/app/App.js

@@ -3,6 +3,8 @@ import _                  from 'lodash';
 import { connect }        from 'react-redux'
 import { browserHistory } from 'react-router';
 
+import ModalContainer from 'app/modal-container';
+
 class App extends React.Component {
     static contextTypes = {
         router: React.PropTypes.object,
@@ -21,6 +23,7 @@ class App extends React.Component {
         return (
           <div>
               {React.cloneElement(this.props.children, {})}
+              <ModalContainer />
           </div>
         );
     }
@@ -49,6 +52,7 @@ class App extends React.Component {
 export default connect((store) => {
     return {
         config: store.config,
+        modal: store.modal,
         session: store.session,
         routing: store.routing
     };

client/src/app/demo/components-demo-page.js

@@ -3,6 +3,11 @@
 const React = require('react');
 const DocumentTitle = require('react-document-title');
 
+const ModalActions = require('actions/modal-actions');
+const store = require('app/store');
+
+const AreYouSure = require('app-components/are-you-sure');
+
 const Button = require('core-components/button');
 const Input = require('core-components/input');
 const Checkbox = require('core-components/checkbox');
@@ -82,7 +87,23 @@ let DemoPage = React.createClass({
         {
             title: 'Tooltip',
             render: (
-                <Tooltip content="mensaje mensa jemensajemens ajem ensaje  nsaje adicionals">hola</Tooltip>
+                <div>
+                    <Tooltip content="mensaje mensa jemensajemens ajem ensaje  nsaje adicionals">hola</Tooltip>
+                </div>
+            )
+        },
+        {
+            title: 'ModalTrigger',
+            render: (
+                <Button onClick={function () {
+                    store.dispatch(
+                        ModalActions.openModal(
+                            <AreYouSure description="I confirm I want to perform this action." onYes={()=> {alert('yes');}} />
+                        )
+                    );
+                }}>
+                    Open Modal
+                </Button>
             )
         }
 	],

client/src/app/modal-container.js

@@ -0,0 +1,57 @@
+import React              from 'react';
+import { connect }        from 'react-redux';
+import keyCode            from 'keycode';
+
+import ModalActions from 'actions/modal-actions';
+import Modal from 'core-components/modal';
+
+class ModalContainer extends React.Component {
+
+    static childContextTypes = {
+        closeModal: React.PropTypes.func
+    };
+
+    getChildContext() {
+        return {
+            closeModal: this.closeModal.bind(this)
+        };
+    };
+
+    componentDidMount() {
+        window.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+    
+    componentWillUnMount() {
+        window.removeEventListener('keydown', this.onKeyDown.bind(this));
+    }
+
+    render() {
+        return (
+            <div className="modal-container">
+                {(this.props.modal.opened) ? this.renderModal() : null}
+            </div>
+        );
+    }
+    
+    renderModal() {
+        return (
+            <Modal content={this.props.modal.content} />
+        );
+    }
+
+    onKeyDown(event) {
+        if (event.keyCode === keyCode('ESCAPE')) {
+            this.closeModal();
+        }
+    }
+    
+    closeModal() {
+        this.props.dispatch(ModalActions.closeModal());
+    }
+}
+
+export default connect((store) => {
+    return {
+        modal: store.modal
+    };
+})(ModalContainer);

client/src/core-components/button.js

@@ -17,9 +17,16 @@ class Button extends React.Component {
 
     static propTypes = {
         children: React.PropTypes.node,
+        size: React.PropTypes.oneOf([
+            'small',
+            'medium',
+            'large',
+            'auto'
+        ]),
         type: React.PropTypes.oneOf([
             'primary',
-            'primary-icon',
+            'secondary',
+            'tertiary',
             'clean',
             'link'
         ]),
@@ -32,7 +39,8 @@ class Button extends React.Component {
     };
 
     static defaultProps = {
-        type: 'primary'
+        type: 'primary',
+        size: 'medium'
     };
 
     render() {
@@ -59,10 +67,20 @@ class Button extends React.Component {
     getClass() {
         let classes = {
             'button': true,
-            'button_disabled': this.props.disabled
+            'button_disabled': this.props.disabled,
+            
+            'button_primary': (this.props.type === 'primary'),
+            'button_secondary': (this.props.type === 'secondary'),
+            'button_tertiary': (this.props.type === 'tertiary'),
+            'button_clean': (this.props.type === 'clean'),
+            'button_link': (this.props.type === 'link'),
+
+            'button_small': (this.props.size === 'small'),
+            'button_medium': (this.props.size === 'medium'),
+            'button_large': (this.props.size === 'large'),
+            'button_auto': (this.props.size === 'auto')
         };
 
-        classes['button-' + this.props.type] = (this.props.type);
         classes[this.props.className] = (this.props.className);
 
         return classNames(classes);

client/src/core-components/button.scss

@@ -2,28 +2,31 @@
 
 .button {
 
-    &-primary,
+    &_primary,
-    &-primary-icon {
+    &_secondary,
+    &_tertiary {
         background-color: $primary-red;
         border: solid transparent;
         border-radius: 4px;
         color: white;
         height: 47px;
         text-transform: uppercase;
-        width: 239px;
     }
 
-    &-primary-icon {
+    &_secondary {
-        width: initial;
+        background-color: $primary-green;
-        height: initial;
     }
 
-    &-clean {
+    &_tertiary {
+        background-color: $secondary-blue;
+    }
+
+    &_clean {
         background: none;
         border: none;
     }
 
-    &-link {
+    &_link {
         background: none;
         border: none;
         color: $dark-grey;
@@ -37,4 +40,22 @@
     &_disabled {
         background-color: #ec9696;
     }
+
+    &_small {
+        width: 100px;
+        height: 47px;
+    }
+
+    &_medium {
+        width: 239px;
+    }
+
+    &_large {
+        //width: 239px;
+    }
+
+    &_auto {
+        width: initial;
+        height: initial;
+    }
 }

client/src/core-components/checkbox.js

@@ -1,7 +1,7 @@
 import React              from 'react';
 import classNames         from 'classnames';
 import _                  from 'lodash';
-import keyCode from 'keycode';
+import keyCode            from 'keycode';
 
 import callback           from 'lib-core/callback';
 import getIcon            from 'lib-core/get-icon';

client/src/core-components/input.scss

@@ -44,7 +44,7 @@
         }
 
         .input__text {
-            padding-left: 40px;
+            padding-left: 48px;
         }
     }
 

client/src/core-components/modal.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+class Modal extends React.Component {
+    static propTypes = {
+        content: React.PropTypes.node
+    };
+
+    render() {
+        return (
+            <div className="modal">
+                <div className="modal__content">
+                    {this.props.content}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Modal;

client/src/core-components/modal.scss

@@ -0,0 +1,18 @@
+.modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    width: 100%;
+    height: 100%;
+    display: flex;
+
+    &__content {
+        position: relative;
+        margin: auto;
+        background-color: white;
+        border-radius: 4px;
+        padding: 50px;
+        box-shadow: 0 0 11px white;
+    }
+}

client/src/core-components/text-editor.js

@@ -51,9 +51,9 @@ class TextEditor extends React.Component {
 
         return (
             <div className="text-editor__options">
-                <Button type="primary-icon" iconName="bold" onClick={onBoldClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
+                <Button type="primary" size="auto" iconName="bold" onClick={onBoldClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
-                <Button type="primary-icon" iconName="italic" onClick={onItalicsClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
+                <Button type="primary" size="auto" iconName="italic" onClick={onItalicsClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
-                <Button type="primary-icon" iconName="underline" onClick={onUnderlineClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
+                <Button type="primary" size="auto" iconName="underline" onClick={onUnderlineClick.bind(this)} onMouseDown={(e) => {e.preventDefault()}} />
             </div>
         )
     }

client/src/data/languages/en.js

@@ -32,6 +32,8 @@ export default {
     'NO_ATTACHMENT': 'No file attachment',
     'STAFF': 'Staff',
     'CUSTOMER': 'Customer',
+    'YES': 'Yes',
+    'CANCEL': 'Cancel',
 
     //ERRORS
     'EMAIL_NOT_EXIST': 'Email does not exist',
@@ -49,5 +51,6 @@ export default {
     'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',
     'TICKET_SENT': 'Ticket has been created successfully.',
     'VALID_RECOVER': 'Password recovered successfully',
-    'EMAIL_EXISTS': 'Email already exists, please try to log in or recover password'
+    'EMAIL_EXISTS': 'Email already exists, please try to log in or recover password',
+    'ARE_YOU_SURE': 'Are you sure?'
 };

client/src/main.scss

@@ -5,4 +5,5 @@
 @import 'scss/font_awesome/font-awesome';
 
 @import 'core-components/*';
+@import 'app-components/*';
 @import 'app/*';

client/src/reducers/_reducers.js

@@ -3,9 +3,11 @@ import { routerReducer } from 'react-router-redux';
 
 import sessionReducer from 'reducers/session-reducer';
 import configReducer from 'reducers/config-reducer';
+import modalReducer from 'reducers/modal-reducer';
 
 export default combineReducers({
     session: sessionReducer,
     config: configReducer,
+    modal: modalReducer,
     routing: routerReducer
 });

client/src/reducers/modal-reducer.js

@@ -0,0 +1,36 @@
+import _ from 'lodash';
+
+import Reducer from 'reducers/reducer';
+
+class ModalReducer extends Reducer {
+
+    getInitialState() {
+        return {
+            opened: false,
+            content: null
+        };
+    }
+
+    getTypeHandlers() {
+        return {
+            'OPEN_MODAL': this.onOpenModal,
+            'CLOSE_MODAL': this.onCloseModal
+        };
+    }
+
+    onOpenModal(state, payload) {
+        return _.extend({}, state, {
+            opened: true,
+            content: payload
+        });
+    }
+
+    onCloseModal(state) {
+        return _.extend({}, state, {
+            opened: false,
+            content: null
+        });
+    }
+}
+
+export default ModalReducer.getInstance();