Allow changing header + profile pictures · alice.mosphere.at/phanpy@e9d68a0

+60 -7

src/components/account-info.css

··· 51 51 border-radius: var(--posting-stats-size); 52 52 overflow: hidden; 53 53 margin: 8px 0; 54 - box-shadow: inset 0 0 0 1px var(--outline-color), 54 + box-shadow: 55 + inset 0 0 0 1px var(--outline-color), 55 56 inset 0 0 0 1.5px var(--bg-blur-color); 56 57 background-color: var(--bg-color); 57 58 background-repeat: no-repeat; ··· 85 86 vertical-align: middle; 86 87 margin: 0 4px 2px; 87 88 /* border: 1px solid var(--outline-color); */ 88 - box-shadow: inset 0 0 0 1px var(--outline-color), 89 + box-shadow: 90 + inset 0 0 0 1px var(--outline-color), 89 91 inset 0 0 0 1.5px var(--bg-blur-color); 90 92 91 93 &.posting-stats-legend-item-originals { ··· 246 248 display: flex; 247 249 align-items: center; 248 250 gap: 8px; 249 - text-shadow: -8px 0 12px -6px var(--bg-color), 8px 0 12px -6px var(--bg-color), 251 + text-shadow: 252 + -8px 0 12px -6px var(--bg-color), 253 + 8px 0 12px -6px var(--bg-color), 250 254 -8px 0 24px var(--header-color-3, --bg-color), 251 255 8px 0 24px var(--header-color-4, --bg-color); 252 256 animation: fade-in 0.3s both ease-in-out 0.1s; ··· 743 747 --shadow-offset: 16px; 744 748 --shadow-blur: 32px; 745 749 --shadow-spread: calc(var(--shadow-blur) * -0.75); 746 - box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset) 747 - var(--shadow-blur) var(--shadow-spread) 748 - var(--header-color-1, var(--drop-shadow-color)), 750 + box-shadow: 751 + calc(var(--shadow-offset) * -1) var(--shadow-offset) var(--shadow-blur) 752 + var(--shadow-spread) var(--header-color-1, var(--drop-shadow-color)), 749 753 var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) 750 754 var(--shadow-spread) var(--header-color-2, var(--drop-shadow-color)); 751 755 } ··· 805 809 } 806 810 807 811 label { 808 - input, 812 + input:not([type='file']), 809 813 textarea { 810 814 display: block; 811 815 width: 100%; ··· 815 819 resize: vertical; 816 820 min-height: 5em; 817 821 max-height: 50vh; 822 + } 823 + } 824 + 825 + .edit-profile-media-container { 826 + margin-block: 8px; 827 + } 828 + 829 + .edit-profile-media-field { 830 + display: grid; 831 + grid-template-columns: 80px 2em 80px; 832 + gap: 8px; 833 + margin-top: 8px; 834 + align-items: center; 835 + justify-items: center; 836 + 837 + .icon { 838 + opacity: 0.75; 839 + } 840 + 841 + .edit-media { 842 + width: 80px; 843 + height: 80px; 844 + border-radius: 4px; 845 + overflow: hidden; 846 + border: 1px solid var(--outline-color); 847 + /* checkerboard background */ 848 + background-image: 849 + linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%), 850 + linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%), 851 + linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%), 852 + linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%); 853 + background-size: 10px 10px; 854 + background-position: 855 + 0 0, 856 + 0 5px, 857 + 5px -5px, 858 + -5px 0px; 859 + 860 + &:hover { 861 + box-shadow: 0 0 0 2px var(--link-light-color); 862 + cursor: pointer; 863 + } 864 + 865 + img { 866 + object-fit: contain; 867 + width: 100%; 868 + height: 100%; 869 + vertical-align: top; 870 + } 818 871 } 819 872 } 820 873

+128 -1

src/components/account-info.jsx

