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

design: url-property-click wireframes (3 frames)

Browse Source 
Default, hover (underline + pointer), and edit mode states
for URL properties in the Inspector panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-24 14:39:08 +01:00
parent 8cbf30358d
commit 5d73655875
1 changed files with 173 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
design/url-property-click.pen Normal file
View File

@@ -0,0 +1,173 @@
{
"children": [
{
"type": "frame",
"id": "urlDefault",
"x": 0,
"y": 0,
"name": "URL Property — default state (no hover)",
"width": 320,
"height": 40,
"fill": "#ffffff",
"layout": "horizontal",
"alignItems": "center",
"padding": [6, 6],
"gap": 8,
"children": [
{
"type": "text",
"id": "urlDefaultLabel",
"name": "label",
"content": "URL",
"fontSize": 10,
"fontWeight": 600,
"letterSpacing": 1.2,
"textTransform": "uppercase",
"fill": "#6b7280"
},
{
"type": "frame",
"id": "urlDefaultValueWrap",
"name": "value-wrapper",
"width": "fill_container",
"layout": "horizontal",
"alignItems": "center",
"justifyContent": "end",
"gap": 4,
"children": [
{
"type": "text",
"id": "urlDefaultValue",
"name": "url-value",
"content": "https://example.com/article",
"fontSize": 13,
"fill": "#374151",
"textAlign": "right"
},
{
"type": "text",
"id": "urlDefaultEditIcon",
"name": "edit-icon",
"content": "pencil",
"fontSize": 12,
"fill": "#9ca3af",
"opacity": 0
}
]
}
]
},
{
"type": "frame",
"id": "urlHover",
"x": 0,
"y": 60,
"name": "URL Property — hover state (underline + pointer cursor)",
"width": 320,
"height": 40,
"fill": "#f9fafb",
"layout": "horizontal",
"alignItems": "center",
"padding": [6, 6],
"gap": 8,
"children": [
{
"type": "text",
"id": "urlHoverLabel",
"name": "label",
"content": "URL",
"fontSize": 10,
"fontWeight": 600,
"letterSpacing": 1.2,
"textTransform": "uppercase",
"fill": "#6b7280"
},
{
"type": "frame",
"id": "urlHoverValueWrap",
"name": "value-wrapper",
"width": "fill_container",
"layout": "horizontal",
"alignItems": "center",
"justifyContent": "end",
"gap": 4,
"children": [
{
"type": "text",
"id": "urlHoverValue",
"name": "url-value-hovered",
"content": "https://example.com/article",
"fontSize": 13,
"fill": "#2563eb",
"textDecoration": "underline",
"textAlign": "right"
},
{
"type": "text",
"id": "urlHoverEditIcon",
"name": "edit-icon-visible",
"content": "pencil",
"fontSize": 12,
"fill": "#6b7280",
"opacity": 1
}
]
}
]
},
{
"type": "frame",
"id": "urlEdit",
"x": 0,
"y": 120,
"name": "URL Property — edit mode (double-click or edit icon)",
"width": 320,
"height": 40,
"fill": "#ffffff",
"layout": "horizontal",
"alignItems": "center",
"padding": [6, 6],
"gap": 8,
"children": [
{
"type": "text",
"id": "urlEditLabel",
"name": "label",
"content": "URL",
"fontSize": 10,
"fontWeight": 600,
"letterSpacing": 1.2,
"textTransform": "uppercase",
"fill": "#6b7280"
},
{
"type": "frame",
"id": "urlEditInputWrap",
"name": "input-wrapper",
"width": "fill_container",
"height": 28,
"fill": "#f3f4f6",
"cornerRadius": 4,
"stroke": {
"align": "inside",
"thickness": 1,
"fill": "#6366f1"
},
"padding": [4, 8],
"alignItems": "center",
"children": [
{
"type": "text",
"id": "urlEditInput",
"name": "edit-input",
"content": "https://example.com/article",
"fontSize": 13,
"fill": "#111827"
}
]
}
]
}
],
"variables": {}
}