Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 10:22:30 +01:00
Code Issues Releases Activity

updated presence indicators

Browse Source
This commit is contained in:
Puyodead1 2024-05-24 21:17:51 -04:00
parent 0d1ebd9e49
commit 34db3f9561
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
3 changed files with 43 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/Avatar.tsx
View File

@ -11,26 +11,26 @@ import Floating from "./floating/Floating";
import FloatingTrigger from "./floating/FloatingTrigger"; import FloatingTrigger from "./floating/FloatingTrigger";
const Wrapper = styled(Container)<{ size: number; hasClick?: boolean }>` const Wrapper = styled(Container)<{ size: number; hasClick?: boolean }>`
width: ${(props) => props.size}px;
height: ${(props) => props.size}px;
position: relative;
background-color: transparent; background-color: transparent;
display: flex;
&:hover { flex-direction: column;
text-decoration: underline;
cursor: ${(props) => (props.hasClick ? "pointer" : "default")};
}
`; `;
const StatusDot = styled.span<{ color: string; width?: number; height?: number }>` const StatusDot = styled.i<{ color: string; size?: number; left?: number; bottom?: number }>`
position: absolute;
bottom: 0;
right: 0;
background-color: ${(props) => props.color};
border-radius: 50%; border-radius: 50%;
border: 2px solid var(--background-primary); border: 0.3rem solid var(--background-secondary);
width: ${(props) => props.width ?? 10}px; background-color: ${(props) => props.color};
height: ${(props) => props.height ?? 10}px; height: ${(props) => props.size ?? 16}px;
width: ${(props) => props.size ?? 16}px;
position: relative;
bottom: ${(props) => props.bottom ?? 16}px;
left: ${(props) => props.left ?? 20}px;
display: block;
`;
const InnerWrapper = styled.div<{ width?: number; height?: number }>`
height: ${(props) => props.height ?? 40}px;
width: ${(props) => props.width ?? 40}px;
`; `;
function Yes(onClick: React.MouseEventHandler<HTMLDivElement>) { function Yes(onClick: React.MouseEventHandler<HTMLDivElement>) {
@ -47,10 +47,12 @@ interface Props {
popoutPlacement?: "left" | "right" | "top" | "bottom"; popoutPlacement?: "left" | "right" | "top" | "bottom";
presence?: Presence; presence?: Presence;
statusDotStyle?: { statusDotStyle?: {
width?: number; size?: number;
height?: number; left?: number;
bottom?: number;
}; };
showPresence?: boolean; showPresence?: boolean;
innerWrapperSize?: number;
} }
function Avatar(props: Props) { function Avatar(props: Props) {
@ -74,21 +76,23 @@ function Avatar(props: Props) {
> >
<Base> <Base>
<Wrapper size={props.size ?? 32} style={props.style} ref={ref} hasClick={props.onClick !== null}> <Wrapper size={props.size ?? 32} style={props.style} ref={ref} hasClick={props.onClick !== null}>
<img <InnerWrapper width={props.innerWrapperSize} height={props.innerWrapperSize}>
style={{ <img
borderRadius: "50%", style={{
}} borderRadius: "50%",
src={user.avatarUrl} }}
width={props.size ?? 32} src={user.avatarUrl}
height={props.size ?? 32} width={props.size ?? 32}
loading="eager" height={props.size ?? 32}
/> loading="eager"
{props.showPresence && (
<StatusDot
color={app.theme.getStatusColor(props.presence?.status ?? PresenceUpdateStatus.Offline)}
{...props.statusDotStyle}
/> />
)} {props.showPresence && (
<StatusDot
color={app.theme.getStatusColor(props.presence?.status ?? PresenceUpdateStatus.Offline)}
{...props.statusDotStyle}
/>
)}
</InnerWrapper>
</Wrapper> </Wrapper>
</Base> </Base>
</Floating> </Floating>

3
src/components/UserPanel.tsx
View File

@ -70,6 +70,7 @@ const ActionsWrapper = styled.div`
function UserPanel() { function UserPanel() {
const app = useAppStore(); const app = useAppStore();
const presence = app.presences.get(app.account!.id);
const openSettingsModal = () => { const openSettingsModal = () => {
modalController.push({ modalController.push({
@ -88,7 +89,7 @@ function UserPanel() {
<Section> <Section>
<Container> <Container>
<AvatarWrapper> <AvatarWrapper>
<Avatar popoutPlacement="top" onClick={null} /> <Avatar popoutPlacement="top" onClick={null} showPresence presence={presence} />
<Name> <Name>
<Username>{app.account?.username}</Username> <Username>{app.account?.username}</Username>
<Subtext>#{app.account?.discriminator}</Subtext> <Subtext>#{app.account?.discriminator}</Subtext>

10
src/components/floating/UserProfilePopout.tsx
View File

@ -22,9 +22,7 @@ const Container = styled.div`
width: 340px; width: 340px;
max-height: 600px; max-height: 600px;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 4px 8px rgb(0 0 0 / 15%);
0 0 0 1px rgb(0 0 0 / 15%),
0 4px 8px rgb(0 0 0 / 15%);
color: var(--text); color: var(--text);
`; `;
@ -185,10 +183,12 @@ function UserProfilePopout({ user, member }: Props) {
user={user} user={user}
presence={presence} presence={presence}
statusDotStyle={{ statusDotStyle={{
width: 16, size: 25,
height: 16, left: 55,
bottom: 28,
}} }}
showPresence showPresence
innerWrapperSize={92}
/> />
</Top> </Top>
<Bottom> <Bottom>