From b8610ab46670de39f2c0af571af00ad3ef355564 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Sun, 4 Sep 2016 21:03:00 +0530 Subject: [PATCH 1/4] RTE formatbar (wip) --- .../views/rooms/MessageComposer.css | 27 +++++++++++++++++-- src/skins/vector/img/button-text-bold-o-n.svg | 17 ++++++++++++ src/skins/vector/img/button-text-bold.svg | 17 ++++++++++++ .../vector/img/button-text-bullet-o-n.svg | 20 ++++++++++++++ src/skins/vector/img/button-text-bullet.svg | 20 ++++++++++++++ .../vector/img/button-text-formatting.svg | 18 +++++++++++++ .../vector/img/button-text-italic-o-n.svg | 17 ++++++++++++ src/skins/vector/img/button-text-italic.svg | 17 ++++++++++++ .../vector/img/button-text-numbullet-o-n.svg | 20 ++++++++++++++ .../vector/img/button-text-numbullet.svg | 20 ++++++++++++++ .../vector/img/button-text-quote-o-n.svg | 17 ++++++++++++ src/skins/vector/img/button-text-quote.svg | 17 ++++++++++++ src/skins/vector/img/button-text-strike.svg | 18 +++++++++++++ 13 files changed, 243 insertions(+), 2 deletions(-) create mode 100644 src/skins/vector/img/button-text-bold-o-n.svg create mode 100644 src/skins/vector/img/button-text-bold.svg create mode 100644 src/skins/vector/img/button-text-bullet-o-n.svg create mode 100644 src/skins/vector/img/button-text-bullet.svg create mode 100644 src/skins/vector/img/button-text-formatting.svg create mode 100644 src/skins/vector/img/button-text-italic-o-n.svg create mode 100644 src/skins/vector/img/button-text-italic.svg create mode 100644 src/skins/vector/img/button-text-numbullet-o-n.svg create mode 100644 src/skins/vector/img/button-text-numbullet.svg create mode 100644 src/skins/vector/img/button-text-quote-o-n.svg create mode 100644 src/skins/vector/img/button-text-quote.svg create mode 100644 src/skins/vector/img/button-text-strike.svg 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 9dd93b804c..71f5315d5e 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 @@ -65,8 +65,9 @@ limitations under the License. font-size: 14px; margin-right: 6px; } -.mx_MessageComposer_input_rte { - border-top: 2px solid #76cfa6; /* placeholder RTE indicator */ + +.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root { + display: none; } .mx_MessageComposer_input .DraftEditor-root { @@ -122,3 +123,25 @@ limitations under the License. pointer-events: none; } +.mx_MessageComposer_formatbar { + display: flex; + + height: 30px; + width: 100%; + background-color: #f7f7f7; + box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); + + box-sizing: border-box; + padding-left: 62px; + + flex-direction: row; + align-items: center; +} + +.mx_MessageComposer_formatbar * { + margin-right: 4px; +} + +.mx_MessageComposer_format_button { + cursor: pointer; +} diff --git a/src/skins/vector/img/button-text-bold-o-n.svg b/src/skins/vector/img/button-text-bold-o-n.svg new file mode 100644 index 0000000000..161e740e90 --- /dev/null +++ b/src/skins/vector/img/button-text-bold-o-n.svg @@ -0,0 +1,17 @@ + + + + 01F3F9B2-8F38-4BAF-A345-AECAC3D88E79 + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-bold.svg b/src/skins/vector/img/button-text-bold.svg new file mode 100644 index 0000000000..0fd0baa07e --- /dev/null +++ b/src/skins/vector/img/button-text-bold.svg @@ -0,0 +1,17 @@ + + + + 9BC64A5B-F157-43FF-BCC4-02D30CDF520B + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-bullet-o-n.svg b/src/skins/vector/img/button-text-bullet-o-n.svg new file mode 100644 index 0000000000..d4a40e889c --- /dev/null +++ b/src/skins/vector/img/button-text-bullet-o-n.svg @@ -0,0 +1,20 @@ + + + + 654917CF-20A4-49B6-B0A1-9875D7B733C8 + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-bullet.svg b/src/skins/vector/img/button-text-bullet.svg new file mode 100644 index 0000000000..ae3e640d8e --- /dev/null +++ b/src/skins/vector/img/button-text-bullet.svg @@ -0,0 +1,20 @@ + + + + B7D94619-44BC-4184-A60A-DBC5BB54E5F9 + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-formatting.svg b/src/skins/vector/img/button-text-formatting.svg new file mode 100644 index 0000000000..d3fc3f5f54 --- /dev/null +++ b/src/skins/vector/img/button-text-formatting.svg @@ -0,0 +1,18 @@ + + + + F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9 + Created with sketchtool. + + + + + + + A + a + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-italic-o-n.svg b/src/skins/vector/img/button-text-italic-o-n.svg new file mode 100644 index 0000000000..15fe588596 --- /dev/null +++ b/src/skins/vector/img/button-text-italic-o-n.svg @@ -0,0 +1,17 @@ + + + + 116426C2-0B55-480E-92B3-57D4B3ABAB90 + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-italic.svg b/src/skins/vector/img/button-text-italic.svg new file mode 100644 index 0000000000..b5722e827b --- /dev/null +++ b/src/skins/vector/img/button-text-italic.svg @@ -0,0 +1,17 @@ + + + + 9FBC844D-96CF-4DCB-B545-FCD23727218B + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-numbullet-o-n.svg b/src/skins/vector/img/button-text-numbullet-o-n.svg new file mode 100644 index 0000000000..869a2c2cc2 --- /dev/null +++ b/src/skins/vector/img/button-text-numbullet-o-n.svg @@ -0,0 +1,20 @@ + + + + 294F929B-31AA-4D0C-98B3-9CA96764060D + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-numbullet.svg b/src/skins/vector/img/button-text-numbullet.svg new file mode 100644 index 0000000000..8e5b8b87b6 --- /dev/null +++ b/src/skins/vector/img/button-text-numbullet.svg @@ -0,0 +1,20 @@ + + + + F0F58459-A13A-48C5-9332-ABFB96726F05 + Created with sketchtool. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-quote-o-n.svg b/src/skins/vector/img/button-text-quote-o-n.svg new file mode 100644 index 0000000000..f8a86125c9 --- /dev/null +++ b/src/skins/vector/img/button-text-quote-o-n.svg @@ -0,0 +1,17 @@ + + + + 3B24B8C7-64BE-4B3E-A748-94DB72E1210F + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-quote.svg b/src/skins/vector/img/button-text-quote.svg new file mode 100644 index 0000000000..d70c261f5d --- /dev/null +++ b/src/skins/vector/img/button-text-quote.svg @@ -0,0 +1,17 @@ + + + + BFC0418B-9081-4789-A231-B75953157748 + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-strike.svg b/src/skins/vector/img/button-text-strike.svg new file mode 100644 index 0000000000..5f262dc350 --- /dev/null +++ b/src/skins/vector/img/button-text-strike.svg @@ -0,0 +1,18 @@ + + + + A34F2223-34C6-46AE-AA47-38EC8984E9B3 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file From d6a324ede725c877648c8e79483d0454e2450b8f Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Mon, 5 Sep 2016 17:39:32 +0530 Subject: [PATCH 2/4] 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 737b7faa41..ff6ace619a 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 71f5315d5e..b1cd3ce0e6 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 0000000000..6414933d96 --- /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 0000000000..2acc4f675c --- /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 0000000000..ce28d128aa --- /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 From 22bf6e7969a6897712e1c1230b144c8a27f1b6d5 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Wed, 7 Sep 2016 22:52:37 +0530 Subject: [PATCH 3/4] RTE format bar enhancements --- .../views/elements/RichText.css | 13 ++++++++++ .../views/rooms/MessageComposer.css | 23 ++++++++++++++--- src/skins/vector/img/button-text-code-o-n.svg | 25 +++++++++++++++++++ src/skins/vector/img/button-text-code.svg | 25 +++++++++++++++++++ .../vector/img/button-text-underline-o-n.svg | 18 +++++++++++++ .../vector/img/button-text-underline.svg | 18 +++++++++++++ 6 files changed, 118 insertions(+), 4 deletions(-) create mode 100644 src/skins/vector/img/button-text-code-o-n.svg create mode 100644 src/skins/vector/img/button-text-code.svg create mode 100644 src/skins/vector/img/button-text-underline-o-n.svg create mode 100644 src/skins/vector/img/button-text-underline.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css index 171482a362..3d8d8f3bbd 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css @@ -20,3 +20,16 @@ .mx_Markdown_ITALIC { font-style: italic; } + +.mx_Markdown_CODE { + padding: .2em 0; + margin: 0; + font-size: 85%; + background-color: rgba(0,0,0,.04); + border-radius: 3px; +} + +.mx_Markdown_HR { + color: rgba(0, 0, 0, 0.5); + text-decoration: #e7e7e7 double line-through; +} 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 b1cd3ce0e6..45bc39cf3b 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 @@ -60,6 +60,7 @@ limitations under the License. display: flex; flex-direction: column; min-height: 60px; + justify-content: center; align-items: flex-start; font-size: 14px; margin-right: 6px; @@ -138,19 +139,26 @@ limitations under the License. margin: 0 11px; } -.mx_MessageComposer_formatbar { - display: flex; - - height: 30px; +.mx_MessageComposer_formatbar_wrapper { width: 100%; background-color: #f7f7f7; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); +} + +.mx_MessageComposer_formatbar { + margin: auto; + max-width: 960px; + display: flex; + + height: 30px; box-sizing: border-box; padding-left: 62px; flex-direction: row; align-items: center; + font-size: 10px; + color: #888; } .mx_MessageComposer_formatbar * { @@ -163,6 +171,11 @@ limitations under the License. cursor: pointer; } +.mx_MessageComposer_format_button_disabled { + cursor: not-allowed; + opacity: 0.5; +} + .mx_MessageComposer_formatbar_cancel { margin-right: 22px; } @@ -172,6 +185,8 @@ limitations under the License. } .mx_MessageComposer_input_markdownIndicator { + cursor: pointer; + height: 10px; padding: 4px 4px 4px 0; opacity: 0.8; } diff --git a/src/skins/vector/img/button-text-code-o-n.svg b/src/skins/vector/img/button-text-code-o-n.svg new file mode 100644 index 0000000000..8d1439c97b --- /dev/null +++ b/src/skins/vector/img/button-text-code-o-n.svg @@ -0,0 +1,25 @@ + + + + B76754AB-42E6-48D2-9443-80CBC0DE02ED + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-code.svg b/src/skins/vector/img/button-text-code.svg new file mode 100644 index 0000000000..24026cb709 --- /dev/null +++ b/src/skins/vector/img/button-text-code.svg @@ -0,0 +1,25 @@ + + + + 4CAFF494-61AE-4916-AFE8-D1E62F7CF0DE + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-underline-o-n.svg b/src/skins/vector/img/button-text-underline-o-n.svg new file mode 100644 index 0000000000..870be3ce6a --- /dev/null +++ b/src/skins/vector/img/button-text-underline-o-n.svg @@ -0,0 +1,18 @@ + + + + FD84FF7C-43E4-4312-90AB-5A59AD018377 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/skins/vector/img/button-text-underline.svg b/src/skins/vector/img/button-text-underline.svg new file mode 100644 index 0000000000..26f448539c --- /dev/null +++ b/src/skins/vector/img/button-text-underline.svg @@ -0,0 +1,18 @@ + + + + 13E7EE68-9B16-4A3D-8F9F-31E4BAB7E438 + Created with sketchtool. + + + + + + + + + + + + + \ No newline at end of file From d833c7632d9677a6e093a3dde1041152202254a2 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Thu, 8 Sep 2016 02:47:31 +0530 Subject: [PATCH 4/4] Add strikethrough and
styles --- .../css/matrix-react-sdk/views/elements/RichText.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css index 3d8d8f3bbd..f0b3c04645 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css @@ -30,6 +30,10 @@ } .mx_Markdown_HR { - color: rgba(0, 0, 0, 0.5); - text-decoration: #e7e7e7 double line-through; + display: block; + background: #e7e7e7; +} + +.mx_Markdown_STRIKETHROUGH { + text-decoration: line-through; }