Refactored modal dialog style layout

keplergl · Nov 26, 2018 · c3b3cda · c3b3cda
1 parent 229e690
commit c3b3cda
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 48 deletions.
diff --git a/examples/demo-app/src/app.js b/examples/demo-app/src/app.js
@@ -19,11 +19,15 @@
 // THE SOFTWARE.
 
 import React, {Component} from 'react';
-import styled from 'styled-components';
+import styled, {ThemeProvider} from 'styled-components';
 import window from 'global/window';
 import {connect} from 'react-redux';
+import KeplerGlSchema from 'kepler.gl/schemas';
+import {themeLT as theme} from 'kepler.gl/styles';
 import Banner from './components/banner';
 import Announcement from './components/announcement';
+import {replaceLoadDataModal} from './factories/load-data-modal';
+import ExportUrlModal from './components/export-url-modal';
 
 import {
   initApp,
@@ -33,14 +37,10 @@ import {
   propagateStorageEvent
 } from './actions';
 
-import {replaceLoadDataModal} from './factories/load-data-modal';
-
 const KeplerGl = require('kepler.gl/components').injectComponents([
   replaceLoadDataModal()
 ]);
 
-const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
-
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData from './data/sample-trip-data';
@@ -51,9 +51,7 @@ import {updateVisData, addDataToMap} from 'kepler.gl/actions';
 import Processors from 'kepler.gl/processors';
 /* eslint-enable no-unused-vars */
 
-import ModalDialog from 'kepler.gl/components/common/modal';
-import CloudStorage from './components/sharing/cloud-storage';
-import KeplerGlSchema from 'kepler.gl/schemas';
+const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
 const BannerHeight = 30;
 const BannerKey = 'kgHideBanner-iiba';
@@ -225,7 +223,7 @@ class App extends Component {
     });
   };
 
-  _onExportToDropbox = () => {
+  _onExportToCloud = () => {
     // we pass all props because we avoid to create new variables
     const fileContent = KeplerGlSchema.save(this.props.demo.keplerGl.map);
     this.props.dispatch(exportFileToCloud(fileContent))
@@ -244,21 +242,12 @@ class App extends Component {
         >
           <Announcement onDisable={this._disableBanner}/>
         </Banner>
-        <div>
-          <ModalDialog
-            isOpen={Boolean(this.state.cloudModalOpen)}
-            close={this._toggleCloudModal}
-            >
-            <div>
-              <CloudStorage
-                authTokens={sharing.authTokens}
-                isLoading={sharing.isLoading}
-                info={sharing.info}
-                onExportToDropbox={this._onExportToDropbox}
-              />
-            </div>
-          </ModalDialog>
-        </div>
+        <ExportUrlModal
+          sharing={sharing}
+          isOpen={Boolean(this.state.cloudModalOpen)}
+          onClose={this._toggleCloudModal}
+          onExport={this._onExportToCloud}
+        />
         <div
           style={{
             transition: 'margin 1s, height 1s',

diff --git a/examples/demo-app/src/components/export-url-modal.js b/examples/demo-app/src/components/export-url-modal.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ModalDialog from 'kepler.gl/components/common/modal';
+import CloudStorage from '../components/sharing/cloud-storage';
+import {ThemeProvider} from 'styled-components';
+import {themeLT as theme} from 'kepler.gl/styles';
+
+const ExportUrlModal = ({sharing, isOpen, onClose, onExport}) => (
+  <ThemeProvider theme={theme}>
+    <ModalDialog
+      isOpen={isOpen}
+      close={onClose}
+      title={'Store your map'}
+    >
+      <CloudStorage
+        authTokens={sharing.authTokens}
+        isLoading={sharing.isLoading}
+        info={sharing.info}
+        onExportToDropbox={onExport}
+      />
+    </ModalDialog>
+  </ThemeProvider>
+);
+
+export default ExportUrlModal;
diff --git a/examples/demo-app/src/components/sharing/cloud-storage.js b/examples/demo-app/src/components/sharing/cloud-storage.js
@@ -23,6 +23,7 @@ import styled from 'styled-components';
 import AuthHandlerTile from './auth-handler-tile';
 import StatusPanel from './status-panel';
 import DropboxHandler from '../../utils/dropbox';
+import { KEPLER_DISCLAIMER } from "../../constants/default-settings";
 
 const StyledWrapper = styled.div`
   flex-grow: 1;
@@ -61,12 +62,7 @@ class CloudStorage extends Component {
     return (
       <StyledWrapper>
         <StyledDescription>
-          <div className="title">
-            Store your Map
-          </div>
-          <div>
-            * Kepler.gl is a client-side application with no server backend. Data lives only on your machine/browser/cloud account (Dropbox).
-          </div>
+          {KEPLER_DISCLAIMER}
         </StyledDescription>
         <StyledList>
           {!isLoading && [DropboxHandler].map((handler, index) => (

diff --git a/examples/demo-app/src/constants/default-settings.js b/examples/demo-app/src/constants/default-settings.js
@@ -95,5 +95,6 @@ export const LOADING_SAMPLE_LIST_ERROR_MESSAGE = 'Not able to load sample galler
 export const LOADING_SAMPLE_ERROR_MESSAGE = 'Not able to load sample';
 export const LOADING_URL_MESSAGE = 'You can use the following formats: CSV | JSON | Kepler.gl config json. Make sure the url contains the file extension.';
 export const CORS_LINK = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS';
+export const KEPLER_DISCLAIMER = '* Kepler.gl is a client-side application with no server backend. Data lives only on your machine/browser/cloud account (Dropbox).';
 
 export const DEFAULT_LOADING_METHOD = LOADING_METHODS[0];
diff --git a/src/components/common/modal.js b/src/components/common/modal.js
@@ -29,7 +29,7 @@ import {Button} from 'components/common/styled-components';
 const ModalContentWrapper = styled.div`
   width: 60%;
   max-width: 960px;
-  padding: 40px 96px;
+  padding: 24px 24px 40px;
   position: absolute;
   top: 92px;
   left: 0;
@@ -51,11 +51,6 @@ const CloseButton = styled.div`
   color: ${props => props.theme.titleColorLT};
   display: flex;
   justify-content: flex-end;
-  left: 0;
-  padding: 24px;
-  position: absolute;
-  top: 0;
-  width: 100%;
   z-index: 10005;
 
   :hover {
@@ -174,18 +169,21 @@ class ModalDialog extends Component {
               <Delete height="14px" />
             </CloseButton>
           ) : null}
-          {props.title ? (
-            <ModalTitle className="modal--title">{props.title}</ModalTitle>
-          ) : null}
-          <ModalContent className="content">{props.children}</ModalContent>
-          {props.footer ? (
-            <ModalFooter
-              cancel={props.close}
-              confirm={props.onConfirm}
-              cancelButton={props.cancelButton}
-              confirmButton={props.confirmButton}
-            />
-          ) : null}
+          <div style={{padding: '0px 72px'}}>
+            {props.title ? (
+              <ModalTitle className="modal--title">{props.title}</ModalTitle>
+            ) : null}
+            <ModalContent className="content">{props.children}</ModalContent>
+            {props.footer ? (
+              <ModalFooter
+                cancel={props.close}
+                confirm={props.onConfirm}
+                cancelButton={props.cancelButton}
+                confirmButton={props.confirmButton}
+              />
+            ) : null}
+          </div>
+
         </ModalContentWrapper>
       </Modal>
     );