davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: merge add-property-inline frames into ui-design.pen

Browse Source
This commit is contained in:
lucaronin
2026-02-26 14:34:23 +01:00
parent f842f2b580
commit c0240c5d84
1 changed files with 506 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

506
ui-design.pen
View File

@@ -19568,6 +19568,512 @@
]
}
]
},
{
"type": "frame",
"id": "apEmpty",
"x": 0,
"y": 0,
"name": "Add Property — Inline Form (Empty State)",
"theme": {
"Mode": "Light"
},
"width": 320,
"height": 180,
"fill": "$--background",
"layout": "vertical",
"gap": 8,
"padding": 12,
"children": [
{
"type": "text",
"id": "apEmptyDesc",
"name": "description",
"fill": "$--muted-foreground",
"content": "Inline add-property form: replaces the old grey popup. Fields are horizontal, matching existing property row layout. Shows after clicking + Add property.",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "apEmptyExisting1",
"name": "Existing Property Row — Status",
"width": "fill_container",
"cornerRadius": 4,
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "apEmptyLabel1",
"fill": "$--muted-foreground",
"content": "STATUS",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "500",
"letterSpacing": 1.2
},
{
"type": "frame",
"id": "apEmptyBadge1",
"fill": "$--accent-green-light",
"cornerRadius": 16,
"padding": [
1,
6
],
"children": [
{
"type": "text",
"id": "apEmptyBadgeText1",
"fill": "$--accent-green",
"content": "ACTIVE",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"letterSpacing": 1.2
}
]
}
]
},
{
"type": "frame",
"id": "apEmptySep",
"name": "Separator",
"width": "fill_container",
"height": 1,
"fill": "$--border"
},
{
"type": "frame",
"id": "apEmptyForm",
"name": "Inline Add Property Form — Empty",
"width": "fill_container",
"gap": 6,
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "apEmptyNameInput",
"name": "Name Input",
"width": 90,
"height": 26,
"fill": "$--muted",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--border"
},
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "apEmptyNamePlaceholder",
"fill": "$--muted-foreground",
"content": "Name",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "apEmptyTypeSelect",
"name": "Type Selector",
"width": 72,
"height": 26,
"fill": "$--muted",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--border"
},
"padding": [
4,
6
],
"gap": 4,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "apEmptyTypeIcon",
"width": 12,
"height": 12,
"iconFontName": "type",
"iconFontFamily": "lucide",
"fill": "$--muted-foreground"
},
{
"type": "text",
"id": "apEmptyTypePlaceholder",
"fill": "$--muted-foreground",
"content": "Text",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "icon_font",
"id": "apEmptyTypeChevron",
"width": 10,
"height": 10,
"iconFontName": "chevron-down",
"iconFontFamily": "lucide",
"fill": "$--muted-foreground"
}
]
},
{
"type": "frame",
"id": "apEmptyValueInput",
"name": "Value Input",
"width": "fill_container",
"height": 26,
"fill": "$--muted",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--border"
},
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "apEmptyValuePlaceholder",
"fill": "$--muted-foreground",
"content": "Value",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "apEmptyConfirmBtn",
"name": "Confirm Button",
"width": 24,
"height": 24,
"fill": "$--primary",
"cornerRadius": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "apEmptyConfirmIcon",
"width": 14,
"height": 14,
"iconFontName": "check",
"iconFontFamily": "lucide",
"fill": "#ffffff"
}
]
},
{
"type": "frame",
"id": "apEmptyCancelBtn",
"name": "Cancel Button",
"width": 24,
"height": 24,
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--border"
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "apEmptyCancelIcon",
"width": 14,
"height": 14,
"iconFontName": "x",
"iconFontFamily": "lucide",
"fill": "$--muted-foreground"
}
]
}
]
}
]
},
{
"type": "frame",
"id": "apFilled",
"x": 400,
"y": 0,
"name": "Add Property — Inline Form (Filled State)",
"theme": {
"Mode": "Light"
},
"width": 320,
"height": 180,
"fill": "$--background",
"layout": "vertical",
"gap": 8,
"padding": 12,
"children": [
{
"type": "text",
"id": "apFilledDesc",
"name": "description",
"fill": "$--muted-foreground",
"content": "Filled state: user has typed a property name, selected a type (Date), and entered a value. Confirm button is enabled (blue). The form looks like the property row it will create.",
"fontFamily": "Inter",
"fontSize": 11,
"fontWeight": "normal"
},
{
"type": "frame",
"id": "apFilledExisting1",
"name": "Existing Property Row — Status",
"width": "fill_container",
"cornerRadius": 4,
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "apFilledLabel1",
"fill": "$--muted-foreground",
"content": "STATUS",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "500",
"letterSpacing": 1.2
},
{
"type": "frame",
"id": "apFilledBadge1",
"fill": "$--accent-green-light",
"cornerRadius": 16,
"padding": [
1,
6
],
"children": [
{
"type": "text",
"id": "apFilledBadgeText1",
"fill": "$--accent-green",
"content": "ACTIVE",
"fontFamily": "IBM Plex Mono",
"fontSize": 10,
"fontWeight": "600",
"letterSpacing": 1.2
}
]
}
]
},
{
"type": "frame",
"id": "apFilledSep",
"name": "Separator",
"width": "fill_container",
"height": 1,
"fill": "$--border"
},
{
"type": "frame",
"id": "apFilledForm",
"name": "Inline Add Property Form — Filled",
"width": "fill_container",
"gap": 6,
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "apFilledNameInput",
"name": "Name Input (filled)",
"width": 90,
"height": 26,
"fill": "$--muted",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--primary"
},
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "apFilledNameText",
"fill": "$--foreground",
"content": "deadline",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "apFilledTypeSelect",
"name": "Type Selector (Date selected)",
"width": 72,
"height": 26,
"fill": "$--muted",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--border"
},
"padding": [
4,
6
],
"gap": 4,
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "apFilledTypeIcon",
"width": 12,
"height": 12,
"iconFontName": "calendar",
"iconFontFamily": "lucide",
"fill": "$--muted-foreground"
},
{
"type": "text",
"id": "apFilledTypeText",
"fill": "$--foreground",
"content": "Date",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal"
},
{
"type": "icon_font",
"id": "apFilledTypeChevron",
"width": 10,
"height": 10,
"iconFontName": "chevron-down",
"iconFontFamily": "lucide",
"fill": "$--muted-foreground"
}
]
},
{
"type": "frame",
"id": "apFilledValueInput",
"name": "Value Input (filled)",
"width": "fill_container",
"height": 26,
"fill": "$--muted",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--primary"
},
"padding": [
4,
6
],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "apFilledValueText",
"fill": "$--foreground",
"content": "2026-03-15",
"fontFamily": "Inter",
"fontSize": 12,
"fontWeight": "normal"
}
]
},
{
"type": "frame",
"id": "apFilledConfirmBtn",
"name": "Confirm Button (enabled)",
"width": 24,
"height": 24,
"fill": "$--primary",
"cornerRadius": 4,
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "apFilledConfirmIcon",
"width": 14,
"height": 14,
"iconFontName": "check",
"iconFontFamily": "lucide",
"fill": "#ffffff"
}
]
},
{
"type": "frame",
"id": "apFilledCancelBtn",
"name": "Cancel Button",
"width": 24,
"height": 24,
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "$--border"
},
"justifyContent": "center",
"alignItems": "center",
"children": [
{
"type": "icon_font",
"id": "apFilledCancelIcon",
"width": 14,
"height": 14,
"iconFontName": "x",
"iconFontFamily": "lucide",
"fill": "$--muted-foreground"
}
]
}
]
}
]
}
],
"themes": {