mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-20 06:29:07 +00:00
chore: remove unused
This commit is contained in:
Carlos Valente
committed by
Carlos Valente
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