Replaced SVG with "Material-Icons" font

2018-11-23 08:24:45 -08:00 · 2018-11-23 08:24:45 -08:00 · 4645fd7e6e
commit 4645fd7e6e
parent 5ece2ccfe2
8 changed files with 40 additions and 167 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -2,7 +2,7 @@
    "parser": "babel-eslint",
    "extends": ["standard", "standard-react"],
    "rules": {
-        "max-len": [2, 400, 4],
+        "max-len": [2, 80, 4],
        "jsx-quotes": ["error", "prefer-double"],
        "padded-blocks": 0,
        "import/first": 0,
--- a/src/client/components/Toolbar.js
+++ b/src/client/components/Toolbar.js
@ -48,7 +48,7 @@ export default class Toolbar extends React.PureComponent {
        document.webkitExitFullscreen()
      }
    }
-    e.target.classList.toggle('on')
+    e.currentTarget.classList.toggle('on')
  }
  handleHangoutClick = e => {
    window.location.href = '/'
@ -60,39 +60,39 @@ export default class Toolbar extends React.PureComponent {
      <div className="toolbar active">

        {stream && (
-          <svg onClick={this.handleMicClick} className="mute-audio" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 1024 1024">
-            <circle cx="24" cy="24" r="34">
-              <title>Mute audio</title>
-            </circle>
-            <path className="on" transform="scale(0.4), translate(800,800)" d="M182 149.333l714 714-54 54-178-178c-32 20-72 32-110 38v140h-84v-140c-140-20-256-140-256-286h72c0 128 108 216 226 216 34 0 68-8 98-22l-70-70c-8 2-18 4-28 4-70 0-128-58-128-128v-32l-256-256zm458 348l-256-254v-8c0-70 58-128 128-128s128 58 128 128v262zm170-6c0 50-14 98-38 140l-52-54c12-26 18-54 18-86h72z" fill="white" />
-            <path className="off" transform="scale(0.4), translate(800,800)" d="M738 491.333h72c0 146-116 266-256 286v140h-84v-140c-140-20-256-140-256-286h72c0 128 108 216 226 216s226-88 226-216zm-226 128c-70 0-128-58-128-128v-256c0-70 58-128 128-128s128 58 128 128v256c0 70-58 128-128 128z" fill="white" />
-          </svg>
+          <div onClick={this.handleMicClick}
+            className="button mute-audio"
+            title="Mute audio"
+          >
+            <span className="on material-icons">mic_off</span>
+            <span className="off material-icons">mic</span>
+          </div>
        )}

        {stream && (
-          <svg onClick={this.handleCamClick} className="mute-video" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 1024 1024">
-            <circle cx="24" cy="24" r="34">
-              <title>Mute video</title>
-            </circle>
-            <path className="on" transform="scale(0.4), translate(800,800)" d="M140 107.333l756 756-54 54-136-136c-6 4-16 8-24 8H170c-24 0-42-18-42-42v-428c0-24 18-42 42-42h32l-116-116zm756 192v456l-478-478h264c24 0 44 18 44 42v150z" fill="white" />
-            <path className="off" transform="scale(0.4), translate(800,800)" d="M726 469.333l170-170v468l-170-170v150c0 24-20 42-44 42H170c-24 0-42-18-42-42v-428c0-24 18-42 42-42h512c24 0 44 18 44 42v150z" fill="white" />
-          </svg>
+          <div onClick={this.handleCamClick}
+            className="button mute-video"
+            title="Mute video"
+          >
+            <span className="on material-icons">videocam_off</span>
+            <span className="off material-icons">videocam</span>
+          </div>
        )}

-        <svg onClick={this.handleFullscreenClick} className="fullscreen" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 1024 1024">
-          <circle cx="24" cy="24" r="34">
-            <title>Enter fullscreen</title>
-          </circle>
-          <path className="on" transform="scale(0.4), translate(800,800)" d="M682 363.333h128v84H598v-212h84v128zm-84 468v-212h212v84H682v128h-84zm-256-468v-128h84v212H214v-84h128zm-128 340v-84h212v212h-84v-128H214z" fill="white" />
-          <path className="off" transform="scale(0.4), translate(800,800)" d="M598 235.333h212v212h-84v-128H598v-84zm128 512v-128h84v212H598v-84h128zm-512-300v-212h212v84H298v128h-84zm84 172v128h128v84H214v-212h84z" fill="white" />
-        </svg>
+        <div onClick={this.handleFullscreenClick}
+          className="button fullscreen"
+          title="Enter fullscreen"
+        >
+          <span className="on material-icons">fullscreen_exit</span>
+          <span className="off material-icons">fullscreen</span>
+        </div>

-        <svg onClick={this.handleHangoutClick} className="hangup" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 1024 1024">
-          <circle cx="24" cy="24" r="34">
-            <title>Hangup</title>
-          </circle>
-          <path transform="scale(0.4), translate(800,800)" d="M512 405.333c-68 0-134 10-196 30v132c0 16-10 34-24 40-42 20-80 46-114 78-8 8-18 12-30 12s-22-4-30-12l-106-106c-8-8-12-18-12-30s4-22 12-30c130-124 306-200 500-200s370 76 500 200c8 8 12 18 12 30s-4 22-12 30l-106 106c-8 8-18 12-30 12s-22-4-30-12c-34-32-72-58-114-78-14-6-24-20-24-38v-132c-62-20-128-32-196-32z" fill="white" />
-        </svg>
+        <div onClick={this.handleHangoutClick}
+          className="button hangup"
+          title="Hangup"
+        >
+          <span className="material-icons">call_end</span>
+        </div>
      </div>
    )
  }
