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

feat: update button styles

Browse Source
This commit is contained in:
Andy O'Neill committed 2023-04-14 16:47:15 -04:00
1 parent 8c4526d5f1
commit bb00935e14
12 files changed
+245 -274
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/direction-picker/direction-picker.css
+1 -29
View File
@@ -1,32 +1,4 @@
@import "../../css/colors.css";
.button-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.icon-button {
margin: 0.25rem;
border: none;
background: none;
outline: none;
cursor: pointer;
user-select: none;
}
.icon-button:active > img {
width: 20px;
height: 20px;
transform: scale(1.15);
}
.icon-button > img {
transition: transform 0.1s;
filter: grayscale(100%);
}
.icon-button.active > img {
filter: none;
margin-bottom: 1rem;
}
src/components/direction-picker/direction-picker.jsx
+24 -39
View File
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Popover from 'react-popover';
import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'react-intl';
@@ -8,6 +7,7 @@ import Label from '../forms/label.jsx';
import Input from '../forms/input.jsx';
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
import Dial from './dial.jsx';
import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
import styles from './direction-picker.css';
@@ -62,44 +62,29 @@ const DirectionPicker = props => (
direction={props.direction}
onChange={props.onChangeDirection}
/>
<div className={styles.buttonRow}>
<button
className={classNames(styles.iconButton, {
[styles.active]: props.rotationStyle === RotationStyles.ALL_AROUND
})}
title={props.intl.formatMessage(messages.allAround)}
onClick={props.onClickAllAround}
>
<img
draggable={false}
src={allAroundIcon}
/>
</button>
<button
className={classNames(styles.iconButton, {
[styles.active]: props.rotationStyle === RotationStyles.LEFT_RIGHT
})}
title={props.intl.formatMessage(messages.leftRight)}
onClick={props.onClickLeftRight}
>
<img
draggable={false}
src={leftRightIcon}
/>
</button>
<button
className={classNames(styles.iconButton, {
[styles.active]: props.rotationStyle === RotationStyles.DONT_ROTATE
})}
title={props.intl.formatMessage(messages.dontRotate)}
onClick={props.onClickDontRotate}
>
<img
draggable={false}
src={dontRotateIcon}
/>
</button>
</div>
<ToggleButtons
className={styles.buttonRow}
buttons={[
{
handleClick: props.onClickAllAround,
icon: allAroundIcon,
isSelected: props.rotationStyle === RotationStyles.ALL_AROUND,
title: props.intl.formatMessage(messages.allAround)
},
{
handleClick: props.onClickLeftRight,
icon: leftRightIcon,
isSelected: props.rotationStyle === RotationStyles.LEFT_RIGHT,
title: props.intl.formatMessage(messages.leftRight)
},
{
handleClick: props.onClickDontRotate,
icon: dontRotateIcon,
isSelected: props.rotationStyle === RotationStyles.DONT_ROTATE,
title: props.intl.formatMessage(messages.dontRotate)
}
]}
/>
</div>
}
isOpen={props.popoverOpen}
src/components/direction-picker/icon--left-right.svg
+4 -6
View File
@@ -4,11 +4,9 @@
<title>left-right-active</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="left-right-active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Flip-Left-Right" transform="translate(2.000000, 4.000000)">
<path d="M4.66453333,2.41690667 L4.66453333,9.60624 C4.66453333,10.08224 4.08853333,10.3209067 3.7512,9.98357333 L0.156533333,6.38890667 C-0.0514666667,6.17957333 -0.0514666667,5.84090667 0.156533333,5.63290667 L3.7512,2.03824 C4.08853333,1.70090667 4.66453333,1.93957333 4.66453333,2.41690667" id="Fill-1" fill="#774DCB" transform="translate(2.332533, 6.010929) scale(-1, 1) translate(-2.332533, -6.010929) "></path>
<path d="M7.87546667,11.7567733 C7.70213333,11.7567733 7.54213333,11.6901067 7.4088,11.5581067 C7.35546667,11.5047733 7.30213333,11.42344 7.26213333,11.34344 C7.2368,11.2647733 7.2088,11.18344 7.2088,11.0901067 C7.2088,11.0101067 7.2368,10.9167733 7.26213333,10.8381067 C7.30213333,10.7567733 7.35546667,10.6767733 7.4088,10.62344 C7.59546667,10.4381067 7.89013333,10.3701067 8.14213333,10.4767733 C8.22346667,10.5167733 8.29013333,10.5581067 8.35546667,10.62344 C8.4088,10.6767733 8.46213333,10.7567733 8.50346667,10.8381067 C8.5288,10.9167733 8.5568,11.0101067 8.5568,11.0901067 C8.5568,11.18344 8.5288,11.2647733 8.50346667,11.34344 C8.46213333,11.42344 8.42213333,11.5047733 8.35546667,11.5581067 C8.2368,11.6901067 8.06346667,11.7567733 7.87546667,11.7567733 Z M7.22306667,3.27757333 C7.22306667,2.90424 7.5164,2.61090667 7.88973333,2.61090667 C8.24973333,2.61090667 8.5564,2.90424 8.5564,3.27757333 C8.5564,3.63757333 8.24973333,3.94424 7.88973333,3.94424 C7.5164,3.94424 7.22306667,3.63757333 7.22306667,3.27757333 Z M7.22306667,5.87757333 C7.22306667,5.50424 7.5164,5.21090667 7.88973333,5.21090667 C8.24973333,5.21090667 8.5564,5.50424 8.5564,5.87757333 C8.5564,6.24957333 8.24973333,6.54424 7.88973333,6.54424 C7.5164,6.54424 7.22306667,6.24957333 7.22306667,5.87757333 Z M7.22306667,8.49090667 C7.22306667,8.11757333 7.5164,7.82424 7.88973333,7.82424 C8.24973333,7.82424 8.5564,8.11757333 8.5564,8.49090667 C8.5564,8.85090667 8.24973333,9.15757333 7.88973333,9.15757333 C7.5164,9.15757333 7.22306667,8.85090667 7.22306667,8.49090667 Z M7.87546667,1.33104 C7.79546667,1.33104 7.70213333,1.31770667 7.62346667,1.29104 C7.54213333,1.24970667 7.47546667,1.19637333 7.4088,1.14304 C7.35546667,1.07770667 7.30213333,0.997706667 7.26213333,0.916373333 C7.2368,0.837706667 7.2088,0.756373333 7.2088,0.664373333 C7.2088,0.58304 7.2368,0.49104 7.26213333,0.41104 C7.30213333,0.33104 7.35546667,0.249706667 7.4088,0.196373333 C7.59546667,0.01104 7.89013333,-0.0556266667 8.14213333,0.05104 C8.22346667,0.0897066667 8.29013333,0.13104 8.35546667,0.196373333 C8.47546667,0.317706667 8.5568,0.49104 8.5568,0.664373333 C8.5568,0.756373333 8.5288,0.837706667 8.50346667,0.916373333 C8.46213333,0.997706667 8.42213333,1.07770667 8.35546667,1.14304 C8.22346667,1.26437333 8.06346667,1.33104 7.87546667,1.33104 Z" id="Combined-Shape" fill-opacity="0.25" fill="#774DCB"></path>
<path d="M11.102,9.60570667 L11.102,2.41637333 C11.102,1.93904 11.6793333,1.70037333 12.0166667,2.03770667 L15.61,5.63370667 C15.8193333,5.84170667 15.8193333,6.18037333 15.61,6.38970667 L12.0166667,9.98304 C11.6793333,10.3203733 11.102,10.0817067 11.102,9.60570667" id="Fill-3" fill="#774DCB" transform="translate(13.434500, 6.010396) scale(-1, 1) translate(-13.434500, -6.010396) "></path>
</g>
<g transform="translate(2.000000, 3.000000)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 10.3925V3.20313C11 2.7258 11.5773 2.48713 11.9147 2.82447L15.508 6.42047C15.7173 6.62847 15.7173 6.96713 15.508 7.17647L11.9147 10.7698C11.5773 11.1071 11 10.8685 11 10.3925" fill="#774DCB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.66467 1.95746C7.74333 1.98412 7.83667 1.99746 7.91667 1.99746C8.10467 1.99746 8.26467 1.93079 8.39667 1.80946C8.46208 1.74535 8.50181 1.66714 8.54233 1.58739L8.54467 1.58279C8.54604 1.57852 8.54742 1.57424 8.54881 1.56996C8.57296 1.49526 8.598 1.4178 8.598 1.33079C8.598 1.15746 8.51667 0.984122 8.39667 0.862789C8.33133 0.797456 8.26467 0.756122 8.18333 0.717456C7.93133 0.610789 7.63667 0.677456 7.45 0.862789C7.39667 0.916122 7.34333 0.997456 7.30333 1.07746C7.278 1.15746 7.25 1.24946 7.25 1.33079C7.25 1.4178 7.27504 1.49526 7.29919 1.56996C7.30058 1.57424 7.30196 1.57852 7.30333 1.58279C7.34333 1.66412 7.39667 1.74412 7.45 1.80946L7.45 1.80946C7.51667 1.86279 7.58333 1.91612 7.66467 1.95746ZM7.26427 3.94399C7.26427 3.57066 7.5576 3.27732 7.93093 3.27732C8.29093 3.27732 8.5976 3.57066 8.5976 3.94399C8.5976 4.30399 8.29093 4.61066 7.93093 4.61066C7.5576 4.61066 7.26427 4.30399 7.26427 3.94399ZM7.91667 12.4232C7.74333 12.4232 7.58333 12.3565 7.45 12.2245C7.39667 12.1712 7.34333 12.0899 7.30333 12.0099L7.29924 11.9972C7.27508 11.9224 7.25 11.8449 7.25 11.7565C7.25 11.6765 7.278 11.5832 7.30333 11.5045C7.34333 11.4232 7.39667 11.3432 7.45 11.2899C7.63667 11.1045 7.93133 11.0365 8.18333 11.1432C8.26467 11.1832 8.33133 11.2245 8.39667 11.2899C8.45 11.3432 8.50333 11.4232 8.54467 11.5045C8.57 11.5832 8.598 11.6765 8.598 11.7565C8.598 11.8449 8.57292 11.9224 8.54876 11.9972L8.54467 12.0099L8.53886 12.0211C8.49953 12.0974 8.46021 12.1737 8.39667 12.2245C8.278 12.3565 8.10467 12.4232 7.91667 12.4232ZM7.93093 5.87732C7.5576 5.87732 7.26427 6.17066 7.26427 6.54399C7.26427 6.91599 7.5576 7.21066 7.93093 7.21066C8.29093 7.21066 8.5976 6.91599 8.5976 6.54399C8.5976 6.17066 8.29093 5.87732 7.93093 5.87732ZM7.26427 9.15732C7.26427 8.78399 7.5576 8.49066 7.93093 8.49066C8.29093 8.49066 8.5976 8.78399 8.5976 9.15732C8.5976 9.51732 8.29093 9.82399 7.93093 9.82399C7.5576 9.82399 7.26427 9.51732 7.26427 9.15732Z" fill="#774DCB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.164 3.20313V10.3925C5.164 10.8685 4.588 11.1071 4.25067 10.7698L0.656 7.17513C0.448 6.9658 0.448 6.62713 0.656 6.41913L4.25067 2.82447C4.588 2.48713 5.164 2.7258 5.164 3.20313" fill="#774DCB"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

