mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-23 17:47:24 +00:00
move tourniquet style to button
This commit is contained in:
parent
a6a00e0bbb
commit
adaec74e78
4 changed files with 11 additions and 9 deletions
|
@ -23,6 +23,7 @@ type Props = {
|
||||||
noPadding: ?boolean, // to remove padding and allow circular buttons
|
noPadding: ?boolean, // to remove padding and allow circular buttons
|
||||||
uppercase: ?boolean,
|
uppercase: ?boolean,
|
||||||
iconColor: ?string,
|
iconColor: ?string,
|
||||||
|
tourniquet: ?boolean, // to shorten the button and ellipsis, only use for links
|
||||||
};
|
};
|
||||||
|
|
||||||
class Button extends React.PureComponent<Props> {
|
class Button extends React.PureComponent<Props> {
|
||||||
|
@ -50,6 +51,7 @@ class Button extends React.PureComponent<Props> {
|
||||||
noPadding,
|
noPadding,
|
||||||
uppercase,
|
uppercase,
|
||||||
iconColor,
|
iconColor,
|
||||||
|
tourniquet,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
@ -69,6 +71,7 @@ class Button extends React.PureComponent<Props> {
|
||||||
'btn--link': button === 'link',
|
'btn--link': button === 'link',
|
||||||
'btn--external-link': button === 'link' && href,
|
'btn--external-link': button === 'link' && href,
|
||||||
'btn--uppercase': uppercase,
|
'btn--uppercase': uppercase,
|
||||||
|
'btn--tourniquet': tourniquet,
|
||||||
}
|
}
|
||||||
: 'btn--no-style',
|
: 'btn--no-style',
|
||||||
className
|
className
|
||||||
|
|
|
@ -72,6 +72,7 @@ class TransactionListItem extends React.PureComponent<Props> {
|
||||||
{name &&
|
{name &&
|
||||||
claimId && (
|
claimId && (
|
||||||
<Button
|
<Button
|
||||||
|
tourniquet
|
||||||
button="link"
|
button="link"
|
||||||
navigate="/show"
|
navigate="/show"
|
||||||
navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}
|
navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}
|
||||||
|
|
|
@ -76,6 +76,13 @@ button:disabled {
|
||||||
background-color: var(--btn-bg-secondary);
|
background-color: var(--btn-bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn.btn--tourniquet {
|
||||||
|
max-width: 20vw;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
.btn.btn--no-style {
|
.btn.btn--no-style {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
|
|
|
@ -99,15 +99,6 @@ table.table--transactions {
|
||||||
}
|
}
|
||||||
td:nth-of-type(3) {
|
td:nth-of-type(3) {
|
||||||
width: 22.5%;
|
width: 22.5%;
|
||||||
|
|
||||||
.btn--link {
|
|
||||||
// Tourniquets text over 20VW
|
|
||||||
// Style needs to be on the button to allow for proper ellipsis
|
|
||||||
max-width: 20vw;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
td:nth-of-type(4) {
|
td:nth-of-type(4) {
|
||||||
width: 17.5%;
|
width: 17.5%;
|
||||||
|
|
Loading…
Add table
Reference in a new issue