Skip to content

Commit

Permalink
#3580 - Macro: update snapshots, style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Mariia_Khrustaleva(EPAM) authored and Mariia_Khrustaleva(EPAM) committed Nov 30, 2023
1 parent 8f77d3b commit c49e848
Show file tree
Hide file tree
Showing 15 changed files with 172 additions and 130 deletions.
2 changes: 1 addition & 1 deletion ketcher-autotests/tests/Macromolecule-editor/Modal-window/modal-window.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
import { bondTwoMonomers } from '@utils/macromolecules/polymerBond';
/* eslint-disable no-magic-numbers */

test.describe('Modal window', () => {
test.describe.only('Modal window', () => {
let peptide1: Locator;
let peptide2: Locator;
test.beforeEach(async ({ page }) => {
Expand Down
Binary file modified ...ow.spec.ts-snapshots/Modal-window-Connect-button-is-active-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....spec.ts-snapshots/Modal-window-Connect-button-is-disabled-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots/Zoom-Tool-Zoom-In-Out-bond-with-mouse-wheel-and-CTRL-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...oom-Tool-Zoom-In-Out-selection-rectangle-with-menu-buttons-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-Zoom-In-Out-selection-rectangle-with-mouse-wheel-and-CTRL-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ayout.spec.ts-snapshots/RNA-layout-Each-panel-is-collapsed-1-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 25 additions & 23 deletions ...tcher-polymer-editor-react/src/components/modal/Delete/__snapshots__/Delete.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Object {
aria-hidden="true"
/>
<div
class="MuiDialog-root MuiModal-root css-kxv5da-MuiModal-root-MuiDialog-root"
class="MuiDialog-root MuiModal-root css-6x6udt-MuiModal-root-MuiDialog-root"
role="presentation"
>
<div
Expand Down Expand Up @@ -43,29 +43,31 @@ Object {
>
Delete RNA Preset
</div>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
title="Close window"
type="button"
>
<svg
class="css-1td8dcm"
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
title="Close window"
type="button"
>
<path
d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
fill="currentColor"
<svg
class="css-1td8dcm"
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
fill="currentColor"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</button>
</span>
</h2>
<div
class="MuiDialogContent-root css-1wbmh3t-MuiDialogContent-root"
Expand All @@ -88,7 +90,7 @@ Object {
</div>
</div>
<div
class="MuiDialogActions-root MuiDialogActions-spacing css-1a9359k-MuiDialogActions-root"
class="MuiDialogActions-root MuiDialogActions-spacing css-k8y9qp-MuiDialogActions-root"
>
<button
class="MuiButtonBase-root css-1gtlr3p-MuiButtonBase-root"
Expand Down
46 changes: 24 additions & 22 deletions ...s/ketcher-polymer-editor-react/src/components/modal/Open/__snapshots__/Open.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Object {
aria-hidden="true"
/>
<div
class="MuiDialog-root MuiModal-root css-kxv5da-MuiModal-root-MuiDialog-root"
class="MuiDialog-root MuiModal-root css-6x6udt-MuiModal-root-MuiDialog-root"
role="presentation"
>
<div
Expand Down Expand Up @@ -43,29 +43,31 @@ Object {
>
Open Structure
</div>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
title="Close window"
type="button"
>
<svg
class="css-1td8dcm"
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
title="Close window"
type="button"
>
<path
d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
fill="currentColor"
<svg
class="css-1td8dcm"
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
fill="currentColor"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</button>
</span>
</h2>
<div
class="MuiDialogContent-root css-1wbmh3t-MuiDialogContent-root"
Expand Down
31 changes: 19 additions & 12 deletions ...etcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ import { LeavingGroup } from 'ketcher-core';
interface IStyledButtonProps {
disabled: boolean;
}
interface IStyledStyledStructRender {
isExpanded?: boolean;
}

const StyledModal = styled(Modal)({
'& .MuiPaper-root': {
Expand All @@ -32,23 +35,25 @@ const StyledModal = styled(Modal)({
},
});

export const StyledStructRender = styled(StructRender)(({ theme }) => ({
export const StyledStructRender = styled(
StructRender,
)<IStyledStyledStructRender>(({ theme, isExpanded }) => ({
display: 'flex',
border: `1.5px solid ${theme.ketcher.outline.color}`,
borderRadius: '6px',
padding: 5,
maxHeight: '100%',
minHeight: '150px',
height: isExpanded ? 'auto' : '150px',
width: isExpanded ? 'auto' : '150px',
alignSelf: 'stretch',
'& svg': {
maxWidth: 'fit-content',
margin: 'auto',
padding: '4px',
},
}));

export const ActionButtonLeft = styled(ActionButton)(() => ({
marginRight: 'auto',
width: '97px !important',
}));

Expand Down Expand Up @@ -112,18 +117,20 @@ const MonomerConnection = ({

return (
<StyledModal
title="Select Attachment Points"
title="Select connection points"
isOpen={isModalOpen}
onClose={cancelBondCreationAndClose}
showExpandButton
modalWidth="350px"
modalWidth="358px"
expanded={modalExpanded}
setExpanded={setModalExpanded}
>
<Modal.Content>
<ModalContent>
<AttachmentPointsRow>
<MonomerName>{firstMonomer.monomerItem.props.Name}</MonomerName>
<MonomerName isExpanded={modalExpanded}>
{firstMonomer.monomerItem.props.Name}
</MonomerName>
<AttachmentPointSelectionPanel
monomer={firstMonomer}
selectedAttachmentPoint={firstSelectedAttachmentPoint}
Expand All @@ -133,7 +140,9 @@ const MonomerConnection = ({
<span />
<ConnectionSymbol />
<span />
<MonomerName>{secondMonomer.monomerItem.props.Name}</MonomerName>
<MonomerName isExpanded={modalExpanded}>
{secondMonomer.monomerItem.props.Name}
</MonomerName>

<AttachmentPointSelectionPanel
monomer={secondMonomer}
Expand Down Expand Up @@ -204,9 +213,10 @@ function AttachmentPointSelectionPanel({
needCache: false,
}}
update={expanded}
isExpanded={expanded}
/>
<AttachmentPointList>
{monomer.listOfAttachmentPoints.map((attachmentPoint, i) => {
{monomer.listOfAttachmentPoints.map((attachmentPoint) => {
const disabled = Boolean(
connectedAttachmentPoints.find(
(connectedAttachmentPointName) =>
Expand All @@ -215,10 +225,7 @@ function AttachmentPointSelectionPanel({
),
);
return (
<AttachmentPoint
key={attachmentPoint}
lastElementInRow={(i + 1) % 3 === 0}
>
<AttachmentPoint key={attachmentPoint}>
<ActionButtonAttachmentPoint
label={attachmentPoint}
styleType={
Expand Down
59 changes: 32 additions & 27 deletions ...s/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,27 @@ import styled from '@emotion/styled';
export const AttachmentPointList = styled.div({
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'start',
justifyContent: 'center',
alignSelf: 'flex-start',
width: '100%',
gap: '8px',
gap: '7px',
});

interface IStyledAttachmentPointProps {
lastElementInRow?: boolean;
}
interface IStyledAttachmentPointNameProps {
disabled?: boolean;
}

export const AttachmentPoint = styled('div')<IStyledAttachmentPointProps>(
(props) => ({
display: 'flex',
flexDirection: 'column',
rowGap: '2px',
alignItems: 'center',
marginBottom: '5px',
marginRight: !props.lastElementInRow ? '7px' : '',
}),
);
interface IStyledMonomerName {
isExpanded?: boolean;
}

export const AttachmentPoint = styled('div')(() => ({
display: 'flex',
flexDirection: 'column',
rowGap: '2px',
alignItems: 'center',
marginBottom: '5px',
}));

export const AttachmentPointName = styled.span<IStyledAttachmentPointNameProps>(
(props) => ({
Expand All @@ -42,16 +40,21 @@ export const AttachmentPointName = styled.span<IStyledAttachmentPointNameProps>(
}),
);

export const MonomerName = styled.div(({ theme }) => ({
margin: 0,
padding: 0,
textAlign: 'center',
display: 'block',
font: theme.ketcher.font.family.inter,
fontSize: theme.ketcher.font.size.regular,
fontWeight: theme.ketcher.font.weight.regular,
flexBasis: '200px',
}));
export const MonomerName = styled.div<IStyledMonomerName>(
({ theme, isExpanded }) => ({
margin: 0,
padding: 0,
textAlign: 'center',
alignSelf: 'flex-end',
display: 'block',
font: theme.ketcher.font.family.inter,
fontSize: theme.ketcher.font.size.regular,
fontWeight: theme.ketcher.font.weight.regular,
flexBasis: '200px',
lineHeight: '14px',
maxWidth: isExpanded ? undefined : '150px',
}),
);

export const ConnectionSymbol = styled.div(({ theme }) => ({
width: 10,
Expand All @@ -66,13 +69,15 @@ export const ConnectionSymbol = styled.div(({ theme }) => ({
export const AttachmentPointsRow = styled.div(() => ({
display: 'grid',
gridAutoFlow: 'column',
gridTemplateRows: '1em auto auto',
gridTemplateRows: 'auto auto auto',
gridTemplateColumns: '1fr 10px 1fr',
justifyContent: 'center',
alignItems: 'flex-start',
padding: '12px',
paddingBottom: 0,
height: '100%',
gap: '8px',
columnGap: '12px',
rowGap: '8px',
}));

export const ModalContent = styled.div(() => ({ height: '100%' }));
Loading

0 comments on commit c49e848

Please sign in to comment.