icons and toolbars

This commit is contained in:
muerwre 2018-09-03 15:09:38 +07:00
parent 2375bc3f57
commit 13c5ae08d9
4 changed files with 25 additions and 16 deletions

View file

@ -46,15 +46,15 @@ export class EditorPanel extends React.PureComponent {
<LogoPreview logo={logo} /> <LogoPreview logo={logo} />
<div className={classnames('panel right', { active: editing })}> <div className="control-dist">
<div className="control-dist"> {totalDistance} км
{totalDistance} км <Icon icon="icon-cycle" size={32} />
<Icon icon="icon-cycle" size={32} /> {
{ <span>{toHours(estimateTime)}</span>
<span>{toHours(estimateTime)}</span> }
} </div>
</div>
<div className={classnames('panel right', { active: editing })}>
<div className="control-bar"> <div className="control-bar">
<button <button
className={classnames({ active: mode === MODES.ROUTER })} className={classnames({ active: mode === MODES.ROUTER })}
@ -125,8 +125,8 @@ export class EditorPanel extends React.PureComponent {
<div className={classnames('panel right', { active: !editing })}> <div className={classnames('panel right', { active: !editing })}>
<div className="control-bar"> <div className="control-bar">
<button className="success single" onClick={this.startEditing}> <button className="primary single" onClick={this.startEditing}>
<Icon icon="icon-router" /> <Icon icon="icon-route-2" />
<span> <span>
РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ
</span> </span>

View file

@ -200,7 +200,8 @@ export class Editor {
const { path } = getUrlData(); const { path } = getUrlData();
pushPath(`/${path}/edit`); pushPath(`/${path}/edit`);
this.poly.poly.enableEdit(); if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit();
this.stickers.startEditing(); this.stickers.startEditing();
this.setEditing(true); this.setEditing(true);
}; };

View file

@ -64,9 +64,9 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
position: fixed; position: fixed;
top: 80px; top: 10px;
left: 10px; left: 10px;
border-radius: 2px; border-radius: 2px 0 0 2px;
z-index: 3; z-index: 3;
box-shadow: @bar_shadow; box-shadow: @bar_shadow;
cursor: pointer; cursor: pointer;
@ -110,3 +110,7 @@
position: absolute; position: absolute;
} }
} }
.leaflet-top {
top: 42px;
}

View file

@ -6,16 +6,20 @@
} }
.control-dist { .control-dist {
height: 44px;
background: #222222; background: #222222;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 3px 0 0 3px;
font-weight: 200; font-weight: 200;
color: #cccccc; color: #cccccc;
user-select: none; user-select: none;
box-shadow: @bar_shadow; box-shadow: @bar_shadow;
position: fixed;
top: 10px;
left: 42px;
z-index: 2;
height: 32px;
border-radius: 0 3px 3px 0;
svg { svg {
fill: #cccccc; fill: #cccccc;
@ -101,7 +105,7 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
&.success { &.danger {
background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat; background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }