From 28c3787fb3be6d91bd849a8587199d9fd03edec8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 25 Oct 2015 01:03:22 +0000 Subject: [PATCH] implement bottom-right call button --- src/skins/vector/css/common.css | 4 ++-- src/skins/vector/css/molecules/EventTile.css | 2 +- .../vector/css/molecules/MessageComposer.css | 10 ++++++++-- .../vector/css/molecules/RoomTooltip.css | 2 +- .../css/molecules/voip/IncomingCallbox.css | 2 +- src/skins/vector/img/call.png | Bin 0 -> 588 bytes src/skins/vector/img/chevron-left.png | Bin 179 -> 14586 bytes src/skins/vector/img/chevron-right.png | Bin 181 -> 14594 bytes src/skins/vector/img/chevron.png | Bin 237 -> 14638 bytes .../vector/views/molecules/MessageComposer.js | 12 ++++++++++++ 10 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 src/skins/vector/img/call.png diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 381eb2cb7..6c868b8d1 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -58,7 +58,7 @@ a:visited { } .mx_ContextualMenu { - border: 1px solid #a9dbf4; + border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; color: #747474; @@ -160,7 +160,7 @@ a:visited { .mx_QuestionDialogTitle { min-height: 16px; padding: 12px; - border-bottom: 1px solid #a9dbf4; + border-bottom: 1px solid #a4a4a4; font-weight: bold; font-size: 20px; line-height: 1.4; diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css index cdb098487..a9067e5bf 100644 --- a/src/skins/vector/css/molecules/EventTile.css +++ b/src/skins/vector/css/molecules/EventTile.css @@ -97,7 +97,7 @@ limitations under the License. visibility: hidden; border: 0px; outline: none; - margin-top: 3px; + margin-bottom: 3px; } .mx_EventTile:hover .mx_EventTile_editButton { diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/molecules/MessageComposer.css index e7f6919cf..ab76c5ac0 100644 --- a/src/skins/vector/css/molecules/MessageComposer.css +++ b/src/skins/vector/css/molecules/MessageComposer.css @@ -75,13 +75,19 @@ limitations under the License. color: #76cfa6; } -.mx_MessageComposer_upload { +.mx_MessageComposer_upload, +.mx_MessageComposer_call { display: table-cell; vertical-align: middle; - padding-right: 15px; + padding-right: 20px; cursor: pointer; } +.mx_MessageComposer_call { + padding-right: 10px; + padding-top: 3px; +} + .mx_MessageComposer_upload img { margin-top: 5px; } diff --git a/src/skins/vector/css/molecules/RoomTooltip.css b/src/skins/vector/css/molecules/RoomTooltip.css index f45970feb..604c6a56f 100644 --- a/src/skins/vector/css/molecules/RoomTooltip.css +++ b/src/skins/vector/css/molecules/RoomTooltip.css @@ -17,7 +17,7 @@ limitations under the License. .mx_RoomTooltip { display: none; position: fixed; - border: 1px solid #a9dbf4; + border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; z-index: 1000; diff --git a/src/skins/vector/css/molecules/voip/IncomingCallbox.css b/src/skins/vector/css/molecules/voip/IncomingCallbox.css index 2c57a3273..24b24cc20 100644 --- a/src/skins/vector/css/molecules/voip/IncomingCallbox.css +++ b/src/skins/vector/css/molecules/voip/IncomingCallbox.css @@ -16,7 +16,7 @@ limitations under the License. .mx_IncomingCallBox { text-align: center; - border: 1px solid #a9dbf4; + border: 1px solid #a4a4a4; border-radius: 8px; background-color: #fff; position: absolute; diff --git a/src/skins/vector/img/call.png b/src/skins/vector/img/call.png new file mode 100644 index 0000000000000000000000000000000000000000..a7805e0596bb9af4f3ce0a8debd7eb30c0b079e2 GIT binary patch literal 588 zcmV-S0<-;zP)Px%21!IgR7eeDWB`JS!%GF3`B_65{{Pqf{r?{qNQ_v(%EgIQ#bAzdf(6{P_FnPZJ?anLs`RS>_<2 zMY3fen?Vi)=>?eq4kZ-lU~-s1!3gphrW9!+U^9Sb5z@s1iZfD!5u2ePGtlF|c>hch zW^UvKw=G|1mKqGyeNC4Q3hG@r(>i zuU^r>LWb|07EFx)FLxTnUc?qkRQDm{KL(}0fBxUVW*JC~>T&pw=|2YxGqCi*0jTan zhX4Ow{rk%xi^D$ZCz?NhnNBh?F*r4xnTfSbrn(RNO{4Gq|HrWJD-(BZ!_@{hxKIBx z{G&;>09nv&9JPayf$`dxpQ`1c0-)jQDz^U&46M(Ny#GmcAHsapWfZ;m|3Ak4{}|bG zzWx3?nTd(v$gK4A-z=c|3|PfbT%LleDRA8gvk^%5nnWF0^?%jz!zX`nPqv8p1d?I_ zRi425%n($?AgLvp391u8W}#~gV+{KX6a!lZl4AkY)O-G40aYv1sDM|448;c+L6Y=r aVgLa1(9$0~3Cnc=0000YNz#j?3krO=IY4S^&^lfOz7b(dv?|r|& z-}C4Fi7$S8b>+pG>BpxLLNm)t)iwJ42z@_#`XT!H_0mQqYVeje1BA|;jowq}-S-|t zXzppdRuAj?71eZGX~S~2NV?nds2U;dQr9!gT@nggWZQO1;$L5UDGIh#5?{^flI~T= zj=i++llA?Tnz_Gg7A^5od0OkLG(n4mhR|&_oj~oD#5k`?j+U^ zW6N!aB~gqD^`d%U*ajE82Km^4X?IAK72@>rj@ zdtMp>a=Hpcdq@Otsq@P-P1mQxBIS&R z$29|2yw=oZCkPG4B+Jz@ZAja;rCKIw6mtbBCC@2asjQsOrixi5n=Q{W5o^?hOXrj^IZ;3H!j+I)n1G+-@z{;iTH$KhQ z$?LmOtNQ!4Vrdsj8g=sYW%(Uu^VhKE`Q!|FSGHv9ih zV3Hr$C)eog5a*-~m86PQlamB)BkUMHnct>s;@)<9l6TlRT0q0mKS0wSo{FS(c!rMF z?C}}ZqJvGPtAUQph-X38@UgZ*oIEdC|v1b`=AM4v3_~bk^ zf{vasnJMs(9#3S_O79owtqShns|?R^eIMh@gPuf;5;h$Hhbh1soTo!HhXBCL$={xF8K?%yBUhK>^1FX)t4s zi-`ydI4($o8FO4rL{PwSK^n}M<6 z!CYF?5!!zWp@SO;{qryV{tcnFgwXHT5K<2jy5Qct`pqKM>dV#nTKDI7Zr++f(&^jp zf9w_Ses%TFpH|N6v-y{Wvky04+PL-RhjboI)@I=-~INFUv86A npL~De*Yz_$+<5K7@18`nADHz|4;E)>Vzj)lQvK+KYj6DrGWNav delta 151 zcmexWxS4T+O1)%>YeY$Kep*R+Vo@rCV@iHfs)A>3VtQ&&YGO)d;mK4R1_p*uPZ!6K zid#uP{{OdUw%had;PwALJQWAFwcr1D`lEsI1Jj3}X3PKoFTD7Hy&=~>IK{y7fsIi{ yAXoMxpSl%C2cJ(4m!u<8io3z4P6kFchPmOh1qAkQY`P4zfx*+&&t;ucLK6V{9y~q( diff --git a/src/skins/vector/img/chevron-right.png b/src/skins/vector/img/chevron-right.png index 1fe5d347db3d0c807a90859f33760b8858b06ff1..18a4684e4727a9fb3cae66f81165ea4f4aebf69e 100644 GIT binary patch literal 14594 zcmeI3Pi)&%9LL`#1|z5l3Gqjqj0Y+cB+qgFHJ+2HOFB|PO4X)Xi-b1Uerc>Gwy~YY zEgaC$kl=(kZD#M-zL7WNw!R@B;L68r6`z2Nj#UUOLeD0 zT4rs}C98W&4SjE0FB;);`ve18tw{W^xEMiHNtZ!me*%TDdIqLa5^R7NhU)dc$}`=j)rFFn6ycUSiVPn>4`q4 zW&5_*vZs_BbWbfz=cHaA)SfurPG@3i&tKS~2>M7TI=#lOL+}dm?5?Ymg&le+CnjCJ zZ#IXMGmRC$w|*jX+@Gil2|#Gqi!2!b9W?%oNI*E zw302r96&jqgYF?Pz}4>}XpAJJyzphmAlvSXWBLZrd&$7Aa>` zJgFJDqP3blVmZg=acEYp=XVzBpaEz z2x7es?FUjo+>h zR>`ZQt@|BqGdh(V&GksQ=St%KrW+h%gHtN>M0;1!^zb|@>*1ClhKfg8hr=2;`!@6c zPGFoL*r(U%wTN}thKf@~s_98QyXp5dm&|X`HF0~pJ~xipQJB9m{4w+Ur%5?qDxmm&LwiynUi?W9Uog zp%HZSjqyx@fAnY~<5qgVKyOv>;9g~Pjt4v8E(gOay32`SI$i|QV8$F56A=_}T#yDc z=D3)Mpn&6oG?+2R#Y6-J92ca)j5#hQA}HXvAPr{BaWN4=0mlVtFk_C3i3kcfE=YqJ zb6iYBP{46P8qApEVj_Y9jtkOY#vB(D5fpG-kOnj6xR{8bfa8KRm@&u2L<9vK7o@?A zIW8t5DB!pt4Q9-7F%dxl#|3FHV~&f72nskZNP`)3Tuekzz;Qtu%$Vb1B7y>r3({c5 z92XN26mVRS1~cZkn24Z&+jnL4g|Fyy zfr4IJsUx)aG(vB@iO{Wo>G$slbtQ!UxPXvy8KKAQ_s)NFmTK1)tMiTE=d0h(C$3A! ztKU6&?yukW9=&n%+Q~~Fee%|WU%d9zhu{8sr1684S-9uZqwij6;CD_v^7`_z*?*3m zZ{7EK>r!R**3DOb2~J(yx%}tL3aZV1?9QMwM?d&G_{sZ`7C?&&OV!WLT)6lj@j=DC delta 153 zcmV;K0A~M!aWpyYT0SwM*aPue+_nyu&c}JmCH9 zVBR>76{911dCr|HJtnGVJ)&r41w~qQ3#%DMI^41pbqTp_1uf`Cmb-EJQ;yZOEO#tf z5=vGME$W3;8_ljxmDSZHHKTEd<&e}8ae_K>6}DBc8IIV>a(-SB$6hnfvA)Dz%5q~~ zL3XY*&E`xSvB^j(tO}_#o6ba{$#goAeuRw)(IhX#`M3~{#l?gmCSq*+#mONYNw!uM zXYxnd{JuW~3R9nDzo6&15pX5aVO9Fjj<}6~k3pVZ+%UB-zZ9M~-Ui zmaCfv>*ZA{X2Z>LoL8vxYF}5~>J&1ZHakp_Zz&cZjR^c8lcsh&R>Q9OL(^0q)leN7 zu7iEifj(=|bWLZ`98$8=J+v^MlTxWud*FEM^?{`wcVZbMXd@lybjm9h;%AU!Hf$A5 zEaOYrKj`XRz1p3eo=jfP(6OVIKE&qr1U7#u1T!SzYZY@gQe4w6n`TW8R@w9>LN=H4 zR~0)_QdHgWxE_@Fep7eGyZKOFagpq;$Z%8$3#qb@5#xfG6b=bdQ4m0qK-rh0WNLbK zr6)%$S@x{n8|DDY{v3D*X^N}dR2HZOc{Ek5ns!}rWxcK}Al@<-B);1Sl$~`Y=FFOD z<6$8=F7bn!fy-ZOV$pD1#ZXZ(FXM)Yu4`f?o*qr5lz6y08rQ-JA)N{b$8oy#3Nnt=(d3VBeDZaa+e{ol*lDZ}hiXVnCWLr3$)(SLg~@ zxp@8hr`ares<(Bsqo(_(lBL)V^7dSo+uU@WW2|#Zc^-f7ii+x;XR_*T38YDUPiuEr z9cSC7|KAA=@&o(u8qGyyY`39;RK99>6348%O~poI3wTZ3+-?u@_8R*ONWAw8P}6&- zB53WMq0KeBbw(xcU=#6bz#~)qS%^yfmbPx?KtJcrYOUex(=h?R_^9{Uw!-dy>-_ds z*xhgKI*%Hn3(_FQ6c-T@6i{4{1~I0%h=`zo;(|1Y zF~vnh1O*fqq(O`+E+Qf*ptv9nVoY%n5kUdP1!)jtii?N{3Mei}gBVj>L_|73x0zhYbA8 zUlTvvC*S$*8T?=%s}^QT46}NGVNO2BFzXxm`wxa`2n_S*afT6JXP7zdSL0AT&~3&#XCD^Tech^5%STt2&;54s?Bv?3U#cIa*B<@*^p)3so*4gi zgHzTn7A~B4aQ*l52f2~A*cV^9|BJoXKe=)0%87rziZU-q#}e;d|M4mw3san!%3m5k G{_KAu=;Ooy delta 209 zcmV;?051Qoa_s?-B!3xnMObuGZ)S9NVRB^vL1b@YWgtmyVP|DhWnpA_ami&o0001w zNkl>R}?qa5)}k1`vi>L=*t|fDqpL;Oqa(Z+`rT z0T3G`MvPvP4JXwSvJ5B15+*`nt|QEjGk8IAgyMvWT*HaAgi47L!-=tkiBiJ}S;9mO z!|_?dL@mQ{S;7cPX4Enq8C-e$li|^qzYHw2FdXI+28N#u009O7WW6+eDK~Nb00000 LNkvXXu0mjf!{ArI diff --git a/src/skins/vector/views/molecules/MessageComposer.js b/src/skins/vector/views/molecules/MessageComposer.js index f22d2a4df..25f69bda3 100644 --- a/src/skins/vector/views/molecules/MessageComposer.js +++ b/src/skins/vector/views/molecules/MessageComposer.js @@ -22,6 +22,7 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var MessageComposerController = require('matrix-react-sdk/lib/controllers/molecules/MessageComposer') var sdk = require('matrix-react-sdk') +var dis = require('matrix-react-sdk/lib/dispatcher') module.exports = React.createClass({ displayName: 'MessageComposer', @@ -40,6 +41,14 @@ module.exports = React.createClass({ this.refs.uploadInput.getDOMNode().value = null; }, + onCallClick: function(ev) { + dis.dispatch({ + action: 'place_call', + type: ev.shiftKey ? "screensharing" : "video", + room_id: this.props.room.roomId + }); + }, + render: function() { var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId); var uploadInputStyle = {display: 'none'}; @@ -58,6 +67,9 @@ module.exports = React.createClass({ +
+ +