From 86331eb99abc41dbb0feb80e5753cd36570e17c9 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 12 Oct 2023 16:40:35 +0200 Subject: [PATCH] feat(feed post): add expandos for posts text content and related buttons --- public/assets/buttons/close-button-hover.png | Bin 0 -> 1836 bytes public/assets/buttons/close-button.png | Bin 0 -> 1657 bytes public/assets/{ => buttons}/downvote.png | Bin public/assets/{ => buttons}/droparrowgray.gif | Bin public/assets/buttons/play-button-hover.png | Bin 0 -> 1621 bytes public/assets/buttons/play-button.png | Bin 0 -> 1451 bytes public/assets/buttons/text-button-hover.png | Bin 0 -> 1475 bytes public/assets/buttons/text-button.png | Bin 0 -> 1332 bytes public/assets/{ => buttons}/upvote.png | Bin src/components/feed-post/feed-post.module.css | 77 +++++++++++++++++- src/components/feed-post/feed-post.tsx | 20 ++++- src/components/topbar/topbar.module.css | 2 +- 12 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 public/assets/buttons/close-button-hover.png create mode 100644 public/assets/buttons/close-button.png rename public/assets/{ => buttons}/downvote.png (100%) rename public/assets/{ => buttons}/droparrowgray.gif (100%) create mode 100644 public/assets/buttons/play-button-hover.png create mode 100644 public/assets/buttons/play-button.png create mode 100644 public/assets/buttons/text-button-hover.png create mode 100644 public/assets/buttons/text-button.png rename public/assets/{ => buttons}/upvote.png (100%) diff --git a/public/assets/buttons/close-button-hover.png b/public/assets/buttons/close-button-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..d3ed71e6784b6fd8afd6ec7821ca3b0059b66145 GIT binary patch literal 1836 zcmY*adtB02AI9jSI5XO`iIhl|Lnlbi3kY5*#YBBki@e|kK~Vt*n0QH(sg+ZXz3(}nbH2~{exLI^=llETcgoMlLk|Q2 z0RR9!q9=i@j!4bY-mKmaw_Dn)gBFkM;Rd)SfhyDoKRSiTAdvtTYOD>|ptT(U)KJtD zaDoZgxQ+pUz3K=607Y7#s-g`at4I;>6V?!2d_fSk$Ps1$g-;=QV`&@~G9ro-NkA+Tce zcE1<-SBF67(YVY6K9j?SX>=nZIf;Bc9Ii3?INraL&t!aZV)H(1t<M2_F~3Hmd-BM-w5&LIrh-dyNrGPS5|Kj z{u=EX_!$)}&#ds<)*uFYjFb#`P{T(<({65_@3Om?rq^F;UOln%#XISB{jewJQM<1B zj34^FTR%DfI^?dt|BNqp&3tlgI>k4A{+?d8k58+eptp)P@OgHMth)w^>QR)zyp}#& ze6{M;8%k9^qhgxbBc4!NGzDU5`ul$aq9&vlUffYETKg)mjlEsG@5lX$G@bMMFaKe5 zPHy(lWI@;GsmOY$W!Grfi#RlyU!-T>aJsbJxoTf6Po)|U8>^Co3d()5ikz>)e`>n7 zTcMP*Z7u){Z1K@%=~Ts(=_N^t7R{jU*KUa|$HAZ(d~g#aKD=4zZWudqI@t78-`Dv? z%ioVP^^1)XW~aCXn43=*rt@3<1L>Hz$qLA2G7jZr7XRh2-(hzfp6%sRsVZi|_#c%cnTS_1V4pi9 z<^GN}aYxkFH+*nsfDk?7B1I^5CLm;5a}l996mnp?;*cV_E7dj6d2R;@eMGPFicA#P zt8EO93);h0Vh7daiU%MDka)Z%(+J-Lj%GY7-g{KAGe)&?{MgDV@9?em?9p$JBgB?O zDDaFlx<6m_=bP2KuOnZwPHZlJ`z0qMK5w?d5a@FEp`&NBZVH$<=P-IJwoFm75F?gn zgxZ>vai+)Ys&Q_j$-dTv+!zX`niITJP&_0QO`d%nL@+QDXPRlJbq(fSn$<$eR5!YJ z=s+q1xAy{Fuh)P(Z%+&*&+y%<+L}&yDRdwC07F&<(`hG7Vw$bC|NX@;5#E(6%gm0px8s8{^uky2_sy<+w)d)TuiJ{SJe~CzC^k$7L>BWT|$! zZV{lr#A_o2O*NNv??{6j*lXn9E?M|a)>L0}v7B0Hd?~o7y{%66BRyoxE+^yJ*dDVm zM-bzb9Ju@w+UZ3zV@%X@Wot(%XP$O*Z-Y(&8I@EW`y4TEDb>ML`*(=;OLf!dmK?fT zbG(DD=3&gaZ8&C8F^ng8RVcv*khHQdzsjoYpa= zO8Yk}GbQ>06rvb)-gvpcK$~3Ec@JwM!e!>4w9TLT5i=D2n}u&wCz@+%kQK!fp1bM= z9!aeu4pVzJgcv$t{Q{mjyNhUmxjd_ItusTMtq%3oU)8rnvQ-H|sI_Mfl*-~DoZS}a z`C5;QwUX8b9gg9fu~>O{|KrM;rh|x#;-^^ohQbNM{fX~7ij3`Yqw5(#k8sf;X9r6j zOS4}Z>~w5S%t)U*H&IdHxH3csLvIADf-Kr^&8*J+@*nv&>76jF?I6A;?h0Oh^hE0) iho2r5w1+ijxT#EZh5kY*rL0Nw?;-B@AzX6{7ybhn_ZG+i literal 0 HcmV?d00001 diff --git a/public/assets/buttons/close-button.png b/public/assets/buttons/close-button.png new file mode 100644 index 0000000000000000000000000000000000000000..4e12586dca10563bf4f081d1d2f023858e38e325 GIT binary patch literal 1657 zcmeAS@N?(olHy`uVBq!ia0vp^dLYcf1|-9GYMTQo#^NA%Cx&(BWL^R}0jUw5X}-P; zT0k}j0~4bV12aeo5Hhr9GO&Qz3=C>Ont_3N0V6_o0TWzSZviuc4N~af&m{#kBr-E3 zq9nrC$0|8LS1&OoKPgqOBDVmffWfB13dqb&ElE_U$j!+swyLmI0;{kBvO&W7N(x{l zCE2!05xxNm&iO^D3TAo+dIm~%TnY*bHbp6ERzWUqQ0+jTtx`rwNr9EVetCJhUb(Se zeo?xG?WUP)qwZeFo6#1NP{E~&-IMVSR9nfZANAafIw@=Hr> zm6Sjh!2!gbC7EdmoAQdG-U511A0(r1sAr%LHyfzc1|(|bUzC{&v>9Z+ouLg_C5jl- z9vgj-4Cx=&qKQ z?n928_D34z8U&as9wZ%#U-0nI)n@g7O#hkuWcCy({t};2@$f+Z1U3r|7af5w3{{E; zwYDVP{#v{H_bko3H|NHBdB+>gy?e7V-_H8Xo|)#|it98^rhJ;07%{m`ao)t0c3yj@ zL}{vOIG)p(8{`#uYpc%2oXBIBPMkR5zl&ejP2%j_xl5nrnAz#J7&G;CE+f=qDx89v_LJ=YDNbMM=n)Jfa?KhD?3=g+sS zv%)pm*fM$I0&xry*S3Z2W z@qFIf9ZlA@d!yVl(rg#alP`Z=IXSza&+sizf7Mr$#R~5kxMw_ZiV1J97T$O*`Ipi3 zn)|N}PNqJ6P*C}0OW3`|JV&0V-AdFB)$T3S(Yv_fr|Wh9<4J~zvjiueoWtEMQzKw_ zBJucR-$el@x^v7{ugsEpUetPgkB4g{xAr2w5)&!WxpVI>TDo-UimJko;W9FBx<41^ zc>Y zKYQ6%XLruYSqTp^Gi!FejFB_5x-dii_U-vw)GHSz+%Xqq*}=GD>cQ#+B_==BqVumE z4vXcmee_9C`;hcx(W4a_?cWc$Txl$y-Lc8>-|H7uD%V(z)zlBIbzpkGkh%V5^@(1C zE%VhUl`eU0*U%nyuk^vvwo`iRIe4S@GPoy5dmTCu&M38JEyMGSKeryPX5l@@azHwW zVcqtV0ej~4olXwD8Cn#1;t$UQi#438jth1+Y8{-4n7ZgG?AUz_}w*S};ttIoGtmQk^7F{AzY z-ioIjITr=En;Js0uAAR;sXee*uOuSj^@k4)`L@LdpCYR=-ArzMbm5d)pEbWR`n^s3 zZa@B$ulGzje{Sx{%*z)12KVx3>72UIpv~;g$ahtfdn<3lKU0rWiCV_7W+6X3o#l*~ z@7eXA^S`JnyY9Mg7yIwL^v4QCZwuW@tNyvwd99Rq%+o8A@BKJ?hF-R1;>V9!5mzst zd4BV83}@xxTD>U`r9UyR{lmoj-7}```Rl5`!iVbXI#UAf`)Kfk3UW_ZKbLh*2~7Z4 Cn5{wp literal 0 HcmV?d00001 diff --git a/public/assets/downvote.png b/public/assets/buttons/downvote.png similarity index 100% rename from public/assets/downvote.png rename to public/assets/buttons/downvote.png diff --git a/public/assets/droparrowgray.gif b/public/assets/buttons/droparrowgray.gif similarity index 100% rename from public/assets/droparrowgray.gif rename to public/assets/buttons/droparrowgray.gif diff --git a/public/assets/buttons/play-button-hover.png b/public/assets/buttons/play-button-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..f2b42b8572ed1c6168694253fe29825baeb6ea4e GIT binary patch literal 1621 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 literal 0 HcmV?d00001 diff --git a/public/assets/buttons/text-button-hover.png b/public/assets/buttons/text-button-hover.png new file mode 100644 index 0000000000000000000000000000000000000000..beadbaa938c1e592ac4920e2268f27ddf3107539 GIT binary patch literal 1475 zcmeAS@N?(olHy`uVBq!ia0vp^dLYcf1|-9GYMTQo#^NA%Cx&(BWL^R}0jUw5X}-P; zT0k}j0~4bV12aeo5Hhr9GO&Qz3=C>Ont_3N0V6_o0TWzSZviuc4N~af&m{#kBr-E3 zq9nrC$0|8LS1&OoKPgqOBDVmffWfB13dqb&ElE_U$j!+swyLmI0;{kBvO&W7N(x{l zCE2!05xxNm&iO^D3TAo+dIm~%TnY*bHbp6ERzWUqQ0+jTtx`rwNr9EVetCJhUb(Se zeo?xG?WUP)qwZeFo6#1NP{E~&-IMVSR9nfZANAafIw@=Hr> zm6Sjh!2!gbC7EdmoAQdG-U511A0(r1sAr%LHyfzc1|(|bUzC{&v>9Z+ouLg_C5jl- z9vgj-S&{Q^UEcCdoB%Db>7DbPVdKdZFm!VbI03NJH1~G|$pK zx!p@wtgbwH=jP3S##XPntgF*X*FX6G;Lq>*pXYx*JM;7Xv?mD*Wi0B|y+vBRwoCUF zFjTIY8M|nafy#zL8554Ch^ryB56y#47F7G+)xBC6q#V4#g>@AdOS5d@&Y#ZuS=zHK zd$yd`EOD{kQl!tZ{&M$Gre*BeJ+C~pFH{_5P&V$je5>2hYGw3U=Zl3v@+t-6^Bp%$ zpK-N6FpLa4c=+#)FlD)S9o$i}QeT-~d|g=U;J2LR|C~i?DnfJ8jccEtwB3;H&A6f0 z&x8BjvbgQv976AEPf+=G*k92(B4`Tp?(J=IQj&%SFSu)iT3PyyUujA^PM79QQDWfy z_i;7vuQ$n#?ZL(!`=YGtS9RLHz4Nb2>i@|jA*_w;uXphns2{7eYFlJvXv%%}?_q^5 zq0D)8YG+uaUj0#&xAACx7^D!a8l%wot245|cV&{NZ$s|U%7hCBx0rk9Z2xy>4u`I+ znM9#awfXNglOL=+skUNYmB|z4;Dv`7tDfCbF8K3vwaL#tlU8opS>StP!9;;{y)T}k zLNysBlQs#K>=c`yva05_WYezW@(XI*6=zI#vg!9fcj)r=*ao|mi!vD(^|(0sE%Q=Y zu;oV#>vf@}39lwJ3(u9kvy<~%?)IjO3obvA7N2nImzab^Nyer4J|WJ1g}GKSR)Jy@ z-u{_ma>B>E>2i)D=a!V^>dp^;@nrl=YMy!1^6ER4ioCL}tn~V(IXau|H~P=)d;aj- z)We^YzO36Tzb@SV`^xs-ClCJIF@5p<+*O_Z`SJn6E4MwK=W+9MdgP>#uK^BjH7PYx zdiQb~HchJ8#xV1bl=H&bb1QQ9%Y4}M(|YA@Ayy%o-rMbJ4-zjgpZX*4ZTHK>uGz;s z%ysAGSC$p|^_W-u@;$3__It;=ITiv_=X?`b6|(Dh+ry%(!Udk6k6RfX4}HV3bmt0% z%abopanzoj88k`!yVtCsR-;`pmV60wY|WmWt3Ua$R3;)wD5ZFjchkm?k~{kX>n>ko zU(CIKqv4{JO2L(X5AOW`Z*6js_xf6qb9YyKpQN`oY1M@F>eI?PyW;ca1>Ro7)at0g z-2cciZBD6_#?gY4h5gN&*{5Ce+r26}rEeGi7K`=EXZfyDul*Jm^3OqgzeV3s|3{zf zwr*d0F;7>wUSVft<5PdL-O_gyPns|Nwdauff$PtH_;Y+`*<0}^^6X8$lE3ng7K^^~ TeQ+TKR3v)3`njxgN@xNA!QWLr literal 0 HcmV?d00001 diff --git a/public/assets/buttons/text-button.png b/public/assets/buttons/text-button.png new file mode 100644 index 0000000000000000000000000000000000000000..334f759fcc7ee1655d04e7b9bb124e2eee859b84 GIT binary patch literal 1332 zcmeAS@N?(olHy`uVBq!ia0vp^dLYcf1|-9GYMTQo#^NA%Cx&(BWL^R}0jUw5X}-P; zT0k}j0~4bV12aeo5Hhr9GO&Qz3=C>Ont_3N0V6_o0TWzSZviuc4N~af&m{#kBr-E3 zq9nrC$0|8LS1&OoKPgqOBDVmffWfB13dqb&ElE_U$j!+swyLmI0;{kBvO&W7N(x{l zCE2!05xxNm&iO^D3TAo+dIm~%TnY*bHbp6ERzWUqQ0+jTtx`rwNr9EVetCJhUb(Se zeo?xG?WUP)qwZeFo6#1NP{E~&-IMVSR9nfZANAafIw@=Hr> zm6Sjh!2!gbC7EdmoAQdG-U511A0(r1sAr%LHyfzc1|(|bUzC{&v>9Z+ouLg_C5jl- z9vgj-AMWIvPUoI?vY5e7y`OAg+6Bj+1(x$R1NOh&q1h1b00UGh|{`op~B%E*B z$k;hiCg=UTGx_Q1WqTtX|Eo?vy;r2kjw5l;^z}iXgcffS{V#Rt-`>QI^KFjun{Va_ z+Nj;RdGq8(ogYf`g)4R*3!2ndTV7I9qx2xt*Z7?3n_bTReEVd!J34+?y|vcrcK& z^HPRM!EUodZKrNc@N3M`*%7pYg^BUj?P@)7h4SB-63oVi)^pEIsh@AR>A|jbmmfZq zo;f4u>hfFS6_;Os)tGO;Ja2pU?OCM{-{oB~&X{n>al=VY?t3r)JT1}L8*^06`riyT zdAYhErHNls}0cg5!JVlBVA*LaHd(F&uVO^-gZ zB#JLlig1{4VQrZA(qB%c5g!UHoK}WZ={>c!PUK=~dgf#l?i^_;!E;LgV)`?#TkpT? z&fffBVZez^8)FYDz1`qzV^NW-=X5ozH7{>p^sI#A`{LG5jy=EDi)TDLli*!mJ6Asc^$m&VB37Em-z@yK(`N7UP%csRg0kF= zv)zT-4<~MxI>g4wbQc2ryxEv{$DK9tT!|YuG#RD YKV*iq=Dnq|N}w{x)78&qol`;+0D)x=zyJUM literal 0 HcmV?d00001 diff --git a/public/assets/upvote.png b/public/assets/buttons/upvote.png similarity index 100% rename from public/assets/upvote.png rename to public/assets/buttons/upvote.png diff --git a/src/components/feed-post/feed-post.module.css b/src/components/feed-post/feed-post.module.css index cf90bb85..2358251b 100644 --- a/src/components/feed-post/feed-post.module.css +++ b/src/components/feed-post/feed-post.module.css @@ -13,7 +13,7 @@ } .arrowUp { - background-image: url("/public/assets/upvote.png"); + background-image: url("/public/assets/buttons/upvote.png"); margin: 2px 0px 0px 0px; width: 15px; height: 14px; @@ -22,7 +22,7 @@ } .arrowDown { - background-image: url("/public/assets/downvote.png"); + background-image: url("/public/assets/buttons/downvote.png"); margin: 2px 0px 0px 0px; width: 15px; height: 14px; @@ -124,4 +124,77 @@ cursor: pointer; } } +} + +.textButton { + background-image: url("/public/assets/buttons/text-button.png"); + background-size: cover; + float: left; + height: 23px; + width: 23px; + display: block; + margin: 2px 5px 2px 0; + cursor: pointer; +} + +.textButton:hover { + background-image: url("/public/assets/buttons/text-button-hover.png"); +} + +.playButton { + background-image: url("/public/assets/buttons/play-button.png"); + background-size: cover; + float: left; + height: 23px; + width: 23px; + display: block; + margin: 2px 5px 2px 0; + cursor: pointer; +} + +.playButton:hover { + background-image: url("/public/assets/buttons/play-button-hover.png"); +} + +.closeButton { + background-image: url("/public/assets/buttons/close-button.png"); + background-size: cover; + float: left; + height: 23px; + width: 23px; + display: block; + margin: 2px 5px 2px 0; + cursor: pointer; +} + +.closeButton:hover { + background-image: url("/public/assets/buttons/close-button-hover.png"); +} + +.expandoHidden { + display: none; +} + +.expando { + display: block; + margin: 5px 0 5px 0; + clear: left; + position: relative; +} + +.usertext { + unicode-bidi: isolate; + font-size: small; +} + +.markdown { + background-color: #fafafa; + border: 1px solid var(--text1); + border-radius: 7px; + padding: 5px 10px; + font-weight: 400; + color: #222222; + max-width: 60em; + word-wrap: break-word; + font-size: 1em; } \ No newline at end of file diff --git a/src/components/feed-post/feed-post.tsx b/src/components/feed-post/feed-post.tsx index 82ef5d49..a5953084 100644 --- a/src/components/feed-post/feed-post.tsx +++ b/src/components/feed-post/feed-post.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, useState } from 'react'; import styles from './feed-post.module.css'; import { Link } from 'react-router-dom'; import utils from '../../lib/utils'; @@ -13,6 +13,14 @@ interface FeedPostProps { const FeedPost: FC = ({ post, index }) => { const subplebbitAddress = post?.subplebbitAddress; const { t } = useTranslation(); + const [expandoVisible, setExpandoVisible] = useState(false); + const initialButtonType = post?.link ? 'playButton' : 'textButton'; + const [buttonType, setButtonType] = useState<'textButton' | 'playButton' | 'closeButton'>(initialButtonType); + + const toggleExpando = () => { + setExpandoVisible(!expandoVisible); + setButtonType(buttonType === 'closeButton' ? 'textButton' : 'closeButton'); + }; return (
@@ -25,7 +33,8 @@ const FeedPost: FC = ({ post, index }) => {

e.preventDefault()}> - {post?.title || post?.content?.slice(0, 80) + '...'} + {(post?.title?.length > 90 ? post?.title?.slice(0, 90) + '...' : post?.title) || + (post?.content?.length > 90 ? post?.content?.slice(0, 90) + '...' : post?.content)}   {post?.link && ( @@ -38,6 +47,8 @@ const FeedPost: FC = ({ post, index }) => { )}

+ {post?.content && !post?.link &&
} + {post?.link &&
}

{t('feed_post_submitted')} {utils.getFormattedTime(post?.timestamp, t)} {t('feed_post_by')}  e.preventDefault()}> @@ -71,6 +82,11 @@ const FeedPost: FC = ({ post, index }) => {

+
+
+
{post?.content}
+
+
); diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css index 8153496c..bade2ff2 100644 --- a/src/components/topbar/topbar.module.css +++ b/src/components/topbar/topbar.module.css @@ -55,7 +55,7 @@ .selectedTitle { background: none no-repeat scroll center right; background-image: none; - background-image: url("/public/assets/droparrowgray.gif"); + background-image: url("/public/assets/buttons/droparrowgray.gif"); display: inline-block; vertical-align: bottom; padding-right: 21px;