muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

panel buttons tooltips

Browse source
This commit is contained in:
muerwre 2019-02-19 11:02:10 +07:00
parent a0296f6332
commit 9321f41cd5
9 changed files with 82 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/panels/DistanceBar.tsx
View file

@ -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<Props, State> {
return (
<React.Fragment>
<div className="status-bar padded desktop-only pointer" onClick={this.toggleDialog}>
<div className="status-bar padded desktop-only pointer tooltip-container" onClick={this.toggleDialog}>
{distance} км&nbsp;
<Tooltip position="top">Примерное время</Tooltip>
<Icon icon="icon-cycle" size={32} />
{
<span>{toHours(estimated)}</span>

5
src/components/panels/EditorPanel.tsx
View file

@ -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<Props, void> {
className={classnames({ active: mode === MODES.ROUTER })}
onClick={this.startRouterMode}
>
<Tooltip>Автоматический маршрут</Tooltip>
<Icon icon="icon-route-2" />
</button>
<button
className={classnames({ active: mode === MODES.POLY })}
onClick={this.startPolyMode}
>
<Tooltip>Редактирование маршрута</Tooltip>
<Icon icon="icon-poly-3" />
</button>
<button
className={classnames({ active: (mode === MODES.STICKERS || mode === MODES.STICKERS_SELECT) })}
onClick={this.startStickerMode}
>
<Tooltip>Точки маршрута</Tooltip>
<Icon icon="icon-sticker-3" />
</button>
@ -80,6 +84,7 @@ class Component extends React.PureComponent<Props, void> {
className={classnames({ active: mode === MODES.TRASH })}
onClick={this.startTrashMode}
>
<Tooltip>Удаление элементов</Tooltip>
<Icon icon="icon-trash-4" />
</button>
</div>

8
src/components/panels/Tooltip.tsx Normal file
View file

@ -0,0 +1,8 @@
import * as React from 'react';
import classnames from 'classnames';
export const Tooltip = ({ children, position = 'bottom' }: { children: string, position?: string }) => (
<div className={classnames('panel-tooltip', { top: position === 'top' })}>
{children}
</div>
);

1
src/components/panels/TopLeftPanel.tsx
View file

@ -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 = () => (
<div className="status-panel top left">

12
src/components/panels/TopRightPanel.tsx
View file

@ -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 = ({
<div className="status-panel top right">
{
editing && !markers_shown &&
<div className="status-bar pointer top-control padded warning icon-only">
<div className="status-bar pointer top-control padded warning icon-only tooltip-container">
<Icon icon="icon-eye-1" size={24} />
<div className="status-bar-tip">Приблизьте, чтобы редактировать кривую</div>
<Tooltip position="top">Приблизьте, чтобы редактировать кривую</Tooltip>
</div>
}
<div className="status-bar pointer top-control padded" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
<div className="status-bar pointer top-control padded tooltip-container" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
<Tooltip position="top">Стиль карты</Tooltip>
<Icon icon="icon-map-1" size={24} />
<div className="status-bar-sep" />
<span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
</div>
<div className="status-bar pointer top-control padded" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
<div className="status-bar pointer top-control padded tooltip-container" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
<Tooltip position="top">Логотип</Tooltip>
<Icon icon="icon-logo-3" size={24} />
<div className="status-bar-sep" />
<span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>

4
src/components/panels/UserPanel.tsx
View file

@ -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<Props, State> {
})}
onClick={this.openMapsDialog}
>
<Tooltip>Каталог маршрутов</Tooltip>
<Icon icon="icon-folder-1" />
</button>
</div>
@ -132,6 +134,7 @@ export class Component extends React.PureComponent<Props, State> {
className={classnames({ active: false })}
onClick={this.props.takeAShot}
>
<Tooltip>Снимок карты</Tooltip>
<Icon icon="icon-shot-4" />
</button>
</div>
@ -145,6 +148,7 @@ export class Component extends React.PureComponent<Props, State> {
className={classnames({ active: false })}
onClick={this.props.getGPXTrack}
>
<Tooltip>Экспорт GPX</Tooltip>
<Icon icon="icon-gpx-1" />
</button>
</div>