Commit f888a22e authored by Maksym Tishchenko's avatar Maksym Tishchenko Committed by Matija Obreza

Created component Narrative.tsx

Used it across the project.
parent 4233486b
import * as React from 'react';
import { ClassNameMap, CSSProperties } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme): Record<string, CSSProperties> => ({
description: {
fontFamily: 'Roboto-Light',
lineHeight: '1.2em',
fontSize: '1.2em',
},
}));
interface INarrativeWithChildren extends React.ClassAttributes<any> {
text?: never;
children: React.ReactNode;
className?: string;
}
interface INarrativeWithText extends React.ClassAttributes<any> {
text: string;
children?: never;
className?: string;
}
function Narrative(props: INarrativeWithChildren | INarrativeWithText): JSX.Element {
const { text, children, className } = props;
const classes: ClassNameMap = useStyles();
return <p className={ `${className ? className : ''} ${classes.description}` }>{children ? children : text}</p>
}
export default Narrative;
......@@ -23,6 +23,7 @@ import { YesNoToBoolean } from '@gringlobal/client/utilities';
import Table, { TextAlign } from '@gringlobal/client/ui/common/table/Table';
import { CooperatorOwnedTableConfiguration as TableConfiguration } from '@gringlobal/client/ui/common/table/TableConfiguration';
import { PageSection } from '@gringlobal/client/ui/common/layout/Section';
import Narrative from '@gringlobal/client/ui/common/Narrative';
interface ICropTraitDetailsPage extends React.ClassAttributes<any>, WithTranslation {
......@@ -101,7 +102,7 @@ class CropTraitDetailsPage extends React.Component<ICropTraitDetailsPage> {
subheader={ <code>{ cropTrait.codedName }</code> }
/>
<CardContent>
{ cropTrait.description && <p>{ cropTrait.description }</p> }
{ cropTrait.description && <Narrative>{ cropTrait.description }</Narrative> }
<Properties>
{ cropTrait.crop &&
<PropertiesItem title={ t('client:model.CropTrait.crop') }>
......
......@@ -37,6 +37,7 @@ import confirm from '@gringlobal/client/utilities/confirmAlert';
import TabPanel from '@gringlobal/client/ui/common/tabs/TabPanel';
import ButtonBar from '@gringlobal/client/ui/common/button/ButtonBar';
import PageTitle from '@gringlobal/client/ui/common/PageTitle';
import Narrative from '@gringlobal/client/ui/common/Narrative';
const styles = (theme) => ({
......@@ -204,7 +205,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
<PageSection title={ t('kpi.admin.c.executionCard.parameterInfo') }>
<Properties>
<PropertiesItem title={ t('common:label.title') }>{ execution.parameter.title }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterDescription') }>{ execution.parameter.description }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterDescription') }><Narrative>{ execution.parameter.description }</Narrative></PropertiesItem>
<PropertiesItem title={ t('common:label.name') }><code>{ execution.parameter.name }</code></PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterEntity') }><code>{ execution.parameter.entity }</code></PropertiesItem>
{ execution.parameter.condition && <PropertiesItem title={ t('kpi.admin.c.executionCard.parameterCondition') }><code>{ execution.parameter.condition }</code></PropertiesItem> }
......
......@@ -2,6 +2,7 @@ import * as React from 'react';
import { WithTranslation, withTranslation } from 'react-i18next';
import { Properties, PropertiesItem } from '@gringlobal/client/ui/common/Properties';
import RepositoryImage from '@gringlobal/client/model/repository/RepositoryImage';
import Narrative from '@gringlobal/client/ui/common/Narrative';
const ImageMetadata = ({ image, t }: WithTranslation & { image: RepositoryImage }) => (
......@@ -15,7 +16,7 @@ const ImageMetadata = ({ image, t }: WithTranslation & { image: RepositoryImage
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.height') }>{ image.height || t('common:label.missing') }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.width') }>{ image.width || t('common:label.missing') }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.orientation') }>{ image.orientation || t('common:label.missing') }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.description') }>{ image.description || t('common:label.missing') }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.description') }>{ image.description ? <Narrative text={ image.description }/> : t('common:label.missing') }</PropertiesItem>
<PropertiesItem title={ t('repository.public.c.imageDetailsDialog.thumbnailPath') }>{ image.thumbnailPath || t('common:label.missing') }</PropertiesItem>
</Properties>
);
......
......@@ -26,6 +26,7 @@ import confirm from '@gringlobal/client/utilities/confirmAlert';
import { Properties, PropertiesItem } from '@gringlobal/client/ui/common/Properties';
import CreateOAuthSecretDialog from 'user/ui/admin/c/CreateOAuthSecretDialog';
import ErrorMessage from '@gringlobal/client/ui/common/error/ErrorMessage';
import Narrative from '@gringlobal/client/ui/common/Narrative';
interface IDisplayPageProps extends React.ClassAttributes<any>, WithTranslation, WithStyles {
......@@ -114,7 +115,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<PropertiesItem title={ t('client:model.OAuthClient.clientId') }>{ oAuthClient.clientId }</PropertiesItem>
<PropertiesItem title={ t('client:model._.title') }>{ oAuthClient.title }</PropertiesItem>
<PropertiesItem title={ t('client:model.OAuthClient.clientSecret') }>{ oAuthClient.clientSecret ? '****' : null }</PropertiesItem>
<PropertiesItem title={ t('client:model._.description') }>{ oAuthClient.description }</PropertiesItem>
<PropertiesItem title={ t('client:model._.description') }><Narrative>{ oAuthClient.description }</Narrative></PropertiesItem>
{ oAuthClient.roles && oAuthClient.roles.length > 0 &&
<PropertiesItem title={ t('client:model.OAuthClient.roles') }>
{ oAuthClient.roles.map((role, i) => (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment