cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-06 07:53:54 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: project info design review

Browse Source
This commit is contained in:
Carlos Valente
2025-02-27 21:56:25 +01:00
committed by Carlos Valente
parent 8adca908b3
commit 9167a50eda
15 changed files with 85 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/translation/languages/de.ts
+6
View File
@@ -24,4 +24,10 @@ export const langDe: TranslationObject = {
'timeline.done': 'Beendet',
'timeline.due': 'fällig',
'timeline.followedby': 'Gefolgt von',
'project.title': 'Titel',
'project.description': 'Beschreibung',
'project.backstage_info': 'Backstage-Informationen',
'project.backstage_url': 'Backstage-URL',
'project.public_info': 'Öffentliche Informationen',
'project.public_url': 'Öffentliche URL',
};
apps/client/src/translation/languages/en.ts
+6
View File
@@ -22,6 +22,12 @@ export const langEn = {
'timeline.done': 'done',
'timeline.due': 'due',
'timeline.followedby': 'Followed by',
'project.title': 'Title',
'project.description': 'Description',
'project.backstage_info': 'Backstage Info',
'project.backstage_url': 'Backstage URL',
'project.public_info': 'Public Info',
'project.public_url': 'Public URL',
};
export type TranslationObject = Record<keyof typeof langEn, string>;
apps/client/src/translation/languages/es.ts
+6
View File
@@ -24,4 +24,10 @@ export const langEs: TranslationObject = {
'timeline.done': 'Terminado',
'timeline.due': 'pendiente',
'timeline.followedby': 'Seguido por',
'project.title': 'Título',
'project.description': 'Descripción',
'project.backstage_info': 'Información de backstage',
'project.backstage_url': 'URL de backstage',
'project.public_info': 'Información pública',
'project.public_url': 'URL pública',
};
apps/client/src/translation/languages/fr.ts
+6
View File
@@ -24,4 +24,10 @@ export const langFr: TranslationObject = {
'timeline.done': 'Terminé',
'timeline.due': 'dû',
'timeline.followedby': 'Suivi de',
'project.title': 'Titre',
'project.description': 'Description',
'project.backstage_info': 'Informations des coulisses',
'project.backstage_url': 'URL des coulisses',
'project.public_info': 'Informations publiques',
'project.public_url': 'URL publique',
};
apps/client/src/translation/languages/hu.ts
+6
View File
@@ -24,4 +24,10 @@ export const langHu: TranslationObject = {
'timeline.done': 'kész',
'timeline.due': 'esedékes',
'timeline.followedby': 'Követi',
'project.title': 'Cím',
'project.description': 'Leírás',
'project.backstage_info': 'Kulisszák mögötti információ',
'project.backstage_url': 'Kulisszák mögötti URL',
'project.public_info': 'Nyilvános információ',
'project.public_url': 'Nyilvános URL',
};
apps/client/src/translation/languages/it.ts
+6
View File
@@ -24,4 +24,10 @@ export const langIt: TranslationObject = {
'timeline.done': 'Terminato',
'timeline.due': 'previsto',
'timeline.followedby': 'Seguito da',
'project.title': 'Titolo',
'project.description': 'Descrizione',
'project.backstage_info': 'Informazioni di backstage',
'project.backstage_url': 'URL di backstage',
'project.public_info': 'Informazioni pubbliche',
'project.public_url': 'URL pubblico',
};
apps/client/src/translation/languages/no.ts
+6
View File
@@ -24,4 +24,10 @@ export const langNo: TranslationObject = {
'timeline.done': 'Ferdig',
'timeline.due': 'Venter',
'timeline.followedby': 'Etterfulgt av',
'project.title': 'Tittel',
'project.description': 'Beskrivelse',
'project.backstage_info': 'Backstage-informasjon',
'project.backstage_url': 'Backstage-URL',
'project.public_info': 'Offentlig informasjon',
'project.public_url': 'Offentlig URL',
};
apps/client/src/translation/languages/pl.ts
+6
View File
@@ -24,4 +24,10 @@ export const langPl: TranslationObject = {
'timeline.done': 'Zakończony',
'timeline.due': 'termin',
'timeline.followedby': 'Następnie',
'project.title': 'Tytuł',
'project.description': 'Opis',
'project.backstage_info': 'Informacje zaplecza',
'project.backstage_url': 'URL zaplecza',
'project.public_info': 'Informacje publiczne',
'project.public_url': 'URL publiczny',
};
apps/client/src/translation/languages/pt.ts
+6
View File
@@ -24,4 +24,10 @@ export const langPt: TranslationObject = {
'timeline.done': 'Concluído',
'timeline.due': 'Pendente',
'timeline.followedby': 'Seguido por',
'project.title': 'Título',
'project.description': 'Descrição',
'project.backstage_info': 'Informações de bastidores',
'project.backstage_url': 'URL de bastidores',
'project.public_info': 'Informações públicas',
'project.public_url': 'URL pública',
};
apps/client/src/translation/languages/sv.ts
+6
View File
@@ -24,4 +24,10 @@ export const langSv: TranslationObject = {
'timeline.done': 'Avslutad',
'timeline.due': 'Väntande',
'timeline.followedby': 'Följt av',
'project.title': 'Titel',
'project.description': 'Beskrivning',
'project.backstage_info': 'Backstageinformation',
'project.backstage_url': 'Backstage-URL',
'project.public_info': 'Offentlig information',
'project.public_url': 'Offentlig URL',
};
apps/client/src/translation/languages/zh.ts
+6
View File
@@ -24,4 +24,10 @@ export const langZhCn: TranslationObject = {
'timeline.done': '已结束',
'timeline.due': '即将开始',
'timeline.followedby': '随后是',
'project.title': '标题',
'project.description': '描述',
'project.backstage_info': '后台信息',
'project.backstage_url': '后台网址',
'project.public_info': '公开信息',
'project.public_url': '公开网址',
};
apps/client/src/views/project-info/ProjectInfo.scss
+4 -6
View File
@@ -10,7 +10,8 @@
font-family: var(--font-family-override, $viewer-font-family);
background: var(--background-color-override, $viewer-background-color);
color: var(--color-override, $viewer-color);
padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
padding: $view-outer-padding;
font-size: $base-font-size;
display: flex;
flex-direction: column;
@@ -25,18 +26,15 @@
max-height: 100%;
overflow-y: auto;
width: min(calc(100vw - 4rem), 800px);
font-size: clamp(16px, 1.5vw, 24px);
}
.info__label {
font-weight: 600;
color: var(--label-color-override, $viewer-label-color);
text-transform: uppercase;
margin-top: $view-element-gap;
white-space: pre;
}
.info__label {
margin-top: 1rem;
}
a.info__value {
color: $action-text-color;
apps/client/src/views/project-info/ProjectInfo.tsx
+7 -5
View File
@@ -5,6 +5,7 @@ import EmptyPage from '../../common/components/state/EmptyPage';
import ViewLogo from '../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { useTranslation } from '../../translation/TranslationProvider';
import BackstageInfo from './backstage-info/BackstageInfo';
import PublicInfo from './public-info/PublicInfo';
@@ -19,18 +20,19 @@ interface ProjectInfoProps {
export default function ProjectInfo(props: ProjectInfoProps) {
const { general, isMirrored } = props;
const { getLocalizedString } = useTranslation();
useWindowTitle('Project info');
if (!general) {
return <Empty text='No data found' />;
return <Empty text={getLocalizedString('common.no_data')} />;
}
if (!general) {
return (
<>
<ViewParamsEditor viewOptions={projectInfoOptions} />
return <EmptyPage text='No data found' />;
<EmptyPage text={getLocalizedString('common.no_data')} />;
</>
);
}
@@ -40,7 +42,7 @@ export default function ProjectInfo(props: ProjectInfoProps) {
return (
<>
<ViewParamsEditor viewOptions={projectInfoOptions} />
<EmptyPage text='The project has no data yet' />;
<EmptyPage text={getLocalizedString('common.no_data')} />;
</>
);
}
@@ -52,13 +54,13 @@ export default function ProjectInfo(props: ProjectInfoProps) {
<div className='info'>
{general.title && (
<>
<div className='info__label'>Title</div>
<div className='info__label'>{getLocalizedString('project.title')}</div>
<div className='info__value'>{general.title}</div>
</>
)}
{general.description && (
<>
<div className='info__label'>Description</div>
<div className='info__label'>{getLocalizedString('project.description')}</div>
<div className='info__value'>{general.description}</div>
</>
)}
apps/client/src/views/project-info/backstage-info/BackstageInfo.tsx
+4 -2
View File
@@ -2,6 +2,7 @@ import { useSearchParams } from 'react-router-dom';
import { ProjectData } from 'ontime-types';
import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
import { useTranslation } from '../../../translation/TranslationProvider';
interface BackstageInfoProps {
general: ProjectData;
@@ -10,6 +11,7 @@ interface BackstageInfoProps {
export default function BackstageInfo(props: BackstageInfoProps) {
const { general } = props;
const [searchParams] = useSearchParams();
const { getLocalizedString } = useTranslation();
const showBackstage = isStringBoolean(searchParams.get('showBackstage'));
@@ -21,13 +23,13 @@ export default function BackstageInfo(props: BackstageInfoProps) {
<>
{general.backstageInfo && (
<>
<div className='info__label'>Backstage info</div>
<div className='info__label'>{getLocalizedString('project.backstage_info')}</div>
<div className='info__value'>{general.backstageInfo}</div>
</>
)}
{general.backstageUrl && (
<>
<div className='info__label'>Backstage URL</div>
<div className='info__label'>{getLocalizedString('project.backstage_url')}</div>
<a href={general.backstageUrl} target='_blank' rel='noreferrer' className='info__value'>
{general.backstageUrl}
</a>
apps/client/src/views/project-info/public-info/PublicInfo.tsx
+4 -2
View File
@@ -2,6 +2,7 @@ import { useSearchParams } from 'react-router-dom';
import { ProjectData } from 'ontime-types';
import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
import { useTranslation } from '../../../translation/TranslationProvider';
interface PublicInfoProps {
general: ProjectData;
@@ -10,6 +11,7 @@ interface PublicInfoProps {
export default function PublicInfo(props: PublicInfoProps) {
const { general } = props;
const [searchParams] = useSearchParams();
const { getLocalizedString } = useTranslation();
const showPublic = isStringBoolean(searchParams.get('showPublic'));
@@ -21,13 +23,13 @@ export default function PublicInfo(props: PublicInfoProps) {
<>
{general.publicInfo && (
<>
<div className='info__label'>Public info</div>
<div className='info__label'>{getLocalizedString('project.public_info')}</div>
<div className='info__value'>{general.publicInfo}</div>
</>
)}
{general.publicUrl && (
<>
<div className='info__label'>Public URL</div>
<div className='info__label'>{getLocalizedString('project.public_url')}</div>
<a href={general.publicUrl} target='_blank' rel='noreferrer' className='info__value'>
{general.publicUrl}
</a>