mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-26 00:50:56 -05:00
Fix: Overlay moving with page.
Fix: Colour picker appearing in wrong position.
This commit is contained in:
parent
123020d77d
commit
64f415acfc
1 changed files with 23 additions and 19 deletions
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue