style: localise labels to user device (#509)

This commit is contained in:
Carlos Valente
2023-09-03 09:13:56 +02:00
committed by GitHub
parent 8d427a6bbe
commit 1de3e01216
2 changed files with 10 additions and 3 deletions
@@ -0,0 +1,6 @@
export function isMacOS() {
const userAgent = navigator.userAgent.toLowerCase();
return userAgent.includes('macintosh') || userAgent.includes('mac os');
}
export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
@@ -5,6 +5,7 @@ import { SupportedEvent } from 'ontime-types';
import { useEventAction } from '../../../common/hooks/useEventAction';
import { useEditorSettings } from '../../../common/stores/editorSettings';
import { useEmitLog } from '../../../common/stores/logger';
import { deviceAlt } from '../../../common/utils/deviceUtils';
import { tooltipDelayMid } from '../../../ontimeConfig';
import style from './QuickAddBlock.module.scss';
@@ -82,7 +83,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
className={style.quickBtn}
data-testid='quick-add-event'
>
Event {showKbd && <span className={style.keyboard}>Alt + E</span>}
Event {showKbd && <span className={style.keyboard}>{`${deviceAlt} + E`}</span>}
</Button>
</Tooltip>
<Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
@@ -94,7 +95,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
className={style.quickBtn}
data-testid='quick-add-delay'
>
Delay {showKbd && <span className={style.keyboard}>Alt + D</span>}
Delay {showKbd && <span className={style.keyboard}>{`${deviceAlt} + D`}</span>}
</Button>
</Tooltip>
<Tooltip label='Add Block' openDelay={tooltipDelayMid}>
@@ -106,7 +107,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
className={style.quickBtn}
data-testid='quick-add-block'
>
Block {showKbd && <span className={style.keyboard}>Alt + B</span>}
Block {showKbd && <span className={style.keyboard}>{`${deviceAlt} + B`}</span>}
</Button>
</Tooltip>
</div>