fixed est time display

src/components/panels/EditorPanel.jsx

@@ -42,9 +42,16 @@ export class EditorPanel extends React.PureComponent {
 
         <div className="panel right">
           <div className="control-dist">
-            {totalDistance} км
+            {(totalDistance > 0)
-            {
+              ?
-              (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
+                <React.Fragment>
+                  {totalDistance} км
+                  <Icon icon="icon-cycle" size={32} />
+                  {
+                    (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
+                  }
+                </React.Fragment>
+              : <div>Начните рисовать --&gt;</div>
             }
           </div>
           <div className="control-bar">

src/sprites/icon.svg

@@ -56,5 +56,66 @@
             <rect fill="black" width="2.74" height="5.038" x="14.63" y="14.411" stroke-width="3.603" />
             <path fill="black" d="M16.866 19.73l-4.315-.06-4.314.06 2.209-3.707 2.105-3.766 2.106 3.766z" transform="matrix(.45903 -.40628 .79506 .23456 -3.467 21.088)"/>
         </g>
+
+        <svg xmlns="http://www.w3.org/2000/svg" id="svg8" width="600" height="32">
+            <g id="g4853" transform="translate(-29.985 30.509)">
+                <rect id="rect4832" width="4.035" height="1.75" x="16.495" y="-28.417" fill="#fff" stroke-opacity=".941" stroke-width=".115" rx="0" ry="0"/>
+                <path id="rect4834" fill="#fff" stroke-opacity=".941" stroke-width=".247" d="M15.535-28.417h5.616v.933h-5.616z"/>
+                <path id="rect4836" fill="#fff" stroke-opacity=".941" stroke-width=".293" d="M16.495-29.706v1.29h.671v-.761h2.66v.76h.67v-1.29z"/>
+                <path id="path4841" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width=".753" d="M16.886-27.49c.092.03-.101 1.171.111 2.499.213 1.328-.477 1.846-.477 1.846"/>
+                <path id="path4843" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width=".753" d="M18.496-27.49c.093.03-.101 1.171.112 2.499.212 1.328-.478 1.846-.478 1.846"/>
+                <path id="path4845" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width=".753" d="M20.107-27.49c.092.03-.102 1.171.111 2.499s-.477 1.846-.477 1.846"/>
+            </g>
+            <g id="g4909" transform="translate(-.054 .888)">
+                <path id="rect4855" fill="#fff" stroke-opacity=".941" stroke-width=".811" d="M16.272-27.384h4.266l-.397 4.3h-3.538z"/>
+                <path id="rect4857" fill="#fff" stroke-opacity=".941" stroke-width=".43" d="M15.809-28.939h5.192v.992h-5.192z"/>
+                <path id="rect4879" fill="#fff" stroke-opacity=".941" stroke-width=".502" d="M17.246-29.945v1.123h.586v-.66h1.005v.66h.587v-1.123z"/>
+                <g id="g4900">
+                    <path id="path4885" fill-rule="evenodd" stroke-width=".265" d="M16.885-26.893l.187 3.508h.538l-.14-3.508z"/>
+                    <path id="path4887" fill-rule="evenodd" stroke-width=".265" d="M19.983-26.893l-.187 3.508h-.538l.14-3.508z"/>
+                    <path id="rect4889" stroke-opacity=".941" stroke-width=".821" d="M18.165-26.881h.538v3.473h-.538z"/>
+                </g>
+            </g>
+            <g id="icon-save" stroke-opacity=".941" transform="translate(-64)">
+                <path id="rect4766" stroke-width=".265" d="M0 0h32v32H0z"/>
+                <path id="rect4986" fill="#fff" stroke-width="2.491" d="M6.844 8.459V24h18.312V11.375H14.031V8.459z"/>
+                <rect id="rect4991" width="2.74" height="5.038" x="14.63" y="14.411" stroke-width="3.603" rx="0" ry="0"/>
+                <path id="path4993" stroke-width="3" d="M16.866 19.73l-4.315-.06-4.314.06 2.209-3.707 2.105-3.766 2.106 3.766z" transform="matrix(.45903 -.40628 .79506 .23456 -3.467 21.088)"/>
+            </g>
+            <g id="g4982" stroke-opacity=".941" transform="translate(-32)">
+                <path id="rect4964" stroke-width=".265" d="M0 0h32v32H0z"/>
+                <g id="g4980" transform="matrix(3.77953 0 0 3.77953 .002 -.002)">
+                    <path id="rect4966" fill="#fff" stroke-width=".794" d="M2.783 3.626h2.923v2.923H2.783z"/>
+                    <path id="rect4968" fill="#fff" stroke-width=".794" d="M2.479 2.597h3.508v.748H2.479z"/>
+                    <path id="rect4970" fill="#fff" stroke-width=".794" d="M3.438 1.919h1.473v.865H3.438z"/>
+                    <path id="rect4972" stroke-width=".684" d="M3.859 2.25h.631v.386h-.631z"/>
+                    <path id="rect4974" stroke-width="1.442" d="M3.134 3.906h.468v2.315h-.468z"/>
+                    <path id="rect4976" stroke-width="1.405" d="M-4.537 3.906h.444v2.315h-.444z" transform="scale(-1 1)"/>
+                    <path id="rect4978" stroke-width="1.405" d="M4.958 3.906h.444v2.315h-.444z"/>
+                </g>
+            </g>
+            <g id="g5188" transform="translate(-96)">
+                <path id="rect5180" stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z"/>
+                <g id="g5322" fill="#fff" transform="translate(7.066 7.065) scale(.04494)">
+                    <path id="path5267" stroke-width="445.017" d="M313.1 147.875c-6.057 0-11.962.654-17.661 1.871l-15.805-53.435 37.842-2.565a9.275 9.275 0 0 1 9.602 6.932 9.246 9.246 0 0 1-1.45 7.728 9.243 9.243 0 0 1-6.865 3.834l-9.126.652a6.5 6.5 0 0 0-6.02 6.947c.256 3.581 3.361 6.289 6.947 6.02l9.126-.652a22.21 22.21 0 0 0 16.493-9.21 22.21 22.21 0 0 0 3.484-18.566c-2.677-10.375-12.376-17.364-23.069-16.654l-45.936 3.114a6.5 6.5 0 0 0-5.793 8.329l6.405 21.656H145.477l-6.316-12H155.5a6.5 6.5 0 1 0 0-13h-47a6.5 6.5 0 1 0 0 13h16.086l9.542 18.349-18.836 33.485a84.026 84.026 0 0 0-30.792-5.834c-46.593 0-84.5 37.906-84.5 84.5s37.907 84.5 84.5 84.5c44.404 0 80.892-34.436 84.225-78h31.776a6.5 6.5 0 0 0 5.511-3.055l68.779-110.047 8.185 27.672c-31.758 12.162-54.376 42.945-54.376 78.93 0 46.594 37.907 84.5 84.5 84.5s84.5-37.906 84.5-84.5-37.907-84.501-84.5-84.501zm-228.6 156c-39.425 0-71.5-32.075-71.5-71.5s32.075-71.5 71.5-71.5c8.549 0 16.75 1.513 24.355 4.276l-31.482 55.968c-3.726 2.365-6.206 6.516-6.206 11.256 0 7.363 5.969 13.333 13.333 13.333 5.002 0 9.354-2.759 11.636-6.833h59.556c-3.297 36.388-33.959 65-71.192 65zm11.636-78a13.384 13.384 0 0 0-4.025-4.439l28.528-50.717c19.37 11.397 32.922 31.647 35.052 55.156zm72.589 0c-2.17-28.365-18.393-52.845-41.715-66.482l14.327-25.471 48.396 91.953zm32.258-6.538l-48.665-92.462h106.454zM313.1 303.875c-39.425 0-71.5-32.075-71.5-71.5 0-30.093 18.697-55.885 45.077-66.418l16.89 57.105a13.284 13.284 0 0 0-3.8 9.313c0 7.363 5.969 13.333 13.333 13.333s13.333-5.97 13.333-13.333c0-6.354-4.449-11.661-10.399-12.999l-16.895-57.123a71.624 71.624 0 0 1 13.962-1.378c39.425 0 71.5 32.075 71.5 71.5s-32.076 71.5-71.501 71.5z"/>
+                </g>
+            </g>
+
+            <g id="icon-cycle">
+                <path fill="black" d="M0 0h32v32H0z"/>
+                <g id="g5604" fill="#fff" transform="matrix(-.36615 0 0 .36615 24.543 7.457)">
+                    <g id="g5527">
+                        <g id="g5495">
+                            <path id="path5483" d="M37.687 24.66c-4.945 0-8.973 4.025-8.973 8.975 0 4.95 4.026 8.974 8.973 8.974 4.95 0 8.977-4.024 8.977-8.974s-4.027-8.975-8.977-8.975zm0 15.384a6.417 6.417 0 0 1-6.409-6.409 6.418 6.418 0 0 1 6.409-6.41 6.417 6.417 0 0 1 6.411 6.41 6.417 6.417 0 0 1-6.411 6.409z"/>
+                            <path id="path5485" d="M23.588 15.501v.01h8.047c-2.375-2.4-5.273-5.251-5.99-5.578-1.257-.575-3.966 1.462-4.547 1.748-.532.283-.954.699-1.043 1.236l-2.112 5.927-6.167.069c-1.811.485-.465 2.065-.465 2.065l3.097.041-.295 1.405-1.803 2.989a8.914 8.914 0 0 0-3.333-.648C4.027 24.765 0 28.792 0 33.741c0 4.947 4.026 8.974 8.977 8.974 4.948 0 8.975-4.026 8.975-8.974a8.956 8.956 0 0 0-3.423-7.038l2.005-3.326.487-2.322 2.41.03c.479-.136.833-.538.912-1.029l2.603-4.074zM15.386 33.74a6.417 6.417 0 0 1-6.409 6.409c-3.534 0-6.411-2.876-6.411-6.409a6.419 6.419 0 0 1 6.411-6.411c.694 0 1.36.114 1.986.32l-3.579 5.939 2.197 1.323 3.607-5.989a6.386 6.386 0 0 1 2.198 4.818z"/>
+                            <path id="path5487" d="M32.24 23.139s2.468-2.578 2.691-2.968c.225-.392.229-.872.007-1.265 0 0-.725-.76-1.771-1.832v.014h-8.949l4.281 3.716-6.367 9.947a1.264 1.264 0 0 0-.104 1.045l2.563 7.692 3.072-.17-1.741-7.787z"/>
+                            <circle id="circle5489" cx="19.703" cy="7.384" r="3.435"/>
+                            <path id="path5491" d="M32.845 5.919c-1.06-.744-2.366-.789-3.123-.034l-1.484 1.487c-.756.756-.711 2.062.03 3.124z"/>
+                            <path id="path5493" d="M33.007 15.317c1.116 1.116 2.73 1.311 3.607.436l1.485-1.488c.877-.876.685-2.491-.434-3.606l-4.081-4.081-4.659 4.658z"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </svg>
     </defs>
 </svg>

src/sprites/icons_draft.svg

@@ -26,11 +26,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:zoom="11.313708"
+     inkscape:zoom="1"
-     inkscape:cx="5.084605"
+     inkscape:cx="2.6244114"
-     inkscape:cy="9.8831408"
+     inkscape:cy="33.722"
      inkscape:document-units="px"
-     inkscape:current-layer="svg8"
+     inkscape:current-layer="g5360"
      showgrid="false"
      inkscape:window-width="1920"
      inkscape:window-height="1036"
@@ -326,7 +326,7 @@
     </g>
   </g>
   <g
-     id="icon-cycle">
+     id="g5360">
     <rect
        y="0"
        x="0"

src/styles/panel.less

@@ -12,6 +12,13 @@
   display: flex;
   align-items: center;
   border-radius: 3px 0 0 3px;
+  font-weight: 200;
+  color: #cccccc;
+  user-select: none;
+
+  svg {
+    fill: #cccccc;
+  }
 }
 
 .control-sep {

src/utils/time.js

@@ -1,5 +1,6 @@
 export const toHours = (info) => {
-  const hrs = parseInt(Number(info));
+  const hrs = parseInt(Number(info), 10);
-  const min = Math.round((Number(info)-hrs) * 60);
+  const min = Math.round((Number(info) - hrs) * 60);
-  return hrs+':'+min;
+  const lmin = min < 10 ? '0' + min : min;
-}
+  return `${hrs}:${lmin}`;
+};