mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-16 12:53:32 +00:00
refactor: small style tweaks
- cursor styles on dnd
This commit is contained in:
committed by
Carlos Valente
parent
3ce539af2a
commit
8a7f8c8ebc
+6
-1
@@ -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;
|
||||||
|
|||||||
+4
-2
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
+3
-1
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user