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

Fix: Working on scrollable color swatch

Browse source
This commit is contained in:
nizune 2021-07-08 13:30:14 +02:00
parent 92964d74b1
commit 123020d77d
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/ui/ColourSwatches.tsx
View file

@ -34,7 +34,7 @@ const presets = [
];
const SwatchesBase = styled.div`
gap: 8px;
/*gap: 8px;*/
display: flex;
input {
@ -83,11 +83,21 @@ const Rows = styled.div`
gap: 8px;
display: flex;
flex-direction: column;
overflow: auto;
> div {
gap: 8px;
display: flex;
flex-direction: row;
padding-inline-start: 8px;
}
.overlay {
position: absolute;
height: 68px;
width: 8px;
background: linear-gradient(to right, var(--primary-background), transparent);
}
`;
@ -108,8 +118,11 @@ export default function ColourSwatches({ value, onChange }: Props) {
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Rows>
{presets.map((row, i) => (
<>
<div class="overlay" />
<div key={i}>
{row.map((swatch, i) => (
<Swatch
@ -121,8 +134,11 @@ export default function ColourSwatches({ value, onChange }: Props) {
</Swatch>
))}
</div>
</>
))}
</Rows>
</SwatchesBase>
);
}