src/components/sound-editor/sound-editor.css
+8 -1
View File
@@ -79,11 +79,18 @@ $border-radius: 0.25rem;
border: 1px solid $ui-black-transparent;
cursor: pointer;
font-size: 0.85rem;
transition: 0.2s;
user-select: none;
margin: 0px;
}
.button:active {
background: $looks-transparent;
}
.button:focus {
border-color: $looks-tertiary;
}
.button > img {
flex-grow: 1;
max-width: 100%;
src/components/sprite-info/sprite-info.css
-64
View File
@@ -47,70 +47,6 @@
user-select: none;
}
.icon {
width: 100%;
height: 100%;
}
/* @todo: refactor radio divs to input */
.radio-wrapper {
white-space: nowrap; /* make sure visibilty buttons don't wrap */
}
.radio {
filter: saturate(0);
cursor: pointer;
}
.radio.is-active {
filter: none;
}
.radio.is-disabled {
cursor: default;
}
.radio-first {
border: 1px solid $ui-black-transparent;
}
[dir="ltr"] .radio-first {
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
[dir="rtl"] .radio-first {
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
.radio-first:focus {
border-color: $looks-tertiary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
.radio-last {
border-bottom: 1px solid $ui-black-transparent;
border-top: 1px solid $ui-black-transparent;
}
[dir="ltr"] .radio-last {
border-right: 1px solid $ui-black-transparent;
border-left: 1px solid $ui-black-transparent;
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
[dir="rtl"] .radio-last {
border-left: 1px solid $ui-black-transparent;
border-right: 1px solid $ui-black-transparent;
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
.radio-last:focus {
border-color: $looks-tertiary;
box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
.icon {
width: 100%;
height: 100%;
src/components/sprite-info/sprite-info.jsx
+28 -42
View File
@@ -19,6 +19,7 @@ import xIcon from './icon--x.svg';
import yIcon from './icon--y.svg';
import showIcon from './icon--show.svg';
import hideIcon from './icon--hide.svg';
import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
const BufferedInput = BufferedInputHOC(Input);
@@ -27,6 +28,16 @@ const messages = defineMessages({
id: 'gui.SpriteInfo.spritePlaceholder',
defaultMessage: 'Name',
description: 'Placeholder text for sprite name'
},
showSpriteAction: {
id: 'gui.SpriteInfo.showSpriteAction',
defaultMessage: 'Show sprite',
description: 'Tooltip for show sprite button'
},
hideSpriteAction: {
id: 'gui.SpriteInfo.hideSpriteAction',
defaultMessage: 'Hide sprite',
description: 'Tooltip for hide sprite button'
}
});
@@ -185,46 +196,23 @@ class SpriteInfo extends React.Component {
/> :
null
}
<div className={styles.radioWrapper}>
<div
className={classNames(
styles.radio,
styles.radioFirst,
styles.iconWrapper,
{
[styles.isActive]: this.props.visible && !this.props.disabled,
[styles.isDisabled]: this.props.disabled
}
)}
tabIndex="0"
onClick={this.props.onClickVisible}
onKeyPress={this.props.onPressVisible}
>
<img
className={styles.icon}
src={showIcon}
/>
</div>
<div
className={classNames(
styles.radio,
styles.radioLast,
styles.iconWrapper,
{
[styles.isActive]: !this.props.visible && !this.props.disabled,
[styles.isDisabled]: this.props.disabled
}
)}
tabIndex="0"
onClick={this.props.onClickNotVisible}
onKeyPress={this.props.onPressNotVisible}
>
<img
className={styles.icon}
src={hideIcon}
/>
</div>
</div>
<ToggleButtons
buttons={[
{
handleClick: this.props.onClickVisible,
icon: showIcon,
isSelected: this.props.visible && !this.props.disabled,
title: this.props.intl.formatMessage(messages.showSpriteAction)
},
{
handleClick: this.props.onClickNotVisible,
icon: hideIcon,
isSelected: !this.props.visible && !this.props.disabled,
title: this.props.intl.formatMessage(messages.hideSpriteAction)
}
]}
disabled={this.props.disabled}
/>
</div>
<div className={classNames(styles.group, styles.largerInput)}>
<Label
@@ -275,8 +263,6 @@ SpriteInfo.propTypes = {
onChangeY: PropTypes.func,
onClickNotVisible: PropTypes.func,
onClickVisible: PropTypes.func,
onPressNotVisible: PropTypes.func,
onPressVisible: PropTypes.func,
rotationStyle: PropTypes.string,
size: PropTypes.oneOfType([
PropTypes.string,
src/components/stage-header/stage-header.css
+6 -26
View File
@@ -40,6 +40,12 @@
display: flex;
}
.stage-size-row > *, .unselect-wrapper {
/* Use a white background so semi-transparent selection states look correct */
background-color: $ui-white;
border-radius: $form-radius;
}
[dir="ltr"] .stage-size-toggle-group {
margin-right: .2rem;
}
@@ -68,29 +74,3 @@
[dir="rtl"] .stage-button-icon {
transform: scaleX(-1);
}
[dir="ltr"] .stage-button-first {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[dir="ltr"] .stage-button-last {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[dir="rtl"] .stage-button-first {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[dir="rtl"] .stage-button-last {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.stage-button-toggled-off {
filter: saturate(0);
}
src/components/stage-header/stage-header.jsx
+34 -48
View File
@@ -1,4 +1,3 @@
import classNames from 'classnames';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
@@ -18,6 +17,7 @@ import unFullScreenIcon from './icon--unfullscreen.svg';
import scratchLogo from '../menu-bar/scratch-logo.svg';
import styles from './stage-header.css';
import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
const messages = defineMessages({
largeStageSizeMessage: {
@@ -79,19 +79,21 @@ const StageHeaderComponent = function (props) {
</a>
</div>
) : (
<Button
className={styles.stageButton}
onClick={onSetStageUnFull}
onKeyPress={onKeyPress}
>
<img
alt={props.intl.formatMessage(messages.unFullStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={unFullScreenIcon}
title={props.intl.formatMessage(messages.fullscreenControl)}
/>
</Button>
<div className={styles.unselectWrapper}>
<Button
className={styles.stageButton}
onClick={onSetStageUnFull}
onKeyPress={onKeyPress}
>
<img
alt={props.intl.formatMessage(messages.unFullStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={unFullScreenIcon}
title={props.intl.formatMessage(messages.fullscreenControl)}
/>
</Button>
</div>
);
header = (
<Box className={styles.stageHeaderWrapperOverlay}>
@@ -110,40 +112,24 @@ const StageHeaderComponent = function (props) {
[]
) : (
<div className={styles.stageSizeToggleGroup}>
<div>
<Button
className={classNames(
styles.stageButton,
styles.stageButtonFirst,
(stageSizeMode === STAGE_SIZE_MODES.small) ? null : styles.stageButtonToggledOff
)}
onClick={onSetStageSmall}
>
<img
alt={props.intl.formatMessage(messages.smallStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={smallStageIcon}
/>
</Button>
</div>
<div>
<Button
className={classNames(
styles.stageButton,
styles.stageButtonLast,
(stageSizeMode === STAGE_SIZE_MODES.large) ? null : styles.stageButtonToggledOff
)}
onClick={onSetStageLarge}
>
<img
alt={props.intl.formatMessage(messages.largeStageSizeMessage)}
className={styles.stageButtonIcon}
draggable={false}
src={largeStageIcon}
/>
</Button>
</div>
<ToggleButtons
buttons={[
{
handleClick: onSetStageSmall,
icon: smallStageIcon,
iconClassName: styles.stageButtonIcon,
isSelected: stageSizeMode === STAGE_SIZE_MODES.small,
title: props.intl.formatMessage(messages.smallStageSizeMessage)
},
{
handleClick: onSetStageLarge,
icon: largeStageIcon,
iconClassName: styles.stageButtonIcon,
isSelected: stageSizeMode === STAGE_SIZE_MODES.large,
title: props.intl.formatMessage(messages.largeStageSizeMessage)
}
]}
/>
</div>
);
header = (
src/components/toggle-buttons/toggle-buttons.css
+85
View File
@@ -0,0 +1,85 @@
@import "../../css/units.css";
@import "../../css/colors.css";
.row {
display: flex;
flex-direction: row;
}
.button {
margin: 0;
border: 1px solid $ui-black-transparent;
background: none;
outline: none;
cursor: pointer;
user-select: none;
position: relative;
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
}
.button > img {
display: block;
transition: transform 0.1s;
filter: grayscale(100%) opacity(.5);
}
.button:not(:last-child) {
border-right: none;
}
[dir="rtl"] .button:not(:last-child) {
border-left: none;
border-right: 1px solid $ui-black-transparent;
}
.button:focus::before {
content: "";
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid $looks-tertiary;
}
/* round corners for first and last buttons */
.button:first-child,
[dir="rtl"] .button:last-child,
.button:first-child:focus::before,
[dir="rtl"] .button:last-child:focus::before {
border-radius: $form-radius 0 0 $form-radius;
}
.button:last-child,
[dir="rtl"] .button:first-child,
.button:last-child:focus::before,
[dir="rtl"] .button:first-child:focus::before {
border-radius: 0 $form-radius $form-radius 0;
}
/* selected button styling */
.button[aria-pressed='true'] {
background-color: $looks-light-transparent;
}
.button[aria-pressed='true'] > img {
filter: none;
}
/* pressed button styling */
.button:active {
background-color: $looks-transparent;
}
/* disabled styling */
.disabled .button {
cursor: default;
}
src/components/toggle-buttons/toggle-buttons.jsx
+52
View File
@@ -0,0 +1,52 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './toggle-buttons.css';
const ToggleButtons = ({buttons, className, disabled}) => (
<div
className={classNames(
className,
styles.row,
{
[styles.disabled]: disabled
}
)}
>
{buttons.map((button, index) => (
<button
key={`toggle-${index}`}
className={styles.button}
title={button.title}
aria-label={button.title}
aria-pressed={button.isSelected}
onClick={button.handleClick}
>
<img
src={button.icon}
aria-hidden="true"
className={button.iconClassName}
/>
</button>
))}
</div>
);
ToggleButtons.propTypes = {
buttons: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
handleClick: PropTypes.func.isRequired,
icon: PropTypes.string.isRequired,
iconClassName: PropTypes.string,
isSelected: PropTypes.bool
})),
className: PropTypes.string,
disabled: PropTypes.bool
};
ToggleButtons.defaultProps = {
disabled: false
};
export default ToggleButtons;
src/containers/sprite-info.jsx
+1 -17
View File
@@ -9,9 +9,7 @@ class SpriteInfo extends React.Component {
super(props);
bindAll(this, [
'handleClickVisible',
'handleClickNotVisible',
'handlePressVisible',
'handlePressNotVisible'
'handleClickNotVisible'
]);
}
handleClickVisible (e) {
@@ -22,26 +20,12 @@ class SpriteInfo extends React.Component {
e.preventDefault();
this.props.onChangeVisibility(false);
}
handlePressVisible (e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this.props.onChangeVisibility(true);
}
}
handlePressNotVisible (e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this.props.onChangeVisibility(false);
}
}
render () {
return (
<SpriteInfoComponent
{...this.props}
onClickNotVisible={this.handleClickNotVisible}
onClickVisible={this.handleClickVisible}
onPressNotVisible={this.handlePressNotVisible}
onPressVisible={this.handlePressVisible}
/>
);
}
test/integration/stage-size.test.js
+2 -2
View File
@@ -35,10 +35,10 @@ describe('Loading scratch gui', () => {
await clickText('delete', scope.spriteTile);
// Go to small stage mode
await clickXpath('//img[@alt="Switch to small stage"]');
await clickXpath('//button[@title="Switch to small stage"]');
// Confirm app still working
await clickXpath('//img[@alt="Switch to large stage"]');
await clickXpath('//button[@title="Switch to large stage"]');
const logs = await getLogs();
await expect(logs).toEqual([]);