mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 11:06:40 +07:00
dialog-editor: menu for items
This commit is contained in:
muerwre
parent
b8f4bace71
commit
a2607b257d
4 changed files with 189 additions and 115 deletions
|
|
@ -18,7 +18,7 @@ import { Icon } from '$components/panels/Icon';
|
|||
import { pushPath } from '$utils/history';
|
||||
import { IRootState, IRouteListItem } from '$redux/user/reducer';
|
||||
|
||||
interface Props extends IRootState {
|
||||
export interface IMapListDialogProps extends IRootState {
|
||||
marks: { [x: number]: string },
|
||||
routes_sorted: Array<IRouteListItem>,
|
||||
|
||||
|
|
@ -29,17 +29,33 @@ interface Props extends IRootState {
|
|||
setDialogActive: typeof setDialogActive,
|
||||
}
|
||||
|
||||
interface State {
|
||||
editing_item: IRouteListItem['_id'],
|
||||
export interface IMapListDialogState {
|
||||
selected_item: IRouteListItem['_id'],
|
||||
selected_item_mode: 'menu' | 'edit' | 'drop' | null,
|
||||
}
|
||||
|
||||
class Component extends React.Component<Props, State> {
|
||||
class Component extends React.Component<IMapListDialogProps, IMapListDialogState> {
|
||||
state = {
|
||||
editing_item: null,
|
||||
selected_item: null,
|
||||
selected_item_mode: null,
|
||||
};
|
||||
|
||||
startEditing = editing_item => this.setState({ editing_item });
|
||||
stopEditing = () => this.setState({ editing_item: null });
|
||||
startEditing = (selected_item: IRouteListItem['_id']): void => this.setState({
|
||||
selected_item: ((this.state.selected_item !== selected_item && selected_item) || null),
|
||||
selected_item_mode: 'edit',
|
||||
});
|
||||
|
||||
showMenu = (selected_item: IRouteListItem['_id']): void => this.setState({
|
||||
selected_item: ((this.state.selected_item !== selected_item && selected_item) || null),
|
||||
selected_item_mode: 'menu',
|
||||
});
|
||||
|
||||
showDropCard = (selected_item: IRouteListItem['_id']): void => this.setState({
|
||||
selected_item: ((this.state.selected_item !== selected_item && selected_item) || null),
|
||||
selected_item_mode: 'drop',
|
||||
});
|
||||
|
||||
stopEditing = (): void => this.setState({ selected_item: null });
|
||||
|
||||
setTitle = ({ target: { value } }: { target: { value: string }}): void => {
|
||||
this.props.searchSetTitle(value);
|
||||
|
|
@ -79,9 +95,9 @@ class Component extends React.Component<Props, State> {
|
|||
}
|
||||
},
|
||||
marks,
|
||||
}: Props = this.props;
|
||||
}: IMapListDialogProps = this.props;
|
||||
|
||||
const { editing_item } = this.state;
|
||||
const { selected_item, selected_item_mode } = this.state;
|
||||
|
||||
return (
|
||||
<div className="dialog-content">
|
||||
|
|
@ -156,10 +172,13 @@ class Component extends React.Component<Props, State> {
|
|||
_id={route._id}
|
||||
is_public={route.is_public}
|
||||
tab={tab}
|
||||
is_editing={(editing_item === route._id)}
|
||||
selected={(selected_item === route._id)}
|
||||
mode={selected_item_mode}
|
||||
openRoute={this.openRoute}
|
||||
startEditing={this.startEditing}
|
||||
stopEditing={this.stopEditing}
|
||||
showMenu={this.showMenu}
|
||||
showDropCard={this.showDropCard}
|
||||
key={route._id}
|
||||
/>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -2,31 +2,37 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from '$components/panels/Icon';
|
||||
import classnames from 'classnames';
|
||||
import { IMapListDialogState, MapListDialog } from "$components/dialogs/MapListDialog";
|
||||
import { Tooltip } from "$components/panels/Tooltip";
|
||||
|
||||
interface Props {
|
||||
_id: string,
|
||||
tab: string,
|
||||
is_editing: boolean,
|
||||
selected: boolean,
|
||||
title: string,
|
||||
distance: number,
|
||||
is_public: boolean,
|
||||
mode: IMapListDialogState['selected_item_mode'],
|
||||
|
||||
openRoute: (_id: string) => void,
|
||||
startEditing: (_id: string) => void,
|
||||
stopEditing: () => void,
|
||||
openRoute: typeof MapListDialog.openRoute,
|
||||
startEditing: typeof MapListDialog.startEditing,
|
||||
stopEditing: typeof MapListDialog.stopEditing,
|
||||
showMenu: typeof MapListDialog.showMenu,
|
||||
showDropCard: typeof MapListDialog.showDropCard,
|
||||
key: string,
|
||||
}
|
||||
|
||||
export const RouteRow = ({
|
||||
title, distance, _id, openRoute, tab, is_editing, startEditing
|
||||
title, distance, _id, openRoute, tab, selected, startEditing, showMenu, showDropCard, mode
|
||||
}: Props) => (
|
||||
<div className={classnames('route-row-wrapper', { is_editing })}>
|
||||
{
|
||||
tab === 'mine' &&
|
||||
<div className="route-row-edit" onClick={() => startEditing(_id)}>
|
||||
<Icon icon="icon-edit-1" />
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
className={classnames('route-row-wrapper', {
|
||||
selected,
|
||||
has_menu: selected && mode === 'menu',
|
||||
has_drop: selected && mode === 'drop',
|
||||
has_edit: selected && mode === 'edit',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className="route-row"
|
||||
>
|
||||
|
|
@ -45,17 +51,19 @@ export const RouteRow = ({
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="route-row-panel">
|
||||
<div className="">
|
||||
<Icon icon="icon-trash-4" size={24} />
|
||||
Удалить
|
||||
</div>
|
||||
<div className="flex_1 justify-end" onClick={() => startEditing(_id)}>
|
||||
<Icon icon="icon-edit-1" size={24} />
|
||||
Правка
|
||||
<div className="route-row-edit-button pointer" onClick={() => showMenu(_id)}>
|
||||
<Icon icon="icon-more-vert" />
|
||||
<div className="route-row-edit-menu">
|
||||
<div onClick={() => showDropCard(_id)}>
|
||||
<Tooltip>Удалить</Tooltip>
|
||||
<Icon icon="icon-trash-3" size={32} />
|
||||
</div>
|
||||
<div onClick={() => startEditing(_id)}>
|
||||
<Tooltip>Редактировать</Tooltip>
|
||||
<Icon icon="icon-edit-1" size={32} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -379,6 +379,11 @@
|
|||
<circle cx="16" cy="16" fill="white" r="4" />
|
||||
</g>
|
||||
|
||||
<g id="icon-more-vert" stroke="none">
|
||||
<path stroke="none" fill="black"/>
|
||||
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="white" stroke="none" stroke-width="0" transform="translate(4 4)"/>
|
||||
</g>
|
||||
|
||||
<g id="icon-cluster-1" stroke="none">
|
||||
<rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
|
||||
<circle cx="10" cy="21" fill="white" r="4" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
|
@ -187,34 +187,35 @@
|
|||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
|
||||
//&:hover {
|
||||
// .route-row { transform: translateX(-58px); }
|
||||
// .route-row-edit { transform: translateX(-58px); }
|
||||
//
|
||||
// &.is_editing {
|
||||
// .route-row { transform: translateX(0); }
|
||||
// .route-row-edit { transform: translateX(0); }
|
||||
// }
|
||||
//}
|
||||
|
||||
&.is_editing {
|
||||
&.has_edit {
|
||||
//transform: translateY(-2px);
|
||||
.route-row { background: rgba(255, 100, 100, 0.2); }
|
||||
}
|
||||
|
||||
&.has_menu {
|
||||
.route-row {
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.route-row-editor {
|
||||
color: white;
|
||||
padding: 20px 0 5px;
|
||||
.route-row-edit-menu {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.route-row-buttons {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
//
|
||||
//.route-row-editor {
|
||||
// color: white;
|
||||
// padding: 20px 0 5px;
|
||||
//}
|
||||
//
|
||||
//.route-row-buttons {
|
||||
// flex: 1;
|
||||
// flex-direction: row;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
//}
|
||||
|
||||
.route-row {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
|
@ -224,6 +225,7 @@
|
|||
cursor: pointer;
|
||||
transition: background 250ms, transform 500ms;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -236,58 +238,98 @@
|
|||
}
|
||||
}
|
||||
|
||||
.route-row-panel {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background: mix(@dialog_background, white, 80%);
|
||||
border-radius: 0 0 @panel_radius @panel_radius;
|
||||
z-index: 1;
|
||||
transform: scaleY(0);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: transform 250ms;
|
||||
transform-origin: 0 0;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
// display: flex;
|
||||
align-items: center;
|
||||
fill: white;
|
||||
|
||||
display: none;
|
||||
|
||||
& > div {
|
||||
.route-row-edit-button {
|
||||
width: 32px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
fill: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit {
|
||||
fill: rgba(255, 255, 255, 0.3);
|
||||
right: -48px;
|
||||
padding-left: 0px;
|
||||
stroke: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 58px;
|
||||
height: 100%;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
transition: all 250ms;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
fill: @green_secondary;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-menu {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
right: 100%;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 500ms;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: fade(@red_secondary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//.route-row-panel {
|
||||
// position: absolute;
|
||||
// top: 100%;
|
||||
// height: 32px;
|
||||
// width: 100%;
|
||||
// left: 0;
|
||||
// background: mix(@dialog_background, white, 80%);
|
||||
// border-radius: 0 0 @panel_radius @panel_radius;
|
||||
// z-index: 1;
|
||||
// transform: scaleY(0);
|
||||
// pointer-events: none;
|
||||
// touch-action: none;
|
||||
// transition: transform 250ms;
|
||||
// transform-origin: 0 0;
|
||||
// padding: 0 5px;
|
||||
// box-sizing: border-box;
|
||||
// // display: flex;
|
||||
// align-items: center;
|
||||
// fill: white;
|
||||
//
|
||||
// display: none;
|
||||
//
|
||||
// & > div {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
//
|
||||
// svg {
|
||||
// margin-right: 2px;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.route-row-edit {
|
||||
// fill: rgba(255, 255, 255, 0.3);
|
||||
// right: -48px;
|
||||
// padding-left: 0px;
|
||||
// stroke: none;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// width: 58px;
|
||||
// height: 100%;
|
||||
// transition: all 500ms;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// cursor: pointer;
|
||||
//
|
||||
// &:hover {
|
||||
// fill: @green_secondary;
|
||||
// }
|
||||
//}
|
||||
|
||||
.route-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue