martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-24 02:25:26 +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;
flex-direction: row;
align-items: center;
width: auto;
height: 100%;
cursor: default;
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 {
display: flex;
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 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 (
<div className={className}>
<div className={classes.card}>
<Image radius="sm" className={classes.image} src={imageUrl} />
<div className={classes.details}>
{ name && (
<Text className={classes.nameSet}>{ name }</Text>
)}
{ !name && (
<Text className={classes.nameUnset}>{ placeholder }</Text>
)}
<Text className={classes.handle}>{ node ? `${handle}/${node}` : handle }</Text>
<div className={select ? classes.cursor : classes.nocursor} onClick={select ? select : ()=>{}}>
<Image radius="sm" className={classes.image} src={imageUrl} />
<div className={classes.details}>
{ name && (
<Text className={classes.nameSet}>{ name }</Text>
)}
{ !name && (
<Text className={classes.nameUnset}>{ placeholder }</Text>
)}
<Text className={classes.handle}>{ node ? `${handle}/${node}` : handle }</Text>
</div>
</div>
{ actions }
</div>

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

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

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

@ -9,11 +9,12 @@ export function Contacts() {
const { state, actions } = useContacts();
const cards = state.filtered.map((card) => {
const call = <ActionIcon variant="subtle"><IconPhone size={24} onClick={() => {console.log('calling')}} /></ActionIcon>
const message = <ActionIcon variant="subtle"><IconMessage2 size={24} onClick={() => {console.log('texting')}} /></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("TEXT:", card.cardId)}} /></ActionIcon>
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];
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 (