From 09424ac4eb6c4bf08fa4f80b62351891a66b5a7b Mon Sep 17 00:00:00 2001 From: natjms Date: Tue, 2 Mar 2021 09:58:39 -0400 Subject: [PATCH] Add "View N comments" button below posts This replaces the old comment button that was in the post action bar --- .../eva-icons/post-actions/comment-active.png | Bin 1103 -> 0 bytes .../eva-icons/post-actions/comment-full.png | Bin 986 -> 0 bytes .../post-actions/comment-inactive.png | Bin 814 -> 0 bytes assets/eva-icons/post-actions/comment.png | Bin 2772 -> 0 bytes src/components/pages/feed.js | 8 +++-- src/components/posts/post-action-bar.js | 17 +++------- src/components/posts/post.js | 31 ++++++++++++++++-- 7 files changed, 38 insertions(+), 18 deletions(-) delete mode 100644 assets/eva-icons/post-actions/comment-active.png delete mode 100644 assets/eva-icons/post-actions/comment-full.png delete mode 100644 assets/eva-icons/post-actions/comment-inactive.png delete mode 100644 assets/eva-icons/post-actions/comment.png diff --git a/assets/eva-icons/post-actions/comment-active.png b/assets/eva-icons/post-actions/comment-active.png deleted file mode 100644 index c9a5a10631d9b4615ee550ef35a57c36f0891be4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1103 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H3?#oinD~={fhjt`C&X1*USSlCh5*$=0GP}! z3f-Oyq!>$r{DK)Ap4~_Tagw~Fdh= zgoB-ngX&2Rf%LBcscR;~Bdo@oR>P23nJ z;u`p6?V(`5_kmnBldi{}Zm6xiE6SnpdC%v-kjHf3t9FAqQ;Ig<0k@yC8MaIhvUa$~dVL>n{j<`V!uBV7ZIuFQcZoCZ zuwJUL`)VKS1cnXV4Bwd!Y-Bk7_C7y@vBN=mzW;d)Aq+bI_A>a?InH!?y~oVp-(iNY z0%4o~R+c@wFP~AZWP9kH>QaaM#iuGAHcDjbxVgTb=w-F()>O?_r}!uP&wS%*c*^?X zhC{mX-L&6xdtK&c+}Bh+dpTcB%HuP){~wL6MK4y`H!hBnbE(xS0>%Y{r>mdKI;Vst E00CVWoB#j- diff --git a/assets/eva-icons/post-actions/comment-full.png b/assets/eva-icons/post-actions/comment-full.png deleted file mode 100644 index 00951c8909dd1eeda42eef8f183b4e7199df5dbe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 986 zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H3?#oinD~={fhjJ)C&X1*USSlCh5#)>0GQGu zT-`Z=6k|z{UoeBivm0q3PLj8~3quF1tOt<8S>O>_%)r1c48n{Iv*t(u1=&kHeO=j~ zaIlGT$V}1?_zD#I>gnPbQgQ3;El0j)0|DoYJO7{kw|3Y1kg078?G3)M{t+<~h?%P5 zIq8n+p5t%+t!~OMyuIGEz$WjvD2rIqcXOeL{=4@TAEdnbx0$7Y^#Rub(FSdXaE5gZ zF^oHy3Ro4ma~O6oO<*+x@=q{HGi*A*)}SN7&k$+A+;CU^KsqBMivl-?LIVSn1dBpH zkp9LJ!ceJwjnR~K!^h{9XBl#8Jwt^VX2)NBwyW+BIj9*P}{Dk*y`t7~$J=+Q6YxiW|pFeU;_3I(St-dFx%Y|N^wg35s eNkFeSS2DIAlQ)#KfBha901Te4elF{r5}E)~N7(29 diff --git a/assets/eva-icons/post-actions/comment-inactive.png b/assets/eva-icons/post-actions/comment-inactive.png deleted file mode 100644 index 6a44b471e96f031b0c6061095bab6f6e335b6b19..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 814 zcmV+}1JV46P)QIy>b8m0=r2> zK~#9!?cGam8!-@s;pu@6tt05x$tr;1MG{$jG`qilZOCF(vDou~eO&+m000000O}K! z7x#L-etr5G&*w7)po!TXLlI2x9fn|f?=S@8dj}zy-a81v_})PX=JyUlFur#Xg898e z5RC5~g6L-czeL~hy>Hy3VbESY4*03c2qlMdjhRz7W>NOp?YcgI> zpSr#{Nt_dIt)8~lAV}VIuUK;sq4)YD>*A}tb(1{=!Td9VFiVqQe(w<6nFOl-25$Ms z!Jj0&y7^gk3g-6?!S*AdqxqTE9Xr$9)%;A_1@n7{;3j`>!tU?g0?QkK`MGq7m5F73 zK3&ZK%~=)zyFaH+KMFwi_xY;~kjomt?$4{28K8L!+^c>Onht^LKeujj&O12jJW z1pw~{z%fv#{xv}J`WJxayZ^@la16K)fJD3BpNdue>l?t+!Lx@y4Pf_w7660Y`MX~O zG~fNp0$^SkZ~iDvH9*syF8~Ldzx_Xl8USmUuK}9Y{?Y�LPg>LrV?N*!=6dt_N%K zSAMF$5@rCbrIjNfx%snasHsOl#{qEUu3w?w<1`VohH7-(uUhBhG~vGf{O&N!I^$Qa zYwEjw-xo4-C|W66m32%Hz)nUBxnk`*8m;Bqy?+yW#~ODYWnS+t)>P91!2Ft*$!-NV zHU1Co1U5Eb12i^X0Gb;w0L_h08G!#0E&J8TX%E1*-3J&URF*KD{M2(v09FXJIt*1F sb;oG2vj}tAb9n#&00000001WO8${8mg%mhW`~Uy|07*qoM6N<$f)T}Hwg3PC diff --git a/assets/eva-icons/post-actions/comment.png b/assets/eva-icons/post-actions/comment.png deleted file mode 100644 index 87eb20547e26fdf817beaa7e521e3c8545dca8d5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2772 zcmeHIS5T9S68;ki5OU~<2-15GMU3<+p+`D+DFH$VRRSE47Fr-uL=X@}s#2t@NJsDh ziijZ9hzA4&X;-C&63UH__u)R?w==W5-|Wu!&Cc%Z%-%s+nXoYPF#`a=Vv01fp<(=Q zXQHFUy@l)}8qj0)E%gE5Sr+UB4WZ@2UPv2D0Em*L@sa`H_&0wI0K(w_u;Bp!8U+Aw z@z$fx8(IJW_C{IQ8Pf=2Lc;&pKO6WzZGd)QlvArX8VrZoSlQCw) ziR$G1aua_Td@3AYW%0`NMLl(aw}-wjTwgpwQKHiO7SWF5k>2!%_UCj~t39dEesb^P z;NO(zK`#U5c2>9FH}LuD{xnHyT~0G=S2H(SD!0rc9ScN$8Yrht1@bgEF#<>s0VFM9 z3^TPfW?ZHN!^EIi651R97(z{r^z9;Nf83-Ra@%v4#5Q*`GV?S;WSB)s`^HG=9TaCi z)&L19SjtIZt7x$tHjwii6rSuWQ+wIw{VM`TDe0BvNzgtRE!K?i8QqzT(;bajrH;D& z+#NB_sUV4_NmsyOMRSW8A%kxQrNkvA-pg$UTATL#_>-vT(y1vn*(&nbJu8gPeNrW-`t_rdOZJZr1HY z+2P}&>^gO^z9pP8gr4n6Teb!TNB6bFGGQD})33VhIOgL0wHNgRSJEttwDUS{*4Fx~ z__YO1exG(OED)TqnRB!L&|$po&lkhDe0}oF(xT^kzC-5V*rK1;b*+F20;6GFPtw)kLORS?p0g%CEE-pp&Z|zo z+R$O=-7P~fHN#1UGthtIdk1%~Fg-u2dZMmUN38Hx`9kmGNb)c#|8(8`iDpHKU86{DeK@CzE|Q{vs4(Tu{%rTf=F|mF{6J^bAdmlPx^4>>-G<_BRwYE|irp)jWr-#y{Zs zCy<#$6qrRXR;mbWog_8R6`$AWNX~Tx4H8TAv`~c1IhYBkl23zN6;rmP9{;VN`uOIJ(_#%xh_IW2AS%7COTpHDK$a%%r_I_Kyn}i^SVB} z*2}|0IKO)g!b<$*;g;RKi5kdpwKKH)^`#mvbEQ_uw1bh$>y`YHGPMOL+DIwEbms!1 zJ^-rA5-~fz)vth-4X>&P9oIQQyP-@|B_f(9-$!-~5gjSfONCp8wURb0hr#O-dRI8) z$qKrANvZD{5&V(uN!(AtO?PSaz_%zD;3R|$Q>lj)XX**XW3sdyz_$isQtF1fCz`rUmx^JonNI0ATqaSH(Z*bYcJA`eAi{h!@!)2kXybIF%jgg#198K37t2}3c+8#{ zn~(q;^kYX;tCT=m4-RG=7Q*e4tgqOTpzN6ElB^*}Li0oYt9z?)<~nSVg5C6_tdByw z1-D8MpbrTm>F$I{H0y7^Hmtn2EOZZym4P1)-;L_&|4u`uDuD> zCJixdT2{IhQ$^L%_-Y}PjnM>jUeC@7q)m)Fei|U*h{P22)fJ86Iy>{OB zXZJE6Cg+WD+RiGuPZXd!O~50h_yrLuCeK$l+I=_0<#<~?KfN2~;#`rDfV}_NnfD{^L{si4G-O>N@lx7%Rdig&S-4LshMSrRI_fzajWxn5oi47 zviq9HyMElSq3E9Y9)6YQjEn+}S?lsQpI1%}cy3Iy*HQP|W{7h!5v$?K)K>oQGx%u< z6lQ8ST249hLTA%@hkGyXtW~1s+|blisP*V__PKo8?{DD5al%FrB)Q7O zHCoU|e@N05#xCR`aSa!knzXXB7 z-Z-Dz|68zo+OS9y@c!-)`X^Q+3>OxF0Rl0hp=c~d!3&4?3c!r?Ji^jAfT^*SQKNxJ G;(q{zKP#yK diff --git a/src/components/pages/feed.js b/src/components/pages/feed.js index 74a3a55..b2ee92d 100644 --- a/src/components/pages/feed.js +++ b/src/components/pages/feed.js @@ -12,6 +12,7 @@ const TEST_POSTS = [ id: 1, avatar: TEST_IMAGE, username: "njms", + replies_count: 3, favourited: false, reblogged: false, content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", @@ -26,6 +27,7 @@ const TEST_POSTS = [ username: "njms", favourited: false, reblogged: false, + replies_count: 0, content: "Also learning Claire de Lune feels a lot like reading the communist manifesto", timestamp: 1596745156000, media_attachments: [ @@ -47,7 +49,7 @@ const FeedJsx = (props) => { - + You're all caught up. @@ -61,7 +63,7 @@ const FeedJsx = (props) => { - + ); }; @@ -98,4 +100,4 @@ const styles = { } }; -export default FeedJsx; \ No newline at end of file +export default FeedJsx; diff --git a/src/components/posts/post-action-bar.js b/src/components/posts/post-action-bar.js index 2712911..458cc9d 100644 --- a/src/components/posts/post-action-bar.js +++ b/src/components/posts/post-action-bar.js @@ -62,10 +62,6 @@ const PostActionBarJsx = (props) => { active: require("assets/eva-icons/post-actions/heart-active.png"), inactive: require("assets/eva-icons/post-actions/heart-inactive.png") }, - comment: { - active: require("assets/eva-icons/post-actions/comment-active.png"), - inactive: require("assets/eva-icons/post-actions/comment-inactive.png") - }, reblog: { active: require("assets/eva-icons/post-actions/reblog-active.png"), inactive: require("assets/eva-icons/post-actions/reblog-inactive.png") @@ -82,13 +78,7 @@ const PostActionBarJsx = (props) => { pack = { icons.heart } state = { state } callback = { () => favouritedCallback(state, setState) } /> - - commentCallback(state, setState) } /> - + { ) } +const SCREEN_WIDTH = Dimensions.get("window").width; const styles = { flexContainer: { display: "flex", flexDirection: "row", - padding: Dimensions.get("window").width / 40 + padding: SCREEN_WIDTH / 40 }, icon: { width: 30, height: 30, - marginRight: Dimensions.get("window").width / 20 + marginRight: SCREEN_WIDTH / 20 }, lastIcon: { marginLeft: "auto" diff --git a/src/components/posts/post.js b/src/components/posts/post.js index c08cd65..5fc6e48 100644 --- a/src/components/posts/post.js +++ b/src/components/posts/post.js @@ -18,6 +18,14 @@ const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthum // This will be used in RawPostJsx const { SlideInMenu } = renderers; +function pluralize(n, singular, plural) { + if (n < 2) { + return singular; + } else { + return plural; + } +} + function getAutoHeight(w1, h1, w2) { /* Given the original dimensions and the new width, calculate what would @@ -44,7 +52,6 @@ function timeToAge(time1, time2) { */ const between = (n, lower, upper) => n >= lower && n < upper; - const pluralize = (n, singular, plural) => n < 2 ? singular : plural; const diff = time1 - time2; @@ -69,6 +76,17 @@ function timeToAge(time1, time2) { } export const RawPostJsx = (props) => { + const repliesCount = props.data.replies_count; + + let commentsText; + if (repliesCount == 0) { + commentsText = "View comments"; + } else { + commentsText = "View " + + repliesCount + + pluralize(repliesCount, " comment", " comments"); + } + return ( @@ -107,6 +125,12 @@ export const RawPostJsx = (props) => { { props.data.username } { props.data.content } + + + { commentsText } + + + { timeToAge((new Date()).getTime(), props.data.timestamp) } @@ -237,10 +261,13 @@ const styles = { caption: { padding: SCREEN_WIDTH / 24, }, + comments: { + paddingTop: SCREEN_WIDTH / 50, + color: "#666", + }, captionDate: { fontSize: "0.8em", color: "#666", - paddingTop: 10 } };