Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEAT: adding Horizontal/Vertical #2

Merged
merged 1 commit into from
Nov 7, 2024
Merged

FEAT: adding Horizontal/Vertical #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions apps/studio/common/helpers/twTranslator/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,11 +414,11 @@ const propertyMap: Map<string, Record<string, string> | ((val: string) => string
[
'align-items',
{
'flex-start': 'items-start',
'flex-end': 'items-end',
center: 'items-center',
verticalStart: 'items-start',
verticalEnd: 'items-end',
verticalCenter: 'items-center',
baseline: 'items-baseline',
stretch: 'items-stretch',
verticalStretch: 'items-stretch',
},
],
[
Expand Down Expand Up @@ -1433,10 +1433,10 @@ const propertyMap: Map<string, Record<string, string> | ((val: string) => string
[
'justify-content',
{
'flex-start': 'justify-start',
'flex-end': 'justify-end',
center: 'justify-center',
'space-between': 'justify-between',
horizontalStart: 'justify-start',
horizontalEnd: 'justify-end',
horizontalCenter: 'justify-center',
horizontalSpaceBetween: 'justify-between',
'space-around': 'justify-around',
'space-evenly': 'justify-evenly',
},
Expand Down
137 changes: 56 additions & 81 deletions apps/studio/src/lib/editor/styles/group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,37 @@ export const LayoutGroup = [
options: ['flex', 'grid'],
}),
[
// Flex direction control (row/column)
new SingleStyleImpl('flexDirection', 'row', 'Direction', StyleType.Select, {
options: ['row', 'column'],
}),
new SingleStyleImpl('justifyContent', 'flex-start', 'Justify', StyleType.Select, {
options: ['flex-start', 'center', 'flex-end', 'space-between'],
}),
new SingleStyleImpl('alignItems', 'flex-start', 'Align', StyleType.Select, {
options: ['flex-start', 'center', 'flex-end', 'space-between'],

// Horizontal alignment (Justify Content)
new SingleStyleImpl(
'justifyContent',
'horizontal-start',
'Horizontal',
StyleType.Select,
{
options: [
'horizontalStart',
'horizontalCenter',
'horizontalEnd',
'horizontalSpaceBetween',
],
},
),

// Vertical alignment (Align Items)
new SingleStyleImpl('alignItems', 'vertical-start', 'Vertical', StyleType.Select, {
options: ['verticalStart', 'verticalCenter', 'verticalEnd', 'verticalStretch'],
}),

// Grid settings (for CSS grid)
new SingleStyleImpl('gridTemplateColumns', '', 'Columns', StyleType.Text),
new SingleStyleImpl('gridTemplateRows', '', 'Rows', StyleType.Text),

// Gap control for spacing
new SingleStyleImpl('gap', '0px', 'Gap', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,
max: 1000,
Expand Down Expand Up @@ -151,57 +171,29 @@ export const StyleGroup = [
max: STYLE_CONSTRAINTS.border.radius.max,
}),
[
new SingleStyleImpl(
'borderTopLeftRadius',
'',
'Top Left',
StyleType.Number,

{
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
},
),

new SingleStyleImpl(
'borderTopRightRadius',
'',
'Top Right',
StyleType.Number,

{
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
},
),

new SingleStyleImpl(
'borderBottomLeftRadius',
'',
'Bottom Left',
StyleType.Number,
new SingleStyleImpl('borderTopLeftRadius', '', 'Top Left', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
}),

{
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
},
),
new SingleStyleImpl('borderTopRightRadius', '', 'Top Right', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
}),

new SingleStyleImpl(
'borderBottomRightRadius',
'',
'Bottom Right',
StyleType.Number,
new SingleStyleImpl('borderBottomLeftRadius', '', 'Bottom Left', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
}),

{
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
},
),
new SingleStyleImpl('borderBottomRightRadius', '', 'Bottom Right', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,
min: STYLE_CONSTRAINTS.border.radius.min,
max: STYLE_CONSTRAINTS.border.radius.max,
}),
],
),
new CompoundStyleImpl(
Expand All @@ -223,36 +215,19 @@ export const StyleGroup = [
export const TextGroup = [
new SingleStyleImpl('color', '#000000', 'Color', StyleType.Color),

new SingleStyleImpl('fontSize', '16px', 'Size', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,
min: 1,
max: 1000,
new SingleStyleImpl('fontSize', '16', 'Size', StyleType.Number, {
units: ['px', 'rem', 'em', 'pt'],
min: 0,
max: 500,
}),
new SingleStyleImpl('fontWeight', 'normal', 'Weight', StyleType.Select, {
options: [
'lighter',
'normal',
'bold',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
],

new SingleStyleImpl('fontFamily', '', 'Font', StyleType.Select, {
options: ['Arial', 'Helvetica', 'Times New Roman', 'Courier New'],
}),
new SingleStyleImpl('letterSpacing', '0px', 'Letter', StyleType.Number, {
units: ELEMENT_STYLE_UNITS,

new SingleStyleImpl('lineHeight', '1.5', 'Line Height', StyleType.Number, {
units: ['px', 'em'],
min: 0,
max: 100,
}),
new SingleStyleImpl('lineHeight', '100%', 'Line Height', StyleType.Number, {
units: ['%', 'px'],
max: 1000,
}),
new SingleStyleImpl('textAlign', 'start', 'Align', StyleType.Select, {
options: ['start', 'center', 'end'],
}),
];
27 changes: 9 additions & 18 deletions apps/studio/src/routes/editor/EditPanel/StylesTab/compound/DisplayInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,14 @@ enum DisplayType {

const DisplayTypeMap: Record<DisplayType, string[] | undefined> = {
[DisplayType.block]: [],
[DisplayType.flex]: ['flexDirection', 'justifyContent', 'alignItems', 'gap'],
[DisplayType.flex]: [
'flexDirection',
'horizontalDirection',
'verticalDirection',
'justifyContent',
'alignItems',
'gap',
],
[DisplayType.grid]: ['gridTemplateColumns', 'gridTemplateRows', 'gap'],
};

Expand Down Expand Up @@ -63,22 +70,6 @@ const DisplayInput = observer(({ compoundStyle }: { compoundStyle: CompoundStyle
return selectedStyle.styles['flexDirection'] ?? 'row';
}

function getLabelValue(elementStyle: SingleStyle) {
if (
elementStyle.key === 'justifyContent' ||
(elementStyle.key === 'alignItems' && displayType === DisplayType.flex)
) {
const flexDirection = getFlexDirection() as 'row' | 'column';
if (elementStyle.key === 'justifyContent') {
return flexDirection === 'row' ? 'X Align' : 'Y Align';
} else {
return flexDirection === 'row' ? 'Y Align' : 'X Align';
}
}

return elementStyle.displayName;
}

function renderBottomInputs() {
return compoundStyle.children.map(
(elementStyle) =>
Expand All @@ -92,7 +83,7 @@ const DisplayInput = observer(({ compoundStyle }: { compoundStyle: CompoundStyle
transition={{ duration: 0.2 }}
>
<div className="text-foreground-onlook">
<p className="text-xs text-left">{getLabelValue(elementStyle)}</p>
<p className="text-xs text-left">{elementStyle.displayName}</p>
</div>
<div className="w-32 ml-auto">
{RowColKeys.includes(elementStyle.key) ? (
Expand Down
31 changes: 25 additions & 6 deletions apps/studio/src/routes/editor/EditPanel/StylesTab/single/SelectInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ import { ToggleGroup, ToggleGroupItem } from '@onlook/ui/toggle-group';
import type { SingleStyle } from '@/lib/editor/styles/models';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import {
AlignLeftIcon,
AlignCenterHorizontallyIcon,
AlignRightIcon,
SpaceBetweenHorizontallyIcon,
AlignTopIcon,
AlignCenterVerticallyIcon,
AlignBottomIcon,
SpaceBetweenVerticallyIcon,
} from '@onlook/ui/icons';

const OVERRIDE_OPTIONS: Record<string, string | undefined> = {
'flex-start': 'start',
Expand Down Expand Up @@ -34,6 +44,14 @@ const OVERRIDE_ICONS: Record<string, any> = {
row: <Icons.ArrowRight />,
column: <Icons.ArrowDown />,
block: '--',
horizontalStart: <AlignLeftIcon />,
horizontalCenter: <AlignCenterHorizontallyIcon />,
horizontalEnd: <AlignRightIcon />,
horizontalSpaceBetween: <SpaceBetweenHorizontallyIcon />,
verticalStart: <AlignTopIcon />,
verticalCenter: <AlignCenterVerticallyIcon />,
verticalEnd: <AlignBottomIcon />,
verticalStretch: <SpaceBetweenVerticallyIcon />,
};

const SelectInput = observer(
Expand Down Expand Up @@ -64,8 +82,8 @@ const SelectInput = observer(
onValueChange && onValueChange(elementStyle.key, newValue);
};

function rendeUpToThreeOptions() {
if (!elementStyle.params?.options || elementStyle.params.options.length > 3) {
function renderUpToFourOptions() {
if (!elementStyle.params?.options || elementStyle.params.options.length > 4) {
return null;
}

Expand All @@ -83,15 +101,16 @@ const SelectInput = observer(
value={option}
key={option}
>
{/* Render the icon or fallback to text if no icon is available */}
{OVERRIDE_ICONS[option] ?? option}
</ToggleGroupItem>
))}
</ToggleGroup>
);
}

function renderMoreThanThreeOptions() {
if (!elementStyle.params?.options || elementStyle.params.options.length <= 3) {
function renderMoreThanFourOptions() {
if (!elementStyle.params?.options || elementStyle.params.options.length <= 4) {
return null;
}

Expand Down Expand Up @@ -121,8 +140,8 @@ const SelectInput = observer(

return (
<div>
{rendeUpToThreeOptions()}
{renderMoreThanThreeOptions()}
{renderUpToFourOptions()}
{renderMoreThanFourOptions()}
</div>
);
},
Expand Down
11 changes: 10 additions & 1 deletion packages/ui/src/components/icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,16 @@ import H4Icon from './header-level-icons/h4Icon';
import H5Icon from './header-level-icons/h5Icon';
import H6Icon from './header-level-icons/h6Icon';

export { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
export {
AlignLeftIcon,
AlignCenterHorizontallyIcon,
AlignRightIcon,
SpaceBetweenHorizontallyIcon,
AlignTopIcon,
AlignCenterVerticallyIcon,
AlignBottomIcon,
SpaceBetweenVerticallyIcon
} from '@radix-ui/react-icons';

export interface IconProps {
className?: string;
Expand Down