scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Mark all clickable images as not draggable.

Browse source 
When using images as clickable elements (within buttons or alone) you
need to mark them as not draggable. They are draggable by default and
starting a drag prevents the onClick from being handled, messing up the
clickable behavior.
This commit is contained in:
Paul Kaplan 2018-02-09 09:32:00 -05:00
parent 13d0f13170
commit 2bae8ed71a
7 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/color-button/color-button.jsx
View file

@ -29,11 +29,13 @@ const ColorButtonComponent = props => (
{props.color === null ? (
<img
className={styles.swatchIcon}
draggable={false}
src={noFillIcon}
/>
) : ((props.color === MIXED ? (
<img
className={styles.swatchIcon}
draggable={false}
src={mixedFillIcon}
/>
) : null))}

10
src/components/color-picker/color-picker.jsx
View file

@ -114,7 +114,10 @@ class ColorPickerComponent extends React.Component {
})}
onClick={this.props.onTransparent}
>
<img src={noFillIcon} />
<img
draggable={false}
src={noFillIcon}
/>
</div>
</div>
<div className={styles.swatches}>
@ -125,7 +128,10 @@ class ColorPickerComponent extends React.Component {
})}
onClick={this.props.onActivateEyeDropper}
>
<img src={eyeDropperIcon} />
<img
draggable={false}
src={eyeDropperIcon}
/>
</div>
</div>
</div>

1
src/components/dropdown/dropdown.jsx
View file

@ -50,6 +50,7 @@ class Dropdown extends React.Component {
className={classNames(styles.dropdownIcon, {
[styles.modCaretUp]: this.state.isOpen
})}
draggable={false}
src={dropdownIcon}
/>
</div>

1
src/components/labeled-icon-button/labeled-icon-button.jsx
View file

@ -26,6 +26,7 @@ const LabeledIconButton = ({
<img
alt={imgAlt}
className={styles.editFieldIcon}
draggable={false}
src={imgSrc}
/>
<span className={styles.editFieldTitle}>{title}</span>

2
src/components/mode-tools/mode-tools.jsx
View file

@ -80,6 +80,7 @@ const ModeToolsComponent = props => {
<img
alt={props.intl.formatMessage(messages.brushSize)}
className={styles.modeToolsIcon}
draggable={false}
src={brushIcon}
/>
</div>
@ -101,6 +102,7 @@ const ModeToolsComponent = props => {
<img
alt={props.intl.formatMessage(messages.eraserSize)}
className={styles.modeToolsIcon}
draggable={false}
src={eraserIcon}
/>
</div>

9
src/components/paint-editor/paint-editor.jsx
View file

@ -160,6 +160,7 @@ const PaintEditorComponent = props => {
<img
alt={props.intl.formatMessage(messages.undo)}
className={styles.buttonGroupButtonIcon}
draggable={false}
src={undoIcon}
/>
</Button>
@ -178,6 +179,7 @@ const PaintEditorComponent = props => {
<img
alt={props.intl.formatMessage(messages.redo)}
className={styles.buttonGroupButtonIcon}
draggable={false}
src={redoIcon}
/>
</Button>
@ -258,6 +260,7 @@ const PaintEditorComponent = props => {
>
<img
className={styles.menuItemIcon}
draggable={false}
src={sendFrontIcon}
/>
<span>{props.intl.formatMessage(messages.front)}</span>
@ -271,6 +274,7 @@ const PaintEditorComponent = props => {
>
<img
className={styles.menuItemIcon}
draggable={false}
src={sendBackIcon}
/>
<span>{props.intl.formatMessage(messages.back)}</span>
@ -283,6 +287,7 @@ const PaintEditorComponent = props => {
>
<img
className={styles.menuItemIcon}
draggable={false}
src={rotationPointIcon}
/>
<span>{'Rotation Point'}</span>
@ -398,6 +403,7 @@ const PaintEditorComponent = props => {
<div className={styles.bitmapButton}>
<img
className={styles.bitmapButtonIcon}
draggable={false}
src={bitmapIcon}
/>
<span>
@ -415,6 +421,7 @@ const PaintEditorComponent = props => {
<img
alt="Zoom Out"
className={styles.buttonGroupButtonIcon}
draggable={false}
src={zoomOutIcon}
/>
</Button>
@ -425,6 +432,7 @@ const PaintEditorComponent = props => {
<img
alt="Zoom Reset"
className={styles.buttonGroupButtonIcon}
draggable={false}
src={zoomResetIcon}
/>
</Button>
@ -435,6 +443,7 @@ const PaintEditorComponent = props => {
<img
alt="Zoom In"
className={styles.buttonGroupButtonIcon}
draggable={false}
src={zoomInIcon}
/>
</Button>

1
src/components/tool-select-base/tool-select-base.jsx
View file

@ -24,6 +24,7 @@ const ToolSelectComponent = props => (
id: props.imgDescriptor.id
})}
className={styles.toolSelectIcon}
draggable={false}
src={props.imgSrc}
/>
</Button>