From 170705440a65543eeb468b890a7831575fcae3bf Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 10 Apr 2019 13:46:10 -0400
Subject: [PATCH] Adding toggle state to Cards. Using toggle state to set the
CSS state.
---
src/components/cards/card.css | 12 ++++++++++++
src/components/cards/cards.jsx | 19 ++++++++++++-------
src/containers/cards.jsx | 1 +
src/reducers/cards.js | 3 ++-
src/reducers/gui.js | 1 +
5 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 9589590d4..04e63a6a6 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -34,6 +34,10 @@
border-bottom-right-radius: 0.75rem;
}
+.right-card-hidden {
+ display: none;
+}
+
.left-card::after, .right-card::after {
content: "";
position: absolute;
@@ -62,6 +66,10 @@
transition: all 0.25s ease;
}
+.right-button-hidden {
+ display: none;
+}
+
.left-button:hover, .right-button:hover {
box-shadow: 0 0 0 6px $extensions-transparent;
transform: scale(1.125);
@@ -155,6 +163,10 @@
text-align: center;
}
+.step-body-hidden {
+ display: none;
+}
+
.step-video {
height: 256px;
}
diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx
index dec0605f1..ae67cc8fb 100644
--- a/src/components/cards/cards.jsx
+++ b/src/components/cards/cards.jsx
@@ -14,7 +14,7 @@ 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, onToggleCards, onShowAll, totalSteps, step}) => (
+const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step, toggle}) => (
<div className={styles.headerButtons}>
<div
className={styles.allButton}
@@ -46,7 +46,7 @@ const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step})
className={styles.shrinkButton}
onClick={onToggleCards}
>
- {'Shrink'}
+ {toggle ? 'Shrink' : 'Expand'}
</div>
<div
className={styles.removeButton}
@@ -115,13 +115,13 @@ ImageStep.propTypes = {
title: PropTypes.node.isRequired
};
-const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
+const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
<Fragment>
{onNextStep ? (
<div>
- <div className={isRtl ? styles.leftCard : styles.rightCard} />
+ <div className={isRtl ? styles.leftCard : (toggle ? styles.rightCard : styles.rightCardHidden)} />
<div
- className={isRtl ? styles.leftButton : styles.rightButton}
+ className={isRtl ? styles.leftButton : (toggle ? styles.rightButton : styles.rightButtonHidden)}
onClick={onNextStep}
>
<img
@@ -151,13 +151,15 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
NextPrevButtons.propTypes = {
isRtl: PropTypes.bool,
onNextStep: PropTypes.func,
- onPrevStep: PropTypes.func
+ onPrevStep: PropTypes.func,
+ toggle: PropTypes.bool.isRequired
};
CardHeader.propTypes = {
onCloseCards: PropTypes.func.isRequired,
onShowAll: PropTypes.func.isRequired,
onToggleCards: PropTypes.func.isRequired,
step: PropTypes.number,
+ toggle: PropTypes.bool.isRequired,
totalSteps: PropTypes.number
};
@@ -236,6 +238,7 @@ const Cards = props => {
onNextStep,
onPrevStep,
step,
+ toggle,
...posProps
} = props;
let {x, y} = posProps;
@@ -266,12 +269,13 @@ const Cards = props => {
<div className={styles.card}>
<CardHeader
step={step}
+ toggle={toggle}
totalSteps={steps.length}
onCloseCards={onCloseCards}
onShowAll={onShowAll}
onToggleCards={onToggleCards}
/>
- <div className={styles.stepBody}>
+ <div className={toggle ? styles.stepBody : styles.stepBodyHidden}>
{steps[step].deckIds ? (
<PreviewsStep
content={content}
@@ -332,6 +336,7 @@ Cards.propTypes = {
onStartDrag: PropTypes.func,
onToggleCards: PropTypes.func.isRequired,
step: PropTypes.number.isRequired,
+ toggle: PropTypes.bool.isRequired,
x: PropTypes.number,
y: PropTypes.number
};
diff --git a/src/containers/cards.jsx b/src/containers/cards.jsx
index 3fec66d30..7492b367a 100644
--- a/src/containers/cards.jsx
+++ b/src/containers/cards.jsx
@@ -47,6 +47,7 @@ const mapStateToProps = state => ({
content: state.scratchGui.cards.content,
activeDeckId: state.scratchGui.cards.activeDeckId,
step: state.scratchGui.cards.step,
+ toggle: state.scratchGui.cards.toggle,
x: state.scratchGui.cards.x,
y: state.scratchGui.cards.y,
isRtl: state.locales.isRtl,
diff --git a/src/reducers/cards.js b/src/reducers/cards.js
index abd018906..ac0a0dced 100644
--- a/src/reducers/cards.js
+++ b/src/reducers/cards.js
@@ -19,6 +19,7 @@ const initialState = {
step: 0,
x: 0,
y: 0,
+ toggle: true,
dragging: false
};
@@ -31,7 +32,7 @@ const reducer = function (state, action) {
});
case TOGGLE_CARDS:
return Object.assign({}, state, {
- visible: false
+ toggle: !state.toggle // TODO: make clearer
});
case VIEW_CARDS:
return Object.assign({}, state, {
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index 071f9d93b..fa8b04317 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -107,6 +107,7 @@ const initTutorialCard = function (currentState, deckId) {
visible: true,
content: decks,
activeDeckId: deckId,
+ toggle: true,
step: 0,
x: 0,
y: 0,
--
GitLab