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 content = (
<span className="button__content">
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
<div className="button__content" style={{ border: `1px solid white` }}>
{/* style={{ border: `1px solid white` }} */}
<div style={{ border: `1px solid green` }}>
{icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
</div>
{
<p style={{ visibility: 'hidden' }}>
{largestLabel}
{label && (
<span className="button__label" style={{ visibility: 'visible' }}>
{label}
</span>
)}
</p>
<div style={{ border: `1px solid blue` }}>
<span style={{ visibility: 'hidden' }}>
{largestLabel || label}
{label && (
// <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 0, margin: 'auto' }}>
<div
style={{
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}
{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 label = isMobile && shrinkOnMobile ? '' : unfollowOverride || subscriptionLabel;
let longestStr = __('Following');
if (__('Following').length < __('Unfollow').length) {
longestStr = __('Unfollow');
}
longestStr = longestStr + '-';
return permanentUrl ? (
<Button
ref={buttonRef}
iconColor="red"
largestLabel="TEST LABEL"
largestLabel={longestStr}
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
button={'alt'}
requiresAuth={IS_WEB}