TitleDialog: title dialog proto

src/components/dialogs/TitleDialog.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { bindActionCreators } from "redux";
+import { connect } from 'react-redux';
+
+interface ITitleDialogProps {
+  editing: boolean,
+  title?: string,
+}
+
+export const Component: React.FunctionComponent<ITitleDialogProps> = ({ editing, title }) => (
+  !editing && title &&
+    <div className="title-dialog">
+      <div className="title-dialog-pane title-dialog-name">
+        <h2>{title}</h2>
+      </div>
+    </div>
+);
+
+const mapStateToProps = ({ user: { editing, title } }) => ({ editing, title });
+const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
+
+export const TitleDialog = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/panels/UserPanel.tsx

@@ -14,6 +14,7 @@ import { CLIENT } from '$config/frontend';
 import { DIALOGS } from '$constants/dialogs';
 import { IRootState } from "$redux/user/reducer";
 import { Tooltip } from "$components/panels/Tooltip";
+import { TitleDialog } from "$components/dialogs/TitleDialog";
 
 interface Props extends IRootState {
   userLogout: typeof userLogout,
@@ -64,8 +65,6 @@ export class Component extends React.PureComponent<Props, State> {
 
   setMenuOpened = () => this.setState({ menuOpened: !this.state.menuOpened });
   openMapsDialog = () => {
-    // this.props.setDialog(DIALOGS.MAP_LIST);
-    // this.props.setDialogActive(this.props.dialog !== DIALOGS.MAP_LIST);
     this.props.openMapDialog('mine');
   };
 
@@ -96,6 +95,7 @@ export class Component extends React.PureComponent<Props, State> {
 
     return (
       <div>
+        <TitleDialog />
         <div className="panel active panel-user">
           <div className="user-panel">
             {

src/index.tsx

@@ -2,8 +2,6 @@
 
   ## BUGS
 
-
-
   ## FEATURES
   todo refactor reducer to use is_ prefix for editing and etc (mb move them to status object)
   todo tower sticker

src/styles/panel.less

@@ -615,3 +615,32 @@
     width: 100%;
   }
 }
+
+.title-dialog {
+  position: fixed;
+  left: 10px;
+  bottom: 68px;
+  width: 340px;
+  z-index: 2;
+  opacity: 0.5;
+  transition: opacity 500ms;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .title-dialog-pane {
+    padding: 10px;
+    background: #111111;
+    color: fade(white, 50%);
+    font-size: 13px;
+
+    h2 {
+      margin: 0;
+      padding: 0 5px 0 0;
+      font-weight: 400;
+      font-size: 1.6em;
+      color: white;
+    }
+  }
+}