Modal styles. Display event name when deleting

vikoivun · Feb 11, 2016 · 053d102 · 053d102
1 parent 386de48
commit 053d102
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 8 deletions.
diff --git a/src/actions/app.js b/src/actions/app.js
@@ -16,7 +16,7 @@ export function clearFlashMsg() {
     }
 }
 
-export function confirmAction(msg, style = 'warning', data = {}) {
+export function confirmAction(msg, style = 'warning', actionButtonLabel, data = {}) {
     // type can be 'message' or 'error'
     //
     // data is an obj {
@@ -26,6 +26,7 @@ export function confirmAction(msg, style = 'warning', data = {}) {
         type: constants.APP_CONFIRM_ACTION,
         msg: msg,
         style: style,
+        actionButtonLabel: actionButtonLabel,
         data: data
     }
 }

diff --git a/src/assets/_modal.scss b/src/assets/_modal.scss
@@ -0,0 +1,55 @@
+.modal-dialog {
+    height: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+.modal-content {
+    box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
+
+    padding: 12px 6px;
+    padding-bottom: 6px;
+
+    border-radius: 0;
+    border: 0;
+    min-width: 80%;
+
+    .modal-header, .modal-body, .modal-footer {
+        border: 0;
+    }
+
+    .modal-body {
+        padding: 12px 24px;
+    }
+
+    // Close button
+    .close {
+        font-size: 42px;
+        font-weight: 300;
+        position: absolute;
+        top: 0;
+        right: 10px;
+        border: 0;
+        background: transparent;
+    }
+}
+
+// Customize bootstraps default styles
+.modal {
+  // When fading in the modal, animate it to slide down
+  &.fade .modal-dialog {
+    opacity: 0;
+    transition: none;
+    transform: translate(0, 0);
+  }
+  &.in .modal-dialog { transform: translate(0, 0); opacity: 1; }
+}
+
+.modal-backdrop {
+    transition: opacity .3s ease-out;
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.in { opacity: $modal-backdrop-opacity; }
+}
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -11,6 +11,8 @@
 @import "node_modules/bootstrap/scss/bootstrap-grid.scss";
 @import "node_modules/bootstrap/scss/_modal.scss";
 
+@import "modal";
+
 // Define a custom sass file to override any variables defined in scaffolding.scss
 // @import "my-custom-overrides.scss";
 

diff --git a/src/i18n/fi.json b/src/i18n/fi.json
@@ -11,7 +11,9 @@
     "submit": "Lähetä",
     "cancel": "Peru",
     "confirm-action-header": "Varmista toiminto",
-    "confirm-delete": "Varmista tapahtuman poistaminen.",
+    "confirm-delete": "Varmista tapahtuman poistaminen",
+    "delete": "Poista",
+    "confirm": "Suorita",
 
     "clear-form": "Tyhjennä kentät",
 

diff --git a/src/reducers/app.js b/src/reducers/app.js
@@ -28,7 +28,7 @@ function update(state = initialState, action) {
     if(action.type === constants.APP_CONFIRM_ACTION) {
         if(action.msg && action.msg.length) {
             return Object.assign({}, state, {
-                confirmAction: { msg: action.msg, style: action.style, data: action.data }
+                confirmAction: { msg: action.msg, style: action.style, actionButtonLabel: action.actionButtonLabel, data: action.data }
             })
         } else {
             return Object.assign({}, state, {

diff --git a/src/views/App/index.js b/src/views/App/index.js
@@ -5,10 +5,10 @@ import {connect} from 'react-redux'
 
 import Headerbar from 'src/components/Header'
 import Snackbar from 'material-ui/lib/snackbar';
+import RaisedButton from 'material-ui/lib/raised-button';
 import Modal from 'react-bootstrap/lib/Modal';
 import Button from 'react-bootstrap/lib/Button';
 
-
 import {injectIntl} from 'react-intl'
 
 import {retrieveUserFromSession} from 'src/actions/user'
@@ -57,6 +57,31 @@ class App extends React.Component {
             confirmMsg = (<FormattedMessage id={this.props.app.confirmAction.msg} />)
         }
 
+        let additionalMsg = ''
+        if(this.props.app.confirmAction && this.props.app.confirmAction.data && this.props.app.confirmAction.data.additionalMsg) {
+            additionalMsg = this.props.app.confirmAction.data.additionalMsg
+        }
+
+        let buttonStyle = {
+            marginLeft: '10px'
+        }
+
+        let warningButtonStyle = {
+            'marginLeft': '10px',
+            background: 'red',
+            backgroundColor: 'red'
+        }
+
+        let isWarningModal = false;
+        if(this.props.app.confirmAction && this.props.app.confirmAction.style === 'warning') {
+            isWarningModal = true;
+        }
+
+        let actionButtonLabel = 'confirm'
+        if(this.props.app.confirmAction && this.props.app.confirmAction.actionButtonLabel && this.props.app.confirmAction.actionButtonLabel.length > 0) {
+            actionButtonLabel = this.props.app.confirmAction.actionButtonLabel;
+        }
+
         return (
             <div>
                 <Headerbar />
@@ -72,11 +97,14 @@ class App extends React.Component {
                 />
                 <Modal show={(!!this.props.app.confirmAction)} dialogClassName="custom-modal" onHide={e => this.props.dispatch(cancelAction())}>
                    <Modal.Header closeButton>
-                     <p>{confirmMsg}</p>
                    </Modal.Header>
+                   <Modal.Body>
+                     <p>{confirmMsg}</p>
+                     <p>{additionalMsg}</p>
+                   </Modal.Body>
                    <Modal.Footer>
-                     <Button onClick={e => this.props.dispatch(cancelAction())}>Cancel</Button>
-                     <Button onClick={e => this.props.dispatch(doAction(this.props.app.confirmAction.data))}>Confirm</Button>
+                     <RaisedButton style={buttonStyle} label={<FormattedMessage id="cancel" />} onClick={e => this.props.dispatch(cancelAction())} />
+                     <RaisedButton style={buttonStyle} backgroundColor={isWarningModal ? 'rgba(255,160,160,1)' : null} label={<FormattedMessage id={actionButtonLabel} />} onClick={e => this.props.dispatch(doAction(this.props.app.confirmAction.data))} />
                    </Modal.Footer>
                  </Modal>
             </div>

diff --git a/src/views/Editor/index.js b/src/views/Editor/index.js
@@ -153,8 +153,10 @@ var EditorPage = React.createClass({
             confirmAction(
                 'confirm-delete',
                 'warning',
+                'delete',
                 {
-                    action: e => this.props.dispatch(deleteEventAction(this.props.params.eventId, this.props.user))
+                    action: e => this.props.dispatch(deleteEventAction(this.props.params.eventId, this.props.user)),
+                    additionalMsg: (this.props.values && this.props.values.name) && (this.props.values.name.fi || this.props.values.name.se || this.props.values.name.en)
                 }
             )
         )