Skip to content

Commit

Permalink
Add border opacity and shadow on images
Browse files Browse the repository at this point in the history
  • Loading branch information
constant committed Jun 18, 2024
1 parent fa95f39 commit 60d7753
Show file tree
Hide file tree
Showing 8 changed files with 1,199 additions and 1,101 deletions.
197 changes: 127 additions & 70 deletions app/components/BorderProperties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ type BorderPropertiesProps = {
borderColor: ValueType[];
borderWidth: ValueType[];
borderType: ValueType[];
borderOpacity: ValueType[];
};
};

Expand All @@ -40,15 +41,15 @@ export const BorderProperties = (props: BorderPropertiesProps) => {
const [colorValues, setColorValues] = useState(
groupBySameColor(
props.properties.borderColor,
props.properties.borderColor.map((property) => property.value)
props.properties.borderOpacity
)
);

useEffect(() => {
setColorValues(
groupBySameColor(
props.properties.borderColor,
props.properties.borderColor.map((property) => property.value)
props.properties.borderOpacity
)
);
}, [props.properties.borderColor]);
Expand Down Expand Up @@ -155,6 +156,7 @@ export const BorderProperties = (props: BorderPropertiesProps) => {
borderWidth: 1,
borderType: "inside",
borderColor: "#000000",
borderOpacity: 1,
};
}),
true
Expand All @@ -169,6 +171,7 @@ export const BorderProperties = (props: BorderPropertiesProps) => {
borderWidth: null,
borderType: null,
borderColor: null,
borderOpacity: null,
};
}),
true
Expand Down Expand Up @@ -244,6 +247,8 @@ export const BorderProperties = (props: BorderPropertiesProps) => {
elementIds: color.elementIds,
value: color.value,
colorVariable: color.colorVariable,
opacity: color.opacity,
opacityVariable: color.opacityVariable,
}}
/>
))}
Expand All @@ -257,13 +262,21 @@ type ColorLineProps = {
color: {
elementIds: string[];
value: string;
opacity: number;
colorVariable?: string | undefined;
opacityVariable?: string | undefined;
};
};

const ColorLine = ({ color }: ColorLineProps) => {
const updateElements = useEditorStore((state) => state.updateElements);

const [opacity, setOpacity] = useState(
color.opacityVariable
? `{{${color.opacityVariable}}}`
: `${color.opacity * 100}%`
);

const [colorValue, setColorValue] = useState(
color?.colorVariable ? `{{${color.colorVariable}}}` : color.value
);
Expand Down Expand Up @@ -318,77 +331,121 @@ const ColorLine = ({ color }: ColorLineProps) => {
);
};

const applyOpacity = (opacity: string) => {
const elementIds = color.elementIds;

const variableName = getVarFromString(opacity);

if (variableName && variableName.length > 0) {
updateElementsVariables(elementIds, "borderOpacity", variableName);
return;
}

const opacityValue = Number(opacity.replace("%", "")) / 100;

if (isNaN(opacityValue) || opacityValue < 0 || opacityValue > 1) {
return;
}

updateElements(
elementIds.map((elementId) => {
const newVariablesWithoutProperty = getVariablesWithoutProperty(
"borderOpacity",
elementId
);

return {
id: elementId,
borderOpacity: opacityValue,
variables: newVariablesWithoutProperty,
};
}),
true
);
};

return (
<Flex
className={css({
alignItems: "center",
gap: 2,
})}
>
<Popover.Root>
<>
<PopoverRadix.Anchor>
<div className={grid({ columns: 12, gap: 2 })}>
<div className={gridItem({ colSpan: 7 })}>
<PropertyTextField
icon={
<Popover.Trigger onClick={(e) => e.stopPropagation()}>
<button
className={css({
width: "24px",
height: "20px",
flexShrink: 0,
_hover: {
cursor: "pointer",
},
borderRadius: "3px",
})}
style={{
backgroundColor: color.value,
}}
/>
</Popover.Trigger>
<Popover.Root>
<>
<PopoverRadix.Anchor>
<div className={grid({ columns: 12, gap: 2 })}>
<div className={gridItem({ colSpan: 7 })}>
<PropertyTextField
icon={
<Popover.Trigger onClick={(e) => e.stopPropagation()}>
<button
className={css({
width: "24px",
height: "20px",
flexShrink: 0,
_hover: {
cursor: "pointer",
},
borderRadius: "3px",
})}
style={{
backgroundColor: color.value,
}}
/>
</Popover.Trigger>
}
hasVariable={color.colorVariable ? true : false}
placeholder="color hex"
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
onBlur={(e) => {
applyColorInput(e.target.value);
}}
onKeyUp={(e) => {
if (e.key === "Enter") {
applyColorInput(e.currentTarget.value);
}
hasVariable={!!color.colorVariable}
placeholder="color hex"
value={colorValue}
onChange={(e) => setColorValue(e.target.value)}
onBlur={(e) => {
applyColorInput(e.target.value);
}}
onKeyUp={(e) => {
if (e.key === "Enter") {
applyColorInput(e.currentTarget.value);
}
}}
/>
</div>
}}
/>
</div>
</PopoverRadix.Anchor>
<Popover.Content side="left">
<SelectPicker.SketchPicker
disableAlpha
styles={{
default: {
picker: {
boxShadow: "none",
},
<div className={gridItem({ colSpan: 5 })}>
<PropertyTextField
hasVariable={color.opacityVariable ? true : false}
placeholder="Opacity"
value={opacity}
onChange={(e) => {
setOpacity(e.target.value);
}}
onBlur={(e) => {
applyOpacity(e.target.value);
}}
onKeyUp={(e) => {
if (e.key === "Enter") {
applyOpacity(e.currentTarget.value);
}
}}
/>
</div>
</div>
</PopoverRadix.Anchor>
<Popover.Content side="left">
<SelectPicker.SketchPicker
disableAlpha
styles={{
default: {
picker: {
boxShadow: "none",
},
}}
className={css({
background: "var(--colors-background)!important",
})}
color={color.value}
onChange={(newColor) => {
applyColor(newColor.hex);
}}
onChangeComplete={(newColor) => {
applyColor(newColor.hex, true);
}}
/>
</Popover.Content>
</>
</Popover.Root>
</Flex>
},
}}
className={css({
background: "var(--colors-background)!important",
})}
color={color.value}
onChange={(newColor) => {
applyColor(newColor.hex);
}}
onChangeComplete={(newColor) => {
applyColor(newColor.hex, true);
}}
/>
</Popover.Content>
</>
</Popover.Root>
);
};
Loading

0 comments on commit 60d7753

Please sign in to comment.