IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: PasswordInput: fix tooltip style

Browse Source
This commit is contained in:
Viktor Fomin 2022-03-16 12:35:39 +03:00
parent d4d0ecb04b
commit 2903dc068b
2 changed files with 65 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
packages/asc-web-components/password-input/index.js
View File

@ -299,57 +299,60 @@ class PasswordInput extends React.Component {
renderTooltipContent = () =>
!this.props.isDisableTooltip && !this.props.isDisabled ? (
<StyledTooltipContainer
forwardedAs="div"
title={this.props.tooltipPasswordTitle}
>
{this.props.tooltipPasswordTitle}
<StyledTooltipItem
<TooltipStyle>
<StyledTooltipContainer
forwardedAs="div"
title={this.props.tooltipPasswordLength}
valid={this.state.validLength}
title={this.props.tooltipPasswordTitle}
>
{this.props.tooltipPasswordLength}
</StyledTooltipItem>
{this.props.passwordSettings.digits && (
{this.props.tooltipPasswordTitle}
<StyledTooltipItem
forwardedAs="div"
title={this.props.tooltipPasswordDigits}
valid={this.state.validDigits}
title={this.props.tooltipPasswordLength}
valid={this.state.validLength}
>
{this.props.tooltipPasswordDigits}
{this.props.tooltipPasswordLength}
</StyledTooltipItem>
)}
{this.props.passwordSettings.upperCase && (
<StyledTooltipItem
forwardedAs="div"
title={this.props.tooltipPasswordCapital}
valid={this.state.validCapital}
>
{this.props.tooltipPasswordCapital}
</StyledTooltipItem>
)}
{this.props.passwordSettings.specSymbols && (
<StyledTooltipItem
forwardedAs="div"
title={this.props.tooltipPasswordSpecial}
valid={this.state.validSpecial}
>
{this.props.tooltipPasswordSpecial}
</StyledTooltipItem>
)}
{this.props.passwordSettings.digits && (
<StyledTooltipItem
forwardedAs="div"
title={this.props.tooltipPasswordDigits}
valid={this.state.validDigits}
>
{this.props.tooltipPasswordDigits}
</StyledTooltipItem>
)}
{this.props.passwordSettings.upperCase && (
<StyledTooltipItem
forwardedAs="div"
title={this.props.tooltipPasswordCapital}
valid={this.state.validCapital}
>
{this.props.tooltipPasswordCapital}
</StyledTooltipItem>
)}
{this.props.passwordSettings.specSymbols && (
<StyledTooltipItem
forwardedAs="div"
title={this.props.tooltipPasswordSpecial}
valid={this.state.validSpecial}
>
{this.props.tooltipPasswordSpecial}
</StyledTooltipItem>
)}
{this.props.generatePasswordTitle && (
<Link
type="action"
fontWeight="600"
isHovered={true}
onClick={this.onGeneratePassword}
>
{this.props.generatePasswordTitle}
</Link>
)}
</StyledTooltipContainer>
{this.props.generatePasswordTitle && (
<Link
className="generate-btn"
type="action"
fontWeight="600"
isHovered={true}
onClick={this.onGeneratePassword}
>
{this.props.generatePasswordTitle}
</Link>
)}
</StyledTooltipContainer>
</TooltipStyle>
) : null;
renderInputGroup = () => {
@ -398,17 +401,17 @@ class PasswordInput extends React.Component {
maxLength={maxLength}
autoComplete={autoComplete}
></InputBlock>
<TooltipStyle>
<Tooltip
id="tooltipContent"
effect="solid"
place="top"
offsetLeft={this.tooltipOffsetLeft}
reference={this.refTooltip}
>
{this.renderTooltipContent()}
</Tooltip>
</TooltipStyle>
<Tooltip
id="tooltipContent"
effect="solid"
place="top"
offsetLeft={this.tooltipOffsetLeft}
reference={this.refTooltip}
>
{this.renderTooltipContent()}
</Tooltip>
<Progress
progressColor={progressColor}
progressWidth={progressWidth}

8
packages/asc-web-components/password-input/styled-password-input.js
View File

@ -155,13 +155,19 @@ const Progress = styled.div`
Progress.defaultProps = { theme: Base };
const TooltipStyle = styled.div`
width: 280px;
.__react_component_tooltip {
}
`;
const StyledTooltipContainer = styled(Text)`
//margin: 8px 16px 16px 16px;
// margin: 8px 16px 16px 16px;
color: ${(props) => props.theme.passwordInput.tooltipTextColor} !important;
.generate-btn {
color: ${(props) => props.theme.passwordInput.tooltipTextColor};
}
`;
StyledTooltipContainer.defaultProps = { theme: Base };