diff --git a/apps/client/src/assets/images/logos/LOGO-120.png b/apps/client/src/assets/images/logos/LOGO-120.png deleted file mode 100644 index 947cc667c..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-120.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-128.png b/apps/client/src/assets/images/logos/LOGO-128.png deleted file mode 100644 index d38627cbb..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-128.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-144.png b/apps/client/src/assets/images/logos/LOGO-144.png deleted file mode 100644 index 54067cc80..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-144.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-152.png b/apps/client/src/assets/images/logos/LOGO-152.png deleted file mode 100644 index 31eb72896..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-152.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-180.png b/apps/client/src/assets/images/logos/LOGO-180.png deleted file mode 100644 index 9eaa7da2d..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-180.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-192.png b/apps/client/src/assets/images/logos/LOGO-192.png deleted file mode 100644 index 7508eedfa..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-192.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-384.png b/apps/client/src/assets/images/logos/LOGO-384.png deleted file mode 100644 index 841e4ff2f..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-384.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-512.png b/apps/client/src/assets/images/logos/LOGO-512.png deleted file mode 100644 index e7aaee290..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-512.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-72.png b/apps/client/src/assets/images/logos/LOGO-72.png deleted file mode 100644 index 51789ddd2..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-72.png and /dev/null differ diff --git a/apps/client/src/assets/images/logos/LOGO-96.png b/apps/client/src/assets/images/logos/LOGO-96.png deleted file mode 100644 index 605cc7d82..000000000 Binary files a/apps/client/src/assets/images/logos/LOGO-96.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-120.png b/apps/client/src/assets/images/logosbwa/LOGO-120.png deleted file mode 100644 index 2dd12c3ed..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-120.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-128.png b/apps/client/src/assets/images/logosbwa/LOGO-128.png deleted file mode 100644 index 44a03b532..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-128.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-144.png b/apps/client/src/assets/images/logosbwa/LOGO-144.png deleted file mode 100644 index ae82d2576..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-144.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-152.png b/apps/client/src/assets/images/logosbwa/LOGO-152.png deleted file mode 100644 index 8c1d7b586..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-152.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-180.png b/apps/client/src/assets/images/logosbwa/LOGO-180.png deleted file mode 100644 index 3d5e6b65c..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-180.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-192.png b/apps/client/src/assets/images/logosbwa/LOGO-192.png deleted file mode 100644 index 6355f58c0..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-192.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-384.png b/apps/client/src/assets/images/logosbwa/LOGO-384.png deleted file mode 100644 index 593e9ccc8..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-384.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-512.png b/apps/client/src/assets/images/logosbwa/LOGO-512.png deleted file mode 100644 index 5aaa04078..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-512.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-72.png b/apps/client/src/assets/images/logosbwa/LOGO-72.png deleted file mode 100644 index bee7161e6..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-72.png and /dev/null differ diff --git a/apps/client/src/assets/images/logosbwa/LOGO-96.png b/apps/client/src/assets/images/logosbwa/LOGO-96.png deleted file mode 100644 index 256a4b25f..000000000 Binary files a/apps/client/src/assets/images/logosbwa/LOGO-96.png and /dev/null differ diff --git a/apps/client/src/assets/images/ontime-logo.svg b/apps/client/src/assets/images/ontime-logo.svg new file mode 100644 index 000000000..41594e5e6 --- /dev/null +++ b/apps/client/src/assets/images/ontime-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/client/src/common/api/apiConstants.ts b/apps/client/src/common/api/apiConstants.ts index b9ddbd9cd..944220163 100644 --- a/apps/client/src/common/api/apiConstants.ts +++ b/apps/client/src/common/api/apiConstants.ts @@ -12,9 +12,6 @@ export const APP_SETTINGS = ['appSettings']; export const VIEW_SETTINGS = ['viewSettings']; export const RUNTIME = ['runtimeStore']; -// external stuff -export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest'; - export const serverPort = import.meta.env.DEV ? STATIC_PORT : window.location.port; export const serverURL = import.meta.env.DEV ? `http://localhost:${serverPort}` : window.location.origin; export const websocketUrl = `ws://${window.location.hostname}:${serverPort}/ws`; diff --git a/apps/client/src/common/api/ontimeApi.ts b/apps/client/src/common/api/ontimeApi.ts index 9c0b3fa11..d7d73b975 100644 --- a/apps/client/src/common/api/ontimeApi.ts +++ b/apps/client/src/common/api/ontimeApi.ts @@ -1,9 +1,10 @@ import axios from 'axios'; import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types'; +import { apiRepoLatest } from '../../externals'; import { InfoType } from '../models/Info'; -import { githubURL, ontimeURL } from './apiConstants'; +import { ontimeURL } from './apiConstants'; /** * @description HTTP request to retrieve application settings @@ -152,11 +153,19 @@ export const uploadData = async (file: string, setProgress: (value: number) => v .then((response) => response.data.id); }; +export type HasUpdate = { + url: string; + version: string; +}; + /** * @description HTTP request to get the latest version and url from github * @return {Promise} */ -export async function getLatestVersion(): Promise { - const res = await axios.get(`${githubURL}`); - return { url: res.data.html_url, version: res.data.tag_name }; +export async function getLatestVersion(): Promise { + const res = await axios.get(`${apiRepoLatest}`); + return { + url: res.data.html_url as string, + version: res.data.tag_name as string, + }; } diff --git a/apps/client/src/common/components/buttons/QuitIconBtn.tsx b/apps/client/src/common/components/buttons/QuitIconBtn.tsx index 2a398afa4..43b03b85f 100644 --- a/apps/client/src/common/components/buttons/QuitIconBtn.tsx +++ b/apps/client/src/common/components/buttons/QuitIconBtn.tsx @@ -18,6 +18,7 @@ import { useEmitLog } from '../../stores/logger'; interface QuitIconBtnProps { clickHandler: () => void; size?: Size; + disabled?: boolean; } const quitBtnStyle = { @@ -27,6 +28,10 @@ const quitBtnStyle = { _hover: { background: '#D20300', // $red-700 color: 'white', + _disabled: { + color: '#D20300', // $red-700 + background: 'none', + }, }, _active: { background: '#9A0000', // $red-1000 @@ -37,7 +42,7 @@ const quitBtnStyle = { }; export default function QuitIconBtn(props: QuitIconBtnProps) { - const { clickHandler, size = 'lg', ...rest } = props; + const { clickHandler, size = 'lg', disabled, ...rest } = props; const [isOpen, setIsOpen] = useState(false); const { emitInfo } = useEmitLog(); const onClose = () => setIsOpen(false); @@ -65,6 +70,7 @@ export default function QuitIconBtn(props: QuitIconBtnProps) { size={size} icon={} onClick={() => setIsOpen(true)} + isDisabled={disabled} {...quitBtnStyle} {...rest} /> @@ -75,9 +81,7 @@ export default function QuitIconBtn(props: QuitIconBtnProps) { Ontime Shutdown - - This will shutdown the program and all running servers. Are you sure? - + This will shutdown the program and all running servers. Are you sure? - diff --git a/apps/client/src/features/modals/Modal.module.scss b/apps/client/src/features/modals/Modal.module.scss index d3d840cfb..0df91e8b8 100644 --- a/apps/client/src/features/modals/Modal.module.scss +++ b/apps/client/src/features/modals/Modal.module.scss @@ -1,7 +1,17 @@ @use '../../theme/v2Styles' as *; @use '../../theme/ontimeColours' as *; -.headerNotes { +@mixin modal-link { + color: $blue-500; + transition-property: color; + transition-duration: $transition-time-action; + + &:hover { + color: $ontime-color; + } +} + +.headerNotes { font-size: $text-body-size; width: 100%; padding: 0 $section-spacing; @@ -10,13 +20,7 @@ a { display: block; - color: $blue-500; - transition-property: color; - transition-duration: $transition-time-action; - - &:hover { - color: $ontime-color; - } + @include modal-link } } @@ -97,4 +101,33 @@ .showPointer { cursor: pointer; +} + +.twoColumn { + display: grid; + grid-template-columns: auto 1fr; +} + +.padBottom { + padding-bottom: 8px; +} + +.logo { + width: 48px; + height: 48px; + display: inline-block; + vertical-align: text-bottom; + margin-right: 16px; +} + +.test { + padding-top: 24px; + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 4px; + + .error { + font-size: $error-red; + } } \ No newline at end of file diff --git a/apps/client/src/features/modals/ModalLink.module.scss b/apps/client/src/features/modals/ModalLink.module.scss new file mode 100644 index 000000000..1cb40b4e7 --- /dev/null +++ b/apps/client/src/features/modals/ModalLink.module.scss @@ -0,0 +1,16 @@ +@use '../../theme/v2Styles' as *; +@use '../../theme/ontimeColours' as *; + +.link { + display: flex; + align-items: center; + gap: 4px; + + color: $blue-500; + transition-property: color; + transition-duration: $transition-time-action; + + &:hover { + color: $ontime-color; + } +} diff --git a/apps/client/src/features/modals/ModalLink.tsx b/apps/client/src/features/modals/ModalLink.tsx new file mode 100644 index 000000000..20833ac57 --- /dev/null +++ b/apps/client/src/features/modals/ModalLink.tsx @@ -0,0 +1,18 @@ +import { ReactNode } from 'react'; +import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline'; + +import style from './ModalLink.module.scss'; + +interface ModalLinkProps { + href: string; + children: ReactNode; +} + +export default function ModalLink(props: ModalLinkProps) { + const { href, children } = props; + return ( + + {children} + + ); +} diff --git a/apps/client/src/features/modals/ModalWrapper.tsx b/apps/client/src/features/modals/ModalWrapper.tsx index e417ac839..7c364f50d 100644 --- a/apps/client/src/features/modals/ModalWrapper.tsx +++ b/apps/client/src/features/modals/ModalWrapper.tsx @@ -5,10 +5,11 @@ interface ModalWrapperProps { isOpen: boolean; onClose: () => void; title: string; + size?: string; } export default function ModalWrapper(props: PropsWithChildren) { - const { isOpen, onClose, title, children } = props; + const { isOpen, onClose, title, size = 'xl', children } = props; return ( isOpen={isOpen} closeOnOverlayClick={false} motionPreset='slideInBottom' - size='xl' + size={size} scrollBehavior='inside' preserveScrollBarGap variant='ontime' diff --git a/apps/client/src/features/modals/Modals.module.scss b/apps/client/src/features/modals/Modals.module.scss index aa26519af..2ca04cee4 100644 --- a/apps/client/src/features/modals/Modals.module.scss +++ b/apps/client/src/features/modals/Modals.module.scss @@ -1,6 +1,8 @@ @use '../../theme/ontimeColours' as *; @use '../../theme/v2Styles' as *; +// style file to be deprecated + //////////////////////////////////// main .modalBody { diff --git a/apps/client/src/features/modals/about-modal/AboutModal.tsx b/apps/client/src/features/modals/about-modal/AboutModal.tsx new file mode 100644 index 000000000..cc0585000 --- /dev/null +++ b/apps/client/src/features/modals/about-modal/AboutModal.tsx @@ -0,0 +1,68 @@ +import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react'; + +import { ReactComponent as OntimeLogo } from '@/assets/images/ontime-logo.svg'; + +import { version } from '../../../../package.json'; +import { gitbookUrl, githubUrl } from '../../../externals'; +import ModalLink from '../ModalLink'; + +import UpdateChecker from './UpdateChecker'; + +import styles from '../Modal.module.scss'; + +interface AboutModalProps { + isOpen: boolean; + onClose: () => void; +} + +export default function AboutModal(props: AboutModalProps) { + const { isOpen, onClose } = props; + + return ( + + + + + About Ontime + + + + +
+ +
+
+ Ontime + Free Open Source Software for managing rundowns and event timers + www.getontime.no +
+
+ Current version + + {`You are currently using Ontime ${version}`} +
+
+ Docs + Read the docs over at GitBook +
+
+ Github + Follow the project on GitHub +
+ +
+
+ + + + ); +} diff --git a/apps/client/src/features/modals/about-modal/UpdateChecker.tsx b/apps/client/src/features/modals/about-modal/UpdateChecker.tsx new file mode 100644 index 000000000..8b48fc7e3 --- /dev/null +++ b/apps/client/src/features/modals/about-modal/UpdateChecker.tsx @@ -0,0 +1,72 @@ +import { useState } from 'react'; +import { Button } from '@chakra-ui/react'; + +import { getLatestVersion, HasUpdate } from '../../../common/api/ontimeApi'; +import ModalLink from '../ModalLink'; + +import styles from '../Modal.module.scss'; + +interface UpdateCheckerProps { + version: string; +} + +type CheckFail = { + error: string; +}; + +type CheckIsLatest = { + latest: true; +}; + +type CheckRemote = CheckFail | CheckIsLatest | HasUpdate; + +export default function UpdateChecker(props: UpdateCheckerProps) { + const { version } = props; + const [updateMessage, setUpdateMessage] = useState(null); + const [isFetching, setIsFetching] = useState(false); + + /** + * Handles version comparison and returns component with message + */ + const versionCheck = async () => { + setIsFetching(true); + + try { + const latest = await getLatestVersion(); + + if (!latest.version.includes(version)) { + // new version, pass data to component + setUpdateMessage(latest); + } else { + setUpdateMessage({ latest: true }); + } + } catch { + setUpdateMessage({ error: 'Error reaching server' }); + } finally { + setIsFetching(false); + } + }; + + const disableButton = Boolean(updateMessage && 'version' in updateMessage); + + return ( +
+ + +
+ ); +} + +function ResolveUpdateMessage(props: { updateMessage: CheckRemote | null }) { + const { updateMessage } = props; + + if (updateMessage && 'error' in updateMessage) { + return {updateMessage.error}; + } + if (updateMessage && 'url' in updateMessage) { + return {`New version available: ${updateMessage.version}`}; + } + return null; +} diff --git a/apps/client/src/theme/ontimeModal.ts b/apps/client/src/theme/ontimeModal.ts index bc8fcf54f..8f4dc6358 100644 --- a/apps/client/src/theme/ontimeModal.ts +++ b/apps/client/src/theme/ontimeModal.ts @@ -20,3 +20,14 @@ export const ontimeModal = { color: '#202020', // $gray-50 }, }; + +export const ontimeSmallModal = { + ...ontimeModal, + body: { + padding: '16px', + fontSize: '14px', + }, + dialog: { + minHeight: 'min(200px, 10vh)', + }, +}; diff --git a/apps/client/src/theme/theme.ts b/apps/client/src/theme/theme.ts index 87270cbba..8640ae29e 100644 --- a/apps/client/src/theme/theme.ts +++ b/apps/client/src/theme/theme.ts @@ -11,7 +11,7 @@ import { import { ontimeCheckboxOnDark } from './ontimeCheckbox'; import { ontimeEditable } from './ontimeEditable'; import { ontimeMenuOnDark } from './ontimeMenu'; -import { ontimeModal } from './ontimeModal'; +import { ontimeModal, ontimeSmallModal } from './ontimeModal'; import { ontimeBlockRadio } from './ontimeRadio'; import { ontimeSelect } from './ontimeSelect'; import { lightSwitch, ontimeSwitch } from './ontimeSwitch'; @@ -61,9 +61,15 @@ const theme = extendTheme({ 'ontime-filled-on-light': { ...ontimeInputFilledOnLight }, }, }, + Menu: { + variants: { + 'ontime-on-dark': { ...ontimeMenuOnDark }, + }, + }, Modal: { variants: { ontime: { ...ontimeModal }, + 'ontime-small': { ...ontimeSmallModal }, }, }, Radio: { @@ -99,11 +105,6 @@ const theme = extendTheme({ ontime: { ...ontimeSelect }, }, }, - Menu: { - variants: { - 'ontime-on-dark': { ...ontimeMenuOnDark }, - }, - }, }, }); diff --git a/apps/electron/electron.config.js b/apps/electron/electron.config.js index adc888726..23d60ce07 100644 --- a/apps/electron/electron.config.js +++ b/apps/electron/electron.config.js @@ -6,9 +6,6 @@ module.exports = { development: 'http://localhost:3000/editor', production: 'http://localhost:4001/editor', }, - externalUrls: { - help: 'https://cpvalente.gitbook.io/ontime/', - }, server: { pathToEntrypoint: '../extraResources/server/index.cjs' }, diff --git a/apps/electron/main.js b/apps/electron/main.js index bff75a12c..3272b1cd8 100644 --- a/apps/electron/main.js +++ b/apps/electron/main.js @@ -234,12 +234,6 @@ ipcMain.on('shutdown', () => { // Window manipulation ipcMain.on('set-window', (event, arg) => { switch (arg) { - case 'to-max': - win.maximize(); - break; - case 'to-tray': - win.hide(); - break; case 'show-dev': win.webContents.openDevTools({ mode: 'detach' }); break; @@ -250,9 +244,5 @@ ipcMain.on('set-window', (event, arg) => { // Open links external ipcMain.on('send-to-link', (event, arg) => { - if (arg === 'help') { - shell.openExternal(electronConfig.externalUrls.help); - } else { - shell.openExternal(arg); - } + shell.openExternal(arg); });