feat: implement logo in all views

This commit is contained in:
Carlos Valente
2024-11-18 13:40:37 +01:00
committed by Carlos Valente
parent 9a2cfb59e7
commit 9bfa3e9f8e
16 changed files with 124 additions and 36 deletions
@@ -21,7 +21,7 @@
.timer {
opacity: 1;
font-family: var(--font-family-bold-override, $timer-bold-font-family) ;
font-family: var(--font-family-bold-override, $timer-bold-font-family);
font-size: 20vw;
position: relative;
color: var(--timer-color-override, var(--phase-color));
@@ -43,11 +43,19 @@
/* =================== OVERLAY ===================*/
.end-message {
text-align: center;
font-size: 12vw;
line-height: 0.9em;
font-weight: 600;
color: $timer-finished-color;
padding: 0;
}
text-align: center;
font-size: 12vw;
line-height: 0.9em;
font-weight: 600;
color: $timer-finished-color;
padding: 0;
}
.logo {
position: absolute;
top: 2vw;
left: 2vw;
max-width: min(200px, 20vw);
max-height: min(100px, 20vh);
}
}
@@ -1,6 +1,7 @@
import { useSearchParams } from 'react-router-dom';
import { Playback, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
import { Playback, ProjectData, TimerPhase, TimerType, ViewSettings } from 'ontime-types';
import ViewLogo from '../../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
@@ -13,13 +14,14 @@ import { MINIMAL_TIMER_OPTIONS } from './minimalTimer.options';
import './MinimalTimer.scss';
interface MinimalTimerProps {
general: ProjectData;
isMirrored: boolean;
time: ViewExtendedTimer;
viewSettings: ViewSettings;
}
export default function MinimalTimer(props: MinimalTimerProps) {
const { isMirrored, time, viewSettings } = props;
const { general, isMirrored, time, viewSettings } = props;
const { getLocalizedString } = useTranslation();
const [searchParams] = useSearchParams();
@@ -158,6 +160,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
}}
data-testid='minimal-timer'
>
{general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
<ViewParamsEditor viewOptions={MINIMAL_TIMER_OPTIONS} />
{showEndMessage ? (
<div className='end-message'>{viewSettings.endMessage}</div>