From 43f4b5cda006f20e62c2022b64ef9741bef41e25 Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 7 Dec 2018 12:58:51 +0700 Subject: [PATCH] panels: map, logo top bar --- src/components/UserLocation.jsx | 2 +- src/components/dialogs/MapListDialog.jsx | 6 +- src/components/panels/EditorPanel.jsx | 46 ++++++++++--- src/containers/App.jsx | 2 - src/styles/dialogs.less | 4 +- src/styles/main.less | 4 ++ src/styles/map.less | 19 ------ src/styles/panel.less | 84 ++++++++++++++++++------ 8 files changed, 111 insertions(+), 56 deletions(-) diff --git a/src/components/UserLocation.jsx b/src/components/UserLocation.jsx index d3ee670..d43d8ef 100644 --- a/src/components/UserLocation.jsx +++ b/src/components/UserLocation.jsx @@ -64,7 +64,7 @@ export class UserLocation extends React.Component { render() { return ( -
+
); diff --git a/src/components/dialogs/MapListDialog.jsx b/src/components/dialogs/MapListDialog.jsx index 2474334..25a9b64 100644 --- a/src/components/dialogs/MapListDialog.jsx +++ b/src/components/dialogs/MapListDialog.jsx @@ -19,7 +19,11 @@ const Component = ({ routes, editing, routes_sorted }: Props) => ( Ваши маршруты
- ({routes_sorted.length} шт.) + { + routes_sorted.length > 0 + ? `${routes_sorted.length} шт.` + : '(здесь пока ничего нет)' + }
diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index d155f7c..6b25007 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/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 { 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 { -
- {distance} км - - { - { - toHours(estimated) - } - } +
+
+ +
+ +
+ {distance} км  + + { + { + toHours(estimated) + } + } +
+
+ +
+
+ +
+ {(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'} +
+ +
+ +
+ {(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'} +
{ 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, }; } diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 0393a24..b23bf1d 100644 --- a/src/containers/App.jsx +++ b/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) => (
- diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less index 1570f08..6b408f3 100644 --- a/src/styles/dialogs.less +++ b/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; diff --git a/src/styles/main.less b/src/styles/main.less index 2053747..34509a7 100644 --- a/src/styles/main.less +++ b/src/styles/main.less @@ -100,3 +100,7 @@ body { background: rgba(255, 255, 255, 0.5); } } + +.pointer { + cursor: pointer; +} diff --git a/src/styles/map.less b/src/styles/map.less index d33e638..15abd73 100644 --- a/src/styles/map.less +++ b/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; diff --git a/src/styles/panel.less b/src/styles/panel.less index 8285600..dd4a4b5 100644 --- a/src/styles/panel.less +++ b/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; +}