cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-20 01:57:12 -04: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` const SwatchesBase = styled.div`
gap: 8px; /*gap: 8px;*/
display: flex; display: flex;
input { input {
@ -83,11 +83,21 @@ const Rows = styled.div`
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto;
> div { > div {
gap: 8px; gap: 8px;
display: flex; display: flex;
flex-direction: row; 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} ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)} onChange={(ev) => onChange(ev.currentTarget.value)}
/> />
<Rows> <Rows>
{presets.map((row, i) => ( {presets.map((row, i) => (
<>
<div class="overlay" />
<div key={i}> <div key={i}>
{row.map((swatch, i) => ( {row.map((swatch, i) => (
<Swatch <Swatch
@ -121,8 +134,11 @@ export default function ColourSwatches({ value, onChange }: Props) {
</Swatch> </Swatch>
))} ))}
</div> </div>
</>
))} ))}
</Rows> </Rows>
</SwatchesBase> </SwatchesBase>
); );
} }