--- a/src/scss/_fonts.scss
+++ b/src/scss/_fonts.scss
@ -1,70 +0,0 @@
-@font-face {
-  font-family: 'icons';
-  src: url('./fonts/icons.eot?37351711');
-  src: url('./fonts/icons.eot?37351711#iefix') format('embedded-opentype'),
-       url('./fonts/icons.woff?37351711') format('woff'),
-       url('./fonts/icons.ttf?37351711') format('truetype'),
-       url('./fonts/icons.svg?37351711#icons') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-// Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it.
-// Note, that will break hinting! In other OS-es font will be not as sharp as it could be
-// @media screen and (-webkit-min-device-pixel-ratio:0) {
-//   @font-face {
-//     font-family: 'icons';
-//     src: url('../font/icons.svg?37351711#icons') format('svg');
-//   }
-// }
-
-[class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "icons";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.icon-down-open-big:before { content: '\e800'; } /* '' */
-.icon-down-open:before { content: '\e801'; } /* '' */
-.icon-mouse:before { content: '\e802'; } /* '' */
-.icon-keyboard:before { content: '\e803'; } /* '' */
-.icon-left-open:before { content: '\e804'; } /* '' */
-.icon-right-open:before { content: '\e805'; } /* '' */
-.icon-up-open:before { content: '\e806'; } /* '' */
-.icon-arrows:before { content: '\e807'; } /* '' */
-.icon-up-hand:before { content: '\e808'; } /* '' */
-.icon-check:before { content: '\e80b'; } /* '' */
-.icon-cancel:before { content: '\e80c'; } /* '' */
-.icon-level-up:before { content: '\e80d'; } /* '' */
-.icon-login:before { content: '\e80e'; } /* '' */
-.icon-left-open-big:before { content: '\e81d'; } /* '' */
-.icon-right-open-big:before { content: '\e81e'; } /* '' */
-.icon-up-open-big:before { content: '\e81f'; } /* '' */
--- a/src/scss/fonts/icons.eot
+++ b/src/scss/fonts/icons.eot
--- a/src/scss/fonts/icons.svg
+++ b/src/scss/fonts/icons.svg
@ -1,27 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
-<defs>
-<font id="icons" horiz-adv-x="1000" >
-<font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="down-open-big" unicode="&#xe800;" d="m63 570l370-356 372 356q22 26 48 0 26-22 0-48l-396-392q-22-22-48 0l-396 392q-26 26 0 48 24 24 50 0z" horiz-adv-x="866" />
-<glyph glyph-name="down-open" unicode="&#xe801;" d="m564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
-<glyph glyph-name="mouse" unicode="&#xe802;" d="m551 130q28-80-17-157t-139-111q-94-28-175 9t-103 117l-106 384q-20 68 6 134t84 106l-96 186q-14 34 14 48 30 18 48-14l98-192q80 22 154-16t102-116z m-324 274q28 10 40 36t4 54q-10 28-35 41t-53 5q-28-10-40-36t-4-54q10-28 35-41t53-5z" horiz-adv-x="561" />
-<glyph glyph-name="keyboard" unicode="&#xe803;" d="m930 650q28 0 49-21t21-49l0-460q0-30-21-50t-49-20l-860 0q-28 0-49 20t-21 50l0 460q0 28 21 49t49 21l860 0z m-380-100l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-50-250l0 100-100 0 0-100 100 0z m550 0l0 100-500 0 0-100 500 0z m150 0l0 100-100 0 0-100 100 0z m-150 150l100 0 0 100-100 0 0-100z m150 150l0 100-200 0 0-100 200 0z" horiz-adv-x="1000" />
-<glyph glyph-name="left-open" unicode="&#xe804;" d="m242 626q14 16 39 16t41-16q38-36 0-80l-186-196 186-194q38-44 0-80-16-16-40-16t-40 16l-226 236q-16 16-16 38 0 24 16 40 206 214 226 236z" horiz-adv-x="341" />
-<glyph glyph-name="right-open" unicode="&#xe805;" d="m98 626l226-236q16-16 16-40 0-22-16-38l-226-236q-16-16-40-16t-40 16q-36 36 0 80l186 194-186 196q-36 44 0 80 16 16 41 16t39-16z" horiz-adv-x="340" />
-<glyph glyph-name="up-open" unicode="&#xe806;" d="m564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
-<glyph glyph-name="arrows" unicode="&#xe807;" d="m784 111l127 128 0-336-335 0 128 130-128 127 79 79z m-431 686l-129-127 128-127-80-80-126 128-128-129 0 335 335 0z m0-637l-129-127 129-130-335 0 0 336 128-128 128 128z m558 637l0-335-127 129-128-128-79 80 127 127-128 127 335 0z" horiz-adv-x="928" />
-<glyph glyph-name="up-hand" unicode="&#xe808;" d="m714-43q0 15-10 25t-25 11-26-11-10-25 10-25 26-11 25 11 10 25z m72 426q0 106-93 106-15 0-32-3-9 17-29 27t-41 9-39-10q-27 30-66 30-14 0-31-6t-26-14v185q0 29-22 50t-50 22q-28 0-50-22t-21-50v-321q-11 0-27 8t-31 19-38 18-47 8q-37 0-55-25t-17-64q0-13 78-50 25-14 36-21 36-22 81-62 45-40 59-57 32-38 32-78v-18h357v18q0 40 18 93t36 108 18 100z m71 3q0-74-38-179-33-92-33-125v-161q0-29-21-50t-51-21h-357q-29 0-50 21t-21 50v161q0 6-3 12t-8 13-10 13-12 13-12 12-12 10-10 8q-41 36-72 56-11 7-34 18t-40 21-36 23-27 30-10 39q0 70 37 115t106 46q38 0 71-13v209q0 58 43 101t100 42q58 0 101-42t42-101v-94q35-2 66-21 12 2 24 2 57 0 100-34 77 1 122-47t45-127z" horiz-adv-x="857.1" />
-<glyph glyph-name="check" unicode="&#xe80b;" d="m249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
-<glyph glyph-name="cancel" unicode="&#xe80c;" d="m452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
-<glyph glyph-name="level-up" unicode="&#xe80d;" d="m200 350l0-90-200 160 200 170 0-100 550 0q40 0 70-29t30-71l0-280-140 0 0 240-510 0z" horiz-adv-x="850" />
-<glyph glyph-name="login" unicode="&#xe80e;" d="m800 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-450 0q-40 0-69 30t-29 70l0 100 98 0 0-100 450 0 0 700-450 0 0-150-98 0 0 150q0 42 29 71t69 29l450 0z m-350-670l0 120-450 0 0 150 450 0 0 120 200-194z" horiz-adv-x="900" />
-<glyph glyph-name="left-open-big" unicode="&#xe81d;" d="m452-20q26-26 0-48-26-26-48 0l-392 394q-24 24 0 50l392 394q22 26 48 0 26-22 0-48l-358-372z" horiz-adv-x="465" />
-<glyph glyph-name="right-open-big" unicode="&#xe81e;" d="m13-20l358 370-358 372q-26 26 0 48 26 26 48 0l392-394q24-26 0-50l-392-394q-22-26-48 0-26 22 0 48z" horiz-adv-x="465" />
-<glyph glyph-name="up-open-big" unicode="&#xe81f;" d="m804 130l-372 358-370-358q-26-22-50 0-24 24 0 50l396 390q26 26 48 0l396-390q24-26 0-50-26-22-48 0z" horiz-adv-x="864" />
-</font>
-</defs>
-</svg>
--- a/src/scss/fonts/icons.ttf
+++ b/src/scss/fonts/icons.ttf
--- a/src/scss/fonts/icons.woff
+++ b/src/scss/fonts/icons.woff
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@ -1,4 +1,4 @@
-@import "_fonts";
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

 $font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-monospace: Menlo, Monaco, Consolas, "Ubuntu Mono", monospace;
@ -284,32 +284,27 @@ body.call {
    position: absolute;
    z-index: 1;

-    circle {
-      fill: #666;
-      fill-opacity: 0.6;
-    }
-
-    svg.on circle {
-      fill-opacity: 0;
-    }
-
    /* on icons are hidden by default */

-    path {
+    .material-icons {
      &.on {
        display: none;
      }
      &.off {
        display: block;
      }
+      color: #fff;
+      position: absolute;
+      top: 12px;
+      left: 12px;
    }

    /* off icons are displayed by default */

    /* on icons are displayed when parent svg has class 'on' */

-    svg {
-      &.on path {
+    .button {
+      &.on .material-icons {
        &.on {
          display: block;
        }
@ -317,7 +312,8 @@ body.call {
          display: none;
        }
      }
-      //background-color: #333;
+      width: 48px;
+      height: 48px;
      border-radius: 48px;
      box-shadow: 2px 2px 24px #444;
      display: block;
@ -332,57 +328,31 @@ body.call {

    /* off icons are hidden when parent svg has class 'on' */

-    &.active svg {
+    &.active .button {
      transform: translateX(0);
    }

-    .chat {
-      transition: 200ms;
-      &:hover {
-        background: #407cf7;
-        circle {
-          fill: #407cf7;
-        }
-      }
-    }
-
    .mute-audio {
-      transition: 40ms;
      &:hover, &.on {
        background: #407cf7;
      }
-      &:hover circle {
-        fill: #407cf7;
-      }
    }

    .mute-video {
-      transition: 120ms;
      &:hover, &.on {
        background: #407cf7;
      }
-      &:hover circle {
-        fill: #407cf7;
-      }
    }

    .fullscreen {
-      transition: 280ms;
      &:hover, &.on {
        background: #407cf7;
      }
-      &:hover circle {
-        fill: #407cf7;
-      }
    }

    .hangup {
-      transition: 360ms;
      &:hover {
        background: #dd2c00;
-        circle {
-          fill: #dd2c00;
-        }
      }
    }
  }