this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Handle info with menu dropdown for profile page

+135 -7
+55
src/components/account-info.css
··· 831 831 } 832 832 } 833 833 } 834 + 835 + .handle-info { 836 + .handle-handle { 837 + display: inline-block; 838 + margin-block: 5px; 839 + 840 + b { 841 + font-weight: 600; 842 + padding: 2px 4px; 843 + border-radius: 4px; 844 + display: inline-block; 845 + box-shadow: 0 0 0 5px var(--bg-blur-color); 846 + 847 + &.handle-username { 848 + color: var(--orange-fg-color); 849 + background-color: var(--orange-bg-color); 850 + } 851 + 852 + &.handle-server { 853 + color: var(--purple-fg-color); 854 + background-color: var(--purple-bg-color); 855 + } 856 + } 857 + } 858 + 859 + .handle-at { 860 + display: inline-block; 861 + margin-inline: -3px; 862 + position: relative; 863 + z-index: 1; 864 + } 865 + 866 + .handle-legend { 867 + margin-top: 0.25em; 868 + } 869 + 870 + .handle-legend-icon { 871 + overflow: hidden; 872 + display: inline-block; 873 + width: 14px; 874 + height: 14px; 875 + border: 4px solid transparent; 876 + border-radius: 8px; 877 + background-clip: padding-box; 878 + 879 + &.username { 880 + background-color: var(--orange-fg-color); 881 + border-color: var(--orange-bg-color); 882 + } 883 + &.server { 884 + background-color: var(--purple-fg-color); 885 + border-color: var(--purple-bg-color); 886 + } 887 + } 888 + }
+68 -7
src/components/account-info.jsx
··· 541 541 /> 542 542 )} 543 543 <header> 544 - <AccountBlock 545 - account={info} 546 - instance={instance} 547 - avatarSize="xxxl" 548 - external={standalone} 549 - internal={!standalone} 550 - /> 544 + {standalone ? ( 545 + <Menu2 546 + shift={64} 547 + menuButton={ 548 + <div> 549 + <AccountBlock 550 + account={info} 551 + instance={instance} 552 + avatarSize="xxxl" 553 + onClick={() => {}} 554 + /> 555 + </div> 556 + } 557 + > 558 + <div class="szh-menu__header"> 559 + <AccountHandleInfo acct={acct} instance={instance} /> 560 + </div> 561 + <MenuItem 562 + onClick={() => { 563 + const handle = `@${acct}`; 564 + try { 565 + navigator.clipboard.writeText(handle); 566 + showToast('Handle copied'); 567 + } catch (e) { 568 + console.error(e); 569 + showToast('Unable to copy handle'); 570 + } 571 + }} 572 + > 573 + <Icon icon="link" /> 574 + <span>Copy handle</span> 575 + </MenuItem> 576 + <MenuItem href={url} target="_blank"> 577 + <Icon icon="external" /> 578 + <span>Go to original profile page</span> 579 + </MenuItem> 580 + </Menu2> 581 + ) : ( 582 + <AccountBlock 583 + account={info} 584 + instance={instance} 585 + avatarSize="xxxl" 586 + internal 587 + /> 588 + )} 551 589 </header> 552 590 <div class="faux-header-bg" aria-hidden="true" /> 553 591 <main> ··· 1997 2035 /> 1998 2036 </td> 1999 2037 </tr> 2038 + ); 2039 + } 2040 + 2041 + function AccountHandleInfo({ acct, instance }) { 2042 + // acct = username or username@server 2043 + let [username, server] = acct.split('@'); 2044 + if (!server) server = instance; 2045 + return ( 2046 + <div class="handle-info"> 2047 + <span class="handle-handle"> 2048 + <b class="handle-username">{username}</b> 2049 + <span class="handle-at">@</span> 2050 + <b class="handle-server">{server}</b> 2051 + </span> 2052 + <div class="handle-legend"> 2053 + <span class="ib"> 2054 + <span class="handle-legend-icon username" /> username 2055 + </span>{' '} 2056 + <span class="ib"> 2057 + <span class="handle-legend-icon server" /> server domain name 2058 + </span> 2059 + </div> 2060 + </div> 2000 2061 ); 2001 2062 } 2002 2063
+12
src/index.css
··· 16 16 17 17 --blue-color: royalblue; 18 18 --purple-color: blueviolet; 19 + --purple-fg-color: color-mix( 20 + in srgb-linear, 21 + var(--purple-color) 60%, 22 + var(--text-color) 40% 23 + ); 24 + --purple-bg-color: color-mix(in lch, var(--purple-color) 15%, transparent); 19 25 --green-color: darkgreen; 20 26 --orange-color: darkorange; 21 27 --orange-light-bg-color: color-mix( ··· 23 29 var(--orange-color) 20%, 24 30 transparent 25 31 ); 32 + --orange-fg-color: color-mix( 33 + in srgb-linear, 34 + var(--orange-color) 60%, 35 + var(--text-color) 40% 36 + ); 37 + --orange-bg-color: color-mix(in lch, var(--orange-color) 15%, transparent); 26 38 --red-color: orangered; 27 39 --red-text-color: color-mix( 28 40 in srgb-linear,