From ccff91b0720c8bbedeaa7575b41c31a84322629b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sat, 26 Feb 2022 15:57:09 +0100 Subject: [PATCH] Account notes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/actions/account_notes.js | Bin 0 -> 1720 bytes .../features/account/components/header.js | Bin 27974 -> 28410 bytes .../account_timeline/components/header.js | Bin 4780 -> 4902 bytes .../containers/header_container.js | Bin 9261 -> 9399 bytes .../ui/components/account_note_modal.js | Bin 0 -> 3463 bytes .../features/ui/components/modal_root.js | Bin 2839 -> 2895 bytes .../ui/components/profile_info_panel.js | Bin 9346 -> 10057 bytes .../features/ui/util/async-components.js | Bin 14591 -> 14721 bytes app/soapbox/reducers/account_notes.js | Bin 0 -> 1081 bytes app/soapbox/reducers/index.js | Bin 3489 -> 3551 bytes app/soapbox/reducers/relationships.js | Bin 3750 -> 3858 bytes app/soapbox/utils/features.js | Bin 4635 -> 4782 bytes app/styles/components/modal.scss | 95 ++++++++++++------ app/styles/components/profile-info-panel.scss | 16 ++- 14 files changed, 75 insertions(+), 36 deletions(-) create mode 100644 app/soapbox/actions/account_notes.js create mode 100644 app/soapbox/features/ui/components/account_note_modal.js create mode 100644 app/soapbox/reducers/account_notes.js diff --git a/app/soapbox/actions/account_notes.js b/app/soapbox/actions/account_notes.js new file mode 100644 index 0000000000000000000000000000000000000000..d6aeefc499a9b2c7932c9d1db7ee71fb879f5c0b GIT binary patch literal 1720 zcmb7EO^=%}5WVMD%%KuSia@>YYAaF7wvjeOU6NB(u@t-;OTnhtRIMWZdp(#>WnnkD z1Z(U!GjHA-mKUN_kQ5A_OOb=+IIccex2qL1p)-hr@~y~{(;Cu~khJ-Rx_jW}7?b#f z{%z1w!KDJv_jiYIABVer5J!j4+s!_H489+NXb*Q_Erd1Hn@G{Y_k$>!Lu$kCLAv)g z51@ZDHDP$Uw@s)!+wQ)24;L6iXc@x)=7nE_*xzlpL3l~eG(3WOu6U}L;2^7CIa6Mm zii)dHC`xQNuK-G_s*(fAm@E>N9@p?fRiqL{ZMgf?Tmk5U3HO=aliGIFk#bT}S!lh|fsPR&gWekokbzP3g084a zQz~VT>12sYkUM;)6Q(!^BNBybpW9L74&Aw zlt{}v(+qu{5|p1jvSOmQw^FwDG?OUlfO16h@~xKYX_kP2JiIBF+{&Q-C_5bcA>-Vj%`imSa-JUq5HK@ kCcD~N5@dQz_zU%hHRKzsk~Y_bw^@-)*PW?vR4j`0Kg*pXv;Y7A literal 0 HcmV?d00001 diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js index 884d57034c1bce5030521628879f0d40e1c4a2c5..d639838aaf429265201cb6a43b865ae9160ea485 100644 GIT binary patch delta 214 zcmX?hi}BZ8#tmV7s>wyEi6yCi`6a1V3e^gkDOL*ViOI?NrFkWK5UKdQ{F2ERc}1n2 z!73FJ6@UV%>I$_wTnY-QDVZfey^|-fi8Djhak&D;AgVU|@ij{ErvWV}ElMrc1L-T) zocvJTYVuk`1w*hgv6>3@3c0Dp#fj-a6;R_+6|4|q2nSAfG*@B^&d4wK%b#3pV#oqA TVDdqA>B;Y0cs8HcD0cw>f0<38 delta 27 jcmex$m+{yw#tmV7o8RzNN=^1r7nporOJMV2t#B6rwGRuM diff --git a/app/soapbox/features/account_timeline/components/header.js b/app/soapbox/features/account_timeline/components/header.js index 51120dfcf6b57517cf969968623742221d5d5ccd..5886979433d57d64473de3028ba8ae8db4a9bf68 100644 GIT binary patch delta 77 zcmZ3Zx=d}uYM#jxIN3OYGxE#*@=H=DH?qjELphTbIpsF5=Gnt4pPvVlx2-P8$Sl^& QNX$#gNreecjur|807SVQP5=M^ delta 16 YcmZ3cwnlZsYM#x%c=oVPekkM$06ug94v;G_c^b3XWOF8g$#toP1h22>>b#MQ#89 delta 169 zcmdn)xz=OC$;r1EuTHLI4w-Dnk~#S{i{WHG#+4j;dir2Ac^{+v+D4M%FbeJt!4}7gF;(nX}?m z-;#C%r{5Z5WaUfi56UEhS7BCqwX^#}rMFn<>(&By2iq1(_Q?O>eNksgX76MSQeg%~*;&mw6GOu;OY075@l${A4|)?jxNjDB0ie@7uM z8ViVcE)4w-ouYr{ge!ozUc-=FY~vxT>Cm5t?avcA2K7-r*l$kF+xx66umFmiMpX#Z z2-o+sE`YuMD0IzCb{tU8{YsC$4@1`gAghh6_Cl3-H*N)>cZkp0IG*FRkQ?51?@p|| z9Y*CgiTGUS6vIVkwERaD^^mJJ3Y*X+NRuUu zaj_1fF90$jFZv1MPDjPCJ??mEjzTAdr%s5pL6$L33{%*z$rCFYZYj|XF`Y7uQn{?bd$p&s@@EUfQMT+B=`Sd(8`sx7#CUSWDo9Zg%8qm8Gq6 zOpc=)!*&H%E1I|3f6|$WemX?+4pzgd7~t$FBl2{l@SY0MWPYa6@2L9lA{zx19rjYe zP3w5mMPQku)3yb-wC?LCy^rYx6V0I;rE|4H5U-sO(lt&oy#xvtX&64#Cb-nsZ>a2u zw|idKU$TLWRq)7p4O*7m)yHc^J~QkcjH-$YT6IqW#-BST@q zC38eKUe4DMVt=)&g9@=mgVKkF>_i2sJRp+hhKBHx?7%*1qLFFvFiBgYYl3;<>(sw< z;{MGPzF_9vD1^PMwDsCE-os9?GbL?ry|Q*%r^=)$oLYmEFP zvqlFA2L$$vA;{?OErf9o<>ih|7~>zi)cGQNOj|DjU3eE43COC97fb&Z4twjh?n27a z0|DomteiF^$Ttjf&c%&i4@$WvHeGCkJkw@lrZdc&mDzMy0XDD&C;$Ke diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index 8cd4dfb5dc66bc106bc1e2f25fc3f45cf591e0fa..35d12a627bee1018060e54bdde9f979c3892e181 100644 GIT binary patch delta 536 zcmZuu%SyvQ6h%}Dp(qwBEh=1}lSoO$g$pGGQ5P;Mg6>3QOr}jRor#%=4?+;!yO06V zr5_*&`2n}C{1AV^g_GE#QfD(Wcg{WcoHI8&Z@Vu~1C1Cw>WK~8W)T&;OpqpXun!5e zLe>Gq84ga^WgXkXW0b2s2Od*}ofm%QOdRIaEF!G@-$1^kC zyV)jUhw6tYBtFiyx?X^4fHI}%$biK~&^3uC#|P0IlJ8}GA%9WSo4#kCTCs3FZvGXT zG&H$4H7*Y;vqKqLz81^!p;BH2&#_Q%GFR5~KoB_JvYUi++$I*v9K-jVy5hQ>o=l_a zy>@M@ECqCMu;uXp3)?+lS!`S-qdVP_0agR_So!aFZ$MTD=wbE$KCu^-k%ySnv_u^= Rav3l=I=@otpDwrOtuLA0xxfGb delta 40 ycmV+@0N4M?PJ&6Wp#ih!0rUm4`v(mNvxyJk3bVl*hzgU$CN>0ab!=>t3@1Hr_z+$I diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 5f44a280171edd1f9f469026a6a28fc4f767744a..9c2218f8e56f6544e794b20bfe56579ad1b692b2 100644 GIT binary patch delta 46 zcmexg*jT(_megclE_N2b{F2nk8-@IM5|fkjOY=(N^FRUu60(y8q**r4lS-5W0H-Jr AiU0rr delta 12 TcmZoH{$IFZmegh$=~OuYC~^fh diff --git a/app/soapbox/reducers/account_notes.js b/app/soapbox/reducers/account_notes.js new file mode 100644 index 0000000000000000000000000000000000000000..67cd83e1d4fd37d8c0ca4f0b5aba7989b13419c2 GIT binary patch literal 1081 zcmbVLUu%Of5P$bm+?xvG-W?ru&TYc9Y_?BhNNQsn&{)icZIpiZB^sfva~pdS?{dF? zxv+ZQvJ=b#MG4Z~nu24EtS>zW}lz73!xm7v-YfFTNi z%c|;2MN`+5E1aQpbd^R|iJ%`{?i*SXSs|2?cX9`iUacdHx>K>9I-{Mrpk<18hQ$t? zzUJfSp7xD`2s(8^L8rH+C|eF4hp%9EiMshNGp8qZVRqAzXm|ZFK{4jetF6UFcmYWLk1X!aK4J)1aax`XQDB| o`7-~3;4(sNC7lp&u=PvOz?0m>K>z>% literal 0 HcmV?d00001 diff --git a/app/soapbox/reducers/index.js b/app/soapbox/reducers/index.js index a5c178b3c46cd6dd9de1572d89d315cd6eda2a00..c7b48cc229bc7e5ac95f9fd200fb49bba543a1f8 100644 GIT binary patch delta 52 zcmZ1|eP4RQ8oBtq{F2mSg|wplTm^MK{lw(t{L;JnvFLbI5uZ-ma+fd nnV(k-q?7YY^Gf3L@=H>S)vY(K-pD=Kj)#{UN&Dsio-if=^wb}F delta 22 ecmbOvw@h}zmW_W_a8K6am7B!IvH2a33KIZsuLyGh diff --git a/app/soapbox/utils/features.js b/app/soapbox/utils/features.js index 54355e005629a3324e7de6f9ff8b2fad42f764a6..0516ef02ddd303c5a5867240856b902edf4ffa31 100644 GIT binary patch delta 30 kcmbQOvQBk_hyc5SLSBAJYVqWatd5LEljV85HUkBj0Fzq?d;kCd delta 12 TcmZ3dI$LFfh`{FM0_;ox9pnSr diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index aa12f40927..7d40aab68c 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -126,7 +126,9 @@ top: 0; bottom: 0; - @media screen and (max-width: 600px) { padding: 30px 2px; } + @media screen and (max-width: 600px) { + padding: 30px 2px; + } .svg-icon { width: 24px; @@ -342,7 +344,8 @@ .mute-modal, .reactions-modal, .reblogs-modal, -.mentions-modal { +.mentions-modal, +.account-note-modal { position: relative; flex-direction: column; overflow: hidden; @@ -411,7 +414,8 @@ .boost-modal__action-bar, .confirmation-modal__action-bar, -.mute-modal__action-bar { +.mute-modal__action-bar, +.account-note-modal__action-bar { display: flex; align-items: center; justify-content: space-between; @@ -464,7 +468,8 @@ vertical-align: middle; } -.report-modal { +.report-modal, +.account-note-modal { width: 90vw; max-width: 700px; } @@ -521,27 +526,6 @@ margin-bottom: 20px; } - .setting-text { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - color: var(--primary-text-color); - background: var(--background-color); - padding: 10px; - font-family: inherit; - font-size: 14px; - resize: vertical; - outline: 0; - border: 1px solid var(--background-color); - border-radius: 4px; - margin-bottom: 20px; - - &:focus { - border: 1px solid var(--background-color); - } - } - .setting-toggle { margin-top: 20px; margin-bottom: 24px; @@ -574,7 +558,9 @@ max-height: 300px; } - .actions-modal__item-label { font-weight: 500; } + .actions-modal__item-label { + font-weight: 500; + } ul { overflow-y: auto; @@ -582,12 +568,18 @@ max-height: calc(100vh - 147px); // NOTE - not sure what this is yet, leaving alone for now until I find out. - &.with-status { max-height: calc(80vh - 75px); } + &.with-status { + max-height: calc(80vh - 75px); + } - li:empty { margin: 0; } + li:empty { + margin: 0; + } li:not(:empty) { - &:first-of-type { margin: 10px 0 0; } + &:first-of-type { + margin: 10px 0 0; + } a { display: flex; @@ -654,10 +646,12 @@ } .confirmation-modal__action-bar, -.mute-modal__action-bar { +.mute-modal__action-bar, +.account-note-modal__action-bar { .confirmation-modal__secondary-button, .confirmation-modal__cancel-button, - .mute-modal__cancel-button { + .mute-modal__cancel-button, + .account-note-modal__cancel-button { background-color: transparent; color: var(--highlight-text-color); font-size: 14px; @@ -726,7 +720,9 @@ } .modal-layout { - background: var(--brand-color--med) url('data:image/svg+xml;utf8,') repeat-x bottom fixed; + background: var(--brand-color--med) + url('data:image/svg+xml;utf8,') + repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -1068,7 +1064,8 @@ } .confirmation-modal, -.mute-modal { +.mute-modal, +.account-note-modal { &__header { display: flex; align-items: center; @@ -1090,3 +1087,35 @@ text-align: left; } } + +.report-modal__comment, +.account-note-modal__container { + .setting-text { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + color: var(--primary-text-color); + background: var(--background-color); + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + outline: 0; + border: 1px solid var(--background-color); + border-radius: 4px; + margin-bottom: 20px; + + &:focus { + border: 1px solid var(--background-color); + } + } +} + +.account-note-modal { + .setting-text { + margin-top: 20px; + margin-bottom: 0; + resize: none; + } +} diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss index a3c3f6dc56..65e70c4bd4 100644 --- a/app/styles/components/profile-info-panel.scss +++ b/app/styles/components/profile-info-panel.scss @@ -23,7 +23,8 @@ } &__join-date, - &__birthday { + &__birthday, + &__note { display: flex; font-size: 14px; color: var(--primary-text-color--faint); @@ -39,6 +40,15 @@ } } + &__note { + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + } + &__stats { margin: 15px 0; @@ -163,10 +173,10 @@ } .profile-info-panel__name-content::before { - content: '['; + content: "["; } .profile-info-panel__name-content::after { - content: ']'; + content: "]"; } }