martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-04 15:35:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updating card item

Browse Source
This commit is contained in:
balzack 2024-10-12 21:39:44 -07:00
parent ecce5b02c5
commit 93e03c6733
4 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/client/web/src/card/Card.module.css
View File

@ -2,11 +2,29 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: auto;
height: 100%; height: 100%;
cursor: default;
gap: 8px; gap: 8px;
.cursor {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
height: 100%;
gap: 4px;
cursor: pointer;
}
.nocursor {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
height: 100%;
gap: 4px;
cursor: default;
}
.details { .details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

22
app/client/web/src/card/Card.tsx
View File

@ -2,20 +2,22 @@ import React, { ReactNode } from 'react'
import { Image, Text } from '@mantine/core'; import { Image, Text } from '@mantine/core';
import classes from './Card.module.css' import classes from './Card.module.css'
export function Card({ imageUrl, name, placeholder, handle, node, actions, className }: { className: string, imageUrl: string, name: string, placeholder: string, handle: string, node: string, actions: ReactNode[] }) { export function Card({ imageUrl, name, placeholder, handle, node, select, actions, className }: { className: string, imageUrl: string, name: string, placeholder: string, handle: string, node: string, select?: () => void, actions: ReactNode[] }) {
return ( return (
<div className={className}> <div className={className}>
<div className={classes.card}> <div className={classes.card}>
<Image radius="sm" className={classes.image} src={imageUrl} /> <div className={select ? classes.cursor : classes.nocursor} onClick={select ? select : ()=>{}}>
<div className={classes.details}> <Image radius="sm" className={classes.image} src={imageUrl} />
{ name && ( <div className={classes.details}>
<Text className={classes.nameSet}>{ name }</Text> { name && (
)} <Text className={classes.nameSet}>{ name }</Text>
{ !name && ( )}
<Text className={classes.nameUnset}>{ placeholder }</Text> { !name && (
)} <Text className={classes.nameUnset}>{ placeholder }</Text>
<Text className={classes.handle}>{ node ? `${handle}/${node}` : handle }</Text> )}
<Text className={classes.handle}>{ node ? `${handle}/${node}` : handle }</Text>
</div>
</div> </div>
{ actions } { actions }
</div> </div>

14
app/client/web/src/contacts/Contacts.module.css
View File

@ -36,31 +36,31 @@
overscroll-behavior: none; overscroll-behavior: none;
.requested { .requested {
border-right: 3px solid #aa44aa; border-right: 5px solid #aa44aa;
} }
.connecting { .connecting {
border-right: 3px solid #22aacc; border-right: 5px solid #22aacc;
} }
.pending { .pending {
border-right: 3px solid #aaaa44; border-right: 5px solid #aaaa44;
} }
.connected { .connected {
border-right: 3px solid #44aa44; border-right: 5px solid #44aa44;
} }
.confirmed { .confirmed {
border-right: 3px solid #cccccc; border-right: 5px solid #cccccc;
} }
.unknown { .unknown {
border-right: 3px solid #555555; border-right: 5px solid #555555;
} }
.offsync { .offsync {
border-right: 3px solid #dd6633; border-right: 5px solid #dd6633;
} }
.card { .card {

7
app/client/web/src/contacts/Contacts.tsx
View File

@ -9,11 +9,12 @@ export function Contacts() {
const { state, actions } = useContacts(); const { state, actions } = useContacts();
const cards = state.filtered.map((card) => { const cards = state.filtered.map((card) => {
const call = <ActionIcon variant="subtle"><IconPhone size={24} onClick={() => {console.log('calling')}} /></ActionIcon> const call = <ActionIcon variant="subtle"><IconPhone size={24} onClick={() => {console.log("CALL:", card.cardId)}} /></ActionIcon>
const message = <ActionIcon variant="subtle"><IconMessage2 size={24} onClick={() => {console.log('texting')}} /></ActionIcon> const message = <ActionIcon variant="subtle"><IconMessage2 size={24} onClick={() => {console.log("TEXT:", card.cardId)}} /></ActionIcon>
const options = card.status === 'connected' && !card.offsync ? [message, call] : []; const options = card.status === 'connected' && !card.offsync ? [message, call] : [];
const select = () => { console.log("SELECT:", card.cardId); }
const status = card.offsync ? classes.offsync : classes[card.status]; const status = card.offsync ? classes.offsync : classes[card.status];
return (<Card className={`${classes.card} ${status}`} key={card.cardId} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} actions={options} />) return (<Card className={`${classes.card} ${status}`} key={card.cardId} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} select={select} actions={options} />)
}); });
return ( return (