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

hidden label parent of button content

Browse source 
visually on the page, label needs to be centered inside of largestLabel
This commit is contained in:
SleepingFox 2020-04-02 19:09:59 -04:00 • committed by Sean Yesmunt
parent a0ae4b824a
commit f77439708e
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ type Props = {
href: ?string, href: ?string,
title: ?string, title: ?string,
label: ?string, label: ?string,
largestLabel: ?string,
icon: ?string, icon: ?string,
iconRight: ?string, iconRight: ?string,
disabled: ?boolean, disabled: ?boolean,
@ -47,6 +48,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
href, href,
title, title,
label, label,
largestLabel,
icon, icon,
// This should rarely be used. Regular buttons should just use `icon` // This should rarely be used. Regular buttons should just use `icon`
// `iconRight` is used for the header (home) button with the LBRY icon and external links that are displayed inline // `iconRight` is used for the header (home) button with the LBRY icon and external links that are displayed inline
@ -90,8 +92,17 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
const content = ( const content = (
<span className="button__content"> <span className="button__content">
{icon && <Icon icon={icon} iconColor={iconColor} size={size} />} {icon && <Icon icon={icon} iconColor={iconColor} size={iconSize} />}
{label && <span className="button__label">{label}</span>} {
<p style={{ visibility: 'hidden' }}>
{largestLabel}
{label && (
<span className="button__label" style={{ visibility: 'visible' }}>
{label}
</span>
)}
</p>
}
{children && children} {children && children}
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />} {iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}
</span> </span>
@ -127,7 +138,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
return ( return (
<NavLink <NavLink
exact exact
onClick={e => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
to={`/$/${PAGES.AUTH}?redirect=${pathname}`} to={`/$/${PAGES.AUTH}?redirect=${pathname}`}
@ -147,7 +158,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
to={path} to={path}
title={title} title={title}
disabled={disabled} disabled={disabled}
onClick={e => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (onClick) { if (onClick) {
onClick(); onClick();
@ -165,7 +176,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
title={title} title={title}
aria-label={description || label || title} aria-label={description || label || title}
className={combinedClassName} className={combinedClassName}
onClick={e => { onClick={(e) => {
if (onClick) { if (onClick) {
e.stopPropagation(); e.stopPropagation();
onClick(e); onClick(e);

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

@ -50,6 +50,7 @@ export default function SubscribeButton(props: Props) {
<Button <Button
ref={buttonRef} ref={buttonRef}
iconColor="red" iconColor="red"
largestLabel="TEST LABEL"
icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE} icon={unfollowOverride ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIBE}
button={'alt'} button={'alt'}
requiresAuth={IS_WEB} requiresAuth={IS_WEB}