From bf7ca81e024d188fa02e9ec0ce7c5ac3e5723418 Mon Sep 17 00:00:00 2001 From: arihanv <63890951+arihanv@users.noreply.github.com> Date: Sun, 23 Jul 2023 15:17:25 -0500 Subject: [PATCH] style: Styling Operator Block (#468) * Operator Layout --- .../features/operator/Operator.module.scss | 14 ++++++++- .../client/src/features/operator/Operator.tsx | 29 ++++++++++++++---- .../operator/focus-block/focus-block.tsx | 14 +++++++++ .../focus-block/focusBlock.module.scss | 25 ++++++++++++++++ .../operator/op-event/OpEvent.module.scss | 26 ++++++++++++++++ .../features/operator/op-event/OpEvent.tsx | 30 +++++++++++++------ 6 files changed, 123 insertions(+), 15 deletions(-) create mode 100644 apps/client/src/features/operator/focus-block/focus-block.tsx create mode 100644 apps/client/src/features/operator/focus-block/focusBlock.module.scss diff --git a/apps/client/src/features/operator/Operator.module.scss b/apps/client/src/features/operator/Operator.module.scss index c31b66126..2ffccd80d 100644 --- a/apps/client/src/features/operator/Operator.module.scss +++ b/apps/client/src/features/operator/Operator.module.scss @@ -30,9 +30,21 @@ .scheduledEvent { @include event-block(); background-color: $gray-1300; + align-items: start; +} + +.activeEvent { + border-top: 1.5px white; + border-style: solid; +} + +.runningTimer { + border-top: 0.5px white; + border-style: solid; + background-color: $green-700; } .block { @include event-block(); background-color: $gray-1350; -} +} \ No newline at end of file diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx index 4e4795eab..120b1ca17 100644 --- a/apps/client/src/features/operator/Operator.tsx +++ b/apps/client/src/features/operator/Operator.tsx @@ -1,7 +1,10 @@ +import React from 'react'; import { SupportedEvent } from 'ontime-types'; +import NavigationMenu from '../.././common/components/navigation-menu/NavigationMenu'; import useRundown from '../../common/hooks-query/useRundown'; +import FocusBlock from './focus-block/focus-block'; import OpBlock from './op-block/OpBlock'; import OpEvent from './op-event/OpEvent'; import TimeBlock from './time-block/TimeBlock'; @@ -12,6 +15,14 @@ export default function Operator() { // this is the data that you need, the status flag should give you possibility to create a loading state // for debugging data use the react query dev tools (flower thing in the bottom left corner) const { data, status } = useRundown(); + const [showChild, setShowChild] = React.useState(false); + + const handleScroll = (event: any) => { + const scrollThreshold = 50; // Set the scroll threshold here + const scrollPosition = event.target.scrollTop; + + setShowChild(scrollPosition > scrollThreshold); + }; if (!data || status === 'loading') { return <>loading; @@ -19,16 +30,23 @@ export default function Operator() { return (
-
- {data.map((entry) => { + + +
+ {data.map((entry, i) => { // there are three types of events, you a filter them by using the type property // for this view, we do not show the delay event // this is a scheduled event if (entry.type === SupportedEvent.Event) { return ( -
- +
+
); } @@ -43,8 +61,9 @@ export default function Operator() { } return null; })} + {showChild && }
); -} +} \ No newline at end of file diff --git a/apps/client/src/features/operator/focus-block/focus-block.tsx b/apps/client/src/features/operator/focus-block/focus-block.tsx new file mode 100644 index 000000000..01bef7dfe --- /dev/null +++ b/apps/client/src/features/operator/focus-block/focus-block.tsx @@ -0,0 +1,14 @@ +import { BiTargetLock } from '@react-icons/all-files/bi/BiTargetLock'; + +import style from './focusBlock.module.scss'; + +export default function FocusBlock() { + return ( + + ); +} diff --git a/apps/client/src/features/operator/focus-block/focusBlock.module.scss b/apps/client/src/features/operator/focus-block/focusBlock.module.scss new file mode 100644 index 000000000..a574211e8 --- /dev/null +++ b/apps/client/src/features/operator/focus-block/focusBlock.module.scss @@ -0,0 +1,25 @@ +@use '.../../../src/theme/ontimeColours' as *; + +.focusBlock { + bottom: 0; + left: 0; + right: 0; + position: -webkit-sticky; + position: sticky; + display: flex; + justify-content: center; + width: 100%; + margin-top: -53px; +} + +.focusButton { + margin: 10px; + background-color: $blue-500; + width: fit-content; + padding: 3px 15px 3px 15px; + border-radius: 10px; + display: flex; + align-items: center; + gap: 5px; + font-size: medium; +} diff --git a/apps/client/src/features/operator/op-event/OpEvent.module.scss b/apps/client/src/features/operator/op-event/OpEvent.module.scss index b7db70da2..22609dabb 100644 --- a/apps/client/src/features/operator/op-event/OpEvent.module.scss +++ b/apps/client/src/features/operator/op-event/OpEvent.module.scss @@ -10,6 +10,20 @@ font-size: 1rem; } +.event { + display: flex; + gap: 6px; + width: 100%; +} + +.block { + width: 100%; +} + +.fields { + font-weight: 700; +} + .time { display: flex; flex-direction: column; @@ -24,3 +38,15 @@ .title { flex: 1; } + +.indicator { + display: flex; + justify-content: space-between; +} + +.chevron { + display: flex; + align-items: center; + color: yellow; + font-size: 16px; +} \ No newline at end of file diff --git a/apps/client/src/features/operator/op-event/OpEvent.tsx b/apps/client/src/features/operator/op-event/OpEvent.tsx index 998b66bdd..58048ccac 100644 --- a/apps/client/src/features/operator/op-event/OpEvent.tsx +++ b/apps/client/src/features/operator/op-event/OpEvent.tsx @@ -1,3 +1,4 @@ +import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp'; import { OntimeEvent } from 'ontime-types'; import { formatTime } from '../../../common/utils/time'; @@ -6,23 +7,34 @@ import style from './OpEvent.module.scss'; type OpEventProps = { data: OntimeEvent; + id: number; }; -export default function OpEvent({ data }: OpEventProps) { +export default function OpEvent({ data, id }: OpEventProps) { const start = formatTime(data.timeStart, { format: 'hh:mm' }); const end = formatTime(data.timeEnd, { format: 'hh:mm' }); return ( <>
{data.note}
-
- {data.title} - {data.subtitle} -
-
-
- {start} - {end} +
+
+
+ {data.title} - {data.subtitle} +
+
+
+ {start} - {end} +
+
+
+ +
+ --:--:-- +
+
- --:--:-- + {id % 3 == 0 &&
CAM 5 Slow pan to SL
}
); -} +} \ No newline at end of file