Merge pull request scratchfoundation#4731 from evhan55/feature/4670

Add shrink/expand and new fencing feature to tutorial cards

Author: evhan55

src/components/cards/card.css

@@ -2,10 +2,16 @@
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
 
+.card-container-overlay {
+    position: fixed;
+    z-index: $z-index-card;
+}
+
 .card-container {
     position:absolute;
     z-index: $z-index-card;
     margin: 0.5rem 2rem;
+    min-width: 468px;
 }
 
 .left-card, .right-card {
@@ -104,11 +110,38 @@
     font-weight: bold;
 }
 
+.header-buttons-hidden {
+    border-bottom: 0px;
+}
+
+.header-buttons-right {
+    display: flex;
+    flex-direction: row;
+}
+
+.header-buttons img {
+    margin-bottom: 2px;
+}
+
+.shrink-expand-button {
+    cursor: pointer;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0.75rem;
+}
+
+.shrink-expand-button:hover, .all-button:hover {
+    background-color: $ui-black-transparent;
+}
+
 .remove-button, .all-button {
     cursor: pointer;
     color: white;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 0.75rem;
@@ -188,7 +221,7 @@
 }
 
 .close-icon {
-    height: 1rem;
+    height: 1.25rem;
     margin: .125rem 0; /* To offset the .25rem difference in icon size */
 }
 
@@ -267,3 +300,7 @@
     background: $ui-white;
     box-shadow: 0px 0px 0px 2px $ui-black-transparent;
 }
+
+.hidden {
+    display: none;
+}

src/components/cards/cards.jsx

@@ -1,10 +1,14 @@
 import PropTypes from 'prop-types';
 import React, {Fragment} from 'react';
+import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import Draggable from 'react-draggable';
 
 import styles from './card.css';
 
+import shrinkIcon from './icon--shrink.svg';
+import expandIcon from './icon--expand.svg';
+
 import rightArrow from './icon--next.svg';
 import leftArrow from './icon--prev.svg';
 
@@ -14,8 +18,8 @@ import closeIcon from './icon--close.svg';
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
 import {translateImage} from '../../lib/libraries/decks/translate-image.js';
 
-const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
-    <div className={styles.headerButtons}>
+const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (
+    <div className={expanded ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
         <div
             className={styles.allButton}
             onClick={onShowAll}
@@ -41,19 +45,42 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
                     ))}
             </div>
         ) : null}
-        <div
-            className={styles.removeButton}
-            onClick={onCloseCards}
-        >
-            <FormattedMessage
-                defaultMessage="Close"
-                description="Title for button to close how-to card"
-                id="gui.cards.close"
-            />
-            <img
-                className={styles.closeIcon}
-                src={closeIcon}
-            />
+        <div className={styles.headerButtonsRight}>
+            <div
+                className={styles.shrinkExpandButton}
+                onClick={onShrinkExpandCards}
+            >
+                <img
+                    draggable={false}
+                    src={expanded ? shrinkIcon : expandIcon}
+                />
+                {expanded ?
+                    <FormattedMessage
+                        defaultMessage="Shrink"
+                        description="Title for button to shrink how-to card"
+                        id="gui.cards.shrink"
+                    /> :
+                    <FormattedMessage
+                        defaultMessage="Expand"
+                        description="Title for button to expand how-to card"
+                        id="gui.cards.expand"
+                    />
+                }
+            </div>
+            <div
+                className={styles.removeButton}
+                onClick={onCloseCards}
+            >
+                <img
+                    className={styles.closeIcon}
+                    src={closeIcon}
+                />
+                <FormattedMessage
+                    defaultMessage="Close"
+                    description="Title for button to close how-to card"
+                    id="gui.cards.close"
+                />
+            </div>
         </div>
     </div>
 );
@@ -107,13 +134,13 @@ ImageStep.propTypes = {
     title: PropTypes.node.isRequired
 };
 
