mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-04 23:12:27 +02:00
fix: optimized customization panel (#239)
* fix: optimized customization panel * Update iconoir.com/components/CustomizationEditor.tsx Co-authored-by: Sam Marks <sam@sammarks.me> --------- Co-authored-by: Sam Marks <sam@sammarks.me>
This commit is contained in:
Luca Burgio
GitHub
parent
a1e16af3b5
commit
8ec9a33978
|
|
@ -2,9 +2,9 @@ import React from 'react';
|
|||
import styled from 'styled-components';
|
||||
import { Button } from './Button';
|
||||
import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
|
||||
import { ColorInput } from './Input';
|
||||
import { ColorButton, ColorInput } from './Input';
|
||||
import { Slider } from './Slider';
|
||||
import { Text13, Text18 } from './Typography';
|
||||
import { Text13, Text15 } from './Typography';
|
||||
|
||||
export interface CustomizationEditorProps {
|
||||
customizations: IconListCustomizations;
|
||||
|
|
@ -38,17 +38,18 @@ export function CustomizationEditor({
|
|||
|
||||
return (
|
||||
<>
|
||||
<CustomizationBox>
|
||||
<Header>
|
||||
<Text18 style={{ fontWeight: 700, color: 'var(--black)' }}>
|
||||
<Text15 style={{ fontWeight: 700, color: 'var(--black)' }}>
|
||||
Customize
|
||||
</Text18>
|
||||
<Button onClick={() => onChange(DEFAULT_CUSTOMIZATIONS)}>Reset</Button>
|
||||
</Text15>
|
||||
<ResetButton onClick={() => onChange(DEFAULT_CUSTOMIZATIONS)}>Reset</ResetButton>
|
||||
</Header>
|
||||
<Field>
|
||||
<Slider
|
||||
label={'Size'}
|
||||
minValue={12}
|
||||
maxValue={128}
|
||||
label={'Optical Size'}
|
||||
minValue={16}
|
||||
maxValue={64}
|
||||
value={[size]}
|
||||
formatOptions={{ maximumFractionDigits: 0 }}
|
||||
onChange={(values) => {
|
||||
|
|
@ -59,11 +60,11 @@ export function CustomizationEditor({
|
|||
</Field>
|
||||
<Field>
|
||||
<Slider
|
||||
label={'Stroke Width'}
|
||||
label={'Stroke Weight'}
|
||||
minValue={0.5}
|
||||
maxValue={3}
|
||||
value={[strokeWidth]}
|
||||
step={0.01}
|
||||
step={0.1}
|
||||
formatOptions={{ maximumFractionDigits: 1 }}
|
||||
onChange={(values) => {
|
||||
setStrokeWidth(values[0]);
|
||||
|
|
@ -81,22 +82,45 @@ export function CustomizationEditor({
|
|||
updateCustomizations({ hexColor: e.target.value });
|
||||
}}
|
||||
/>
|
||||
<ColorButton />
|
||||
|
||||
</HorizontalField>
|
||||
</CustomizationBox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const CustomizationBox = styled.div`
|
||||
background-color:var(--gray-200);
|
||||
width: 84%;
|
||||
padding: 8%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
`;
|
||||
const Header = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 45px;
|
||||
margin-bottom: 30px;
|
||||
border-bottom: solid 1px var(--light-gray);
|
||||
padding-bottom: 10px;
|
||||
`;
|
||||
const Field = styled.div`
|
||||
margin-bottom: 35px;
|
||||
margin-bottom: 24px;
|
||||
`;
|
||||
const HorizontalField = styled(Field)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
const ResetButton = styled(Field)`
|
||||
margin: initial;
|
||||
text-decoration: underline;
|
||||
color: var(--dark-gray);
|
||||
font-size: 13px;
|
||||
|
||||
&:hover{
|
||||
color: var(--black);
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -76,6 +76,6 @@ const FilterContainer = styled.div<{ isMobile?: boolean }>`
|
|||
position: relative;
|
||||
top: 0;
|
||||
display: ${(props) => (props.isMobile ? 'none' : 'block')};
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ const ResetInput = styled.input`
|
|||
|
||||
export const Input = styled(ResetInput)`
|
||||
min-height: 35px;
|
||||
background: var(--super-light-gray);
|
||||
border: 1px solid var(--gray);
|
||||
background: var(--white);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
padding: 6px;
|
||||
|
|
@ -31,10 +30,18 @@ export const Input = styled(ResetInput)`
|
|||
line-height: 21px;
|
||||
font-weight: 500;
|
||||
color: var(--black);
|
||||
border: solid 1px var(--light-gray);
|
||||
|
||||
&:hover{
|
||||
border: solid 1px var(--dark-gray);
|
||||
}
|
||||
&:focus{
|
||||
border: solid 1px var(--dark-gray);
|
||||
}
|
||||
`;
|
||||
|
||||
export const LargeInput = styled(Input)`
|
||||
height: 75px;
|
||||
height: 60px;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
border-radius: 12px;
|
||||
|
|
@ -45,7 +52,7 @@ export const LargeInput = styled(Input)`
|
|||
outline: none;
|
||||
`;
|
||||
|
||||
export const ColorInput = styled(Input)`
|
||||
export const ColorInput = styled.input`
|
||||
padding: 0px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -53,4 +60,17 @@ export const ColorInput = styled(Input)`
|
|||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
}
|
||||
background-color: var(--gray-200);
|
||||
opacity:0;
|
||||
`;
|
||||
|
||||
export const ColorButton = styled.div`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='51px' height='51px' stroke-width='2.3' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' color='%23000000'%3E%3Cpath d='M7 13.161l5.464-5.464a1 1 0 011.415 0l2.12 2.12a1 1 0 010 1.415l-1.928 1.929m-7.071 0l-2.172 2.172a.999.999 0 00-.218.327l-1.028 2.496c-.508 1.233.725 2.466 1.958 1.959l2.497-1.028c.122-.05.233-.125.326-.218l5.708-5.708m-7.071 0h7.071M13.878 3.454l2.121 2.121m4.243 4.243l-2.121-2.121m-2.122-2.122l1.414-1.414a1 1 0 011.415 0l.707.707a1 1 0 010 1.414L18.12 7.697m-2.122-2.122l2.122 2.122' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
right: 20px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
|
@ -72,8 +72,13 @@ function Thumb({ state, trackRef, index }: ThumbProps) {
|
|||
backgroundColor: isFocusVisible
|
||||
? 'var(--accent)'
|
||||
: state.isThumbDragging(index)
|
||||
? 'var(--accent)'
|
||||
: 'var(--black)',
|
||||
? 'var(--black)'
|
||||
: 'var(--white)',
|
||||
scale: isFocusVisible
|
||||
? '1.0'
|
||||
: state.isThumbDragging(index)
|
||||
? '1.3'
|
||||
: '1.0',
|
||||
}}
|
||||
>
|
||||
<VisuallyHidden>
|
||||
|
|
@ -99,7 +104,7 @@ const SliderHeader = styled.div`
|
|||
const Output = styled(Text13)`
|
||||
flex: 1 0 auto;
|
||||
text-align: end;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 6px;
|
||||
`;
|
||||
const Track = styled.div`
|
||||
position: relative;
|
||||
|
|
@ -108,9 +113,9 @@ const Track = styled.div`
|
|||
`;
|
||||
const TrackBackground = styled.div`
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
top: 13px;
|
||||
background: #f4f3f4;
|
||||
height: 2px;
|
||||
top: 15px;
|
||||
background: var(--black);
|
||||
width: 100%;
|
||||
`;
|
||||
const ThumbContainer = styled.div`
|
||||
|
|
@ -119,8 +124,11 @@ const ThumbContainer = styled.div`
|
|||
transform: translateX(-50%);
|
||||
`;
|
||||
const ThumbInner = styled.div`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
outline: solid 2px var(--white);
|
||||
-webkit-box-shadow: inset 0px 0px 0px 2px #000000;
|
||||
box-shadow: inset 0px 0px 0px 2px #000000;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
--blue: #E4F9FF;
|
||||
--green: #E4FFE4;
|
||||
--gray: #E7E7E7;
|
||||
--gray-200: #F9F9FA;
|
||||
--light-gray: #F2F2F2;
|
||||
--lighter-gray: #F9F9F9;
|
||||
--super-light-gray: #FBFBFB;
|
||||
|
|
@ -75,6 +76,19 @@ a {
|
|||
z-index: 2000;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--dark-gray);
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
body {
|
||||
padding: 50px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue