Implement Profile Viewer (#130)

* Implement Profile Viewer

Fixes #111

* Make user avatar in chat clickable

* design progress

* Refactored code

* progress

* Updated chip comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Refactored ProfileViewer comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Added msg functionality in ProfileViewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Added Ignore functionality in ProfileViewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fixed Ignore btn bug

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Refectored ProfileViewer comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

Co-authored-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Gero Gerke 2021-10-18 17:25:52 +02:00 committed by GitHub
parent 8d95fd0ca0
commit fa10a67811
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 425 additions and 32 deletions

View file

@ -7,13 +7,14 @@ import RawIcon from '../system-icons/RawIcon';
function Chip({
iconSrc, iconColor, text, children,
onClick,
}) {
return (
<div className="chip">
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="small" />}
{(text != null && text !== '') && <Text variant="b2">{text}</Text>}
<button className="chip" type="button" onClick={onClick}>
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
{(text != null && text !== '') && <Text variant="b3">{text}</Text>}
{children}
</div>
</button>
);
}
@ -22,6 +23,7 @@ Chip.propTypes = {
iconColor: PropTypes.string,
text: PropTypes.string,
children: PropTypes.element,
onClick: PropTypes.func,
};
Chip.defaultProps = {
@ -29,6 +31,7 @@ Chip.defaultProps = {
iconColor: null,
text: null,
children: null,
onClick: null,
};
export default Chip;

View file

@ -7,13 +7,27 @@
background: var(--bg-surface-low);
border-radius: var(--bo-radius);
border: 1px solid var(--bg-surface-border);
box-shadow: var(--bs-surface-border);
cursor: pointer;
@media (hover: hover) {
&:hover {
background-color: var(--bg-surface-hover);
}
}
& > .text {
flex: 1;
color: var(--tc-surface-high);
}
& > .ic-raw {
margin-right: var(--sp-extra-tight);
width: 16px;
height: 16px;
margin-right: var(--sp-ultra-tight);
[dir=rtl] & {
margin-right: 0;
margin-left: var(--sp-extra-tight);
margin-left: var(--sp-ultra-tight);
}
}
}