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: Overlay moving with page.

Browse source 
Fix: Colour picker appearing in wrong position.
This commit is contained in:
Paul 2021-07-08 13:54:18 +01:00
parent 123020d77d
commit 64f415acfc
1 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,11 +38,24 @@ const SwatchesBase = styled.div`
display: flex;
input {
width: 0;
height: 0;
top: 72px;
opacity: 0;
margin-top: 44px;
position: absolute;
position: relative;
pointer-events: none;
}
.overlay {
position: relative;
width: 0;
div {
width: 8px;
height: 68px;
background: linear-gradient(to right, var(--primary-background), transparent);
}
}
`;
const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
@ -84,7 +97,6 @@ const Rows = styled.div`
display: flex;
flex-direction: column;
overflow: auto;
> div {
gap: 8px;
@ -92,13 +104,6 @@ const Rows = styled.div`
flex-direction: row;
padding-inline-start: 8px;
}
.overlay {
position: absolute;
height: 68px;
width: 8px;
background: linear-gradient(to right, var(--primary-background), transparent);
}
`;
export default function ColourSwatches({ value, onChange }: Props) {
@ -106,23 +111,23 @@ export default function ColourSwatches({ value, onChange }: Props) {
return (
<SwatchesBase>
<Swatch
colour={value}
type="large"
onClick={() => ref.current?.click()}>
<Palette size={32} />
</Swatch>
<input
type="color"
value={value}
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
<Swatch
colour={value}
type="large"
onClick={() => ref.current?.click()}>
<Palette size={32} />
</Swatch>
<div class="overlay"><div /></div>
<Rows>
{presets.map((row, i) => (
<>
<div class="overlay" />
<div key={i}>
{row.map((swatch, i) => (
<Swatch
@ -134,7 +139,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
</Swatch>
))}
</div>
</>
))}
</Rows>