mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
notification count positioning
This commit is contained in:
parent
5564bfa134
commit
a0cec3f0fd
|
@ -295,19 +295,21 @@ textarea {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: $session-font-accent;
|
||||
font-family: $session-font-default;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
background: $session-color-danger;
|
||||
color: $session-color-white;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
div {
|
||||
position: relative;
|
||||
|
||||
sup {
|
||||
font-size: 130%;
|
||||
position: absolute;
|
||||
font-size: 1.3em;
|
||||
top: -0.5em;
|
||||
margin-left: -0.125em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -30,28 +30,24 @@ export class SessionNotificationCount extends React.Component<Props> {
|
|||
const MAX_SINGLE_DIGIT = 9;
|
||||
const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT;
|
||||
|
||||
const fontSizeVal = overflow ? size / 2 : size / 2 + 2;
|
||||
const fontSize = `${fontSizeVal}px`;
|
||||
|
||||
const bubbleStyle = {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
fontSize: `${size}px`,
|
||||
};
|
||||
|
||||
const fontSize = overflow ? '0.5em' : '0.6em';
|
||||
|
||||
const countStyle = {
|
||||
fontSize,
|
||||
marginTop: overflow ? `${size / 8}px` : '0px',
|
||||
marginLeft: overflow ? `-${size / 4}px` : '0px',
|
||||
};
|
||||
|
||||
const supStyle = {
|
||||
top: `-${size * (3 / 8)}px`,
|
||||
marginTop: overflow ? '0.35em' : '0em',
|
||||
marginLeft: overflow ? '-0.45em' : '0em',
|
||||
};
|
||||
|
||||
const countElement: JSX.Element = overflow ? (
|
||||
<>
|
||||
{MAX_SINGLE_DIGIT}
|
||||
<sup style={supStyle}>+</sup>
|
||||
<sup>+</sup>
|
||||
</>
|
||||
) : (
|
||||
<>{count}</>
|
||||
|
@ -68,7 +64,7 @@ export class SessionNotificationCount extends React.Component<Props> {
|
|||
style={bubbleStyle}
|
||||
role="button"
|
||||
>
|
||||
<span style={countStyle}>{countElement}</span>
|
||||
<div style={countStyle}>{countElement}</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
Loading…
Reference in a new issue