edit route icon proposal

src/components/dialogs/MapListDialog.jsx

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

src/components/maps/RouteRow.jsx

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

src/styles/dialogs.less

@@ -110,8 +110,8 @@
 }
 
 .dialog-maplist {
-  padding: 10px;
   box-sizing: border-box;
+  padding: 10px 0 0 0;
 }
 
 @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 {
   margin-bottom: 10px;
   background: rgba(255, 255, 255, 0.05);
@@ -169,13 +183,30 @@
   color: white;
   user-select: none;
   cursor: pointer;
-  transition: background-color 250ms;
+  transition: background 250ms, transform 500ms;
+  position: relative;
 
   &:hover {
     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 {
   margin-bottom: 5px;
   font-weight: bold;
@@ -183,6 +214,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  position: relative;
 }
 
 .route-description {