fix: Add ability to collapse and expand collections that are not active (#3102)
* fix: add disclosure and transition * fix: keep collections expanded * fix: tune transition and collapsing conditions * fix: collectionIcon expanded props is no longer driven by expanded state * fix: sync issue * fix: managing state together * fix: remove comment * fix: simplify expanded state * fix: remove extra state * fix: remove animation and retain expanded state * fix: remove isCollectionDropped * fix: don't use ref * review suggestions * fix many functional and design issues * don't render every single document in the sidebar, just ones that the user has seen before * chore: Sidebar refinement (#3154) * stash * wip: More sidebar tweaks * Simplify draft bubble * disclosure refactor * wip wip * lint * tweak menu position * Use document emoji for starred docs where available * feat: Trigger cmd+k from sidebar (#3149) * feat: Trigger cmd+k from sidebar * Add hint when opening command bar from sidebar * fix: Clicking internal links in shared documents sometimes reroutes to Login * fix: Spacing issues on connected slack channels list * Merge * fix: Do not prefetch JS bundles on public share links * fix: Buttons show on collection empty state when user does not have permission to edit * fix: the hover area for the "collections" subheading was being obfuscated by the initial collection drop cursor * fix: top-align disclosures * fix: Disclosure color PR feedback fix: Starred no longer draggable * fix: Overflow on sidebar button * fix: Scrollbar in sidebar when command menu is open * Minor alignment issues, clarify back in settings sidebar * fix: Fade component causes SidebarButton missizing Co-authored-by: Nan Yu <thenanyu@gmail.com> Co-authored-by: Tom Moor <tom.moor@gmail.com> Co-authored-by: Nan Yu <thenanyu@gmail.com>
This commit is contained in:
@@ -11,6 +11,7 @@ type Props = {
|
||||
icon?: React.ReactNode;
|
||||
user?: User;
|
||||
alt?: string;
|
||||
showBorder?: boolean;
|
||||
onClick?: React.MouseEventHandler<HTMLImageElement>;
|
||||
className?: string;
|
||||
};
|
||||
@@ -29,12 +30,13 @@ class Avatar extends React.Component<Props> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { src, icon, ...rest } = this.props;
|
||||
const { src, icon, showBorder, ...rest } = this.props;
|
||||
return (
|
||||
<AvatarWrapper>
|
||||
<CircleImg
|
||||
onError={this.handleError}
|
||||
src={this.error ? placeholder : src}
|
||||
$showBorder={showBorder}
|
||||
{...rest}
|
||||
/>
|
||||
{icon && <IconWrapper>{icon}</IconWrapper>}
|
||||
@@ -59,12 +61,14 @@ const IconWrapper = styled.div`
|
||||
height: 20px;
|
||||
`;
|
||||
|
||||
const CircleImg = styled.img<{ size: number }>`
|
||||
const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
|
||||
display: block;
|
||||
width: ${(props) => props.size}px;
|
||||
height: ${(props) => props.size}px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid ${(props) => props.theme.background};
|
||||
border: 2px solid
|
||||
${(props) =>
|
||||
props.$showBorder === false ? "transparent" : props.theme.background};
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user