cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-07 08:23:55 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style: small tweaks on blocks

Browse Source
This commit is contained in:
cv
2023-04-06 20:46:24 +02:00
parent ba62276951
commit e36b19a511
10 changed files with 57 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editors/Editor.module.scss
+1 -1
View File
@@ -144,7 +144,7 @@ $playback-width: 450px;
.eventEditor {
border-radius: 8px 8px 0 0;
background-color: $bg-container-l2;
box-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
box-shadow: rgba(0, 0, 0, 0.6) 0 3px 6px 6px;
border-top: 1px solid $white-10;
position: absolute;
bottom: 0;
apps/client/src/features/rundown/_blockMixins.scss
+1 -1
View File
@@ -8,13 +8,13 @@ $block-clearance: 8px;
$block-border-radius: 8px;
$block-text-color: $gray-50;
$block-bg: $gray-1200;
$block-bg2: $gray-1050; // for delay and blocks
$block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
$secondary-block-height: 40px;
$block-cursor-color: $blue-400;
@mixin block-styling() {
box-sizing: content-box;
background-color: $block-bg;
border: 1px solid $white-10;
font-family: $ontime-font-family;
border-radius: $block-border-radius;
apps/client/src/features/rundown/block-block/BlockBlock.module.scss
+5 -3
View File
@@ -3,12 +3,14 @@
.block {
@include block-spacing;
@include block-styling;
box-sizing: content-box;
background-color: $block-bg2;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 8px;
align-items: center;
height: $secondary-block-height;
gap: 8px;
&.hasCursor {
outline: 1px solid $block-cursor-color;
@@ -19,6 +21,6 @@
@include drag-style;
}
.actionOverlay {
.actionMenu {
justify-self: flex-end;
}
apps/client/src/features/rundown/block-block/BlockBlock.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ export default function BlockBlock(props: BlockBlockProps) {
<IoReorderTwo />
</span>
<EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
<BlockActionMenu className={style.actionOverlay} showAdd showDelay enableDelete actionHandler={actionHandler} />
<BlockActionMenu className={style.actionMenu} showAdd showDelay enableDelete actionHandler={actionHandler} />
</div>
);
}
apps/client/src/features/rundown/delay-block/DelayBlock.module.scss
+2
View File
@@ -4,6 +4,8 @@
@include block-spacing;
@include block-styling;
background-color: $block-bg2;
display: grid;
grid-template-columns: 32px 1fr auto;
grid-template-areas: 'drag inpt btns';
apps/client/src/features/rundown/delay-block/DelayBlock.tsx
+12 -4
View File
@@ -3,6 +3,7 @@ import { Button, HStack } from '@chakra-ui/react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
import { IoClose } from '@react-icons/all-files/io5/IoClose';
import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
import { OntimeDelay, OntimeEvent } from 'ontime-types';
@@ -31,7 +32,7 @@ interface DelayBlockProps {
export default function DelayBlock(props: DelayBlockProps) {
const { data, hasCursor, actionHandler } = props;
const { applyDelay, updateEvent } = useEventAction();
const { applyDelay, updateEvent, deleteEvent } = useEventAction();
const handleRef = useRef<null | HTMLSpanElement>(null);
const {
@@ -56,9 +57,13 @@ export default function DelayBlock(props: DelayBlockProps) {
}
}, [hasCursor]);
const applyDelayHandler = useCallback(() => {
const applyDelayHandler = () => {
applyDelay(data.id);
}, [data.id, applyDelay]);
};
const cancelDelayHandler = () => {
deleteEvent(data.id);
};
const delaySubmitHandler = useCallback(
(value: number) => {
@@ -84,7 +89,10 @@ export default function DelayBlock(props: DelayBlockProps) {
<DelayInput value={delayValue} submitHandler={delaySubmitHandler} />
<HStack spacing='8px' className={style.actionOverlay}>
<Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmark />} variant='ontime-subtle-white'>
Apply delay
Apply
</Button>
<Button onClick={cancelDelayHandler} size='sm' leftIcon={<IoClose />} variant='ontime-subtle-white'>
Cancel
</Button>
<BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
</HStack>
apps/client/src/features/rundown/event-block/EventBlock.module.scss
+4 -2
View File
@@ -2,8 +2,11 @@
@use '../../../theme/ontimeColours' as *;
@use '../blockMixins' as *;
$skip-opacity: 0.1;
.eventBlock {
@include block-styling;
background-color: $block-bg;
display: grid;
grid-template-areas:
@@ -29,7 +32,6 @@
&.skip {
border: 1px solid $white-3;
box-shadow: none;
.delayNote,
.eventTitle,
@@ -37,7 +39,7 @@
.binder,
.eventTimers,
.eventStatus {
opacity: $opacity-disabled;
opacity: $skip-opacity;
}
}
}
apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+17 -17
View File
@@ -1,13 +1,13 @@
import { memo, useCallback, useEffect, useState } from 'react';
import { Tooltip } from '@chakra-ui/react';
import { IoCaretDownCircle } from '@react-icons/all-files/io5/IoCaretDownCircle';
import { IoCaretUpCircle } from '@react-icons/all-files/io5/IoCaretUpCircle';
import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
import { IoPlayCircle } from '@react-icons/all-files/io5/IoPlayCircle';
import { IoPlayForwardCircle } from '@react-icons/all-files/io5/IoPlayForwardCircle';
import { IoPlaySkipForwardCircle } from '@react-icons/all-files/io5/IoPlaySkipForwardCircle';
import { IoStopCircle } from '@react-icons/all-files/io5/IoStopCircle';
import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
import { IoPlayForward } from '@react-icons/all-files/io5/IoPlayForward';
import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
import { IoStop } from '@react-icons/all-files/io5/IoStop';
import { IoTime } from '@react-icons/all-files/io5/IoTime';
import { EndAction, Playback, TimerType } from 'ontime-types';
@@ -120,16 +120,16 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
<span className={style.tag}>NEXT</span>
</Tooltip>
)}
<Tooltip label={`End action: ${endAction}`} {...tooltipProps}>
<span>
<EndActionIcon action={endAction} className={style.statusIcon} />
</span>
</Tooltip>
<Tooltip label={`Time type: ${timerType}`} {...tooltipProps}>
<span>
<TimerIcon type={timerType} className={style.statusIcon} />
</span>
</Tooltip>
<Tooltip label={`End action: ${endAction}`} {...tooltipProps}>
<span>
<EndActionIcon action={endAction} className={style.statusIcon} />
</span>
</Tooltip>
<Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
<span>
<IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
@@ -161,24 +161,24 @@ export default memo(EventBlockInner);
function EndActionIcon(props: { action: EndAction; className: string }) {
const { action, className } = props;
if (action === EndAction.LoadNext) {
return <IoPlaySkipForwardCircle className={className} />;
return <IoPlaySkipForward className={className} />;
}
if (action === EndAction.PlayNext) {
return <IoPlayForwardCircle className={className} />;
return <IoPlayForward className={className} />;
}
if (action === EndAction.Stop) {
return <IoStopCircle className={className} />;
return <IoStop className={className} />;
}
return <IoPlayCircle className={className} />;
return <IoPlay className={className} />;
}
function TimerIcon(props: { type: TimerType; className: string }) {
const { type, className } = props;
if (type === TimerType.CountUp) {
return <IoCaretUpCircle className={className} />;
return <IoCaretUp className={className} />;
}
if (type === TimerType.Clock) {
return <IoTime className={className} />;
}
return <IoCaretDownCircle className={className} />;
return <IoCaretDown className={className} />;
}
apps/client/src/features/rundown/event-block/composite/BlockActionMenu.tsx
+12 -37
View File
@@ -1,13 +1,5 @@
import { useCallback } from 'react';
import {
IconButton,
Menu,
MenuButton,
MenuDivider,
MenuItem,
MenuList,
Tooltip,
} from '@chakra-ui/react';
import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Tooltip } from '@chakra-ui/react';
import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
@@ -27,14 +19,15 @@ interface BlockActionMenuProps {
actionHandler: (action: EventItemActions, payload?: any) => void;
className?: string;
}
export default function BlockActionMenu(props: BlockActionMenuProps) {
const { showAdd, showDelay, showBlock, enableDelete, showClone, actionHandler, className } = props;
const handleAddEvent = useCallback(() => actionHandler("event"), [actionHandler])
const handleAddDelay = useCallback(() => actionHandler("delay"), [actionHandler])
const handleAddBlock = useCallback(() => actionHandler("block"), [actionHandler])
const handleClone = useCallback(() => actionHandler("clone"), [actionHandler])
const handleDelete = useCallback(() => actionHandler("delete"), [actionHandler])
const handleAddEvent = useCallback(() => actionHandler('event'), [actionHandler]);
const handleAddDelay = useCallback(() => actionHandler('delay'), [actionHandler]);
const handleAddBlock = useCallback(() => actionHandler('block'), [actionHandler]);
const handleClone = useCallback(() => actionHandler('clone'), [actionHandler]);
const handleDelete = useCallback(() => actionHandler('delete'), [actionHandler]);
return (
<Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
@@ -44,8 +37,7 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
aria-label='Event options'
icon={<IoEllipsisHorizontal />}
tabIndex={-1}
variant='ontime-subtle'
color='#f6f6f6'
variant='ontime-subtle-white'
size='sm'
className={className}
/>
@@ -54,36 +46,19 @@ export default function BlockActionMenu(props: BlockActionMenuProps) {
<MenuItem icon={<IoAdd />} onClick={handleAddEvent} isDisabled={!showAdd}>
Add Event after
</MenuItem>
<MenuItem
icon={<IoTimerOutline />}
onClick={handleAddDelay}
isDisabled={!showDelay}
>
<MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay} isDisabled={!showDelay}>
Add Delay after
</MenuItem>
<MenuItem
icon={<IoRemoveCircleOutline />}
onClick={handleAddBlock}
isDisabled={!showBlock}
>
<MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock} isDisabled={!showBlock}>
Add Block after
</MenuItem>
{showClone && (
<MenuItem
icon={<IoDuplicateOutline />}
onClick={handleClone}
isDisabled={!showBlock}
>
<MenuItem icon={<IoDuplicateOutline />} onClick={handleClone} isDisabled={!showBlock}>
Clone event
</MenuItem>
)}
<MenuDivider />
<MenuItem
icon={<IoTrashBinSharp />}
onClick={handleDelete}
isDisabled={!enableDelete}
color='#D20300'
>
<MenuItem icon={<IoTrashBinSharp />} onClick={handleDelete} isDisabled={!enableDelete} color='#D20300'>
Delete event
</MenuItem>
</MenuList>
apps/client/src/features/rundown/event-block/composite/EventBlockPlayback.tsx
+2
View File
@@ -42,6 +42,8 @@ const EventBlockPlayback = (props: EventBlockPlaybackProps) => {
aria-label='Skip event'
tooltip='Skip event'
icon={skip ? <IoRemoveCircle /> : <IoRemoveCircleOutline />}
backgroundColor={skip ? '#FA5656' : undefined}
_hover={{ backgroundColor: skip ? '#FF7878' : '#404040' }}
{...tooltipProps}
{...blockBtnStyle}
clickHandler={toggleSkip}