From afc04e0b058a8aeedf910b1cadd49b7ff1267a28 Mon Sep 17 00:00:00 2001 From: "Michael H. Arieli" Date: Sun, 25 Nov 2018 10:02:04 -0800 Subject: [PATCH] Changing behavior to use local fonts --- src/client/components/Chat.js | 4 +- src/client/components/Input.js | 2 +- src/client/components/Toolbar.js | 16 +++--- src/scss/_fonts.scss | 88 +++++++++++++++++++++++++++++++ src/scss/_toolbar.scss | 4 +- src/scss/fonts/icons.eot | Bin 0 -> 2364 bytes src/scss/fonts/icons.svg | 21 ++++++++ src/scss/fonts/icons.ttf | Bin 0 -> 2208 bytes src/scss/fonts/icons.woff | Bin 0 -> 2284 bytes src/scss/style.scss | 14 ++--- 10 files changed, 129 insertions(+), 20 deletions(-) create mode 100755 src/scss/_fonts.scss create mode 100755 src/scss/fonts/icons.eot create mode 100755 src/scss/fonts/icons.svg create mode 100755 src/scss/fonts/icons.ttf create mode 100755 src/scss/fonts/icons.woff diff --git a/src/client/components/Chat.js b/src/client/components/Chat.js index 6673be1..4f98445 100644 --- a/src/client/components/Chat.js +++ b/src/client/components/Chat.js @@ -60,7 +60,7 @@ export default class Chat extends React.PureComponent {
- arrow_forward +
Chat
@@ -95,7 +95,7 @@ export default class Chat extends React.PureComponent { )) ) : (
-
chat
+
No Notifications
)} diff --git a/src/client/components/Input.js b/src/client/components/Input.js index 6989d24..a38852e 100644 --- a/src/client/components/Input.js +++ b/src/client/components/Input.js @@ -68,7 +68,7 @@ export default class Input extends React.PureComponent { value={message} /> ) diff --git a/src/client/components/Toolbar.js b/src/client/components/Toolbar.js index ef1b0c6..66bea92 100644 --- a/src/client/components/Toolbar.js +++ b/src/client/components/Toolbar.js @@ -59,7 +59,7 @@ export default class Toolbar extends React.PureComponent { data-blink={messages.length !== totalMessages && !isChatOpen} title="Chat" > - chat +
{stream && ( @@ -67,8 +67,8 @@ export default class Toolbar extends React.PureComponent { className="button mute-audio" title="Mute audio" > - mic_off - mic + + )} @@ -77,8 +77,8 @@ export default class Toolbar extends React.PureComponent { className="button mute-video" title="Mute video" > - videocam_off - videocam + + )} @@ -86,15 +86,15 @@ export default class Toolbar extends React.PureComponent { className="button fullscreen" title="Enter fullscreen" > - fullscreen_exit - fullscreen + +
- call_end +
) diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss new file mode 100755 index 0000000..e5fe449 --- /dev/null +++ b/src/scss/_fonts.scss @@ -0,0 +1,88 @@ +@font-face { + font-family: 'icons'; + src: url('./fonts/icons.eot?ij9tsv'); + src: url('./fonts/icons.eot?ij9tsv#iefix') format('embedded-opentype'), + url('./fonts/icons.woff?ij9tsv') format('woff'), + url('./fonts/icons.ttf?ij9tsv') format('truetype'), + url('./fonts/icons.svg?ij9tsv#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('./fonts/icons.svg?ij9tsv#icons') format('svg'); +// } +// } + +[class^="icon-"], [class*=" icon-"] { + 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-arrow_forward:before { + content: "\e5c8"; +} +.icon-call_end:before { + content: "\e0b1"; +} +.icon-question_answer:before { + content: "\e8af"; +} +.icon-fullscreen:before { + content: "\e5d0"; +} +.icon-fullscreen_exit:before { + content: "\e5d1"; +} +.icon-mic:before { + content: "\e029"; +} +.icon-mic_off:before { + content: "\e02b"; +} +.icon-more_vert:before { + content: "\e5d4"; +} +.icon-send:before { + content: "\e163"; +} +.icon-videocam:before { + content: "\e04b"; +} +.icon-videocam_off:before { + content: "\e04c"; +} diff --git a/src/scss/_toolbar.scss b/src/scss/_toolbar.scss index 1fe321d..5736b3d 100644 --- a/src/scss/_toolbar.scss +++ b/src/scss/_toolbar.scss @@ -6,7 +6,7 @@ /* on icons are hidden by default */ - .material-icons { + .icon { &.on { display: none; } @@ -24,7 +24,7 @@ /* on icons are displayed when parent svg has class 'on' */ .button { - &.on .material-icons { + &.on .icon { &.on { display: block; } diff --git a/src/scss/fonts/icons.eot b/src/scss/fonts/icons.eot new file mode 100755 index 0000000000000000000000000000000000000000..332affcd17f140b9c86f29d383544ade1b26e7e4 GIT binary patch literal 2364 zcmaJ@-)qxX6hHTV^Q);%nr~8*2DNEx8=KbrXp(OXRvlyQl*Ub5n!y-ojOh<)lhQ`k zzUY_XgN(v_aDs1p8Z0e3eUQQS2aK_Y3TY7s(m4cSAPO7orTOl2zxh_%;=FM0J?C@I zJ@?#m&;2pfMD(qVh!Llqh0zTrkj$B#xX^8sSIe`jyJbXnnxX=gsYLS-I_NAFX@V}( zH05ay$X?0;nS*pn*9uUK!W4yM=STozqGnP_qUgt;LP@;5N_=o{o6BS2PfvQ|p80$$kd~$m%*5GlLe87KI z?)%dFcly;n=pC^*Y>AA9FzWF)QJf3^=j2G*GcyIWKOc5eN(LuRBs8Et%w%s zN;zY_tpuBm)ovL%%7SJWgQfj!iT|x!H#sZ~V}Xhks&_G)?C09%9_6}ZZdj~*RX@U> z_~cu9PTVsQ@28{itqU89$RLh-#3C%r5U`Y@Z)to`-(WP*aWY*)Y<-v=gC3{&g-Ado$ELCx~T5wwt6WMANhgsyR7u6L+_8w!MF20Vm%~g@LA=zJ*ebstM_VExK zlYJ{ZCo)&{$(t$^a!l+8j1jHQF26eG9QucvO=4yAD6shXn_gQ+Hi|pY_WJ3=82!#g zP(?v2ENw5&hU5(dejQacYEH;eMPEe~GE^q$oIc8qSL6VV;}v_t>};GZup8_Fd%`{Z zJ$*JO4G9A%yB}nMIp~hz6BGGp(44IFkwHtqqXumPT`*{oX + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/scss/fonts/icons.ttf b/src/scss/fonts/icons.ttf new file mode 100755 index 0000000000000000000000000000000000000000..f6e94e2fb3380c1b2fe22d8eece053572927ae03 GIT binary patch literal 2208 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 DIbM?u literal 0 HcmV?d00001 diff --git a/src/scss/style.scss b/src/scss/style.scss index 11edcdb..2c70126 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,5 +1,5 @@ -@import './variables'; -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); +@import '_fonts'; +@import '_variables'; *, *:before, @@ -138,11 +138,11 @@ body.call { } .app { - @import './alert'; - @import './notification'; - @import './video'; - @import './chat'; - @import './toolbar'; + @import '_alert'; + @import '_notification'; + @import '_video'; + @import '_chat'; + @import '_toolbar'; } .fade-enter {