forked from scratchfoundation/scratch-gui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request scratchfoundation#9700 from KManolov3/chore/migrat…
…e-monorepo-changes chore: uepr-8: uepr-65: migrate monorepo changes
- Loading branch information
Showing
21 changed files
with
1,170 additions
and
692 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
src/components/delete-confirmation-prompt/delete-confirmation-prompt.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
@import "../../css/colors.css"; | ||
@import "../../css/units.css"; | ||
|
||
.modal-container { | ||
display: flex; | ||
flex-direction: row; | ||
border: none; | ||
} | ||
|
||
.arrow-container { | ||
display: flex; | ||
align-items: center; | ||
margin-right: -7px; | ||
} | ||
|
||
.arrow-container-left { | ||
margin-right: -7px; | ||
} | ||
|
||
.arrow-container-right { | ||
margin-left: -7px; | ||
} | ||
|
||
.body { | ||
padding: 1rem 1.5rem; | ||
border-radius: 0.5rem; | ||
background: $looks-secondary; | ||
} | ||
|
||
.label { | ||
color: $ui-white; | ||
font-size: 1.25rem; | ||
font-weight: 700; | ||
margin: 1rem 0 1.5rem; | ||
} | ||
|
||
.button-row { | ||
font-weight: bolder; | ||
display: flex; | ||
} | ||
|
||
.button-row button { | ||
display: flex; | ||
gap: 0.5rem; | ||
justify-content: center; | ||
width: 47%; | ||
padding: 0.75rem 1rem; | ||
border-radius: 2rem; | ||
border: 1px solid $ui-black-transparent; | ||
color: $looks-secondary; | ||
background: $ui-white; | ||
font-weight: 600; | ||
font-size: 0.85rem; | ||
cursor: pointer; | ||
margin: auto; | ||
} | ||
|
||
.button-row button.ok-button { | ||
margin-left: 0; | ||
} | ||
|
||
.button-row button.cancel-button { | ||
margin-right: 0; | ||
} | ||
|
||
.message { | ||
margin-top: 0.25rem; | ||
} | ||
|
||
.delete-icon { | ||
height: 1.5rem; | ||
width: 1.5rem; | ||
} | ||
|
185 changes: 185 additions & 0 deletions
185
src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,185 @@ | ||
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
|
||
import Box from '../box/box.jsx'; | ||
import ReactModal from 'react-modal'; | ||
import deleteIcon from './icon--delete.svg'; | ||
import undoIcon from './icon--undo.svg'; | ||
import arrowLeftIcon from './icon--arrow-left.svg'; | ||
import arrowRightIcon from './icon--arrow-right.svg'; | ||
|
||
import styles from './delete-confirmation-prompt.css'; | ||
|
||
// TODO: Parametrize from outside if we want more custom messaging | ||
const messages = defineMessages({ | ||
shouldDeleteSpriteMessage: { | ||
defaultMessage: 'Are you sure you want to delete this sprite?', | ||
description: 'Message to indicate whether selected sprite should be deleted.', | ||
id: 'gui.gui.shouldDeleteSprite' | ||
}, | ||
shouldDeleteCostumeMessage: { | ||
defaultMessage: 'Are you sure you want to delete this costume?', | ||
description: 'Message to indicate whether selected costume should be deleted.', | ||
id: 'gui.gui.shouldDeleteCostume' | ||
}, | ||
shouldDeleteSoundMessage: { | ||
defaultMessage: 'Are you sure you want to delete this sound?', | ||
description: 'Message to indicate whether selected sound should be deleted.', | ||
id: 'gui.gui.shouldDeleteSound' | ||
}, | ||
confirmOption: { | ||
defaultMessage: 'yes', | ||
description: 'Yes - should delete the sprite', | ||
id: 'gui.gui.confirm' | ||
}, | ||
cancelOption: { | ||
defaultMessage: 'no', | ||
description: 'No - cancel deletion', | ||
id: 'gui.gui.cancel' | ||
}, | ||
confirmDeletionHeading: { | ||
defaultMessage: 'Confirm Asset Deletion', | ||
description: 'Heading of confirmation prompt to delete asset', | ||
id: 'gui.gui.deleteAssetHeading' | ||
} | ||
}); | ||
|
||
const modalWidth = 300; | ||
const calculateModalPosition = (relativeElemRef, modalPosition) => { | ||
const refPosition = relativeElemRef.getBoundingClientRect(); | ||
|
||
if (modalPosition === 'left') { | ||
return { | ||
top: refPosition.top - refPosition.height, | ||
left: refPosition.left - modalWidth - 25 | ||
}; | ||
} | ||
|
||
if (modalPosition === 'right') { | ||
return { | ||
top: refPosition.top - refPosition.height, | ||
left: refPosition.right + 25 | ||
}; | ||
} | ||
|
||
return {}; | ||
}; | ||
|
||
const getMessage = entityType => { | ||
if (entityType === 'COSTUME') { | ||
return messages.shouldDeleteCostumeMessage; | ||
} | ||
|
||
if (entityType === 'SOUND') { | ||
return messages.shouldDeleteSoundMessage; | ||
} | ||
|
||
return messages.shouldDeleteSpriteMessage; | ||
}; | ||
|
||
const DeleteConfirmationPrompt = ({ | ||
intl, | ||
onCancel, | ||
onOk, | ||
modalPosition, | ||
entityType, | ||
relativeElemRef | ||
}) => { | ||
const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition); | ||
|
||
return (<ReactModal | ||
isOpen | ||
// We have to inline the styles, since a part | ||
// of them are dynamically generated | ||
style={{ | ||
content: { | ||
...modalPositionValues, | ||
width: modalWidth, | ||
border: 'none', | ||
height: 'fit-content', | ||
backgroundColor: 'transparent', | ||
padding: 0, | ||
margin: 0, | ||
position: 'absolute', | ||
overflowX: 'hidden', | ||
zIndex: 1000 | ||
}, | ||
overlay: { | ||
position: 'fixed', | ||
top: 0, | ||
left: 0, | ||
right: 0, | ||
bottom: 0, | ||
zIndex: 510, | ||
backgroundColor: 'transparent' | ||
} | ||
}} | ||
contentLabel={intl.formatMessage(messages.confirmDeletionHeading)} | ||
onRequestClose={onCancel} | ||
> | ||
<Box className={styles.modalContainer}> | ||
{ modalPosition === 'right' ? | ||
<Box className={classNames(styles.arrowContainer, styles.arrowContainerLeft)}> | ||
<img | ||
className={styles.deleteIcon} | ||
src={arrowLeftIcon} | ||
/> | ||
</Box> : null } | ||
<Box className={styles.body}> | ||
<Box className={styles.label}> | ||
<FormattedMessage {...getMessage(entityType)} /> | ||
</Box> | ||
<Box className={styles.buttonRow}> | ||
<button | ||
className={styles.okButton} | ||
onClick={onOk} | ||
role="button" | ||
> | ||
<img | ||
className={styles.deleteIcon} | ||
src={deleteIcon} | ||
/> | ||
<div className={styles.message}> | ||
<FormattedMessage {...messages.confirmOption} /> | ||
</div> | ||
</button> | ||
<button | ||
className={styles.cancelButton} | ||
onClick={onCancel} | ||
role="button" | ||
> | ||
<img | ||
className={styles.deleteIcon} | ||
src={undoIcon} | ||
/> | ||
<div className={styles.message}> | ||
<FormattedMessage {...messages.cancelOption} /> | ||
</div> | ||
</button> | ||
</Box> | ||
</Box> | ||
{modalPosition === 'left' ? | ||
<Box className={classNames(styles.arrowContainer, styles.arrowContainerRight)}> | ||
<img | ||
className={styles.deleteIcon} | ||
src={arrowRightIcon} | ||
/> | ||
</Box> : null } | ||
</Box> | ||
</ReactModal>); | ||
}; | ||
|
||
DeleteConfirmationPrompt.propTypes = { | ||
onOk: PropTypes.func.isRequired, | ||
onCancel: PropTypes.func.isRequired, | ||
relativeElemRef: PropTypes.object, | ||
entityType: PropTypes.string, | ||
modalPosition: PropTypes.string, | ||
intl: intlShape.isRequired | ||
}; | ||
|
||
const DeleteConfirmationPromptIntl = injectIntl(DeleteConfirmationPrompt); | ||
|
||
export default DeleteConfirmationPromptIntl; |
3 changes: 3 additions & 0 deletions
3
src/components/delete-confirmation-prompt/icon--arrow-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions
3
src/components/delete-confirmation-prompt/icon--arrow-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions
18
src/components/delete-confirmation-prompt/icon--delete.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.