sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: WIP

Browse Source
This commit is contained in:
Daniel
2024-11-24 17:04:21 +01:00
parent 23e958af0c
commit 0fa69045f9
1 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
webapp/src/components/colorPicker.tsx
View File

@@ -71,6 +71,7 @@ const ColorPicker = (properties: ColorPickerProps) => {
setColor(newColor); setColor(newColor);
}} }}
/> />
<HorizontalDivider />
<ColorPickerInput> <ColorPickerInput>
<HexWrapper> <HexWrapper>
<HexLabel>{"Hex"}</HexLabel> <HexLabel>{"Hex"}</HexLabel>
@@ -131,6 +132,8 @@ const ColorPicker = (properties: ColorPickerProps) => {
const RecentLabel = styled.div` const RecentLabel = styled.div`
font-family: "Inter"; font-family: "Inter";
font-size: 12px; font-size: 12px;
font-family: Inter;
margin: 8px;
color: ${theme.palette.text.secondary}; color: ${theme.palette.text.secondary};
`; `;
@@ -138,14 +141,16 @@ const ColorList = styled.div`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
margin: 8px;
justify-content: space-between;
`; `;
const Button = styled.button<{ $color: string }>` const Button = styled.button<{ $color: string }>`
width: 20px; width: 16px;
height: 20px; height: 16px;
${({ $color }): string => { ${({ $color }): string => {
if ($color.toUpperCase() === "#FFFFFF") { if ($color.toUpperCase() === "#FFFFFF") {
return `border: 1px solid ${theme.palette.grey["600"]};`; return `border: 1px solid ${theme.palette.grey["300"]};`;
} }
return `border: 1px solid ${$color};`; return `border: 1px solid ${$color};`;
}} }}
@@ -153,17 +158,14 @@ const Button = styled.button<{ $color: string }>`
return $color; return $color;
}}; }};
box-sizing: border-box; box-sizing: border-box;
margin-top: 10px; margin-top: 0px;
margin-right: 10px; border-radius: 4px;
border-radius: 2px;
`; `;
const HorizontalDivider = styled.div` const HorizontalDivider = styled.div`
height: 0px; height: 0px;
width: 100%; width: 100%;
border-top: 1px solid ${theme.palette.grey["400"]}; border-top: 1px solid ${theme.palette.grey["200"]};
margin-top: 15px;
margin-bottom: 5px;
`; `;
// const StyledPopover = styled(Popover)` // const StyledPopover = styled(Popover)`
@@ -183,7 +185,7 @@ const HorizontalDivider = styled.div`
const ColorPickerDialog = styled.div` const ColorPickerDialog = styled.div`
background: ${theme.palette.background.default}; background: ${theme.palette.background.default};
width: ${colorPickerWidth}px; width: ${colorPickerWidth}px;
padding: 15px; padding: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -193,11 +195,11 @@ const ColorPickerDialog = styled.div`
} }
& .react-colorful__saturation { & .react-colorful__saturation {
border-bottom: none; border-bottom: none;
border-radius: 5px; border-radius: 0px;
} }
& .react-colorful__hue { & .react-colorful__hue {
height: 20px; height: 8px;
margin-top: 15px; margin: 8px;
border-radius: 5px; border-radius: 5px;
} }
& .react-colorful__saturation-pointer { & .react-colorful__saturation-pointer {
@@ -206,19 +208,22 @@ const ColorPickerDialog = styled.div`
} }
& .react-colorful__hue-pointer { & .react-colorful__hue-pointer {
width: 7px; width: 7px;
border-radius: 3px; border-radius: 8px;
height: 16px;
width: 16px;
border-bottom: 1px solid #eee;
} }
`; `;
const HashLabel = styled.div` const HashLabel = styled.div`
margin: auto 0px auto 10px; margin: auto 0px auto 10px;
font-size: 13px; font-size: 13px;
color: #7d8ec2; color: #333;
font-family: ${theme.typography.button.fontFamily}; font-family: ${theme.typography.button.fontFamily};
`; `;
const HexLabel = styled.div` const HexLabel = styled.div`
margin: auto 10px auto 0px; margin: auto 0px;
font-size: 12px; font-size: 12px;
display: inline-flex; display: inline-flex;
font-family: ${theme.typography.button.fontFamily}; font-family: ${theme.typography.button.fontFamily};
@@ -227,15 +232,22 @@ const HexLabel = styled.div`
const HexColorInputBox = styled.div` const HexColorInputBox = styled.div`
display: inline-flex; display: inline-flex;
flex-grow: 1; flex-grow: 1;
margin-right: 10px;
width: 140px; width: 140px;
height: 28px; height: 28px;
border: 1px solid ${theme.palette.grey["600"]}; border: 1px solid ${theme.palette.grey["300"]};
border-radius: 5px; border-radius: 5px;
&:hover {
border: 1px solid ${theme.palette.grey["600"]};
}
&:focus-within {
outline: 2px solid ${theme.palette.secondary.main};
outline-offset: 1px;
}
`; `;
const HexWrapper = styled.div` const HexWrapper = styled.div`
display: flex; display: flex;
gap: 8px;
flex-grow: 1; flex-grow: 1;
& input { & input {
min-width: 0px; min-width: 0px;
@@ -273,7 +285,8 @@ const ColorPickerInput = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-top: 15px; margin: 8px;
gap: 8px;
`; `;
export default ColorPicker; export default ColorPicker;