refactor: small style tweaks

- cursor styles on dnd
This commit is contained in:
Carlos Valente
2025-07-27 16:46:08 +02:00
committed by Carlos Valente
parent 3ce539af2a
commit 8a7f8c8ebc
8 changed files with 23 additions and 5 deletions
@@ -5,12 +5,17 @@
} }
.interfaces { .interfaces {
padding: 0.5rem 1rem; padding: 0.5rem 0.5rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
} }
.interfaceCopy {
display: flex;
align-items: center;
}
.goIcon { .goIcon {
@include rotate-fourty-five; @include rotate-fourty-five;
margin-left: 0.25rem; margin-left: 0.25rem;
@@ -30,8 +30,10 @@ export default function OtherAddresses({ currentLocation }: OtherAddressesProps)
const address = linkToOtherHost(nif.address, currentLocation); const address = linkToOtherHost(nif.address, currentLocation);
return ( return (
<CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)}> <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
{nif.address} <IoArrowUp className={style.goIcon} /> <span className={style.interfaceCopy}>
{nif.address} <IoArrowUp className={style.goIcon} />
</span>
</CopyTag> </CopyTag>
); );
})} })}
@@ -22,6 +22,11 @@
outline: 2px solid $blue-500; outline: 2px solid $blue-500;
outline-offset: 2px; outline-offset: 2px;
} }
&[data-disabled] {
opacity: $opacity-disabled;
cursor: not-allowed;
}
} }
.medium { .medium {
@@ -50,4 +55,5 @@
&[data-checked] { &[data-checked] {
translate: calc(var(--width) - var(--height)) 0; translate: calc(var(--width) - var(--height)) 0;
} }
} }
@@ -95,7 +95,7 @@ export default function RundownBlock({ data, hasCursor, collapsed, onCollapse }:
zIndex: isDragging ? 2 : 'inherit', zIndex: isDragging ? 2 : 'inherit',
transform: CSS.Translate.toString(transform), transform: CSS.Translate.toString(transform),
transition, transition,
cursor: isOver ? (isValidDrop ? 'grabbing' : 'no-drop') : 'default', cursor: isOver ? (isValidDrop ? 'grabbing' : 'no-drop') : 'grab',
}; };
return ( return (
@@ -37,6 +37,7 @@ export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
const dragStyle = { const dragStyle = {
zIndex: isDragging ? 2 : 'inherit', zIndex: isDragging ? 2 : 'inherit',
cursor: isDragging ? 'grabbing' : 'grab',
transform: CSS.Translate.toString(transform), transform: CSS.Translate.toString(transform),
transition, transition,
}; };
@@ -201,6 +201,7 @@ export default function RundownEvent({
const dragStyle = { const dragStyle = {
zIndex: isDragging ? 2 : 'inherit', zIndex: isDragging ? 2 : 'inherit',
cursor: isDragging ? 'grabbing' : 'grab',
transform: CSS.Translate.toString(transform), transform: CSS.Translate.toString(transform),
transition, transition,
}; };
@@ -70,6 +70,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
const dragStyle = { const dragStyle = {
zIndex: isDragging ? 2 : 'inherit', zIndex: isDragging ? 2 : 'inherit',
cursor: isDragging ? 'grabbing' : 'grab',
transform: CSS.Translate.toString(transform), transform: CSS.Translate.toString(transform),
transition, transition,
}; };
@@ -15,13 +15,15 @@ interface SortableCellProps {
export function SortableCell({ header, injectedStyles, children }: SortableCellProps) { export function SortableCell({ header, injectedStyles, children }: SortableCellProps) {
const { column, colSpan } = header; const { column, colSpan } = header;
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: column.id, id: column.id,
}); });
// build drag styles // build drag styles
const dragStyle = { const dragStyle = {
...injectedStyles, ...injectedStyles,
zIndex: isDragging ? 2 : 'inherit',
cursor: isDragging ? 'grabbing' : 'grab',
transform: CSS.Translate.toString(transform), transform: CSS.Translate.toString(transform),
transition, transition,
}; };