Merge pull request #31 from scratchfoundation/integration-branch-kaloyan

Integration branch kaloyan

Author: KManolov3

packages/scratch-gui/src/components/delete-button/delete-button.css

@@ -28,6 +28,10 @@
   transition: all 0.15s ease-out;
 }
 
+.delete-button-clicked {
+  background-color: $data-primary;
+}
+
 .delete-icon {
     position: relative;
     margin: 0.25rem;

packages/scratch-gui/src/components/delete-button/delete-button.jsx

@@ -16,7 +16,11 @@ const DeleteButton = props => (
         tabIndex={props.tabIndex}
         onClick={props.onClick}
     >
-        <div className={styles.deleteButtonVisible}>
+        <div
+            className={classNames(styles.deleteButtonVisible, {
+                [styles.deleteButtonClicked]: props.isConfirmationModalOpened
+            })}
+        >
             <img
                 className={styles.deleteIcon}
                 src={deleteIcon}
@@ -29,6 +33,7 @@ const DeleteButton = props => (
 DeleteButton.propTypes = {
     className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
+    isConfirmationModalOpened: PropTypes.bool,
     tabIndex: PropTypes.number
 };
 

packages/scratch-gui/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css

@@ -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;
+}
+

packages/scratch-gui/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx

@@ -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;

packages/scratch-gui/src/components/delete-confirmation-prompt/icon--arrow-left.svg

@@ -19,6 +19,24 @@
     height: calc(100% - $library-header-height - $library-filter-bar-height - 2rem);
 }
 
+.library-category {
+  display: flex;
+  flex-direction: column;
+}
+
+.library-category-title {
+  padding-Left: .5rem;
+  font-weight: bold;
+  font-size: 2rem;
+  color: $text-primary;
+}
+
+.library-category-items {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 1rem;
+}
+
 .filter-bar {
     display: flex;
     flex-direction: row;