-const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
+const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
     <Fragment>
         {onNextStep ? (
             <div>
-                <div className={isRtl ? styles.leftCard : styles.rightCard} />
+                <div className={expanded ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
                 <div
-                    className={isRtl ? styles.leftButton : styles.rightButton}
+                    className={expanded ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
                     onClick={onNextStep}
                 >
                     <img
@@ -125,9 +152,9 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
         ) : null}
         {onPrevStep ? (
             <div>
-                <div className={isRtl ? styles.rightCard : styles.leftCard} />
+                <div className={expanded ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
                 <div
-                    className={isRtl ? styles.rightButton : styles.leftButton}
+                    className={expanded ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
                     onClick={onPrevStep}
                 >
                     <img
@@ -141,13 +168,16 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
 );
 
 NextPrevButtons.propTypes = {
+    expanded: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool,
     onNextStep: PropTypes.func,
     onPrevStep: PropTypes.func
 };
 CardHeader.propTypes = {
+    expanded: PropTypes.bool.isRequired,
     onCloseCards: PropTypes.func.isRequired,
     onShowAll: PropTypes.func.isRequired,
+    onShrinkExpandCards: PropTypes.func.isRequired,
     step: PropTypes.number,
     totalSteps: PropTypes.number
 };
@@ -219,78 +249,103 @@ const Cards = props => {
         locale,
         onActivateDeckFactory,
         onCloseCards,
+        onShrinkExpandCards,
         onDrag,
         onStartDrag,
         onEndDrag,
         onShowAll,
         onNextStep,
         onPrevStep,
         step,
+        expanded,
         ...posProps
     } = props;
     let {x, y} = posProps;
 
     if (activeDeckId === null) return;
 
+    // Tutorial cards need to calculate their own dragging bounds
+    // to allow for dragging the cards off the left, right and bottom
+    // edges of the workspace.
+    const cardHorizontalDragOffset = 400; // ~80% of card width
+    const cardVerticalDragOffset = expanded ? 257 : 0; // ~80% of card height, if expanded
+    const menuBarHeight = 48; // TODO: get pre-calculated from elsewhere?
+    const wideCardWidth = 500;
+
     if (x === 0 && y === 0) {
         // initialize positions
-        x = isRtl ? -292 : 292;
-        // The tallest cards are about 385px high, and the default position is pinned
+        x = isRtl ? (-190 - wideCardWidth - cardHorizontalDragOffset) : 292;
+        x += cardHorizontalDragOffset;
+        // The tallest cards are about 320px high, and the default position is pinned
         // to near the bottom of the blocks palette to allow room to work above.
-        const tallCardHeight = 385;
+        const tallCardHeight = 320;
         const bottomMargin = 60; // To avoid overlapping the backpack region
-        y = window.innerHeight - tallCardHeight - bottomMargin;
+        y = window.innerHeight - tallCardHeight - bottomMargin - menuBarHeight;
     }
 
     const steps = content[activeDeckId].steps;
 
     return (
-        <Draggable
-            bounds="parent"
-            position={{x: x, y: y}}
-            onDrag={onDrag}
-            onStart={onStartDrag}
-            onStop={onEndDrag}
+        // Custom overlay to act as the bounding parent for the draggable, using values from above
+        <div
+            className={styles.cardContainerOverlay}
+            style={{
+                width: `${window.innerWidth + (2 * cardHorizontalDragOffset)}px`,
+                height: `${window.innerHeight - menuBarHeight + cardVerticalDragOffset}px`,
+                top: `${menuBarHeight}px`,
+                left: `${-cardHorizontalDragOffset}px`
+            }}
         >
-            <div className={styles.cardContainer}>
-                <div className={styles.card}>
-                    <CardHeader
-                        step={step}
-                        totalSteps={steps.length}
-                        onCloseCards={onCloseCards}
-                        onShowAll={onShowAll}
-                    />
-                    <div className={styles.stepBody}>
-                        {steps[step].deckIds ? (
-                            <PreviewsStep
-                                content={content}
-                                deckIds={steps[step].deckIds}
-                                onActivateDeckFactory={onActivateDeckFactory}
-                                onShowAll={onShowAll}
-                            />
-                        ) : (
-                            steps[step].video ? (
-                                <VideoStep
-                                    dragging={dragging}
-                                    video={translateVideo(steps[step].video, locale)}
+            <Draggable
+                bounds="parent"
+                position={{x: x, y: y}}
+                onDrag={onDrag}
+                onStart={onStartDrag}
+                onStop={onEndDrag}
+            >
+                <div className={styles.cardContainer}>
+                    <div className={styles.card}>
+                        <CardHeader
+                            expanded={expanded}
+                            step={step}
+                            totalSteps={steps.length}
+                            onCloseCards={onCloseCards}
+                            onShowAll={onShowAll}
+                            onShrinkExpandCards={onShrinkExpandCards}
+                        />
+                        <div className={expanded ? styles.stepBody : styles.hidden}>
+                            {steps[step].deckIds ? (
+                                <PreviewsStep
+                                    content={content}
+                                    deckIds={steps[step].deckIds}
+                                    onActivateDeckFactory={onActivateDeckFactory}
+                                    onShowAll={onShowAll}
                                 />
                             ) : (
-                                <ImageStep
-                                    image={translateImage(steps[step].image, locale)}
-                                    title={steps[step].title}
-                                />
-                            )
-                        )}
-                        {steps[step].trackingPixel && steps[step].trackingPixel}
+                                steps[step].video ? (
+                                    <VideoStep
+                                        dragging={dragging}
+                                        video={translateVideo(steps[step].video, locale)}
+                                    />
+                                ) : (
+                                    <ImageStep
+                                        image={translateImage(steps[step].image, locale)}
+                                        title={steps[step].title}
+                                    />
+                                )
+                            )}
+                            {steps[step].trackingPixel && steps[step].trackingPixel}
+                        </div>
+                        <NextPrevButtons
+                            expanded={expanded}
+                            isRtl={isRtl}
+                            onNextStep={step < steps.length - 1 ? onNextStep : null}
+                            onPrevStep={step > 0 ? onPrevStep : null}
+                        />
                     </div>
-                    <NextPrevButtons
-                        isRtl={isRtl}
-                        onNextStep={step < steps.length - 1 ? onNextStep : null}
-                        onPrevStep={step > 0 ? onPrevStep : null}
-                    />
                 </div>
-            </div>
-        </Draggable>
+            </Draggable>
+        </div>
     );
 };
 
@@ -309,6 +364,7 @@ Cards.propTypes = {
         })
     }),
     dragging: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool.isRequired,
     locale: PropTypes.string.isRequired,
     onActivateDeckFactory: PropTypes.func.isRequired,
@@ -318,6 +374,7 @@ Cards.propTypes = {
     onNextStep: PropTypes.func.isRequired,
     onPrevStep: PropTypes.func.isRequired,
     onShowAll: PropTypes.func,
+    onShrinkExpandCards: PropTypes.func.isRequired,
     onStartDrag: PropTypes.func,
     step: PropTypes.number.isRequired,
     x: PropTypes.number,