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

showing message options

Browse Source
This commit is contained in:
balzack 2024-12-09 22:02:10 -08:00
parent e96895a16d
commit 1cf4871ca4
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/client/web/src/message/Message.module.css
View File

@ -107,6 +107,7 @@
line-height: 16px;
padding-bottom: 4px;
gap: 16px;
position: relative;
&:hover {
.options {
@ -118,6 +119,34 @@
.options {
display: none;
position: absolute;
top: 0;
right: 0;
}
.surface {
display: flex;
background-color: var(--mantine-color-surface-4);
gap: 10px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 4px;
}
.option {
cursor: pointer;
width: 20px;
height: 20px;
color: var(--mantine-color-dbgreen-1);
}
.careful {
cursor: pointer;
width: 20px;
height: 20px;
color: var(--mantine-color-red-2);
}
.name {

15
app/client/web/src/message/Message.tsx
View File

@ -10,7 +10,7 @@ import { BinaryAsset } from './binaryAsset/BinaryAsset';
import type { MediaAsset } from '../conversation/Conversation';
import { useMessage } from './useMessage.hook';
import failed from '../images/failed.png'
import { IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
import { IconForbid, IconTrash, IconEdit, IconAlertSquareRounded, IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
import { useResizeDetector } from 'react-resize-detector';
export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) {
@ -73,7 +73,18 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
)}
<span className={classes.timestamp}> { timestamp }</span>
</div>
<div className={classes.options}>OPTIONS</div>
<div className={classes.options}>
<div className={classes.surface}>
{ !locked && profile && (
<IconEdit className={classes.option} />
)}
{ (host || profile) && (
<IconTrash className={classes.careful} />
)}
<IconForbid className={classes.careful} />
<IconAlertSquareRounded className={classes.careful} />
</div>
</div>
</div>
{ !locked && status === 'confirmed' && text && (
<div style={textStyle}>