dialogs: close button

src/components/dialogs/AppInfoDialog.jsx

@@ -18,19 +18,17 @@ export const AppInfoDialog = () => (
       <hr />
       <div className="small app-info-list">
         <div>
-          Исходный код:{' '}
+          <div>Исходный код:</div>
           <a href="//github.com/muerwre/orchidMap" target="_blank">github.com/muerwre/orchidMap</a>
         </div>
-      </div>
-      <div className="small app-info-list">
         <div>
-          Frontend:{' '}
+          <div>Frontend:</div>
           <a href="//reactjs.org/" target="_blank">ReactJS</a>,{' '}
           <a href="//leafletjs.com" target="_blank">Leaflet</a>,{' '}
           <a href="//www.liedman.net/leaflet-routing-machine/" target="_blank">Leaflet Routing Machine</a>{' '}
         </div>
         <div>
-          Backend:{' '}
+          <div>Backend:</div>
           <a href="//project-osrm.org/" target="_blank">OSRM</a>,{' '}
           <a href="//nodejs.org/" target="_blank">NodeJS</a>,{' '}
           <a href="//expressjs.com/" target="_blank">ExpressJS</a>,{' '}

src/containers/App.jsx

@@ -9,7 +9,7 @@ import { bindActionCreators } from 'redux';
 
 import { hot } from 'react-hot-loader';
 import { Renderer } from '$components/renderer/Renderer';
-import { hideRenderer } from '$redux/user/actions';
+import { hideRenderer, setDialogActive } from '$redux/user/actions';
 import { Cursor } from '$components/Cursor';
 import { LeftDialog } from '$containers/LeftDialog';
 
@@ -29,7 +29,7 @@ const Component = (props: Props) => (
     <UserPanel />
     <EditorPanel />
     <Cursor mode={props.mode} sticker={props.sticker} set={props.set} />
-    <LeftDialog dialog={props.dialog} dialog_active={props.dialog_active} />
+    <LeftDialog dialog={props.dialog} dialog_active={props.dialog_active} setDialogActive={props.setDialogActive} />
 
     { props.renderer_active &&
       <Renderer onClick={props.hideRenderer} />
@@ -50,5 +50,5 @@ const mapStateToProps = ({
   set,
 });
 
-const mapDispatchToProps = dispatch => bindActionCreators({ hideRenderer }, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ hideRenderer, setDialogActive }, dispatch);
 export const App = connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));

src/containers/LeftDialog.jsx

@@ -4,10 +4,13 @@ import { DIALOGS } from '$constants/dialogs';
 import { MapListDialog } from '$components/dialogs/MapListDialog';
 import classnames from 'classnames';
 import { AppInfoDialog } from '$components/dialogs/AppInfoDialog';
+import { Icon } from '$components/panels/Icon';
 
 type Props = {
   dialog: String,
   dialog_active: Boolean,
+
+  setDialogActive: Function,
 }
 
 const LEFT_DIALOGS = {
@@ -15,10 +18,13 @@ const LEFT_DIALOGS = {
   [DIALOGS.APP_INFO]: AppInfoDialog,
 };
 
-export const LeftDialog = ({ dialog, dialog_active }: Props) => (
+export const LeftDialog = ({ dialog, dialog_active, setDialogActive }: Props) => (
   Object.keys(LEFT_DIALOGS).map(item => (
     <div className={classnames('dialog', { active: dialog_active && (dialog === item) })} key={item}>
       { dialog && LEFT_DIALOGS[item] && React.createElement(LEFT_DIALOGS[item]) }
+      <div className="dialog-close-button" onClick={() => setDialogActive(false)}>
+        <Icon icon="icon-cancel-1" />
+      </div>
     </div>
   ))
 );

src/styles/dialogs.less

@@ -10,7 +10,6 @@
   z-index: 5;
 
   padding: 10px 10px 68px 10px;
-  overflow: hidden;
   box-sizing: border-box;
 
   transform: translate3d(-100%, 0, 0);
@@ -20,6 +19,11 @@
   &.active {
     transform: translate3d(0, 0, 0);
     pointer-events: all;
+
+    .dialog-close-button {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
   }
 
   @media (max-width: @mobile_breakpoint) {
@@ -28,12 +32,38 @@
 
 }
 
+.dialog-close-button {
+  position: absolute;
+  right: -38px;
+  bottom: 68px;
+  background: @red_secondary;
+  width: 48px;
+  height: 48px;
+  transform: translate3d(-48px, 0, 0);
+  border-radius: 0 @panel_radius @panel_radius 0;
+  opacity: 0;
+
+  transition: all 250ms 250ms;
+  z-index: -1;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: white;
+    width: 40px;
+    height: 40px;
+  }
+}
+
 .dialog-content {
   background: #271535;
   height: 100%;
   overflow: hidden;
   position: relative;
-  border-radius: @panel_radius;
+  border-radius: @panel_radius @panel_radius 0 @panel_radius;
   box-shadow: @dialog_shadow;
 
   display: flex;
@@ -135,6 +165,7 @@
   color: white;
   padding: 10px;
   font-size: 0.8em;
+  user-select: none;
 
   div {
     opacity: 0.8;