fix(app-iced): 视觉 P2-2/3 滚动条变细变淡 + 图标语汇统一成描边
视觉复审两条: - **P2-2 滚动条偏重**:原来直接用 iced 默认 10px 轨 + `Role::Outline`(那份灰绿在浅色下压过列表内容)。 改 **6px 轨 + 2px 外边距 + `Role::OutlineVariant` 滑块**(比 `Outline` 弱一档的容器描边角色), 圆角由 full 按 6px 折算成 3。功能不变(仍是列表列独立滚动、仍只有这一条 scrollable)。 - **P2-3 图标线宽语汇不一致**:设置页「Java」分组用的是令牌里的 `Play`——它是**填充**字形, 同屏其它图标都是描边。改成描边的 `IconKind::Folder`(Java 分组讲的是运行时安装位置,语义也对), 并在 `pieces.rs` 写明规矩:页面骨架**只用描边图标**,将来若要「主操作允许实心图标」, 由 `components/` 统一定义并只留一处。守门见上一条 commit 的 `pages_use_only_stroked_icons`。
This commit is contained in:
1 parent
a0ccf79b2b
commit
c495fccd6c
4 files changed
+28
-6
No files matched your search
@@ -23,7 +23,7 @@ mod tests;
|
|||||||
|
|
||||||
pub use pieces::{
|
pub use pieces::{
|
||||||
card, divider, empty_state, filled, gap, glyph, glyph_box, scroll_style, text_action,
|
card, divider, empty_state, filled, gap, glyph, glyph_box, scroll_style, text_action,
|
||||||
text_role, text_role_centered, ICON_PX, ICON_SMALL_PX,
|
text_role, text_role_centered, ICON_PX, ICON_SMALL_PX, SCROLLBAR_MARGIN, SCROLLBAR_WIDTH,
|
||||||
};
|
};
|
||||||
|
|
||||||
use iced::widget::{column, container, row};
|
use iced::widget::{column, container, row};
|
||||||
|
|||||||
@@ -25,8 +25,12 @@ use crate::theme::Ui;
|
|||||||
pub(super) const EMPTY_ICON_BLOCK: f32 = 96.0;
|
pub(super) const EMPTY_ICON_BLOCK: f32 = 96.0;
|
||||||
/// 空态字形渲染尺寸(12b 15.1:图标 32~48 `[估]`,取 40)。
|
/// 空态字形渲染尺寸(12b 15.1:图标 32~48 `[估]`,取 40)。
|
||||||
pub(super) const EMPTY_ICON_GLYPH: f32 = 40.0;
|
pub(super) const EMPTY_ICON_GLYPH: f32 = 40.0;
|
||||||
/// 滚动条宽度(iced 默认 10px 的令牌化名字,用于把滑块做成药丸)。
|
/// 滚动条轨宽(视觉复审 P2-2:原来用 iced 默认的 10px,压过了列表内容)。
|
||||||
const SCROLLBAR_TRACK: f32 = 10.0;
|
///
|
||||||
|
/// 取 6:细到不抢视线,又还在命中/可见的下限之上;滑块做成 full 圆角药丸(半径 3)。
|
||||||
|
pub const SCROLLBAR_WIDTH: f32 = 6.0;
|
||||||
|
/// 滑块离卡片内边的留白(2px,避免贴边)。
|
||||||
|
pub const SCROLLBAR_MARGIN: f32 = 2.0;
|
||||||
|
|
||||||
/// 描边卡片(占位:M75 的 `components` 会提供真正的 `OutlinedCard`)。
|
/// 描边卡片(占位:M75 的 `components` 会提供真正的 `OutlinedCard`)。
|
||||||
pub fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a, Message> {
|
pub fn card<'a>(ui: &'a Ui, content: impl Into<Element<'a, Message>>) -> Element<'a, Message> {
|
||||||
@@ -207,6 +211,14 @@ fn text_widget<'a>(
|
|||||||
|
|
||||||
/// 任意尺寸的令牌图标(`icons::RENDER_PX` 只有 24 一档;空态图标要 40)。
|
/// 任意尺寸的令牌图标(`icons::RENDER_PX` 只有 24 一档;空态图标要 40)。
|
||||||
///
|
///
|
||||||
|
/// ## 图标语汇(视觉复审 P2-3)
|
||||||
|
///
|
||||||
|
/// 令牌里 **`Play` / `Stop` / `More` 是填充字形**,其余全是描边。页面骨架里**只用描边图标**:
|
||||||
|
/// 同屏把填充字形和描边字形混在一起,线宽语汇会打架(复审的原话是「Play 是填充字形,
|
||||||
|
/// 同屏其它图标是描边」)。真要做「主操作允许实心图标」这条例外,应当由组件线在
|
||||||
|
/// `components/` 里统一定义并只保留一处,而不是散落在页面里——所以这里干脆一个都不放。
|
||||||
|
/// 守门:`tests/no_hardcoded_tokens.rs` 的 `pages_use_only_stroked_icons`。
|
||||||
|
///
|
||||||
/// 描边宽度仍按令牌的 `Icon::stroke_width(render_px)` 折算,所以视觉线宽在任何尺寸下都是 1.5。
|
/// 描边宽度仍按令牌的 `Icon::stroke_width(render_px)` 折算,所以视觉线宽在任何尺寸下都是 1.5。
|
||||||
pub fn glyph(kind: IconKind, color: Color, render_px: f32) -> Element<'static, Message> {
|
pub fn glyph(kind: IconKind, color: Color, render_px: f32) -> Element<'static, Message> {
|
||||||
let icon = kind.icon();
|
let icon = kind.icon();
|
||||||
@@ -263,9 +275,11 @@ pub fn scroll_style(ui: &Ui) -> impl Fn(&IcedTheme, scrollable::Status) -> scrol
|
|||||||
background: None,
|
background: None,
|
||||||
border: Border::default(),
|
border: Border::default(),
|
||||||
scroller: scrollable::Scroller {
|
scroller: scrollable::Scroller {
|
||||||
background: Background::Color(ui.color(Role::Outline)),
|
// 低对比:用 `OutlineVariant`(比 `Outline` 弱一档的容器描边角色)而不是 `Outline`,
|
||||||
|
// 让滑块明显弱于正文;纯色不透明,CPU/GPU 两档一致。
|
||||||
|
background: Background::Color(ui.color(Role::OutlineVariant)),
|
||||||
border: Border {
|
border: Border {
|
||||||
radius: ui.radius(ShapeScale::Full, SCROLLBAR_TRACK),
|
radius: ui.radius(ShapeScale::Full, SCROLLBAR_WIDTH),
|
||||||
..Border::default()
|
..Border::default()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -113,6 +113,12 @@ fn list_column<'a>(ui: &'a Ui, selected: Option<usize>) -> Element<'a, Message>
|
|||||||
|
|
||||||
// **独立滚动**:只有列表列这一条 scrollable,详情列不跟着滚。
|
// **独立滚动**:只有列表列这一条 scrollable,详情列不跟着滚。
|
||||||
let scroller = scrollable(rows)
|
let scroller = scrollable(rows)
|
||||||
|
.direction(scrollable::Direction::Vertical(
|
||||||
|
scrollable::Scrollbar::new()
|
||||||
|
.width(frame::SCROLLBAR_WIDTH)
|
||||||
|
.scroller_width(frame::SCROLLBAR_WIDTH)
|
||||||
|
.margin(frame::SCROLLBAR_MARGIN),
|
||||||
|
))
|
||||||
.height(Length::Fill)
|
.height(Length::Fill)
|
||||||
.style(frame::scroll_style(ui));
|
.style(frame::scroll_style(ui));
|
||||||
|
|
||||||
|
|||||||
@@ -63,8 +63,10 @@ const GROUPS: [Group; 4] = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
Group {
|
Group {
|
||||||
|
// 描边字形:令牌里 `Play` 是填充字形,和同屏其它描边图标语汇打架(视觉复审 P2-3);
|
||||||
|
// Java 分组讲的是运行时安装位置,用目录图标语义也对得上。
|
||||||
name: "Java",
|
name: "Java",
|
||||||
icon: IconKind::Play,
|
icon: IconKind::Folder,
|
||||||
rows: &[
|
rows: &[
|
||||||
("Runtime", "Temurin 21.0.4"),
|
("Runtime", "Temurin 21.0.4"),
|
||||||
("Default memory", "4 GiB"),
|
("Default memory", "4 GiB"),
|
||||||
|
|||||||
Reference in new issue
Block a user