From c692265249268d9b82db52468393b4aa5ff6d203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 25 Dec 2022 13:51:11 +0100 Subject: [PATCH] Convert (legacy?) IconButton to tsx, remove unused code/styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/icon-button.js | Bin 5269 -> 0 bytes app/soapbox/components/icon-button.tsx | 100 ++++++++++++++++++ .../compose/components/text-icon-button.tsx | 36 ------- app/styles/ui.scss | 81 -------------- 4 files changed, 100 insertions(+), 117 deletions(-) delete mode 100644 app/soapbox/components/icon-button.js create mode 100644 app/soapbox/components/icon-button.tsx delete mode 100644 app/soapbox/features/compose/components/text-icon-button.tsx diff --git a/app/soapbox/components/icon-button.js b/app/soapbox/components/icon-button.js deleted file mode 100644 index bdfe157a605aa13ee2cefc6f129b472c2e3819a8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5269 zcmcInZExE)5dNNDaRZ9l9uh0bUfQL03alN_V9gLTHTE%~Eh=UwlbT2+b_Myq5MhvCR z)^sJluw=6ZPbg7EPGw}o_BSwaX^cCa@i?mC1&a#B(nw_5JCZs#wJKekK*cm6Md|_u z+S6YPrO;oxR+PsQOc=&jX#Jh{8OnnL0I7(%pnp`7A6;9nj4GpOS{mP&{0&;ay_ z-}wvb11Y9bx+@$r`HB8ru$;!tX1g#ellh`gq&;AZzd~_R@P*YA{8AK>z84R?5AZwP z%(6YgM|7|7GG(8-G5#A@G~bK(NXdOGLd^jr``VK5Vl}6^Jsf5-YwOL0NUbc>ZqYb2 z+XyjZ2#@=uQf=DzCFWn~LWMT3_d#MN$vo}bo$-5`t3D~=Y(-S-#EshmHB++bK9eHz z3p~?0l!mFQunhWSrWX5znoPQ76&7DzJ+Az8ok;KnWN+`}br`!dNJuKFU20+#EY?8? z*6OndYt4}d#{;{c;4YnqBbc5;Sp~~Bk+%h|c(#|r%dc}sD9M&RYk_V)D-J?3k9p9^>~`Ubw)0jJ+%-bwcupJo5X^epQ)Jj?c& zHT>9RxpjHyz6D~~pK<42ZP$K|Pae%NJKakrxK#MiA+w<`b`2mATwNQ2y?s#z{^+u; zvh}Sk9)JfHtK}K&g5Y~N8K1uX>D9@Pr@w?6OUmw+$T!bWNg1afdey?s$K!G6tUi?Y z6h*^8W?u++8>X^dGYk%A$Pgo|YYP?Md=n`jAq)1qJ7V(Fx;^jX1 zR`O$f=KavW6MpUp&`;g_=BJ(t>$&bZ>IqW69~-Lo6HQlkTwzu;adQM@Lt##d{pGZ2 zhvcw1It=syjy&bnxz&!`b`W|_r=P{vL8}%Sy7>E~28bfKqIm+kD_pU!*v1L$bI845 zF%+EB1vUXB-@wH7mFIZ7zFS3kic&+CW}^oR=yO5RbOW5y7?c2KaO_Yy#om>}&`kj* z_Sp3tfaHuErDRUiX=xfiO~n4s2;I$1OE=g7_yn1jeiTB?rX73NH!>~VjfGn7c|bk= zo&?WP8&s2c3s|qV!H#lUP`9=NoMqdvS+)Z*47iOmi*2a!$8?nrY~M%M>l#6af_bpJ z6pSEL@Wq5+*Hnd4pUTtHk3y*~Db&N?X7xNsfl18nEe}sitahZPvO*d%%v^;)fYQ`z zpsUm9Etnme+YZa`=EkTDASV2d=GghCn`^2ruoChQpD#a7%MxyGmTHxrfk7slq4__8 zsDuIJ z7b^igiI+62<{($WTWxLIs`(1g&1MVS!A*K+Tz-t59PDZQRD1h$hN@Mb&QTb2$4z*~ z4weG&?9|OusNca<08O&#>w5-U_3+hG8LO@zl@l%#k*~0Mv=ujeQQAQj)4S2FuD1V; r-@cXMp6C8^_^^W!G1UJ7C+dyctOzjjbu@`w$7Bf7&?SCNRtNt8U2|DN diff --git a/app/soapbox/components/icon-button.tsx b/app/soapbox/components/icon-button.tsx new file mode 100644 index 0000000000..6a7dea4f7b --- /dev/null +++ b/app/soapbox/components/icon-button.tsx @@ -0,0 +1,100 @@ +import classNames from 'clsx'; +import React from 'react'; + +import Icon from 'soapbox/components/icon'; + +interface IIconButton extends Pick, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> { + active?: boolean + expanded?: boolean + iconClassName?: string + pressed?: boolean + size?: number + src: string + text: React.ReactNode +} + +const IconButton: React.FC = ({ + active, + className, + disabled, + expanded, + iconClassName, + onClick, + onKeyDown, + onKeyUp, + onKeyPress, + onMouseDown, + onMouseEnter, + onMouseLeave, + pressed, + size = 18, + src, + tabIndex = 0, + text, + title, +}) => { + + const handleClick: React.MouseEventHandler = (e) => { + e.preventDefault(); + + if (!disabled && onClick) { + onClick(e); + } + }; + + const handleMouseDown: React.MouseEventHandler = (e) => { + if (!disabled && onMouseDown) { + onMouseDown(e); + } + }; + + const handleKeyDown: React.KeyboardEventHandler = (e) => { + if (!disabled && onKeyDown) { + onKeyDown(e); + } + }; + + const handleKeyUp: React.KeyboardEventHandler = (e) => { + if (!disabled && onKeyUp) { + onKeyUp(e); + } + }; + + const handleKeyPress: React.KeyboardEventHandler = (e) => { + if (onKeyPress && !disabled) { + onKeyPress(e); + } + }; + + const classes = classNames(className, 'icon-button', { + active, + disabled, + }); + + return ( + + ); +}; + +export default IconButton; diff --git a/app/soapbox/features/compose/components/text-icon-button.tsx b/app/soapbox/features/compose/components/text-icon-button.tsx deleted file mode 100644 index fd49d4ed07..0000000000 --- a/app/soapbox/features/compose/components/text-icon-button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -interface ITextIconButton { - label: string, - title: string, - active: boolean, - onClick: () => void, - ariaControls: string, - unavailable: boolean, -} - -const TextIconButton: React.FC = ({ - label, - title, - active, - ariaControls, - unavailable, - onClick, -}) => { - const handleClick: React.MouseEventHandler = (e) => { - e.preventDefault(); - onClick(); - }; - - if (unavailable) { - return null; - } - - return ( - - ); -}; - -export default TextIconButton; diff --git a/app/styles/ui.scss b/app/styles/ui.scss index 92ffc77e21..b001552539 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -44,87 +44,6 @@ &:active { outline: 0 !important; } - - &.inverted { - color: var(--primary-text-color--faint); - opacity: 1; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - } - - &.disabled { - color: var(--primary-text-color--faint); - } - - &.active { - color: var(--highlight-text-color); - - &.disabled { - color: var(--highlight-text-color); - } - } - } - - &.overlayed { - box-sizing: content-box; - background: var(--foreground-color); - color: var(--primary-text-color--faint); - border-radius: 6px; - padding: 2px; - opacity: 1; - - > div { - display: flex; - align-items: center; - justify-content: center; - } - - &:hover { - background: var(--background-color); - } - } -} - -.text-icon-button { - color: var(--primary-text-color--faint); - border: 0; - background: transparent; - cursor: pointer; - font-weight: 600; - font-size: 11px; - padding: 0 3px; - line-height: 27px; - outline: 0; - transition: color 100ms ease-in; - - &:hover, - &:active, - &:focus { - color: var(--primary-text-color); - transition: color 200ms ease-out; - } - - &.disabled { - color: var(--primary-text-color--faint); - cursor: default; - } - - &.active { - color: var(--highlight-text-color); - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } } .invisible {