Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extract a styled CompanionWindowSection #3820

Merged
merged 1 commit into from
Nov 28, 2023
Merged

Extract a styled CompanionWindowSection #3820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 5 additions & 15 deletions src/components/AttributionPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Link from '@mui/material/Link';
import Skeleton from '@mui/material/Skeleton';
import { Img } from 'react-image';
import CompanionWindow from '../containers/CompanionWindow';
import { CompanionWindowSection } from './CompanionWindowSection';
import { LabelValueMetadata } from './LabelValueMetadata';
import ns from '../config/css-ns';
import { PluginHook } from './PluginHook';
Expand All @@ -18,10 +19,6 @@ const StyledPlaceholder = styled(Skeleton)(({ theme }) => ({
backgroundColor: theme.palette.grey[300],
}));

const StyledSection = styled('div')({
borderBottom: '.5px solid',
});

/**
* WindowSideBarInfoPanel
*/
Expand All @@ -47,7 +44,7 @@ export class AttributionPanel extends Component {
windowId={windowId}
id={id}
>
<StyledSection sx={{ paddingLeft: 2 }}>
<CompanionWindowSection>
{ requiredStatement && (
<LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />
)}
Expand All @@ -65,17 +62,10 @@ export class AttributionPanel extends Component {
</dl>
)
}
</StyledSection>
</CompanionWindowSection>

{ manifestLogo && (
<StyledSection sx={{
borderBottomColor: 'section_divider',
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 1,
paddingTop: 2,
}}
>
<CompanionWindowSection>
<StyledLogo
src={[manifestLogo]}
alt=""
Expand All @@ -84,7 +74,7 @@ export class AttributionPanel extends Component {
<StyledPlaceholder variant="rectangular" height={60} width={60} />
}
/>
</StyledSection>
</CompanionWindowSection>
)}

<PluginHook {...this.props} />
Expand Down
8 changes: 8 additions & 0 deletions src/components/CompanionWindowSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { styled } from '@mui/material/styles';

export const CompanionWindowSection = styled('div', { name: 'CompanionWindowSection', slot: 'root' })(({ theme }) => ({
paddingBlockEnd: theme.spacing(1),
paddingBlockStart: theme.spacing(2),
paddingInlineEnd: theme.spacing(1),
paddingInlineStart: theme.spacing(2),
}));
16 changes: 3 additions & 13 deletions src/components/WindowSideBarAnnotationsPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { createRef, Component } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import AnnotationSettings from '../containers/AnnotationSettings';
import CanvasAnnotations from '../containers/CanvasAnnotations';
import CompanionWindow from '../containers/CompanionWindow';
import { CompanionWindowSection } from './CompanionWindowSection';
import ns from '../config/css-ns';

const StyledSection = styled('div')({
borderBottom: '.5px solid',
});
/**
* WindowSideBarAnnotationsPanel ~
*/
Expand Down Expand Up @@ -37,16 +34,9 @@ export class WindowSideBarAnnotationsPanel extends Component {
ref={this.containerRef}
titleControls={<AnnotationSettings windowId={windowId} />}
>
<StyledSection sx={{
borderBottomColor: 'section_divider',
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 1,
paddingTop: 2,
}}
>
<CompanionWindowSection>
<Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
</StyledSection>
</CompanionWindowSection>

{canvasIds.map((canvasId, index) => (
<CanvasAnnotations
Expand Down
49 changes: 9 additions & 40 deletions src/components/WindowSideBarInfoPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import { Component } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import CompanionWindow from '../containers/CompanionWindow';
import { CompanionWindowSection } from './CompanionWindowSection';
import CanvasInfo from '../containers/CanvasInfo';
import LocalePicker from '../containers/LocalePicker';
import ManifestInfo from '../containers/ManifestInfo';
import CollectionInfo from '../containers/CollectionInfo';
import ManifestRelatedLinks from '../containers/ManifestRelatedLinks';
import ns from '../config/css-ns';

const StyledSection = styled('div')({
borderBottom: '.5px solid',
});
/**
* WindowSideBarInfoPanel
*/
Expand Down Expand Up @@ -52,14 +49,7 @@ export class WindowSideBarInfoPanel extends Component {
>
{
canvasIds.map((canvasId, index) => (
<StyledSection
sx={{
borderBottomColor: 'section_divider',
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 1,
paddingTop: 2,
}}
<CompanionWindowSection
key={canvasId}
>
<CanvasInfo
Expand All @@ -69,43 +59,22 @@ export class WindowSideBarInfoPanel extends Component {
totalSize={canvasIds.length}
windowId={windowId}
/>
</StyledSection>
</CompanionWindowSection>
))
}
{ collectionPath.length > 0 && (
<StyledSection sx={{
borderBottomColor: 'section_divider',
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 1,
paddingTop: 2,
}}
>
<CompanionWindowSection>
<CollectionInfo id={id} windowId={windowId} />
</StyledSection>
</CompanionWindowSection>
)}

<StyledSection sx={{
borderBottomColor: 'section_divider',
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 1,
paddingTop: 2,
}}
>
<CompanionWindowSection>
<ManifestInfo id={id} windowId={windowId} />
</StyledSection>
</CompanionWindowSection>

<StyledSection sx={{
borderBottomColor: 'section_divider',
paddingBottom: 1,
paddingLeft: 2,
paddingRight: 1,
paddingTop: 2,
}}
>
<CompanionWindowSection>
<ManifestRelatedLinks id={id} windowId={windowId} />
</StyledSection>
</CompanionWindowSection>
</CompanionWindow>
);
}
Expand Down
7 changes: 7 additions & 0 deletions src/config/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,13 @@ export default {
useNextVariants: true // set so that console deprecation warning is removed
},
components: {
CompanionWindowSection: {
styleOverrides: {
root: {
borderBlockEnd: '.5px solid rgba(0, 0, 0, 0.25)'
},
},
},
MuiButtonBase: {
defaultProps: {
disableTouchRipple: true,
Expand Down