cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Move details styling into its own component.

Browse source
This commit is contained in:
Paul 2021-07-04 09:52:34 +01:00
parent e0b9567c96
commit 12b04a9832
4 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/ui/Details.tsx Normal file
View file

@ -0,0 +1,28 @@
import styled from "styled-components";
export default styled.details`
summary {
outline: none;
list-style: none;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
flex-shrink: 0;
transition: .2s ease transform;
}
}
&:not([open]) {
summary {
opacity: .7;
}
summary svg {
transform: rotateZ(-90deg);
}
}
`;

1
src/lib/TextAreaAutoSize.tsx
View file

@ -23,6 +23,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
const ref = useRef<HTMLTextAreaElement>();
useEffect(() => {
if (isTouchscreenDevice) return;
autoFocus && ref.current.focus();
}, [value]);

27
src/pages/friends/Friend.module.scss
View file

@ -39,33 +39,6 @@
}
}
details {
summary {
outline: none;
list-style: none;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
flex-shrink: 0;
transition: .2s ease transform;
}
}
&:not([open]) {
summary {
opacity: .7;
}
summary svg {
transform: rotateZ(-90deg);
}
}
}
&[data-empty="true"] {
img {
height: 120px;

5
src/pages/friends/Friends.tsx
View file

@ -14,6 +14,7 @@ import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regu
import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
import { TextReact } from "../../lib/i18n";
import { Children } from "../../types/Preact";
import Details from "../../components/ui/Details";
export default function Friends() {
const { openScreen } = useIntermediate();
@ -112,7 +113,7 @@ export default function Friends() {
if (list.length === 0) return;
return (
<details open>
<Details open>
<summary>
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} />
@ -122,7 +123,7 @@ export default function Friends() {
</Overline>
</summary>
{ list.map(x => <Friend key={x._id} user={x} />) }
</details>
</Details>
)
})
}