LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Messy PoC

Browse source 
state jittering still seems to be an issue on rare occasion even though the button hitbox is no longer changing size.
This commit is contained in:
SleepingFox 2020-04-03 19:29:39 -04:00 committed by Sean Yesmunt
parent f77439708e
commit a7990e5bab
2 changed files with 35 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
ui/component/button/view.jsx
View file

@ -91,17 +91,33 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default
const content = ( const content = (
<span className="button__content"> <div className="button__content" style={{ border: `1px solid white` }}>
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />} {/* style={{ border: `1px solid white` }} */}
<div style={{ border: `1px solid green` }}>
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
</div>
{ {
<p style={{ visibility: 'hidden' }}> <div style={{ border: `1px solid blue` }}>
{largestLabel} <span style={{ visibility: 'hidden' }}>
{label && ( {largestLabel || label}
<span className="button__label" style={{ visibility: 'visible' }}> {label && (
{label} // <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 0, margin: 'auto' }}>
</span> <div
)} style={{
</p> position: 'relative',
left: '50%',
right: '50%',
transform: `translate(-50%, -50%)`,
border: `1px solid red`,
}}
>
<span className="button__label" style={{ visibility: 'visible' }}>
{label}
</span>
</div>
)}
</span>
</div>
} }
{children && children} {children && children}
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />} {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}

10
ui/component/subscribeButton/view.jsx
View file

@ -46,11 +46,19 @@ export default function SubscribeButton(props: Props) {
const unfollowOverride = isSubscribed && isHovering && __('Unfollow'); const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel; const label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
let longestStr = __('Following');
if (__('Following').length < __('Unfollow').length) {
longestStr = __('Unfollow');
}
longestStr = longestStr + '-';
return permanentUrl ? ( return permanentUrl ? (
<Button <Button
ref={buttonRef} ref={buttonRef}
iconColor="red" iconColor="red"
largestLabel="TEST LABEL" largestLabel={longestStr}
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE} icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
button={'alt'} button={'alt'}
requiresAuth={IS_WEB} requiresAuth={IS_WEB}