changelog: dialog for changelog

src/components/dialogs/AppInfoDialog.jsx

@@ -0,0 +1,74 @@
+// @flow
+import React from 'react';
+import { Scroll } from '$components/Scroll';
+import { APP_INFO } from '$constants/app_info';
+
+export const AppInfoDialog = () => (
+  <div className="dialog-content">
+    <div className="dialog-head">
+      <div className="dialog-head-title">
+        Orchid Map
+      </div>
+      <div className="small gray">
+        версия{' '}
+        {(APP_INFO.VERSION || 1)}.
+        {(APP_INFO.CHANGELOG[APP_INFO.VERSION].length || 0)}
+      </div>
+      <div className="small app-info-list">
+        <div>
+          Исходный код:{' '}
+          <a href="//github.com/muerwre/orchidMap" target="_blank">github.com/muerwre/orchidMap</a>
+        </div>
+      </div>
+      <div className="small app-info-list">
+        <div>
+          Frontend:{' '}
+          <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:{' '}
+          <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>,{' '}
+          <a href="//mongodb.com/" target="_blank">MongoDB</a>
+        </div>
+      </div>
+    </div>
+    <Scroll className="dialog-shader">
+      <div>
+        <div className="app-info-changelog">
+          <h2>История изменений</h2>
+          {
+            [...Object.keys(APP_INFO.CHANGELOG)].reverse().map((version, i) => (
+              <div className="app-info-changelog-item" key={version}>
+                <div className="app-info-number">{version}.</div>
+                <div className="app-info-version">
+                  {
+                    APP_INFO.CHANGELOG[version].map((release, y) => (
+                      <div className="app-info-release" key={release}>
+                        <div className="app-info-number">{APP_INFO.CHANGELOG[version].length - y}.</div>
+                        <div className="app-info-build">
+                        {
+                          APP_INFO.CHANGELOG[version][y].map((build, z) => (
+                            <div className="app-info-change" key={build}>
+                              <div className="app-info-number">{(z)}.</div>
+                              <span>{APP_INFO.CHANGELOG[version][y][z]}</span>
+                            </div>
+                          ))
+                        }
+                        </div>
+                      </div>
+                    ))
+                  }
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </Scroll>
+  </div>
+);
+

src/components/panels/UserPanel.jsx

@@ -4,7 +4,7 @@ import { GuestButton } from '$components/user/GuestButton';
 import { DEFAULT_USER, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
 import { UserMenu } from '$components/user/UserMenu';
-import { setUser, userLogout, takeAShot, setDialog, gotVkUser } from '$redux/user/actions';
+import { setUser, userLogout, takeAShot, setDialog, gotVkUser, setDialogActive } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import type { UserType } from '$constants/types';
@@ -21,6 +21,7 @@ type Props = {
 
   userLogout: Function,
   setDialog: Function,
+  setDialogActive: Function,
   gotVkUser: Function,
 };
 
@@ -59,7 +60,14 @@ export class Component extends React.PureComponent<Props, void> {
 
   setMenuOpened = () => this.setState({ menuOpened: !this.state.menuOpened });
   openMapsDialog = () => {
-    this.props.setDialog({ dialog: DIALOGS.MAP_LIST });
+    this.props.setDialog(DIALOGS.MAP_LIST);
+    this.props.setDialogActive(this.props.dialog !== DIALOGS.MAP_LIST);
+  };
+
+  openAppInfoDialog = () => {
+    this.setMenuOpened();
+    this.props.setDialog(DIALOGS.APP_INFO);
+    this.props.setDialogActive(this.props.dialog !== DIALOGS.APP_INFO);
   };
 
   openOauthFrame = () => {
@@ -94,7 +102,7 @@ export class Component extends React.PureComponent<Props, void> {
             }
             {
               (user && user.role && user.role !== 'guest' && menuOpened) &&
-              <UserMenu user={user} userLogout={this.props.userLogout} />
+                <UserMenu user={user} userLogout={this.props.userLogout} openAppInfoDialog={this.openAppInfoDialog} />
             }
           </div>
 
@@ -125,6 +133,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   takeAShot,
   setDialog,
   gotVkUser,
+  setDialogActive,
 }, dispatch);
 
 export const UserPanel = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/user/UserMenu.jsx

@@ -1,20 +1,24 @@
 import React from 'react';
-import { CLIENT } from '$config/frontend';
+import { APP_INFO } from '$constants/app_info';
 
 type Props = {
   userLogout: Function,
+  openAppInfoDialog: Function,
 }
 
-export const UserMenu = ({ userLogout }: Props) => (
+export const UserMenu = ({ userLogout, openAppInfoDialog }: Props) => (
   <div className="user-panel-menu">
     <div className="user-panel-title">
       ORCHID
       <br />
       MAP
       <span className="user-panel-ver">
-        - { CLIENT.VER }
+        - {(APP_INFO.VERSION || 1)}.{(APP_INFO.RELEASE.length || 0)}
       </span>
     </div>
+    <div className="user-panel-item" onClick={openAppInfoDialog}>
+      О редакторе карт
+    </div>
     <a className="user-panel-item" href="https://github.com/muerwre/orchidMap" target="_blank" rel="noopener noreferrer">
       Проект на github
     </a>