From bb00935e14169e936212d08be5ae3b4b6f26dc32 Mon Sep 17 00:00:00 2001 From: Andy O'Neill Date: Fri, 14 Apr 2023 16:47:15 -0400 Subject: [PATCH] feat: update button styles --- .../direction-picker/direction-picker.css | 30 +------ .../direction-picker/direction-picker.jsx | 63 ++++++-------- .../direction-picker/icon--left-right.svg | 10 +-- src/components/sound-editor/sound-editor.css | 9 +- src/components/sprite-info/sprite-info.css | 64 -------------- src/components/sprite-info/sprite-info.jsx | 70 ++++++--------- src/components/stage-header/stage-header.css | 32 ++----- src/components/stage-header/stage-header.jsx | 82 ++++++++---------- .../toggle-buttons/toggle-buttons.css | 85 +++++++++++++++++++ .../toggle-buttons/toggle-buttons.jsx | 52 ++++++++++++ src/containers/sprite-info.jsx | 18 +--- test/integration/stage-size.test.js | 4 +- 12 files changed, 245 insertions(+), 274 deletions(-) create mode 100644 src/components/toggle-buttons/toggle-buttons.css create mode 100644 src/components/toggle-buttons/toggle-buttons.jsx diff --git a/src/components/direction-picker/direction-picker.css b/src/components/direction-picker/direction-picker.css index 501ff0217..e39721317 100644 --- a/src/components/direction-picker/direction-picker.css +++ b/src/components/direction-picker/direction-picker.css @@ -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; } diff --git a/src/components/direction-picker/direction-picker.jsx b/src/components/direction-picker/direction-picker.jsx index 84a15db7a..cf29c416e 100644 --- a/src/components/direction-picker/direction-picker.jsx +++ b/src/components/direction-picker/direction-picker.jsx @@ -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} /> -
- - - -
+ } isOpen={props.popoverOpen} diff --git a/src/components/direction-picker/icon--left-right.svg b/src/components/direction-picker/icon--left-right.svg index 386c3cce0..4d2cacb51 100644 --- a/src/components/direction-picker/icon--left-right.svg +++ b/src/components/direction-picker/icon--left-right.svg @@ -4,11 +4,9 @@ left-right-active Created with Sketch. - - - - - - + + + + diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index be11787a9..6e18d811c 100644 --- a/src/components/sound-editor/sound-editor.css +++ b/src/components/sound-editor/sound-editor.css @@ -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%; diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css index 4ad343569..876acfd25 100644 --- a/src/components/sprite-info/sprite-info.css +++ b/src/components/sprite-info/sprite-info.css @@ -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%; diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 09c94d016..6f0fcd1db 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -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 } -
-
- -
-
- -
-
+
) : ( - +
+ +
); header = ( @@ -110,40 +112,24 @@ const StageHeaderComponent = function (props) { [] ) : (
-
- -
-
- -
+
); header = ( diff --git a/src/components/toggle-buttons/toggle-buttons.css b/src/components/toggle-buttons/toggle-buttons.css new file mode 100644 index 000000000..c1abacafd --- /dev/null +++ b/src/components/toggle-buttons/toggle-buttons.css @@ -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; +} diff --git a/src/components/toggle-buttons/toggle-buttons.jsx b/src/components/toggle-buttons/toggle-buttons.jsx new file mode 100644 index 000000000..f8d1aabcc --- /dev/null +++ b/src/components/toggle-buttons/toggle-buttons.jsx @@ -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}) => ( +
+ {buttons.map((button, index) => ( + + ))} +
+); + +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; diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx index fe0a7267e..2499ed104 100644 --- a/src/containers/sprite-info.jsx +++ b/src/containers/sprite-info.jsx @@ -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 ( ); } diff --git a/test/integration/stage-size.test.js b/test/integration/stage-size.test.js index 72de9c5bb..ca2359050 100644 --- a/test/integration/stage-size.test.js +++ b/test/integration/stage-size.test.js @@ -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([]);