From 4e79a74e361654ed396146cae80c1980fd3fa691 Mon Sep 17 00:00:00 2001 From: McKayla Lankau Date: Fri, 14 Jun 2024 11:28:39 -0400 Subject: [PATCH] Add Icons for Flex Component Inspector Controls (#5936) Adding the icons to be used in #5851 --- editor/src/uuiui/icons.tsx | 182 ++++++++++++++++++++++++++++ utopia-api/src/primitives/icons.tsx | 26 ++++ 2 files changed, 208 insertions(+) diff --git a/editor/src/uuiui/icons.tsx b/editor/src/uuiui/icons.tsx index 7913ac60ac0f..2a99e8098dee 100644 --- a/editor/src/uuiui/icons.tsx +++ b/editor/src/uuiui/icons.tsx @@ -463,6 +463,188 @@ export const Icons = { width: 16, height: 16, }), + FlexDirectionRow: makeIcon({ + category: 'inspector-element', + type: 'arrowRight', + color: 'main', + width: 16, + height: 16, + }), + FlexDirectionRowReverse: makeIcon({ + category: 'inspector-element', + type: 'arrowLeft', + color: 'main', + width: 16, + height: 16, + }), + FlexDirectionColumn: makeIcon({ + category: 'inspector-element', + type: 'arrowDown', + color: 'main', + width: 16, + height: 16, + }), + FlexDirectionColumnReverse: makeIcon({ + category: 'inspector-element', + type: 'arrowUp', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsRowCenter: makeIcon({ + category: 'inspector-element', + type: 'alignItems-row-center', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsRowFlexStart: makeIcon({ + category: 'inspector-element', + type: 'alignItems-row-flexStart', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsRowFlexEnd: makeIcon({ + category: 'inspector-element', + type: 'alignItems-row-flexEnd', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsRowStretch: makeIcon({ + category: 'inspector-element', + type: 'alignItems-row-stretch', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsRowBaseline: makeIcon({ + category: 'inspector-element', + type: 'alignItems-row-baseline', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsColumnCenter: makeIcon({ + category: 'inspector-element', + type: 'alignItems-column-center', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsColumnFlexStart: makeIcon({ + category: 'inspector-element', + type: 'alignItems-column-flexStart', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsColumnFlexEnd: makeIcon({ + category: 'inspector-element', + type: 'alignItems-column-flexEnd', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsColumnStretch: makeIcon({ + category: 'inspector-element', + type: 'alignItems-column-stretch', + color: 'main', + width: 16, + height: 16, + }), + AlignItemsColumnBaseline: makeIcon({ + category: 'inspector-element', + type: 'alignItems-column-baseline', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentRowCenter: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-row-center', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentRowFlexStart: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-row-flexstart', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentRowFlexEnd: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-row-flexend', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentRowSpaceBetween: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-row-spaceBetween', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentRowSpaceAround: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-row-spaceAround', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentRowSpaceEvenly: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-row-spaceEvenly', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentColumnCenter: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-column-center', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentColumnFlexStart: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-column-flexstart', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentColumnFlexEnd: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-column-flexend', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentColumnSpaceBetween: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-column-spaceBetween', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentColumnSpaceAround: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-column-spaceAround', + color: 'main', + width: 16, + height: 16, + }), + JustifyContentColumnSpaceEvenly: makeIcon({ + category: 'inspector-element', + type: 'justifyContent-column-spaceEvenly', + color: 'main', + width: 16, + height: 16, + }), } as const export const FunctionIcons = { diff --git a/utopia-api/src/primitives/icons.tsx b/utopia-api/src/primitives/icons.tsx index a902fd5f2ec8..0a6fe0a4242c 100644 --- a/utopia-api/src/primitives/icons.tsx +++ b/utopia-api/src/primitives/icons.tsx @@ -78,6 +78,32 @@ export const UtopiaIcons = [ 'TextAlignLeft', 'TextAlignCenter', 'TextAlignRight', + 'FlexDirectionRow', + 'FlexDirectionRowReverse', + 'FlexDirectionColumn', + 'FlexDirectionColumnReverse', + 'AlignItemsRowCenter', + 'AlignItemsRowFlexStart', + 'AlignItemsRowFlexEnd', + 'AlignItemsRowStretch', + 'AlignItemsRowBaseline', + 'AlignItemsColumnCenter', + 'AlignItemsColumnFlexStart', + 'AlignItemsColumnFlexEnd', + 'AlignItemsColumnStretch', + 'AlignItemsColumnBaseline', + 'JustifyContentRowCenter', + 'JustifyContentRowFlexStart', + 'JustifyContentRowFlexEnd', + 'JustifyContentRowSpaceBetween', + 'JustifyContentRowSpaceAround', + 'JustifyContentRowSpaceEvenly', + 'JustifyContentColumnCenter', + 'JustifyContentColumnFlexStart', + 'JustifyContentColumnFlexEnd', + 'JustifyContentColumnSpaceBetween', + 'JustifyContentColumnSpaceAround', + 'JustifyContentColumnSpaceEvenly', ] as const export type UtopiaIcon = (typeof UtopiaIcons)[number]