ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reword 'toggle' to 'shrinkExpand' throughout code.

Browse Source
This commit is contained in:
Evelyn Eastmond committed 2019-05-07 11:42:40 -04:00
1 parent bfe2877d0b
commit 4ec8ac16a8
5 files changed
+36 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/cards/card.css
+2 -2
View File
@@ -114,7 +114,7 @@
flex-direction: row;
}
.toggle-button {
.shrink-expand-button {
cursor: pointer;
color: white;
display: flex;
@@ -124,7 +124,7 @@
padding: 0.75rem;
}
.toggle-button:hover, .all-button:hover {
.shrink-expand-button:hover, .all-button:hover {
background-color: $ui-black-transparent;
}
src/components/cards/cards.jsx
+23 -23
View File
@@ -18,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, onToggleCards, onShowAll, totalSteps, step, toggle}) => (
<div className={toggle ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (
<div className={expanded ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
<div
className={styles.allButton}
onClick={onShowAll}
@@ -47,14 +47,14 @@ const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step, t
) : null}
<div className={styles.headerButtonsRight}>
<div
className={styles.toggleButton}
onClick={onToggleCards}
className={styles.shrinkExpandButton}
onClick={onShrinkExpandCards}
>
<img
draggable={false}
src={toggle ? shrinkIcon : expandIcon}
src={expanded ? shrinkIcon : expandIcon}
/>
{toggle ? 'Shrink' : 'Expand'}
{expanded ? 'Shrink' : 'Expand'}
</div>
<div
className={styles.removeButton}
@@ -123,13 +123,13 @@ ImageStep.propTypes = {
title: PropTypes.node.isRequired
};
const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
<Fragment>
{onNextStep ? (
<div>
<div className={toggle ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
<div className={expanded ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
<div
className={toggle ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
className={expanded ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
onClick={onNextStep}
>
<img
@@ -141,9 +141,9 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
) : null}
{onPrevStep ? (
<div>
<div className={toggle ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
<div className={expanded ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
<div
className={toggle ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
className={expanded ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
onClick={onPrevStep}
>
<img
@@ -157,17 +157,17 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
);
NextPrevButtons.propTypes = {
expanded: PropTypes.bool.isRequired,
isRtl: PropTypes.bool,
onNextStep: PropTypes.func,
onPrevStep: PropTypes.func,
toggle: PropTypes.bool.isRequired
onPrevStep: PropTypes.func
};
CardHeader.propTypes = {
expanded: PropTypes.bool.isRequired,
onCloseCards: PropTypes.func.isRequired,
onShowAll: PropTypes.func.isRequired,
onToggleCards: PropTypes.func.isRequired,
onShrinkExpandCards: PropTypes.func.isRequired,
step: PropTypes.number,
toggle: PropTypes.bool.isRequired,
totalSteps: PropTypes.number
};
@@ -238,7 +238,7 @@ const Cards = props => {
locale,
onActivateDeckFactory,
onCloseCards,
onToggleCards,
onShrinkExpandCards,
onDrag,
onStartDrag,
onEndDrag,
@@ -246,7 +246,7 @@ const Cards = props => {
onNextStep,
onPrevStep,
step,
toggle,
expanded,
...posProps
} = props;
let {x, y} = posProps;
@@ -276,14 +276,14 @@ const Cards = props => {
<div className={styles.cardContainer}>
<div className={styles.card}>
<CardHeader
expanded={expanded}
step={step}
toggle={toggle}
totalSteps={steps.length}
onCloseCards={onCloseCards}
onShowAll={onShowAll}
onToggleCards={onToggleCards}
onShrinkExpandCards={onShrinkExpandCards}
/>
<div className={toggle ? styles.stepBody : styles.hidden}>
<div className={expanded ? styles.stepBody : styles.hidden}>
{steps[step].deckIds ? (
<PreviewsStep
content={content}
@@ -307,8 +307,8 @@ const Cards = props => {
{steps[step].trackingPixel && steps[step].trackingPixel}
</div>
<NextPrevButtons
expanded={expanded}
isRtl={isRtl}
toggle={toggle}
onNextStep={step < steps.length - 1 ? onNextStep : null}
onPrevStep={step > 0 ? onPrevStep : null}
/>
@@ -333,6 +333,7 @@ Cards.propTypes = {
})
}),
dragging: PropTypes.bool.isRequired,
expanded: PropTypes.bool.isRequired,
isRtl: PropTypes.bool.isRequired,
locale: PropTypes.string.isRequired,
onActivateDeckFactory: PropTypes.func.isRequired,
@@ -342,10 +343,9 @@ Cards.propTypes = {
onNextStep: PropTypes.func.isRequired,
onPrevStep: PropTypes.func.isRequired,
onShowAll: PropTypes.func,
onShrinkExpandCards: PropTypes.func.isRequired,
onStartDrag: PropTypes.func,
onToggleCards: PropTypes.func.isRequired,
step: PropTypes.number.isRequired,
toggle: PropTypes.bool.isRequired,
x: PropTypes.number,
y: PropTypes.number
};
src/containers/cards.jsx
+3 -3
View File
@@ -5,7 +5,7 @@ import React from 'react';
import {
activateDeck,
closeCards,
toggleCards,
shrinkExpandCards,
nextStep,
prevStep,
dragCard,
@@ -47,7 +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,
expanded: state.scratchGui.cards.expanded,
x: state.scratchGui.cards.x,
y: state.scratchGui.cards.y,
isRtl: state.locales.isRtl,
@@ -62,7 +62,7 @@ const mapDispatchToProps = dispatch => ({
dispatch(closeCards());
},
onCloseCards: () => dispatch(closeCards()),
onToggleCards: () => dispatch(toggleCards()),
onShrinkExpandCards: () => dispatch(shrinkExpandCards()),
onNextStep: () => dispatch(nextStep()),
onPrevStep: () => dispatch(prevStep()),
onDrag: (e_, data) => dispatch(dragCard(data.x, data.y)),
src/reducers/cards.js
+7 -7
View File
@@ -3,7 +3,7 @@ import analytics from '../lib/analytics';
import decks from '../lib/libraries/decks/index.jsx';
const CLOSE_CARDS = 'scratch-gui/cards/CLOSE_CARDS';
const TOGGLE_CARDS = 'scratch-gui/cards/TOGGLE_CARDS';
const SHRINK_EXPAND_CARDS = 'scratch-gui/cards/SHRINK_EXPAND_CARDS';
const VIEW_CARDS = 'scratch-gui/cards/VIEW_CARDS';
const ACTIVATE_DECK = 'scratch-gui/cards/ACTIVATE_DECK';
const NEXT_STEP = 'scratch-gui/cards/NEXT_STEP';
@@ -19,7 +19,7 @@ const initialState = {
step: 0,
x: 0,
y: 0,
toggle: true,
expanded: true,
dragging: false
};
@@ -30,9 +30,9 @@ const reducer = function (state, action) {
return Object.assign({}, state, {
visible: false
});
case TOGGLE_CARDS:
case SHRINK_EXPAND_CARDS:
return Object.assign({}, state, {
toggle: !state.toggle // TODO: make clearer
expanded: !state.expanded
});
case VIEW_CARDS:
return Object.assign({}, state, {
@@ -98,8 +98,8 @@ const closeCards = function () {
return {type: CLOSE_CARDS};
};
const toggleCards = function () {
return {type: TOGGLE_CARDS};
const shrinkExpandCards = function () {
return {type: SHRINK_EXPAND_CARDS};
};
const nextStep = function () {
@@ -128,7 +128,7 @@ export {
activateDeck,
viewCards,
closeCards,
toggleCards,
shrinkExpandCards,
nextStep,
prevStep,
dragCard,
src/reducers/gui.js
+1 -1
View File
@@ -107,7 +107,7 @@ const initTutorialCard = function (currentState, deckId) {
visible: true,
content: decks,
activeDeckId: deckId,
toggle: true,
expanded: true,
step: 0,
x: 0,
y: 0,