mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-07 00:13:53 +00:00
chore: remove unused
This commit is contained in:
committed by
Carlos Valente
parent
89e68c3b0e
commit
4a70bcfe64
@@ -1,120 +0,0 @@
|
||||
$label-colour: $gray-700;
|
||||
$active-colour: $gray-500;
|
||||
|
||||
@mixin label {
|
||||
font-size: $inner-section-text-size;
|
||||
color: $label-colour;
|
||||
text-align: center;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@mixin time {
|
||||
font-family: 'Open Sans Light', $ontime-font-family;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
padding: 0.25rem 1rem;
|
||||
height: max-content;
|
||||
column-gap: 2rem;
|
||||
|
||||
grid-template-areas: 'event playback timer clock actions';
|
||||
grid-template-columns: 1fr auto auto auto auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.event {
|
||||
grid-area: event;
|
||||
justify-self: start;
|
||||
|
||||
.title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.eventNow {
|
||||
justify-self: start;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.playback {
|
||||
grid-area: playback;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
.playbackLabel {
|
||||
@include label;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 2rem;
|
||||
height: 3rem;
|
||||
color: $label-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.timer {
|
||||
grid-area: timer;
|
||||
|
||||
.timerLabel {
|
||||
@include label;
|
||||
}
|
||||
|
||||
.value {
|
||||
@include time;
|
||||
}
|
||||
}
|
||||
|
||||
.clock {
|
||||
grid-area: clock;
|
||||
|
||||
.clockLabel {
|
||||
@include label;
|
||||
}
|
||||
|
||||
.value {
|
||||
grid-area: clock;
|
||||
@include time;
|
||||
}
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
grid-area: actions;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: $label-colour;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
|
||||
.actionIcon,
|
||||
.actionText {
|
||||
cursor: pointer;
|
||||
|
||||
&.enabled {
|
||||
color: $active-indicator;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $active-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
// in large screens we want to space the buttons
|
||||
.headerActions {
|
||||
padding-left: 10vw;
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
|
||||
import { Playback, ProjectData } from 'ontime-types';
|
||||
|
||||
import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
|
||||
import useProjectData from '../../../common/hooks-query/useProjectData';
|
||||
import { cx, enDash } from '../../../common/utils/styleUtils';
|
||||
import { tooltipDelayFast } from '../../../ontimeConfig';
|
||||
import { useCuesheetSettings } from '../store/cuesheetSettingsStore';
|
||||
|
||||
import CuesheetTableHeaderTimers from './CuesheetTableHeaderTimers';
|
||||
|
||||
import style from './CuesheetTableHeader.module.scss';
|
||||
|
||||
interface CuesheetTableHeaderProps {
|
||||
handleExport: (headerData: ProjectData) => void;
|
||||
featureData: {
|
||||
playback: Playback;
|
||||
selectedEventIndex: number | null;
|
||||
numEvents: number;
|
||||
titleNow: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export default function CuesheetTableHeader({ handleExport, featureData }: CuesheetTableHeaderProps) {
|
||||
const followSelected = useCuesheetSettings((state) => state.followSelected);
|
||||
const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
|
||||
const { data: project } = useProjectData();
|
||||
|
||||
const exportProject = () => {
|
||||
if (project) {
|
||||
handleExport(project);
|
||||
}
|
||||
};
|
||||
|
||||
const selected = !featureData.numEvents
|
||||
? 'No events'
|
||||
: `Event ${featureData.selectedEventIndex != null ? featureData.selectedEventIndex + 1 : enDash}/${
|
||||
featureData.numEvents ? featureData.numEvents : enDash
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className={style.header}>
|
||||
<div className={style.event}>
|
||||
<div className={style.title}>{project?.title || enDash}</div>
|
||||
<div className={style.eventNow}>{featureData?.titleNow || enDash}</div>
|
||||
</div>
|
||||
<div className={style.playback}>
|
||||
<div className={style.playbackLabel}>{selected}</div>
|
||||
<PlaybackIcon state={featureData.playback} />
|
||||
</div>
|
||||
<CuesheetTableHeaderTimers />
|
||||
<div className={style.headerActions}>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Toggle follow'>
|
||||
<span
|
||||
onClick={() => toggleFollow()}
|
||||
className={cx([style.actionIcon, followSelected ? style.enabled : null])}
|
||||
>
|
||||
<IoLocate />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Export rundown'>
|
||||
<span className={style.actionText} onClick={exportProject}>
|
||||
Export CSV
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { useClock, useTimer } from '../../../common/hooks/useSocket';
|
||||
import ClockTime from '../../../features/viewers/common/clock-time/ClockTime';
|
||||
import RunningTime from '../../../features/viewers/common/running-time/RunningTime';
|
||||
|
||||
import style from './CuesheetTableHeader.module.scss';
|
||||
|
||||
export default function CuesheetTableHeaderTimers() {
|
||||
const { current } = useTimer();
|
||||
const { clock } = useClock();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={style.timer}>
|
||||
<div className={style.timerLabel}>Running Timer</div>
|
||||
<RunningTime className={style.value} value={current} hideLeadingZero />
|
||||
</div>
|
||||
<div className={style.clock}>
|
||||
<div className={style.clockLabel}>Time Now</div>
|
||||
<ClockTime className={style.value} value={clock} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user