··· 2090 2090 ); 2091 2091 } 2092 2092 2093 + const SUPPORTED_IMAGE_FORMATS = [ 2094 + 'image/jpeg', 2095 + 'image/png', 2096 + 'image/gif', 2097 + 'image/webp', 2098 + ]; 2099 + const SUPPORTED_IMAGE_FORMATS_STR = SUPPORTED_IMAGE_FORMATS.join(','); 2100 + 2093 2101 function EditProfileSheet({ onClose = () => {} }) { 2094 2102 const { t } = useLingui(); 2095 2103 const { masto } = api(); 2096 2104 const [uiState, setUIState] = useState('loading'); 2097 2105 const [account, setAccount] = useState(null); 2106 + const [headerPreview, setHeaderPreview] = useState(null); 2107 + const [avatarPreview, setAvatarPreview] = useState(null); 2098 2108 2099 2109 useEffect(() => { 2100 2110 (async () => { ··· 2110 2120 }, []); 2111 2121 2112 2122 console.log('EditProfileSheet', account); 2113 - const { displayName, source } = account || {}; 2123 + const { displayName, source, avatar, header } = account || {}; 2114 2124 const { note, fields } = source || {}; 2115 2125 const fieldsAttributesRef = useRef(null); 2116 2126 2127 + const avatarMediaAttachments = [ 2128 + ...(avatar ? [{ type: 'image', url: avatar }] : []), 2129 + ...(avatarPreview ? [{ type: 'image', url: avatarPreview }] : []), 2130 + ]; 2131 + const headerMediaAttachments = [ 2132 + ...(header ? [{ type: 'image', url: header }] : []), 2133 + ...(headerPreview ? [{ type: 'image', url: headerPreview }] : []), 2134 + ]; 2135 + 2117 2136 return ( 2118 2137 <div class="sheet" id="edit-profile-container"> 2119 2138 {!!onClose && ( ··· 2136 2155 onSubmit={(e) => { 2137 2156 e.preventDefault(); 2138 2157 const formData = new FormData(e.target); 2158 + const header = formData.get('header'); 2159 + const avatar = formData.get('avatar'); 2139 2160 const displayName = formData.get('display_name'); 2140 2161 const note = formData.get('note'); 2141 2162 const fieldsAttributesFields = ··· 2163 2184 (async () => { 2164 2185 try { 2165 2186 const newAccount = await masto.v1.accounts.updateCredentials({ 2187 + header, 2188 + avatar, 2166 2189 displayName, 2167 2190 note, 2168 2191 fieldsAttributes, ··· 2179 2202 })(); 2180 2203 }} 2181 2204 > 2205 + <div class="edit-profile-media-container"> 2206 + <label> 2207 + <Trans>Header picture</Trans>{' '} 2208 + <input 2209 + type="file" 2210 + name="header" 2211 + accept={SUPPORTED_IMAGE_FORMATS_STR} 2212 + onChange={(e) => { 2213 + const file = e.target.files[0]; 2214 + if (file) { 2215 + const blob = URL.createObjectURL(file); 2216 + setHeaderPreview(blob); 2217 + } 2218 + }} 2219 + /> 2220 + </label> 2221 + <div class="edit-profile-media-field"> 2222 + {header ? ( 2223 + <div 2224 + class="edit-media" 2225 + tabIndex="0" 2226 + onClick={() => { 2227 + states.showMediaModal = { 2228 + mediaAttachments: headerMediaAttachments, 2229 + index: 0, 2230 + }; 2231 + }} 2232 + > 2233 + <img src={header} alt="" /> 2234 + </div> 2235 + ) : ( 2236 + <div class="edit-media"></div> 2237 + )} 2238 + {headerPreview && ( 2239 + <> 2240 + <Icon icon="arrow-right" /> 2241 + <div 2242 + class="edit-media" 2243 + tabIndex="0" 2244 + onClick={() => { 2245 + states.showMediaModal = { 2246 + mediaAttachments: headerMediaAttachments, 2247 + index: 1, 2248 + }; 2249 + }} 2250 + > 2251 + <img src={headerPreview} alt="" /> 2252 + </div> 2253 + </> 2254 + )} 2255 + </div> 2256 + </div> 2257 + <div class="edit-profile-media-container"> 2258 + <label> 2259 + <Trans>Profile picture</Trans>{' '} 2260 + <input 2261 + type="file" 2262 + name="avatar" 2263 + accept={SUPPORTED_IMAGE_FORMATS_STR} 2264 + onChange={(e) => { 2265 + const file = e.target.files[0]; 2266 + if (file) { 2267 + const blob = URL.createObjectURL(file); 2268 + setAvatarPreview(blob); 2269 + } 2270 + }} 2271 + /> 2272 + </label> 2273 + <div class="edit-profile-media-field"> 2274 + {avatar ? ( 2275 + <div 2276 + class="edit-media" 2277 + tabIndex="0" 2278 + onClick={() => { 2279 + states.showMediaModal = { 2280 + mediaAttachments: avatarMediaAttachments, 2281 + index: 0, 2282 + }; 2283 + }} 2284 + > 2285 + <img src={avatar} alt="" /> 2286 + </div> 2287 + ) : ( 2288 + <div class="edit-media"></div> 2289 + )} 2290 + {avatarPreview && ( 2291 + <> 2292 + <Icon icon="arrow-right" /> 2293 + <div 2294 + class="edit-media" 2295 + tabIndex="0" 2296 + onClick={() => { 2297 + states.showMediaModal = { 2298 + mediaAttachments: avatarMediaAttachments, 2299 + index: 1, 2300 + }; 2301 + }} 2302 + > 2303 + <img src={avatarPreview} alt="" /> 2304 + </div> 2305 + </> 2306 + )} 2307 + </div> 2308 + </div> 2182 2309 <p> 2183 2310 <label> 2184 2311 <Trans>Name</Trans>{' '}

+20 -12

src/locales/en.po

··· 386 386 msgstr "" 387 387 388 388 #: src/components/account-info.jsx:1611 389 - #: src/components/account-info.jsx:2126 389 + #: src/components/account-info.jsx:2145 390 390 msgid "Edit profile" 391 391 msgstr "" 392 392 ··· 416 416 #: src/components/account-info.jsx:1831 417 417 #: src/components/account-info.jsx:1886 418 418 #: src/components/account-info.jsx:2020 419 - #: src/components/account-info.jsx:2121 419 + #: src/components/account-info.jsx:2140 420 420 #: src/components/account-sheet.jsx:38 421 421 #: src/components/compose.jsx:859 422 422 #: src/components/compose.jsx:2580 ··· 485 485 msgstr "Unable to update private note." 486 486 487 487 #: src/components/account-info.jsx:2078 488 - #: src/components/account-info.jsx:2249 488 + #: src/components/account-info.jsx:2376 489 489 msgid "Cancel" 490 490 msgstr "" 491 491 ··· 493 493 msgid "Save & close" 494 494 msgstr "" 495 495 496 - #: src/components/account-info.jsx:2177 496 + #: src/components/account-info.jsx:2200 497 497 msgid "Unable to update profile." 498 498 msgstr "Unable to update profile." 499 499 500 - #: src/components/account-info.jsx:2184 500 + #: src/components/account-info.jsx:2207 501 + msgid "Header picture" 502 + msgstr "Header picture" 503 + 504 + #: src/components/account-info.jsx:2259 505 + msgid "Profile picture" 506 + msgstr "Profile picture" 507 + 508 + #: src/components/account-info.jsx:2311 501 509 #: src/components/list-add-edit.jsx:105 502 510 msgid "Name" 503 511 msgstr "" 504 512 505 - #: src/components/account-info.jsx:2197 513 + #: src/components/account-info.jsx:2324 506 514 msgid "Bio" 507 515 msgstr "" 508 516 509 - #: src/components/account-info.jsx:2210 517 + #: src/components/account-info.jsx:2337 510 518 msgid "Extra fields" 511 519 msgstr "" 512 520 513 - #: src/components/account-info.jsx:2216 521 + #: src/components/account-info.jsx:2343 514 522 msgid "Label" 515 523 msgstr "" 516 524 517 - #: src/components/account-info.jsx:2219 525 + #: src/components/account-info.jsx:2346 518 526 msgid "Content" 519 527 msgstr "" 520 528 521 - #: src/components/account-info.jsx:2252 529 + #: src/components/account-info.jsx:2379 522 530 #: src/components/list-add-edit.jsx:150 523 531 #: src/components/shortcuts-settings.jsx:715 524 532 #: src/pages/filters.jsx:554 ··· 526 534 msgid "Save" 527 535 msgstr "" 528 536 529 - #: src/components/account-info.jsx:2306 537 + #: src/components/account-info.jsx:2433 530 538 msgid "username" 531 539 msgstr "" 532 540 533 - #: src/components/account-info.jsx:2310 541 + #: src/components/account-info.jsx:2437 534 542 msgid "server domain name" 535 543 msgstr "" 536 544

Configure Feed

Configure Feed