fix(shell-core): align property panel icons with TS lucide imports
- 创建组件 button: Sparkles → Diamond (TS uses lucide Diamond) - 弹性布局 buttons: Square/Frame/FolderOpen → LayoutGrid/Rows3/Columns3 (TS layout-section.tsx imports Columns3/Rows3/LayoutGrid/Check) - 位置 R input: Redo → RotateCw (TS uses RotateCw for rotation handle) - Add 9 new lucide d-strings to icons.rs: LayoutGrid, Rows3, Columns3, RotateCw, Diamond, Component, Unlink, Check, ArrowUpRight
This commit is contained in:
Kayshen-X
parent
e92ed98203
commit
dacd4e6994
|
|
@ -77,6 +77,24 @@ pub enum Icon {
|
|||
ChevronUp,
|
||||
/// MessageSquare — chat bubble icon (collapsed AI chat pill).
|
||||
MessageSquare,
|
||||
/// LayoutGrid — 2×2 grid layout-mode (弹性布局 / RightPanel).
|
||||
LayoutGrid,
|
||||
/// Rows3 — horizontal rows layout-mode.
|
||||
Rows3,
|
||||
/// Columns3 — vertical columns layout-mode.
|
||||
Columns3,
|
||||
/// RotateCw — rotation handle for 位置 section.
|
||||
RotateCw,
|
||||
/// Diamond — "create component" button glyph.
|
||||
Diamond,
|
||||
/// Component — component instance indicator.
|
||||
Component,
|
||||
/// Unlink — detach component instance.
|
||||
Unlink,
|
||||
/// Check — checkbox tick.
|
||||
Check,
|
||||
/// ArrowUpRight — link / external nav indicator.
|
||||
ArrowUpRight,
|
||||
}
|
||||
|
||||
impl Icon {
|
||||
|
|
@ -109,6 +127,15 @@ impl Icon {
|
|||
Icon::Close => CLOSE,
|
||||
Icon::ChevronUp => CHEVRON_UP,
|
||||
Icon::MessageSquare => MESSAGE_SQUARE,
|
||||
Icon::LayoutGrid => LAYOUT_GRID,
|
||||
Icon::Rows3 => ROWS_3,
|
||||
Icon::Columns3 => COLUMNS_3,
|
||||
Icon::RotateCw => ROTATE_CW,
|
||||
Icon::Diamond => DIAMOND,
|
||||
Icon::Component => COMPONENT,
|
||||
Icon::Unlink => UNLINK,
|
||||
Icon::Check => CHECK,
|
||||
Icon::ArrowUpRight => ARROW_UP_RIGHT,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -245,6 +272,63 @@ const MESSAGE_SQUARE: &[&str] = &[
|
|||
"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
|
||||
];
|
||||
|
||||
// Lucide `layout-grid.svg` — 4 rounded-rect cells.
|
||||
const LAYOUT_GRID: &[&str] = &[
|
||||
"M4 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
|
||||
"M15 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
|
||||
"M15 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z",
|
||||
"M4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z",
|
||||
];
|
||||
|
||||
// Lucide `rows-3.svg` — round-rect with 2 horizontal dividers.
|
||||
const ROWS_3: &[&str] = &[
|
||||
"M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
|
||||
"M21 9H3",
|
||||
"M21 15H3",
|
||||
];
|
||||
|
||||
// Lucide `columns-3.svg` — round-rect with 2 vertical dividers.
|
||||
const COLUMNS_3: &[&str] = &[
|
||||
"M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
|
||||
"M9 3v18",
|
||||
"M15 3v18",
|
||||
];
|
||||
|
||||
// Lucide `rotate-cw.svg`.
|
||||
const ROTATE_CW: &[&str] = &[
|
||||
"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8",
|
||||
"M21 3v5h-5",
|
||||
];
|
||||
|
||||
// Lucide `diamond.svg`.
|
||||
const DIAMOND: &[&str] = &[
|
||||
"M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z",
|
||||
];
|
||||
|
||||
// Lucide `component.svg`.
|
||||
const COMPONENT: &[&str] = &[
|
||||
"M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z",
|
||||
"M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z",
|
||||
"M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z",
|
||||
"M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z",
|
||||
];
|
||||
|
||||
// Lucide `unlink.svg`.
|
||||
const UNLINK: &[&str] = &[
|
||||
"m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71",
|
||||
"m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71",
|
||||
"M8 2L8 5",
|
||||
"M2 8L5 8",
|
||||
"M16 19L16 22",
|
||||
"M19 16L22 16",
|
||||
];
|
||||
|
||||
// Lucide `check.svg`.
|
||||
const CHECK: &[&str] = &["M20 6 9 17l-5-5"];
|
||||
|
||||
// Lucide `arrow-up-right.svg`.
|
||||
const ARROW_UP_RIGHT: &[&str] = &["M7 7h10v10", "M7 17 17 7"];
|
||||
|
||||
/// Paint `icon` at `top_left`, scaled to `size × size` pixels, in
|
||||
/// `color` strokes of width `stroke_width`. The icon's lucide
|
||||
/// path data is rendered via `RenderBackend::stroke_svg_path`.
|
||||
|
|
@ -351,6 +435,15 @@ mod tests {
|
|||
Icon::Close,
|
||||
Icon::ChevronUp,
|
||||
Icon::MessageSquare,
|
||||
Icon::LayoutGrid,
|
||||
Icon::Rows3,
|
||||
Icon::Columns3,
|
||||
Icon::RotateCw,
|
||||
Icon::Diamond,
|
||||
Icon::Component,
|
||||
Icon::Unlink,
|
||||
Icon::Check,
|
||||
Icon::ArrowUpRight,
|
||||
] {
|
||||
let b = paint_one(icon);
|
||||
assert!(b.paths > 0, "{:?} drew nothing", icon);
|
||||
|
|
|
|||
|
|
@ -100,9 +100,12 @@ pub fn paint_create_component(
|
|||
cx.backend.fill_round_rect(btn_rect, 8.0, theme.muted);
|
||||
cx.backend
|
||||
.stroke_round_rect(btn_rect, 8.0, theme.border, 1.0);
|
||||
// TS uses Diamond icon for the "create component" affordance
|
||||
// (apps/web/src/components/panels/property-panel.tsx imports
|
||||
// Diamond from lucide-react). Sparkles was a stand-in.
|
||||
draw_icon(
|
||||
cx.backend,
|
||||
Icon::Sparkles,
|
||||
Icon::Diamond,
|
||||
Point2D::new(btn_rect.origin.x + 12.0, btn_rect.origin.y + 9.0),
|
||||
18.0,
|
||||
theme.foreground,
|
||||
|
|
@ -160,6 +163,7 @@ pub fn paint_position_section(
|
|||
&snapshot.y.to_string(),
|
||||
);
|
||||
y += INPUT_HEIGHT + 6.0;
|
||||
// TS uses RotateCw for the rotation input (layout-section.tsx).
|
||||
paint_input_with_icon(
|
||||
cx,
|
||||
theme,
|
||||
|
|
@ -167,7 +171,7 @@ pub fn paint_position_section(
|
|||
origin: Point2D::new(x + PAD_X, y),
|
||||
size: Point2D::new(half_w, INPUT_HEIGHT),
|
||||
},
|
||||
Icon::Redo,
|
||||
Icon::RotateCw,
|
||||
"0",
|
||||
Some("°"),
|
||||
);
|
||||
|
|
@ -190,40 +194,40 @@ pub fn paint_position_section(
|
|||
|
||||
pub fn paint_flex_section(cx: &mut PaintCx<'_>, theme: &Theme, x: f32, y: f32, width: f32) -> f32 {
|
||||
let mut y = paint_section_label(cx, theme, "弹性布局", x, y, width);
|
||||
// TS layout-section.tsx uses Columns3 / Rows3 / LayoutGrid for
|
||||
// the three flex modes; LayoutGrid is the default-active mode
|
||||
// (Free / 自由布局).
|
||||
let btn_w = 56.0;
|
||||
let gap = 8.0;
|
||||
let row_x = x + PAD_X;
|
||||
let active = Rect {
|
||||
origin: Point2D::new(row_x, y),
|
||||
size: Point2D::new(btn_w, 32.0),
|
||||
};
|
||||
cx.backend.fill_round_rect(active, 6.0, theme.primary);
|
||||
draw_icon(
|
||||
cx.backend,
|
||||
Icon::Square,
|
||||
Point2D::new(active.origin.x + (btn_w - 18.0) / 2.0, active.origin.y + 7.0),
|
||||
18.0,
|
||||
theme.primary_foreground,
|
||||
1.4,
|
||||
);
|
||||
let mut bx = row_x + btn_w + gap;
|
||||
for icon in [Icon::Frame, Icon::FolderOpen] {
|
||||
let icons = [Icon::LayoutGrid, Icon::Rows3, Icon::Columns3];
|
||||
for (i, icon) in icons.iter().enumerate() {
|
||||
let bx = row_x + i as f32 * (btn_w + gap);
|
||||
let rect = Rect {
|
||||
origin: Point2D::new(bx, y),
|
||||
size: Point2D::new(btn_w, 32.0),
|
||||
};
|
||||
cx.backend.fill_round_rect(rect, 6.0, theme.muted);
|
||||
cx.backend
|
||||
.stroke_round_rect(rect, 6.0, theme.border, 1.0);
|
||||
let is_active = i == 0;
|
||||
if is_active {
|
||||
cx.backend.fill_round_rect(rect, 6.0, theme.primary);
|
||||
} else {
|
||||
cx.backend.fill_round_rect(rect, 6.0, theme.muted);
|
||||
cx.backend
|
||||
.stroke_round_rect(rect, 6.0, theme.border, 1.0);
|
||||
}
|
||||
let icon_color = if is_active {
|
||||
theme.primary_foreground
|
||||
} else {
|
||||
theme.muted_foreground
|
||||
};
|
||||
draw_icon(
|
||||
cx.backend,
|
||||
icon,
|
||||
*icon,
|
||||
Point2D::new(rect.origin.x + (btn_w - 18.0) / 2.0, rect.origin.y + 7.0),
|
||||
18.0,
|
||||
theme.muted_foreground,
|
||||
icon_color,
|
||||
1.4,
|
||||
);
|
||||
bx += btn_w + gap;
|
||||
}
|
||||
y += 32.0 + 12.0;
|
||||
paint_section_divider(cx, theme, x, y, width);
|
||||
|
|
|
|||
Loading…
Reference in a new issue