this repo has no description
Handle info with menu dropdown for profile page
+135
-7
+55
src/components/account-info.css
+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
+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
+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,