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

edit route icon proposal

Browse source
This commit is contained in:
muerwre 2019-02-07 17:03:59 +07:00
parent bc98faa9f2
commit 4b96a1bc4f
3 changed files with 57 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/dialogs/MapListDialog.jsx
View file

@ -138,6 +138,7 @@ class Component extends React.Component<Props> {
{...route} {...route}
key={route._id} key={route._id}
openRoute={this.openRoute} openRoute={this.openRoute}
tab={tab}
/> />
)) ))
} }

39
src/components/maps/RouteRow.jsx
View file

@ -13,24 +13,29 @@ type Props = {
}; };
export const RouteRow = ({ export const RouteRow = ({
title, distance, created_at, _id, editing, openRoute, title, distance, _id, openRoute, tab,
}: Props) => ( }: Props) => (
<div <div className="route-row-wrapper">
className="route-row" <div
onClick={() => openRoute(_id)} className="route-row"
> onClick={() => openRoute(_id)}
<div className="route-title"> >
{title || _id} <div className="route-row-edit">
</div> <Icon icon="icon-edit-1" />
<div className="route-description"> </div>
<span> <div className="route-title">
<Icon icon="icon-link-1" /> {title || _id}
{_id} </div>
</span> <div className="route-description">
<span> <span>
<Icon icon="icon-cycle-1" /> <Icon icon="icon-link-1" />
{(distance && `${distance} km`) || '0 km'} {_id}
</span> </span>
<span>
<Icon icon="icon-cycle-1" />
{(distance && `${distance} km`) || '0 km'}
</span>
</div>
</div> </div>
</div> </div>
); );

36
src/styles/dialogs.less
View file

@ -110,8 +110,8 @@
} }
.dialog-maplist { .dialog-maplist {
padding: 10px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 0 0 0;
} }
@keyframes pulse { @keyframes pulse {
@ -162,6 +162,20 @@
} }
} }
.route-row-wrapper {
overflow: hidden;
padding: 0 10px;
&:hover {
.route-row {
transform: translateX(-48px);
}
.route-row-edit {
opacity: 1;
}
}
}
.route-row { .route-row {
margin-bottom: 10px; margin-bottom: 10px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
@ -169,13 +183,30 @@
color: white; color: white;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
transition: background-color 250ms; transition: background 250ms, transform 500ms;
position: relative;
&:hover { &:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
} }
.route-row-edit {
fill: rgba(0, 0, 0, 0.5);
left: 100%;
stroke: none;
position: absolute;
top: 0;
width: 58px;
background: rgba(255, 255, 255, 0.2);
height: 100%;
opacity: 0;
transition: all 500ms;
display: flex;
align-items: center;
justify-content: center;
}
.route-title { .route-title {
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
@ -183,6 +214,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
position: relative;
} }
.route-description { .route-description {