Merge pull request #758 from digirati-co-uk/project-heading-blocks

Project heading block

CHANGELOG.md

@@ -58,6 +58,7 @@ Hotfix release for submissions in progress.
 
 ### Changed
 - Changed language on user dash from 'reviews' to 'review tasks' to differentiate between the two
+- Changed the project heading block to contain optional image and start contributing button
 
 
 ## [v2.1.0](https://github.com/digirati-co-uk/madoc-platform/compare/v2.0.8...v2.1.0)

services/madoc-ts/src/frontend/shared/layout/Surface.tsx

@@ -45,6 +45,7 @@ const SurfaceStyled = styled.div<{
  $background?: string;
  $color?: string;
  $textAlign?: 'left' | 'center' | 'right';
+ $fullWidth?: boolean;
  $padding?: 'none' | 'sm' | 'md' | 'lg';
  $marginBottom?: 'none' | 'sm' | 'md' | 'lg';
  $fontSize?: 'sm' | 'md' | 'lg';
@@ -59,12 +60,15 @@ const SurfaceStyled = styled.div<{
  font-family: ${props => (props.$font ? `${props.$font}, sans-serif` : 'inherit')};
  text-align: ${props => (props.$textAlign ? props.$textAlign : 'left')};
  margin-bottom: ${parseProp('$marginBottom', '0')};
+ margin-left: ${props => (props.$fullWidth ? '-2em' : '')};
+ margin-right: ${props => (props.$fullWidth ? '-2em' : '')};
 `;
 
 export type SurfaceProps = {
  id?: string;
  background?: string;
  textColor?: string;
+ fullWidth?: boolean;
  textAlign?: 'left' | 'center' | 'right';
  font?: string;
  padding?: 'none' | 'sm' | 'md' | 'lg';
@@ -78,6 +82,7 @@ export const Surface: React.FC<SurfaceProps> = ({
  textAlign,
  textColor,
  background,
+ fullWidth,
  font,
  fontSize,
  fontWeight,
@@ -94,6 +99,7 @@ export const Surface: React.FC<SurfaceProps> = ({
  <SurfaceStyled
  id={id}
  $color={color}
+ $fullWidth={fullWidth}
  $background={background}
  $textAlign={textAlign}
  $font={font}
@@ -116,6 +122,7 @@ blockEditorFor(Surface, {
  background: '',
  font: '',
  padding: 'none',
+ fullWidth: false,
  fontSize: 'md',
  fontWeight: '400',
  textAlign: 'left',
@@ -174,5 +181,6 @@ blockEditorFor(Surface, {
  { value: 'lg', text: 'Large' },
  ],
  },
+ fullWidth: { label: 'Full width', type: 'checkbox-field', inlineLabel: 'Show full width' },
  },
 });

services/madoc-ts/src/frontend/site/features/CollectionFilterOptions.tsx

@@ -12,9 +12,8 @@ import { CollectionLoader } from '../pages/loaders/collection-loader';
 import { GoToRandomCanvas } from './contributor/GoToRandomCanvas';
 import { GoToRandomManifest } from './contributor/GoToRandomManifest';
 import { useProjectPageConfiguration } from '../hooks/use-project-page-configuration';
-import { useProjectStatus } from '../hooks/use-project-status';
 import { useSiteConfiguration } from './SiteConfigurationContext';
-import { useProjectShadowConfiguration } from '../hooks/use-project-shadow-configuration';
+import { StartContributingButton } from './contributor/StartContributingButton';
 
 export const CollectionFilterOptions: React.FC = () => {
  const { t } = useTranslation();
@@ -24,32 +23,16 @@ export const CollectionFilterOptions: React.FC = () => {
  const { filter, page } = useLocationQuery();
  const [, showDoneButton] = useSubjectMap(data ? data.subjects : []);
  const options = useProjectPageConfiguration();
- const { isActive } = useProjectStatus();
- const { showCaptureModelOnManifest } = useProjectShadowConfiguration();
  const {
- project: { allowCollectionNavigation = true, allowManifestNavigation = true, claimGranularity },
+ project: { allowCollectionNavigation = true, allowManifestNavigation = true },
  } = useSiteConfiguration();
  if (!data) {
  return null;
  }
 
  return (
  <>
- <ButtonRow>
- {!options.hideStartContributing && isActive ? (
- claimGranularity === 'manifest' || showCaptureModelOnManifest ? (
- <GoToRandomManifest
- $primary
- $large
- label={{ none: [t('Start contributing')] }}
- navigateToModel
- manifestModel={showCaptureModelOnManifest}
- />
- ) : (
- <GoToRandomCanvas $primary $large label={{ none: [t('Start contributing')] }} navigateToModel />
- )
- ) : null}
- </ButtonRow>
+ <StartContributingButton />
  <ButtonRow>
  {showDoneButton || filter ? (
  <Button

services/madoc-ts/src/frontend/site/features/ProjectHeading.tsx

@@ -3,19 +3,61 @@ import { blockEditorFor } from '../../../extensions/page-blocks/block-editor-for
 import { Heading1, Subheading1 } from '../../shared/typography/Heading1';
 import { LocaleString } from '../../shared/components/LocaleString';
 import { useProject } from '../hooks/use-project';
+import styled from 'styled-components';
+import { StartContributingButton } from './contributor/StartContributingButton';
 
-export const ProjectHeading: React.FC = () => {
+const ProjectHeadingContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 1em;
+`;
+
+const ProjectTitle = styled.div``;
+
+const ProjectImage = styled.div`
+ width: 100%;
+ height: 100%;
+ max-height: 200px;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+ &[data-full-width='true'] {
+ margin: 0 -2em;
+ width: auto;
+ }
+`;
+export const ProjectHeading: React.FC<{
+ headerImage?: {
+ id: string;
+ image: string;
+ thumbnail: string;
+ } | null;
+ fullWidth?: boolean;
+ imageHeight?: string;
+ showContributingButton?: boolean;
+}> = ({ headerImage, fullWidth, imageHeight = 200, showContributingButton = true }) => {
  const { data: project } = useProject();
 
  if (!project) {
  return null;
  }
 
  return (
- <>
- <LocaleString as={Heading1}>{project.label}</LocaleString>
- <LocaleString as={Subheading1}>{project.summary}</LocaleString>
- </>
+ <ProjectHeadingContainer>
+ <ProjectTitle>
+ <LocaleString as={Heading1}>{project.label}</LocaleString>
+ <LocaleString as={Subheading1}>{project.summary}</LocaleString>
+ </ProjectTitle>
+
+ <ProjectImage data-full-width={fullWidth} style={{ maxHeight: `${imageHeight}px` }}>
+ <img src={headerImage?.image} alt={''} />
+ </ProjectImage>
+
+ {showContributingButton && <StartContributingButton />}
+ </ProjectHeadingContainer>
  );
 };
 
@@ -24,5 +66,20 @@ blockEditorFor(ProjectHeading, {
  label: 'Project heading',
  anyContext: ['project'],
  requiredContext: ['project'],
- editor: {},
+ defaultProps: {
+ headerImage: null,
+ fullWidth: false,
+ imageHeight: 200,
+ showContributingButton: true,
+ },
+ editor: {
+ headerImage: { label: 'Background image', type: 'madoc-media-explorer' },
+ fullWidth: { label: 'Full width', type: 'checkbox-field', inlineLabel: 'Show image full width' },
+ imageHeight: { label: 'Image height', type: 'text-field' },
+ showContributingButton: {
+ label: 'Start contributing button',
+ type: 'checkbox-field',
+ inlineLabel: 'Show start Contributing button',
+ },
+ },
 });

services/madoc-ts/src/frontend/site/features/contributor/ProjectActions.tsx

@@ -6,47 +6,34 @@ import { Button, ButtonRow } from '../../../shared/navigation/Button';
 import { useUser } from '../../../shared/hooks/use-site';
 import { useProject } from '../../hooks/use-project';
 import { useProjectPageConfiguration } from '../../hooks/use-project-page-configuration';
-import { useProjectShadowConfiguration } from '../../hooks/use-project-shadow-configuration';
 import { useProjectStatus } from '../../hooks/use-project-status';
 import { useRelativeLinks } from '../../hooks/use-relative-links';
 import { GoToRandomCanvas } from './GoToRandomCanvas';
 import { GoToRandomManifest } from './GoToRandomManifest';
 import { useSiteConfiguration } from '../SiteConfigurationContext';
+import { StartContributingButton } from './StartContributingButton';
 
-export const ProjectActions: React.FC = () => {
+export const ProjectActions: React.FC<{
+ showContributingButton?: boolean }> = ({showContributingButton = false}) => {
  const { data: project } = useProject();
  const { isActive } = useProjectStatus();
  const { t } = useTranslation();
  const createLink = useRelativeLinks();
  const {
- project: { allowCollectionNavigation = true, allowManifestNavigation = true, claimGranularity, allowPersonalNotes },
+ project: { allowCollectionNavigation = true, allowManifestNavigation = true, allowPersonalNotes },
  } = useSiteConfiguration();
  const user = useUser();
  const isAdmin = user && user.scope && user.scope.indexOf('site.admin') !== -1;
  const isReviewer = isAdmin || (user && user.scope && user.scope.indexOf('tasks.create') !== -1);
- const canContribute = isAdmin || (user && user.scope && user.scope.indexOf('models.contribute') !== -1);
  const options = useProjectPageConfiguration();
- const { showCaptureModelOnManifest } = useProjectShadowConfiguration();
 
  if (!project) {
  return null;
  }
 
  return (
  <div>
- {!options.hideStartContributing && isActive && canContribute ? (
- claimGranularity === 'manifest' || showCaptureModelOnManifest ? (
- <GoToRandomManifest
- $primary
- $large
- label={{ none: [t('Start contributing')] }}
- navigateToModel
- manifestModel={showCaptureModelOnManifest}
- />
- ) : (
- <GoToRandomCanvas $primary $large label={{ none: [t('Start contributing')] }} navigateToModel />
- )
- ) : null}
+ {showContributingButton && <StartContributingButton />}
  <ButtonRow>
  {!options.hideSearchButton ? (
  <Button as={Link} to={createLink({ subRoute: 'search' })}>
@@ -82,5 +69,14 @@ blockEditorFor(ProjectActions, {
  label: 'Project actions',
  anyContext: ['project'],
  requiredContext: ['project'],
- editor: {},
+ defaultProps: {
+ showContributingButton: false,
+ },
+ editor: {
+ showContributingButton: {
+ label: 'Start contributing button',
+ type: 'checkbox-field',
+ inlineLabel: 'Show start Contributing button',
+ },
+ },
 });

services/madoc-ts/src/frontend/site/features/contributor/ProjectContributionButton.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { blockEditorFor } from '../../../../extensions/page-blocks/block-editor-for';
 import { parseUrn } from '../../../../utility/parse-urn';
 import { SmallButton } from '../../../shared/navigation/Button';
-import { CSSThirdGrid, GridContainer } from '../../../shared/layout/Grid';
+import { CSSThirdGrid } from '../../../shared/layout/Grid';
 import { Heading3 } from '../../../shared/typography/Heading3';
 import { ContinueTaskDisplay } from '../../../shared/components/ContinueTaskDisplay';
 import { useContributorTasks } from '../../../shared/hooks/use-contributor-tasks';

services/madoc-ts/src/frontend/site/features/contributor/StartContributingButton.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useProjectStatus } from '../../hooks/use-project-status';
+import { useTranslation } from 'react-i18next';
+import { useSiteConfiguration } from '../SiteConfigurationContext';
+import { useUser } from '../../../shared/hooks/use-site';
+import { useProjectPageConfiguration } from '../../hooks/use-project-page-configuration';
+import { useProjectShadowConfiguration } from '../../hooks/use-project-shadow-configuration';
+import { GoToRandomManifest } from './GoToRandomManifest';
+import { GoToRandomCanvas } from './GoToRandomCanvas';
+
+export const StartContributingButton: React.FC = () => {
+ const { isActive } = useProjectStatus();
+ const { t } = useTranslation();
+ const {
+ project: { claimGranularity },
+ } = useSiteConfiguration();
+ const user = useUser();
+ const isAdmin = user && user.scope && user.scope.indexOf('site.admin') !== -1;
+ const canContribute = isAdmin || (user && user.scope && user.scope.indexOf('models.contribute') !== -1);
+ const options = useProjectPageConfiguration();
+ const { showCaptureModelOnManifest } = useProjectShadowConfiguration();
+
+ return (
+ <div>
+ {!options.hideStartContributing && isActive && canContribute ? (
+ claimGranularity === 'manifest' || showCaptureModelOnManifest ? (
+ <GoToRandomManifest
+ $primary
+ $large
+ label={{ none: [t('Start contributing')] }}
+ navigateToModel
+ manifestModel={showCaptureModelOnManifest}
+ />
+ ) : (
+ <GoToRandomCanvas $primary $large label={{ none: [t('Start contributing')] }} navigateToModel />
+ )
+ ) : null}
+ </div>
+ );
+};

services/madoc-ts/translations/en/madoc.json

@@ -424,6 +424,7 @@
  "Home": "Home",
  "Homepage": "Homepage",
  "Homepage menu": "Homepage menu",
+ "How much padding should the surface have. (default: none)": "How much padding should the surface have. (default: none)",
  "IIIF Drag and drop": "IIIF Drag and drop",
  "If a contribution takes longer than this time (in seconds) then they will receive a message to let them know": "If a contribution takes longer than this time (in seconds) then they will receive a message to let them know",
  "If enabled, these will will be available for users to choose from the menu bar": "If enabled, these will will be available for users to choose from the menu bar",
@@ -713,12 +714,15 @@
  "Show button to generate PDF": "Show button to generate PDF",
  "Show completed": "Show completed",
  "Show divider": "Show divider",
+ "Show full width": "Show full width",
  "Show home as menu item": "Show home as menu item",
+ "Show image full width": "Show image full width",
  "Show number of matches manifests in search facets": "Show number of matches manifests in search facets",
  "Show only languages": "Show only languages",
  "Show reviewer dashboard": "Show reviewer dashboard",
  "Show search facet count": "Show search facet count",
  "Show search facet count (number of matching manifests)": "Show search facet count (number of matching manifests)",
+ "Show start Contributing button": "Show start Contributing button",
  "Show text": "Show text",
  "Show thumbs": "Show thumbs",
  "Show translation on site": "Show translation on site",