diff --git a/.eslintrc b/.eslintrc index a403842..6a8521b 100644 --- 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, diff --git a/src/client/components/Toolbar.js b/src/client/components/Toolbar.js index 7e18535..39e66eb 100644 --- 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 {
{stream && ( - - - Mute audio - - - - +
+ mic_off + mic +
)} {stream && ( - - - Mute video - - - - +
+ videocam_off + videocam +
)} - - - Enter fullscreen - - - - +
+ fullscreen_exit + fullscreen +
- - - Hangup - - - +
+ call_end +
) } diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss deleted file mode 100644 index afa9c58..0000000 --- a/src/scss/_fonts.scss +++ /dev/null @@ -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'; } /* '' */ diff --git a/src/scss/fonts/icons.eot b/src/scss/fonts/icons.eot deleted file mode 100644 index cd06366..0000000 Binary files a/src/scss/fonts/icons.eot and /dev/null differ diff --git a/src/scss/fonts/icons.svg b/src/scss/fonts/icons.svg deleted file mode 100644 index e60e02b..0000000 --- a/src/scss/fonts/icons.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - -Copyright (C) 2015 by original authors @ fontello.com - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/scss/fonts/icons.ttf b/src/scss/fonts/icons.ttf deleted file mode 100644 index f17209b..0000000 Binary files a/src/scss/fonts/icons.ttf and /dev/null differ diff --git a/src/scss/fonts/icons.woff b/src/scss/fonts/icons.woff deleted file mode 100644 index a640cde..0000000 Binary files a/src/scss/fonts/icons.woff and /dev/null differ diff --git a/src/scss/style.scss b/src/scss/style.scss index 09947d0..3e4abf1 100644 --- 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; - } } } }