muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +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>

13
src/index.tsx
View file

@ -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

2
src/styles/colors.less
View file

@ -26,3 +26,5 @@
@mobile_breakpoint: 768px;
@micro_breakpoint: 390px;
@tooltip_backgroud: #123740;

45
src/styles/panel.less
View file

@ -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;