From 235067c72e3a272e8ccc60d6b24fa6ddcdb6ff62 Mon Sep 17 00:00:00 2001 From: "Michael H. Arieli" Date: Sun, 2 Dec 2018 17:13:09 -0800 Subject: [PATCH] Fix bug: Added simple emoji list --- src/client/components/Input.js | 27 +++++++++- src/client/components/__tests__/Input-test.js | 8 +++ src/res/fonts/icons.eot | Bin 2524 -> 3224 bytes src/res/fonts/icons.svg | 3 ++ src/res/fonts/icons.ttf | Bin 2368 -> 3068 bytes src/res/fonts/icons.woff | Bin 2444 -> 3144 bytes src/scss/_chat.scss | 46 ++++++++++++++++-- src/scss/_fonts.scss | 21 +++++--- 8 files changed, 93 insertions(+), 12 deletions(-) diff --git a/src/client/components/Input.js b/src/client/components/Input.js index 12506b0..adb52df 100644 --- a/src/client/components/Input.js +++ b/src/client/components/Input.js @@ -29,6 +29,11 @@ export default class Input extends React.PureComponent { this.submit() } } + handleSmileClick = e => { + this.setState({ + message: this.textArea.value + e.currentTarget.innerHTML + }) + } submit = () => { const { videos, notify, sendMessage } = this.props const { message } = this.state @@ -72,11 +77,31 @@ export default class Input extends React.PureComponent { onKeyPress={this.handleKeyPress} placeholder="Type a message" value={message} + ref={node => { this.textArea = node }} />
-
+ +
+
+
+ +
+
πŸ˜‘
+
πŸ˜•
+
😊
+
😎
+
πŸ’ͺ
+
+
+
+
) diff --git a/src/client/components/__tests__/Input-test.js b/src/client/components/__tests__/Input-test.js index 42161f1..af5ccda 100644 --- a/src/client/components/__tests__/Input-test.js +++ b/src/client/components/__tests__/Input-test.js @@ -63,6 +63,14 @@ describe('components/Input', () => { }) }) + describe('handleSmileClick', () => { + it('adds smile to message', () => { + const div = node.querySelector('.chat-controls-buttons-smile') + TestUtils.Simulate.click(div) + expect(input.value).toBe('test messageπŸ˜‘') + }) + }) + }) }) diff --git a/src/res/fonts/icons.eot b/src/res/fonts/icons.eot index 5329ad7426b51e77aed786a50d402bd00fae0ef5..5b837243e9839bda9683f251771a92faed788d9f 100755 GIT binary patch delta 839 zcmYjPUr1A76hGg+^WLrLGN-$`IrslAb!_u)yX()`Ol(AIF%d1v@?z#Frvoj_45MCp zs0Y10tmndq3?eiTda*ZqQwZtLf|)DA&2mi65NroZtDK!~K2do~%Ao$7IR@ z{%GeIQMI$3&CIpV%+8-}4*-yQ0C+wkO{CFRB3?zW9vQuT?bkDv3h^2MyOJE1uIeWi z?f_`+AulE|!6xZx#4CuM$<*Xj1l0YAvxv`(jt@z?Z21p>Lr%neN}5VTEes;=L~I?C zQgy={_ft&u2C&@ zQROOU8T1ww=@(Q1DxeWgLjnc>T!I)5=!nD4y8{h`lixGpqjXRV2!@(!2D7dMF$MlE zE?#%5qvNJAZaC+c8P;dM>oS>KiV;sKTJ*Wvy1Uz4zL#>0720=K{}+^K7l3MCiW6F) z6D|Oh3E?OSi=iOzR^+(7#Lc@IR!3OnlD{&JkiH};6cil?VhZB1=zz(jW(LKr9+J`VEY#qQYmhHS%`H$y)A+rb;6xSZnp} zpc(6}2F_ga0CFGGKTE+T4zUS`s0BCvS3yziuroE)2ED-H1aWRf(JlVs6GFk_vnXhe zMLmi|!(xKteBQLzSG+hbA%@9~ShFXp6p$xMLX7oD(n1)|f+Y3CM5P6AQ+nlPX01Mx z-QKx!IPw#;xW0HkHnm(Yc{#&|NtL|LM$}05qHW4*waxU1uB0RMG_5QzL92qxP^L5i NCBM_?m(HsnlYfnr$sqs$ delta 337 zcmbOsc}JM-4krVH1Ls6GGnVN$tNAB7)YPx)jMiabV3c8CV3?AgSX=<41%UhwK$;^x zr!sA4-x5b4e+L5tt3pOe+I_? zkL7R6-;&=gA1>u6WhG@H9w#0N)W-fc7#l@H5ykKom0p%@f|t&E3lg0EjtQ Aj{pDw diff --git a/src/res/fonts/icons.svg b/src/res/fonts/icons.svg index d25d1c1..aa92479 100755 --- a/src/res/fonts/icons.svg +++ b/src/res/fonts/icons.svg @@ -16,6 +16,9 @@ + + + \ No newline at end of file diff --git a/src/res/fonts/icons.ttf b/src/res/fonts/icons.ttf index 2091dd624bb704c3e139b5ff6e0343bb86c16a35..ae2d611d882651ac4dfead54adc0fdae4e4586de 100755 GIT binary patch delta 788 zcmYjPO-vI}5T4gc1@gdh@8Hi|UZLKDy+VlaB~ z;6Yhq)GMY3F);>BnsDLBmBbK#dT3%uYD~Ns4;rM-R%>|4yl=jl*|*=DH|wSy`oOuk zbgCx=K$-yH`Gh=^L99i-j%b)j-MI2|S*u090ie$%$K}iBne0t~s@s?slNit^nR(w%RmE+A@4)(oRZUxXQ8FgR_H6d-rm^W+|+6SQhFU1STp$~=ubb=Hkk{Ahdyefz9AUwyjdLz-R zo6^O4BIb&yNLcjj@imZ$$3|^718WIdML{^narRnDkGNeNA<6=4_kXZB9Te@$KO{EW zXgrp%1}&_%rY7KWwQz3Fu?Bju%2cJiWu0}qV|J`}TByB(0Lq$fWKjcK*u++BVm0vi ze1fXj<7VsYEM|dX2eEHu(VfBa6(ZsCwKUKckNH)LNn$^xfsRZ^puADqFG}QUyv-j| z3&P(p60_aws>9gbypZBkB delta 298 zcmew(en4n~Lj9`FXdMOyMi~YMhAHWZ#RWiG0Lb3}q&d=aD${oMEpY_$cQ7!pDrBT4 zrU(~zyk}rwy8)Cp%K!?nXE2vDFt7vlFsNkYmQ)yk<=9Pte4Cv74~QopI(_9!zjzV{>9eG4UFQpu$;f9vd5*R&s38y(D|KvNIHj`DjWQFyZCID?dZW`nND1>!BtoobBqOC!SoDg*JgJ23SRj9(#~1%O?l`14q! zN%u*;0J^tCBT$$}7H_8s2~esbekBE)R!^ieqho}tB7PG^9JHMSLp@YS&H;|XxXv4X zWTY`dl+F{vt-uD|gHooCaO6-lNU?e^^JsWzWRz4;HM{ws=ROf00u!jgND6c3s&lou zmfZ7=?8fTG`@A`SC;u$}vanSs5FPof5^q-G?{?!alsGDUb$xbya=mt)v!AdZwI9ZR z@f_~P7v(R=B~R%z%Uj5xsVsqx!jk%lssLqB4JV-$x&ZvVAV!SH=j8&CLkP>`j98_P z3K8B~VPOdC-?LUh_%u!(xY^u%!=AF93CpjTkn^tJ;qX(SU~#n+@;9`#HTXkM<(~}S zxc%n8pcwW8Xm(SngyYZx=K)H1F@Z!O7Ucpooj@H5Z~=xjB9>0_4C9NLi%G?zf^W}S z1*v4B%i+*6*05dR`3oH9G+}(i>){ZRvy3zN(du?#f^Rz(IUHTdM9LnvGMciokjGQa zd40!hc)zY(CnMHv+3t1{z1xbNMGGLaOy{Hu)<_d;NE7uCAlJ&%jD23F!eTY^m~@cz zO-Z^wtdtOoDrKplHkk-gBt)SV<51mjT}YWQZWTmyEm<2(Pyu>K2_e}oNsA&Gi;~oy z6zCQpFQr57WwHn7*T4U|yf6M6^z^j?e5k3vTC{Q#E246Fij8YYu!CStUSU0sX|+im cS5K(diIDzAh(IYHY?(gQtz{mguoIMQOVA_F!aq>q-v57kJ^;3WXQ&x3G>!c?Z7cej|{sHni zpjaS1r!tL!fr*8IfmH#7clIrD%t%d4VPIfa0je7-h%h+hCFZ6A#r^;t zln25Wn{sCs1zfVidQ205_A)T=GuSae6f*(M L6W+X=tCtY~JMCN| diff --git a/src/scss/_chat.scss b/src/scss/_chat.scss index d6ab437..38ac9dd 100644 --- a/src/scss/_chat.scss +++ b/src/scss/_chat.scss @@ -123,7 +123,7 @@ color: #000; } - .icon-schedule:before { + .icon:before { color: #999; font-size: 11px; margin: 0 2px; @@ -213,10 +213,6 @@ display: flex; justify-content: space-between; - .chat-controls-buttons-wrapper { - display: flex; - } - .chat-controls-buttons-send { padding: 0 15px; background: #407cf7; @@ -232,5 +228,45 @@ outline: none; } } + + .chat-controls-buttons-wrapper { + display: flex; + } + } +} + +.emoji { + display: flex; + + .chat-controls-buttons-smiles { + cursor: pointer; + display: flex; + align-items: center; + position: relative; + + .icon { + color: #777; + z-index: 1; + } + + .chat-controls-buttons-smiles-menu { + background-color: #fff; + display: none; + position: absolute; + width: 140px; + height: 50px; + line-height: 50px; + + .chat-controls-buttons-smile { + margin-left: 5px; + } + } + + &:hover { + .chat-controls-buttons-smiles-menu { + display: flex; + right: 10px; + } + } } } diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss index e745b11..2a00340 100755 --- a/src/scss/_fonts.scss +++ b/src/scss/_fonts.scss @@ -1,10 +1,10 @@ @font-face { font-family: 'icons'; - src: url('../res/fonts/icons.eot?sd4p99'); - src: url('../res/fonts/icons.eot?sd4p99#iefix') format('embedded-opentype'), - url('../res/fonts/icons.woff?sd4p99') format('woff'), - url('../res/fonts/icons.ttf?sd4p99') format('truetype'), - url('../res/fonts/icons.svg?sd4p99#icons') format('svg'); + src: url('../res/fonts/icons.eot?tcgv6b'); + src: url('../res/fonts/icons.eot?tcgv6b#iefix') format('embedded-opentype'), + url('../res/fonts/icons.woff?tcgv6b') format('woff'), + url('../res/fonts/icons.ttf?tcgv6b') format('truetype'), + url('../res/fonts/icons.svg?tcgv6b#icons') format('svg'); font-weight: normal; font-style: normal; } @@ -14,7 +14,7 @@ // @media screen and (-webkit-min-device-pixel-ratio:0) { // @font-face { // font-family: 'icons'; -// src: url('./fonts/icons.svg?sd4p99#icons') format('svg'); +// src: url('./fonts/icons.svg?tcgv6b#icons') format('svg'); // } // } @@ -56,6 +56,9 @@ .icon-call_end:before { content: "\e0b1"; } +.icon-face:before { + content: "\e87c"; +} .icon-question_answer:before { content: "\e8af"; } @@ -65,6 +68,9 @@ .icon-fullscreen_exit:before { content: "\e5d1"; } +.icon-room:before { + content: "\e8b4"; +} .icon-mic:before { content: "\e029"; } @@ -74,6 +80,9 @@ .icon-more_vert:before { content: "\e5d4"; } +.icon-sentiment_satisfied:before { + content: "\e813"; +} .icon-videocam:before { content: "\e04b"; }