From d6a324ede725c877648c8e79483d0454e2450b8f Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Mon, 5 Sep 2016 17:39:32 +0530 Subject: [PATCH] Formatting toggle, markdown indicator, quoting --- .../views/context_menus/MessageContextMenu.js | 15 +++++++ .../views/rooms/MessageComposer.css | 42 +++++++++++++++--- src/skins/vector/img/button-md-false.png | Bin 0 -> 569 bytes src/skins/vector/img/button-md-false.svg | 29 ++++++++++++ src/skins/vector/img/button-md-false@2x.png | Bin 0 -> 1086 bytes src/skins/vector/img/button-md-false@3x.png | Bin 0 -> 1548 bytes src/skins/vector/img/button-md-true.png | Bin 0 -> 483 bytes src/skins/vector/img/button-md-true.svg | 14 ++++++ src/skins/vector/img/button-md-true@2x.png | Bin 0 -> 906 bytes src/skins/vector/img/button-md-true@3x.png | Bin 0 -> 1201 bytes .../vector/img/button-text-strike-o-n.svg | 18 ++++++++ src/skins/vector/img/icon-text-cancel.svg | 15 +++++++ 12 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 src/skins/vector/img/button-md-false.png create mode 100644 src/skins/vector/img/button-md-false.svg create mode 100644 src/skins/vector/img/button-md-false@2x.png create mode 100644 src/skins/vector/img/button-md-false@3x.png create mode 100644 src/skins/vector/img/button-md-true.png create mode 100644 src/skins/vector/img/button-md-true.svg create mode 100644 src/skins/vector/img/button-md-true@2x.png create mode 100644 src/skins/vector/img/button-md-true@3x.png create mode 100644 src/skins/vector/img/button-text-strike-o-n.svg create mode 100644 src/skins/vector/img/icon-text-cancel.svg diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js index 737b7faa..ff6ace61 100644 --- a/src/components/views/context_menus/MessageContextMenu.js +++ b/src/components/views/context_menus/MessageContextMenu.js @@ -84,6 +84,14 @@ module.exports = React.createClass({ if (this.props.onFinished) this.props.onFinished(); }, + onQuoteClick: function () { + console.log(this.props.mxEvent); + dis.dispatch({ + action: 'quote', + event: this.props.mxEvent, + }); + }, + render: function() { var eventStatus = this.props.mxEvent.status; var resendButton; @@ -141,6 +149,12 @@ module.exports = React.createClass({ ); + const quoteButton = ( +
+ Quote +
+ ); + return (
{resendButton} @@ -149,6 +163,7 @@ module.exports = React.createClass({ {viewSourceButton} {unhidePreviewButton} {permalinkButton} + {quoteButton}
); } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css index 71f5315d..b1cd3ce0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css @@ -57,11 +57,10 @@ limitations under the License. .mx_MessageComposer_input { flex: 1; vertical-align: middle; - min-height: 60px; - max-height: 120px; display: flex; - align-items: center; - overflow: auto; + flex-direction: column; + min-height: 60px; + align-items: flex-start; font-size: 14px; margin-right: 6px; } @@ -71,7 +70,17 @@ limitations under the License. } .mx_MessageComposer_input .DraftEditor-root { + width: 100%; flex: 1; + max-height: 120px; + overflow: auto; +} + +.mx_MessageComposer_input blockquote { + color: rgb(119, 119, 119); + margin: 0 0 16px; + padding: 0 15px; + border-left: 4px solid rgb(221, 221, 221); } .mx_MessageComposer_input textarea { @@ -89,7 +98,8 @@ limitations under the License. color: #454545; background-color: #fff; font-size: 14px; - + max-height: 120px; + overflow: auto; /* needed for FF */ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; } @@ -123,6 +133,11 @@ limitations under the License. pointer-events: none; } +.mx_MessageComposer_formatting { + cursor: pointer; + margin: 0 11px; +} + .mx_MessageComposer_formatbar { display: flex; @@ -142,6 +157,21 @@ limitations under the License. margin-right: 4px; } -.mx_MessageComposer_format_button { +.mx_MessageComposer_format_button, +.mx_MessageComposer_formatbar_cancel, +.mx_MessageComposer_formatbar_markdown { cursor: pointer; } + +.mx_MessageComposer_formatbar_cancel { + margin-right: 22px; +} + +.mx_MessageComposer_formatbar_markdown { + margin-right: 64px; +} + +.mx_MessageComposer_input_markdownIndicator { + padding: 4px 4px 4px 0; + opacity: 0.8; +} diff --git a/src/skins/vector/img/button-md-false.png b/src/skins/vector/img/button-md-false.png new file mode 100644 index 0000000000000000000000000000000000000000..6debbccc937a75e1a07a2a36518e221efb696823 GIT binary patch literal 569 zcmV-90>=G`P)Px$^GQTOR5%f>lTAwkQ51&nI5U20n$SW62`sRMghb#f7w+1H`X`irKr45x3;Gkf zOl*-LxR6$YU$_&bjn+a?upCi)&)^-#VcLWT4)@G^&w1vYJ9h*I%VaWQDwVQOybr5Z ztLsv!v=W-lX4>g=mIOiA2UlY(m&>$dv)S&fRx2alv*j%?3ASf0V>k(U=bS}ROol=s zo7?R^#O5b|BO16Tog8|d>sS??{-)E_a0d?M3&o1h=bMbj2|wM09|qjtvDJdyjQE$+*~gd3esw|dY{kdVXplNr-VQtFu;G1gY$g- zdK8I7nw3h0HZ9p~_7z8RVYl1q5~z7Q7aZLr+wHc9v67sE2`IDcCGCQ&us*)}2Ja=8+8&U!HINf2k- zBz2KxnUNcffHbn18KIN|?o`6%&*P7LM6uVb@IRUgmZaP-lh~_%7EU=y00000NkvXX Hu0mjflU)I? literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-false.svg b/src/skins/vector/img/button-md-false.svg new file mode 100644 index 00000000..6414933d --- /dev/null +++ b/src/skins/vector/img/button-md-false.svg @@ -0,0 +1,29 @@ + + + + D335F9E8-C813-47D7-B1BE-C8DEF2C8214F + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-md-false@2x.png b/src/skins/vector/img/button-md-false@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..497f5385d140cfda7cd24c5b79cf3871a700b017 GIT binary patch literal 1086 zcmV-E1i|}>P)Px&_(?=TR9FesS6@g|VHDqgbz`!J%|BC;>|v;E;Db;?U>5DAmmq?C>q&%q2#O$l zis-?hw+bJkmx_X(5=TBn3`R}d5SdbIMk+e7hat{suDSI)mwlJ-UU% zc&`=!mcwv(c=)iduWwvGH#awAx7$B42fbdeGZ+j^tVxSw$?@$h+}8=iDB945X5jSZipS%F0Fq^qk)eUMwzdqDc?tk}0*y()s}=cdHftdJa#`05oKE!n z{l8MF)Hw={EMM#F?EJ2XPuj z#7|94SzB9MXNj+50l*mmdIwvjk`uzr&(Dvb`5$L8867?H_dr#^5!r&d9iEw)v2}NM ze}L?w(<;5Fp;Ruft*ucxlms7*Mu(f4nqE;%TDTS*xw%#goZ_A8?d?q=`)5g@j}IIs z{Xc0#VZnZEWo2a?+Y<2MaM*|Y_DAN1_`;Q&$&CIBaC-Sz=;MPx6NSv;Rz%Sk_W}Mo zGY*A9Cmaq(l*#msK)_2aO;e>*00N6lYX;3?0sQmj<>gI0vreZo2EBj@dZ9#^ot!EH zM-yGdD0)jxf#wjtGLYHx^6sX9T&CURLpF3-Djp`8Kym;iqRURVM*uyV5bof>-0i`!ZgI77X}nzNr}0@w6yI01q7Z{+`rz{BLDyZ07*qoM6N<$ Ef*aWjwEzGB literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-false@3x.png b/src/skins/vector/img/button-md-false@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..1184e6b351ec17fb2e1f8cdaa866ea3d81d5cb07 GIT binary patch literal 1548 zcmV+n2J`ueP)Px)#z{m$RA>e5T3t+IMHIfbEzt58HUUzK6=jjlVvQRkAgq56ZcKRa!A%JA6I zqdpj4HmQjTlI)8QMq;eClwXk{!G`xHTO4Om186mfcb`X&JBE;JzI{sNeR zmX?+taddRFv8JZxZ@GXdiUNR=lTZBn>gwvFrqa^VCs|JkjFOTP!DKSAb(a4ets*c%VO_?7AMj->9?;+8@#Hk_78{sKjT3UJ&1ltMzvUJtpYM z3KU(YPknv;T{!s~&p4I_nJAXLRwY1K*?iV@0fig@FgLfix4*_TO6SiDb#-;&bOP(^ z>xP}39f5wB0_jB4^48YYjM?hZ4HQ@ycez||!;o>FwTO;u0B(%OV`%`^h?A>8zy1Av zmZhn_v9V#uR*#;b2!n%z`?IsNFYfN{rsN&~@*M#AM3Yx}6xJ0K@}sM(>mCkO&q$*T zKq#>~^XQ}Iu5|~6ENE+M^C34}L4G+FiB*nTPC%hf91h1fi;IhoWlF4agO0*`&Om{4 z@s5s;e~yBaT5UKqD8s|UWkW+lm0CI;A0NM$FGB3;Ir=!;B3nfN%P*%8^?%_ZAbH&94vadGjDxw*M>YzGH* z(d+eogmceJ9G)r?qU9X`^MNX1j!+;FI0GHiI3$`-3et}ws{i*CeDwDCe7=;=2on<% zmjKv@JOi}Q;L!E?`S~}rv>{nq3^q46eUV6{9NT|E`q9~l_vjia)B#4IysE0|HgZft z_d#O)k=J=PG{(U@?`Z)c*<6A`BT>nY2#pY&VQtL1j%YMgR#y5v z9#1t#iHMc(bM$|iNe$BWYx$QYmCvqtw;`OexM*caXQ(#4aMyyKu?( zE~|(7#imi!RdCKhA;Ty_$RIrdksJmv*5>AB4<%HhVd=ku{_guIP7y)_qvlb)qs50K zTPPF?l2U|hQaeJ}uBIayAQtFKjBYp_7O;m%>Vw?FYV@%(0Onk0XXmeokk0^!o8?iR z0HJ|V`=|y53hx4#gx;p6CINc}wSDm9&O+BZF)Au51e~3CGFoXDF+dl$wzg7i%jVAl z$q~|O!BLc_Xk-&9C3RZuv_4uQC8=9!ZYt4}4LKEZM5&z;ouej6qBfMj=q4cBl`bn# zXf*VC2o!AQ^ir45L%?JU2q`#G(?>644anSygr}Fn9LhL*b~a2- yPPSB6S3eF$MP4m@fSpqgfxljyq5K30b^RY({^*N^6Hc%I0000Px$ok>JNR5%f}Q@=~YP!R4*qDv@tQgBgpu#<=o2mb*jZDSmCaQDZigR9Wpx;VJ_ zCj?Yd(o(nn8C}Iq$0}-)#_!TxcuzVg#0SZD_uakk-Q7z>k|d(hXv`aiF;yyP#c@1r zx7)9xR;%6NfZc+0a~Vz3&NO&CIa8o98jTzcRnr0gv2;aP*Y!ipzAA*+#}o63uy2UZ zVqX&fB=PUeGa76V;v$|qoz4K}0C%wfyu{PDEbFw{Y(}t4wrwYbw9s|v`#$9>Jo&Vg z%E#3B9RxuO60PP>s zCJ3*vCoN}Q|5@tzVAi3$Kk--c6To{Ir=xh^QIf|k#A;$?7aa3#9>-9x!T$7W) zSHPbThw5~WA#VvC^x%`|Ec1*){Uei&w|7h8Fc$WW4VBFgcg+%DVcwCp!bF? Zt#3CFoq7f*3)uhw002ovPDHLkV1lx_+k^lB literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-true.svg b/src/skins/vector/img/button-md-true.svg new file mode 100644 index 00000000..2acc4f67 --- /dev/null +++ b/src/skins/vector/img/button-md-true.svg @@ -0,0 +1,14 @@ + + + + 2A63B135-4281-4FBB-A88C-012AE22E9594 + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-md-true@2x.png b/src/skins/vector/img/button-md-true@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ad9067f385b2fbb975c6df7a006adab817800751 GIT binary patch literal 906 zcmV;519kj~P)Px&L`g(JR9Fesmpf=vQ5eU2la^>xMT0}ZL8l5na4B}Ex+o}plA(jtpjaq~RK%g9 zwnM>+2t`Fid_ZxK^g(Jae~KP!xe-|ufpCX)}~TWS@w z;4%y&13wlHhtCG<&wHjDc)A8ghHV= zOm>W9Sv?`TsMqT~QVd%6`PaNH;A-;u`T1Fw%QYrI0R5dZ@&h_9y49ezfh$n0t*z$) z99BH^#N6E6E5)zos0ui5n+)~b59rgJ!2Q((EOS`~t{!4TLqi@3q%^*Av95@$XkTAn zlP>>H-ZJpT#l@y*Goa%}$CI02wq4*Ri z6AjR=Ua-^G3rd*5!NG=DEEa_QqU(!!Kty~#-+{@=$waYDWO8p6p3T?-|BP?5=!9C{ zaR~tYL{CpoyU2L)z#IN zOUMZfko=@dW@X@en1$Yk=KjQ(#RLKYFE2pVwYHhrm984#bxhjKH_cJ*hnB4SQj-#M zlm%Zhv#ZnKRHpISV`dj!Rlrp+iQA~zr?7=iBS|gNvz*$n?n_RC)3^gYr0dQ2s)4Iy zOyD+4YE?%$jB{$o#h-;-CTG9M<*2Q$QZCV7*luzWms!LPK%cRi$6&=P9!wHQ87#xc zM25Oayi=3S*l)zWFEZ>RuF}b>7op{ntoWwIlV}8S9DLZ6_e_YZ4 zS98>nz_|~(+FPo*?W_QZd$dHIyRKI7t0^;}KLThr_p?i9383(!*jQ62H85QI3>aT~ gJf4d)GczB41OD$WoQHsRivR!s07*qoM6N<$g6lN16951J literal 0 HcmV?d00001 diff --git a/src/skins/vector/img/button-md-true@3x.png b/src/skins/vector/img/button-md-true@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..d615867dc4604e2f898fb0f15e4e2b19e5bd0bf5 GIT binary patch literal 1201 zcmV;i1Wx;jP)Px(Ye_^wRA>e5noCGjQ5eUaM^>7c^rSWg8AJ<%#%L2E5rMCqXre`i77;`S6>XwG z6c;UeLPgNV$_NApQHK&*v=RhcL_sC40$WHyj~SEH>34>%-VW#FnVCB|dFR66p7XuV z`TqAi-~H|*FE4lG5HLZ&V+n;qp{3*FiAJc0j> zhp)Phj*hQ7nQWmu0*Y{k?KR}}dQWN`BhusbJv}{dHTz9$LSXM19muae`ShzYF33mA3u zzsQqj``ENjN!kyQc#~Gj5{0xQg<|ViQ&ZDoQ-63Dyo|!C-c)`*8JZG8apWG+C2u4ABJYZ0xJ#jh8J?FY0{7SlmXc|LS+l8X-6?IzP_ z+up;*eiNOP7pXGNq-$th_QWd^E3`0exk|^BhQ60=_Yi>hnCe(^L~tAW$F1>PXGcL1 zlQH>B;-#NRtelfgtjcv`C!ZF^$?Zx31(E1FgU&?-OG|Pbl;1NovhY(})kI>|&Yl7T z2a9Nt+S=MpbE&h2!^qs2OHSrz3KS7BH<_$Op3tH3YCiM!69sE^_5f`!yms2m_i~-A zOwSl7OymccjM>NbMsmzka#peI6o3Q(tqYlanP)Q2*rH7)Pge$~%c9X}x2QiXTfty( z^W@}Y1fJ0=O-s*ycB*)@+x*x4-P9kCiI~vD#Kan!_*p=_Gfw$10);SL!tWY8RkKi7 zCH?yb_SWg_5%!|qN$Mafg47}RIg7i}hNP4g!XA>9@~yf;))gckDJuT!oRX=llmkV9 zYz~whC<+7=B=L|HQ_x*Y0*|Qplj)Uf5s(}QkSR!SL{7OQ@!ULY=PPE+%WJ!bpm2@m z>UxDJd0tRZa85+T%oC(|h@v{(ODjcShAxB_@ + + + 69B11088-0F3A-4E14-BD9F-4FEF4115E99B + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/icon-text-cancel.svg b/src/skins/vector/img/icon-text-cancel.svg new file mode 100644 index 00000000..ce28d128 --- /dev/null +++ b/src/skins/vector/img/icon-text-cancel.svg @@ -0,0 +1,15 @@ + + + + 28D80248-63BA-4A5F-9216-4CFE72784BAC + Created with sketchtool. + + + + + + + + + + \ No newline at end of file