From 9321f41cd57dc7d9e01c2738a0d3ffb6b97ce9ff Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 19 Feb 2019 11:02:10 +0700 Subject: [PATCH] panel buttons tooltips --- src/components/panels/DistanceBar.tsx | 4 ++- src/components/panels/EditorPanel.tsx | 5 +++ src/components/panels/Tooltip.tsx | 8 +++++ src/components/panels/TopLeftPanel.tsx | 1 + src/components/panels/TopRightPanel.tsx | 12 ++++--- src/components/panels/UserPanel.tsx | 4 +++ src/index.tsx | 13 ++++--- src/styles/colors.less | 2 ++ src/styles/panel.less | 45 +++++++++++++++++++++++++ 9 files changed, 82 insertions(+), 12 deletions(-) create mode 100644 src/components/panels/Tooltip.tsx diff --git a/src/components/panels/DistanceBar.tsx b/src/components/panels/DistanceBar.tsx index 2918d45..61c30de 100644 --- a/src/components/panels/DistanceBar.tsx +++ b/src/components/panels/DistanceBar.tsx @@ -7,6 +7,7 @@ import Slider from 'rc-slider'; import { bindActionCreators } from 'redux'; import { setSpeed } from '$redux/user/actions'; import { IRootState } from "$redux/user/reducer"; +import { Tooltip } from "$components/panels/Tooltip"; interface Props extends IRootState { setSpeed: typeof setSpeed, @@ -45,8 +46,9 @@ class Component extends React.PureComponent { return ( -
+
{distance} км  + Примерное время { {toHours(estimated)} diff --git a/src/components/panels/EditorPanel.tsx b/src/components/panels/EditorPanel.tsx index 39eff9e..d245ce9 100644 --- a/src/components/panels/EditorPanel.tsx +++ b/src/components/panels/EditorPanel.tsx @@ -8,6 +8,7 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { setMode, startEditing, stopEditing, setLogo, takeAShot, keyPressed } from '$redux/user/actions'; import { IRootState } from "$redux/user/reducer"; +import { Tooltip } from "$components/panels/Tooltip"; interface Props extends IRootState { setMode: typeof setMode, @@ -56,18 +57,21 @@ class Component extends React.PureComponent { className={classnames({ active: mode === MODES.ROUTER })} onClick={this.startRouterMode} > + Автоматический маршрут @@ -80,6 +84,7 @@ class Component extends React.PureComponent { className={classnames({ active: mode === MODES.TRASH })} onClick={this.startTrashMode} > + Удаление элементов
diff --git a/src/components/panels/Tooltip.tsx b/src/components/panels/Tooltip.tsx new file mode 100644 index 0000000..dd75408 --- /dev/null +++ b/src/components/panels/Tooltip.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import classnames from 'classnames'; + +export const Tooltip = ({ children, position = 'bottom' }: { children: string, position?: string }) => ( +
+ {children} +
+); diff --git a/src/components/panels/TopLeftPanel.tsx b/src/components/panels/TopLeftPanel.tsx index c2ac192..26d92ef 100644 --- a/src/components/panels/TopLeftPanel.tsx +++ b/src/components/panels/TopLeftPanel.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { UserLocation } from '$components/UserLocation'; import { DistanceBar } from '$components/panels/DistanceBar'; +import { Tooltip } from "$components/panels/Tooltip"; export const TopLeftPanel = () => (
diff --git a/src/components/panels/TopRightPanel.tsx b/src/components/panels/TopRightPanel.tsx index 3b3278c..f4f65d4 100644 --- a/src/components/panels/TopRightPanel.tsx +++ b/src/components/panels/TopRightPanel.tsx @@ -8,6 +8,8 @@ import { connect } from 'react-redux'; import { MODES } from '$constants/modes'; import { IRootState } from "$redux/user/reducer"; +import { Tooltip } from "$components/panels/Tooltip"; + interface Props extends IRootState { startProviderMode: () => void, startLogoMode: () => void, @@ -20,18 +22,20 @@ const Component = ({
{ editing && !markers_shown && -
+
-
Приблизьте, чтобы редактировать кривую
+ Приблизьте, чтобы редактировать кривую
} -
+
+ Стиль карты
{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}
-
+
+ Логотип
{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'} diff --git a/src/components/panels/UserPanel.tsx b/src/components/panels/UserPanel.tsx index 364a62a..6a61d8a 100644 --- a/src/components/panels/UserPanel.tsx +++ b/src/components/panels/UserPanel.tsx @@ -13,6 +13,7 @@ import classnames from 'classnames'; import { CLIENT } from '$config/frontend'; import { DIALOGS } from '$constants/dialogs'; import { IRootState } from "$redux/user/reducer"; +import { Tooltip } from "$components/panels/Tooltip"; interface Props extends IRootState { is_empty: boolean, @@ -121,6 +122,7 @@ export class Component extends React.PureComponent { })} onClick={this.openMapsDialog} > + Каталог маршрутов
@@ -132,6 +134,7 @@ export class Component extends React.PureComponent { className={classnames({ active: false })} onClick={this.props.takeAShot} > + Снимок карты
@@ -145,6 +148,7 @@ export class Component extends React.PureComponent { className={classnames({ active: false })} onClick={this.props.getGPXTrack} > + Экспорт GPX
diff --git a/src/index.tsx b/src/index.tsx index 48b0428..0e692f2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,17 +14,10 @@ todo hide arrows on small zooms todo selecting logo on crop - todo tooltips for panel items - done public maps todo editing map on map list todo setting map public on map list - done map catalogue - done public maps - done map search - done map list lazy loading - todo network operations notify done delayed notify (delay(2000).then(showLoadingMsg)) todo network error notifications @@ -36,6 +29,12 @@ ## DONE + done tooltips for panel items + done map catalogue + done public maps + done map search + done map list lazy loading + done save spinner done better poly editor https://github.com/SupriyaSudhindra/leaflet-editable-polyline done update after point delete diff --git a/src/styles/colors.less b/src/styles/colors.less index 990f1e3..d2e2395 100644 --- a/src/styles/colors.less +++ b/src/styles/colors.less @@ -26,3 +26,5 @@ @mobile_breakpoint: 768px; @micro_breakpoint: 390px; + +@tooltip_backgroud: #123740; diff --git a/src/styles/panel.less b/src/styles/panel.less index fc50a3a..522b95c 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -143,6 +143,51 @@ } } +.panel-tooltip { + position: absolute; + bottom: 58px; + left: 50%; + background: @tooltip_backgroud; + padding: 10px; + transform: translateX(-50%); + border-radius: @panel_radius; + opacity: 0; + pointer-events: none; + transition: opacity 250ms; + font-size: 13px; + color: white; + + &::after { + content: ' '; + width: 10px; + height: 10px; + position: absolute; + background: @tooltip_backgroud; + bottom: 0; + transform: translate(-50%, 5px) rotate(45deg); + left: 50%; + } + + &.top { + bottom: auto; + top: 43px; + + &::after { + bottom: auto; + top: 0; + transform: translate(-50%, -5px) rotate(45deg); + } + } +} + +.panel button, .tooltip-container { + position: relative; + + &:hover .panel-tooltip { + opacity: 1; + } +} + .control-bar-counter { color: white; min-width: 12px;