From 5fb990eb5f7d429e06a05da8a96a97d3166cb277 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 18 Feb 2019 18:26:40 +0000 Subject: [PATCH] Convert Markdown button to SVG mask This makes it easier to theme via CSS, which helps with the dark theme. --- res/css/views/rooms/_MessageComposer.scss | 19 ++++++++++-- res/img/button-md-false.png | Bin 569 -> 0 bytes res/img/button-md-false.svg | 29 ------------------ res/img/button-md-false@2x.png | Bin 1086 -> 0 bytes res/img/button-md-false@3x.png | Bin 1548 -> 0 bytes res/img/button-md-true.png | Bin 483 -> 0 bytes res/img/button-md-true.svg | 14 --------- res/img/button-md-true@2x.png | Bin 906 -> 0 bytes res/img/button-md-true@3x.png | Bin 1201 -> 0 bytes res/img/markdown.svg | 3 ++ src/components/views/rooms/MessageComposer.js | 17 +++++----- .../views/rooms/MessageComposerInput.js | 14 ++++++--- 12 files changed, 39 insertions(+), 57 deletions(-) delete mode 100644 res/img/button-md-false.png delete mode 100644 res/img/button-md-false.svg delete mode 100644 res/img/button-md-false@2x.png delete mode 100644 res/img/button-md-false@3x.png delete mode 100644 res/img/button-md-true.png delete mode 100644 res/img/button-md-true.svg delete mode 100644 res/img/button-md-true@2x.png delete mode 100644 res/img/button-md-true@3x.png create mode 100644 res/img/markdown.svg diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss index db8eb4995d..89115669d3 100644 --- a/res/css/views/rooms/_MessageComposer.scss +++ b/res/css/views/rooms/_MessageComposer.scss @@ -255,14 +255,29 @@ limitations under the License. } .mx_MessageComposer_formatbar_markdown { + height: 17px; + width: 30px; margin-right: 64px; } .mx_MessageComposer_input_markdownIndicator { - cursor: pointer; height: 10px; + width: 12px; padding: 4px 4px 4px 0; - opacity: 0.8; +} + +.mx_MessageComposer_formatbar_markdown, +.mx_MessageComposer_input_markdownIndicator { + cursor: pointer; + mask-image: url('$(res)/img/markdown.svg'); + mask-size: contain; + mask-position: center; + mask-repeat: no-repeat; + background-color: $composer-button-color; + + &.mx_MessageComposer_markdownDisabled { + opacity: 0.2; + } } .mx_MatrixChat_useCompactLayout { diff --git a/res/img/button-md-false.png b/res/img/button-md-false.png deleted file mode 100644 index 6debbccc937a75e1a07a2a36518e221efb696823..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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? diff --git a/res/img/button-md-false.svg b/res/img/button-md-false.svg deleted file mode 100644 index 6414933d96..0000000000 --- a/res/img/button-md-false.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - D335F9E8-C813-47D7-B1BE-C8DEF2C8214F - Created with sketchtool. - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/res/img/button-md-false@2x.png b/res/img/button-md-false@2x.png deleted file mode 100644 index 497f5385d140cfda7cd24c5b79cf3871a700b017..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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 diff --git a/res/img/button-md-false@3x.png b/res/img/button-md-false@3x.png deleted file mode 100644 index 1184e6b351ec17fb2e1f8cdaa866ea3d81d5cb07..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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 diff --git a/res/img/button-md-true.svg b/res/img/button-md-true.svg deleted file mode 100644 index 2acc4f675c..0000000000 --- a/res/img/button-md-true.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - 2A63B135-4281-4FBB-A88C-012AE22E9594 - Created with sketchtool. - - - - - - - - - \ No newline at end of file diff --git a/res/img/button-md-true@2x.png b/res/img/button-md-true@2x.png deleted file mode 100644 index ad9067f385b2fbb975c6df7a006adab817800751..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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 diff --git a/res/img/button-md-true@3x.png b/res/img/button-md-true@3x.png deleted file mode 100644 index d615867dc4604e2f898fb0f15e4e2b19e5bd0bf5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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_@ + + diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 10142b2b4b..7eef868ef7 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -499,15 +499,16 @@ export default class MessageComposer extends React.Component {
{ formatButtons } -
- +
+ + onClick={this.onToggleFormattingClicked} + className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor" + src={require("../../../../res/img/icon-text-cancel.svg")} + />
; } diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index ab89e402ae..1954ca0d84 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -60,6 +60,7 @@ import ReplyPreview from "./ReplyPreview"; import RoomViewStore from '../../../stores/RoomViewStore'; import ReplyThread from "../elements/ReplyThread"; import {ContentHelpers} from 'matrix-js-sdk'; +import AccessibleButton from '../elements/AccessibleButton'; const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort(); const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$'); @@ -1582,6 +1583,11 @@ export default class MessageComposerInput extends React.Component { placeholder = undefined; } + const markdownClasses = classNames({ + mx_MessageComposer_input_markdownIndicator: true, + mx_MessageComposer_markdownDisabled: this.state.isRichTextEnabled, + }); + return (
@@ -1596,10 +1602,10 @@ export default class MessageComposerInput extends React.Component { />
- +