From d1e6960cd4af15b4395952e77a7734490dd3eae4 Mon Sep 17 00:00:00 2001
From: Chris Garrity <chrisg@media.mit.edu>
Date: Mon, 10 Jun 2019 10:53:04 -0400
Subject: [PATCH] Modify tile delete button for touch
Prototype of larger delete button for sprites, costumes and sounds to better support touch devices.
I split it out from `CloseButton` as it made the changes simpler, and we may end up going in a different direction (open context menu).
---
.../delete-button/delete-button.css | 48 ++++++++++++++++++
.../delete-button/delete-button.jsx | 34 +++++++++++++
src/components/delete-button/icon--delete.svg | Bin 0 -> 2519 bytes
.../sprite-selector-item.css | 6 +--
.../sprite-selector-item.jsx | 5 +-
5 files changed, 87 insertions(+), 6 deletions(-)
create mode 100644 src/components/delete-button/delete-button.css
create mode 100644 src/components/delete-button/delete-button.jsx
create mode 100644 src/components/delete-button/icon--delete.svg
diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
new file mode 100644
index 000000000..be093ac5c
--- /dev/null
+++ b/src/components/delete-button/delete-button.css
@@ -0,0 +1,48 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+/* the delete button has .25rem invisible 'slop' around the visible button
+ to make it easier to tap on a touch device */
+.delete-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ overflow: hidden; /* Mask the icon animation */
+ width: 2rem;
+ height: 2rem;
+ user-select: none;
+ cursor: pointer;
+ transition: all 0.15s ease-out;
+
+}
+
+/* .delete-button.large:hover {
+ transform: scale(1.1, 1.1);
+ box-shadow: 0 0 0 4px $ui-black-transparent;
+} */
+
+.delete-button-visible {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ overflow: hidden; /* Mask the icon animation */
+ width: 1.75rem;
+ height: 1.75rem;
+ box-shadow: 0px 0px 0px 2px $motion-transparent;
+ background-color: $motion-primary;
+ color: $ui-white;
+ border-radius: 50%;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ user-select: none;
+ cursor: pointer;
+ transition: all 0.15s ease-out;
+}
+
+.delete-icon {
+ position: relative;
+ margin: 0.25rem;
+ user-select: none;
+ transform-origin: 50%;
+}
diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
new file mode 100644
index 000000000..9e6370160
--- /dev/null
+++ b/src/components/delete-button/delete-button.jsx
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './delete-button.css';
+import deleteIcon from './icon--delete.svg';
+
+const DeleteButton = props => (
+ <div
+ aria-label="Delete"
+ className={classNames(
+ styles.deleteButton,
+ props.className
+ )}
+ role="button"
+ tabIndex="0"
+ onClick={props.onClick}
+ >
+ <div className={styles.deleteButtonVisible}>
+ <img
+ className={styles.deleteIcon}
+ src={deleteIcon}
+ />
+ </div>
+ </div>
+
+);
+
+DeleteButton.propTypes = {
+ className: PropTypes.string,
+ onClick: PropTypes.func.isRequired
+};
+
+export default DeleteButton;
diff --git a/src/components/delete-button/icon--delete.svg b/src/components/delete-button/icon--delete.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3edd347dd6a7af3e0121fa09578ec3deed95f8cc
GIT binary patch
literal 2519
zcmcDqugJ|&C`&CW&dkrVRWj5wP*O<EOU_Tp%uBab3Jr17wNSFR<FY9(OIIk*Oex8*
zRWdRts8CYKNX<;oD1q_HGE>W)@+)kW3=|9$j6g^U*-%3zg^Jvqykc9WjFOT9D}DX)
z@^Za$W4-*MbbTWO0|WiyvUI2ttBRb=yliX=4J|D#^}(`Ac3cVy3JNxgy1EMPsd=eI
zi6!|(Rtmw{sU^u73Z|xdh6)<y7KX-VnhLrKARCLV^!1CuvWW!+ddc~@3c9*bGfFZ`
za#HPr^Gowm^dV;D=)0umq?V-G=tJZncBP~iC)+s}r6!i7rYMwWmSjM!)3ebBOTkp7
z6+;XLJFp<JBts#^R>{{y&(y@+)X>btP{&Nq($dn>#L~=6!N<^4&&1To*ucaHS=iao
zRL|VV!o<YP3|ZLFRL>Hs*j&%Z$k@Wb+{jV^MbrdlGRO#oVpBs?12bbYbBJO?GeZkY
z9dkWXV*^7oOQ;D3My3WPAVCvTBO^l#W3bx{%}fo=Esb>y&GZZ{3=GXJj1@oz8<-oK
z8kw8w7@F%D85$UwSXe3;n&=rBm|Gf|fCMcqEi5ezEEEil^$g98%?wN|A)=NB7MA7;
zK4y9rMrLM4Mli*e=BDPR3eKi_=9Wf=#-@f)Gb}C4%#0OG^el}mj4X^zpw<~0n3<a^
znCMv;o0u7y8e2l$W?^Kh;A5g^U}9-%W@%vv^@yRlsj-5yiJpOxiK&^TfvJwUo{_nM
zk%6U=k%Ebyk&(HPiGh)kj=7$Jk-33^v4x?6iJqx}k&%goDJU!q42%p6j19~{Mwl9!
z8(CU{gUG<Zz|7dh0^~MRV<Qs-V+#}HXu=-VQ3}51dd5(oW1`?=u4iFkW?*b?X{KYO
zXKZ3<VPR%yq~L6>XK89;U}<7$p<|?HXl!n7Xlh`pV4-Jd0!lq5hB`(H7J9}IjUbMX
zp`o6cv89=jfr*Zhg0rEao`tE2g|Vrbj*)_)k)DBxDahYQMj0CE85)8#AY1EWXryNb
z2Ie5Q8Jg*t>X;}v8=C2vo0}P$7@6ppC>WaSfWpk!!qnW%7{W7E@G&&kG1W6wa0b&5
z#m43eNE*#R98(=L1s`KQ5anzPPP-sObj%ctbxfgF7@LDRrV2jBIwl|!K@=#JgH$RY
zX);j&83YbNXmA?qm?%Uk_*&>0TbP>|nOaza{a~nPW@uz;Zej@K8G(|gfrXB-f{%rs
zxsidnsilz-gomUrO2OCAK*!J!q{76)&`1Fkz^0a_MkdB)I)(;%hDN4F#^z?=kT$n8
zFf}kW*Rj;IG_tfbH#M;U1-YStxq*d+5t^v6fsrvNhanjO3Up(06LT|AMljGbv@|y}
zu>_fHq-Sbw07|nU3ym#}EDa68CL@WOgOZ4eF~~k7BP<O}%uUTq6nqQ~^vumIO${w9
zbPSF3K+$BR2UlmJX8`e!f-^`GW|fJa5yU?rL*Z7L=$S$M0}@3t!UEzS1+XU|Y#l=r
zJqw6`z$U{2!q8OD0Ah&(C|n_y=%9+iLl|L%4=5gt^^73?07aS!#CwJ)7Fp;Sfy2Vc
z9N9>7JqvKSnOmTWnn42D7}*FPb3HRitQvuZA-(}+MH6VWf`nngV6KNO3JWq+BVgg{
zW2t9kWB^J=hR}FGR%f6Gi!WznLk;v`k&7w{O9-e&z)}s!6L7yFB~zq;KuV@afrcWA
z2w{W~;CMjfhbSe5%oJNCP|c=msAOlO4`M;8JWx#ttNv`#!OF1Jt4a#RB}Mt!skTaa
z`FW`@o-VX?VW^~#mYI_SlLWDKi%N4+ZIx2XQuFdtQlOPTxPHw|EY1eo17heJ!L*iV
zWR|2NsROGmElyPcw;rrAic-^Tm6Smahj^j1I2GaputI&1VMu(4PeO_ki!*ec6Z1fR
zPREcA2V1EC(rT+zT9l)q3}WgUX~Nv3>;?wtt}04RE&=<%IX@@ANJ#<Igi=zdv{f=t
cLbSJ#TU#LOL7I?UpbvG94Txa_YD?Jx06?cX!vFvP
literal 0
HcmV?d00001
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 6844ef1c5..dffc18902 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -94,16 +94,16 @@
.delete-button {
position: absolute;
- top: 0.125rem;
+ top: -.625rem;
z-index: auto;
}
[dir="ltr"] .delete-button {
- right: 0.125rem;
+ right: -.625rem;
}
[dir="rtl"] .delete-button {
- left: 0.125rem;
+ left: -.625rem;
}
.number {
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index bcccb7fe7..458df186f 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
-import CloseButton from '../close-button/close-button.jsx';
+import DeleteButton from '../delete-button/delete-button.jsx';
import styles from './sprite-selector-item.css';
import {ContextMenuTrigger} from 'react-contextmenu';
import {DangerousMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
@@ -48,9 +48,8 @@ const SpriteSelectorItem = props => (
) : null}
</div>
{(props.selected && props.onDeleteButtonClick) ? (
- <CloseButton
+ <DeleteButton
className={styles.deleteButton}
- size={CloseButton.SIZE_SMALL}
onClick={props.onDeleteButtonClick}
/>
) : null }
--
GitLab