panels: map, logo top bar

src/components/UserLocation.jsx

@@ -64,7 +64,7 @@ export class UserLocation extends React.Component {
 
   render() {
     return (
-      <div className="locate-geo-button" onClick={this.centerMapOnLocation}>
+      <div onClick={this.centerMapOnLocation}>
         <Icon icon="icon-locate" size={30} />
       </div>
     );

src/components/dialogs/MapListDialog.jsx

@@ -19,7 +19,11 @@ const Component = ({ routes, editing, routes_sorted }: Props) => (
         Ваши маршруты
       </div>
       <div className="small gray">
-        ({routes_sorted.length} шт.)
+        {
+          routes_sorted.length > 0
+          ? `${routes_sorted.length} шт.`
+          : '(здесь пока ничего нет)'
+        }
       </div>
     </div>
     <Scroll className="dialog-shader">

src/components/panels/EditorPanel.jsx

@@ -10,7 +10,10 @@ import { LogoPreview } from '$components/logo/LogoPreview';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { setMode, startEditing, stopEditing, setLogo, takeAShot } from '$redux/user/actions';
-import type { UserType } from '$constants/types';
+
+import { UserLocation } from '$components/UserLocation';
+import { PROVIDERS } from '$constants/providers';
+import { LOGOS } from '$constants/logos';
 
 type Props = {
   editing: false,
@@ -19,6 +22,7 @@ type Props = {
   distance: Number,
   logo: String,
   estimated: Number, // todo: implement!
+  provider: String,
 
   setMode: Function,
   startEditing: Function,
@@ -46,7 +50,7 @@ class Component extends React.PureComponent<Props, void> {
 
   render() {
     const {
-      mode, distance, estimated, changed, logo, editing,
+      mode, distance, estimated, changed, logo, editing, provider,
     } = this.props;
 
     return (
@@ -54,14 +58,34 @@ class Component extends React.PureComponent<Props, void> {
 
         <LogoPreview logo={logo} />
 
-        <div className="control-dist">
+        <div className="status-panel top left">
-          {distance} км
+          <div className="status-bar square pointer pointer">
-          <Icon icon="icon-cycle" size={32} />
+            <UserLocation />
-          {
+          </div>
-            <span>{
+
-              toHours(estimated)
+          <div className="status-bar padded">
-            }</span>
+            {distance} км&nbsp;
-          }
+            <Icon icon="icon-cycle" size={32} />
+            {
+              <span>{
+                toHours(estimated)
+              }</span>
+            }
+          </div>
+        </div>
+
+        <div className="status-panel top right">
+          <div className="status-bar pointer top-control padded">
+            <Icon icon="icon-map-1" size={24} />
+            <div className="status-bar-sep" />
+            {(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}
+          </div>
+
+          <div className="status-bar pointer top-control padded">
+            <Icon icon="icon-logo-3" size={24} />
+            <div className="status-bar-sep" />
+            {(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}
+          </div>
         </div>
 
         <div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
@@ -174,6 +198,7 @@ function mapStateToProps(state) {
       title,
       address,
       changed,
+      provider,
     },
   } = state;
 
@@ -189,6 +214,7 @@ function mapStateToProps(state) {
     title,
     address,
     changed,
+    provider,
   };
 }
 

src/containers/App.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import { EditorPanel } from '$components/panels/EditorPanel';
 import { Fills } from '$components/Fills';
-import { UserLocation } from '$components/UserLocation';
 import { UserPanel } from '$components/panels/UserPanel';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -25,7 +24,6 @@ type Props = {
 const Component = (props: Props) => (
   <div>
     <Fills />
-    <UserLocation />
     <UserPanel />
     <EditorPanel />
     <Cursor mode={props.mode} />

src/styles/dialogs.less

@@ -7,9 +7,9 @@
   top: 0;
   width: 360px;
   height: 100%;
-  z-index: 3;
+  z-index: 5;
 
-  padding: 10px 10px 72px 10px;
+  padding: 10px 10px 68px 10px;
   overflow: hidden;
   box-sizing: border-box;
 

src/styles/main.less

@@ -100,3 +100,7 @@ body {
     background: rgba(255, 255, 255, 0.5);
   }
 }
+
+.pointer {
+  cursor: pointer;
+}

src/styles/map.less

@@ -67,25 +67,6 @@
   }
 }
 
-.locate-geo-button {
-  background: @bar_background;
-  width: 32px;
-  height: 32px;
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  border-radius: @panel_radius 0 0 @panel_radius;
-  z-index: 3;
-  box-shadow: @bar_shadow;
-  cursor: pointer;
-  padding: 1px;
-  box-sizing: border-box;
-
-  svg {
-    fill: white;
-  }
-}
-
 .location-marker {
   width: 20px;
   height: 3px;

src/styles/panel.less

@@ -9,27 +9,6 @@
   padding: 0 5px;
 }
 
-.control-dist {
-  background: #222222;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  font-weight: 200;
-  color: #cccccc;
-  user-select: none;
-  box-shadow: @bar_shadow;
-  position: fixed;
-  top: 10px;
-  left: 42px;
-  z-index: 2;
-  height: 32px;
-  border-radius: 0 3px 3px 0;
-
-  svg {
-    fill: #cccccc;
-  }
-}
-
 .control-sep {
   height: 44px;
   background: #222222;
@@ -336,4 +315,67 @@
   }
 }
 
+.status-panel {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  height: 32px;
+  z-index: 5;
+  display: flex;
 
+  &.bottom {
+    top: auto;
+    bottom: 68px;
+  }
+
+  &.right {
+    left: auto;
+    right: 10px;
+
+    .status-bar {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+}
+
+.status-bar {
+  background: #222222;
+  display: flex;
+  font-weight: 200;
+  color: #cccccc;
+  user-select: none;
+  border-radius: @panel_radius;
+  margin-right: 10px;
+  align-items: center;
+  justify-content: center;
+  box-shadow: @bar_shadow;
+
+  &.square {
+    width: 32px;
+  }
+
+  &.padded {
+    padding: 0 10px;
+  }
+
+  &.top-control {
+    width: 120px;
+    justify-content: flex-start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  svg {
+    fill: #cccccc;
+    margin-left: -5px;
+  }
+}
+
+.status-bar-sep {
+  height: 24px;
+  width: 1px;
+  background: #444444;
+  margin: 0 8px 0 5px;
+}