mirror of
https://github.com/l0ng-ai/tty7.git
synced 2026-10-03 08:02:02 +00:00
feat(settings): restyle the settings page after the v4 design
- Nav: the rail's tinted fill and surface ladder behind a divider hairline; a 28px filled search well; 28px rows in 7px pills, the current one on the selected rung at medium weight instead of the accent; match counts in muted ink; the modified-only filter toggles like a nav row. - Pages: the title sits in the 48px title-bar band at 16/16rem; group headings are 11.5/16rem medium muted on a 28px line; sections are split by a 0.5px divider with 16px either side. - Rows: labels in body ink at regular weight, descriptions at 12/16rem muted, 28px floor with 8px padding; a search hit wears the faint neutral fill rather than the accent tint. - Controls: text fields and dropdowns are 28px filled pills with no outline; buttons, segmented tracks and steppers are 26px with a 6px radius on the same fill. The one primary action per view (save theme draft, connect, install update) is the inverted neutral fill of the commit button. Switches and sliders keep the accent. - SSH: host list header with 26px tiles and a filled search, 22px group headings, 42px two-line host rows; the form's labels are a muted, right-aligned column level with 28px fields; disclosure headers use a chevron on a 28px band. - Theme cards are filled and unoutlined, taking the selected rung while open; the theme panel keeps the content fill with a divider edge and its title in the title-bar band. Keycaps are filled with no outline and shortcut rows are divided by 0.5px hairlines. - right_panel::SECTION_GAP is now shared; docs/design-system.md updated.
This commit is contained in:
+12
-2
@@ -60,7 +60,7 @@ Git 的新增/修改标记种子为绿 `#2F8A52` / `#4CC27A`、琥珀 `#B7791F`
|
||||
- 行内辅助按钮至少保留现有 24px 命中区域;增大图标不能挤掉文本预算。
|
||||
- 工具图标使用中性文字色。品牌用小图形识别,饱和色留给状态点。
|
||||
- 字号跟随界面缩放;正文 14/16rem,说明 12/16rem,章节标题 16/16rem。
|
||||
- 左侧栏分组标题为 11.5/16rem、medium、辅助色;右侧紧凑分组标题为 12/16rem、semibold;设置页章节标题仍为 16/16rem。Session 字段名和值同为正文尺寸,以颜色区分层级。
|
||||
- 左侧栏分组标题为 11.5/16rem、medium、辅助色;右侧紧凑分组标题为 12/16rem、semibold;设置页只有页标题为 16/16rem semibold,页内分组标题与信息页同为 11.5/16rem medium 辅助色。Session 字段名和值同为正文尺寸,以颜色区分层级。
|
||||
- 辅助文字必须在实际的内容、侧栏、浮层背景上均达到 4.5:1;普通路径、数量和说明不再叠加透明度。静态 PID 使用中性文字。
|
||||
- 放大界面字号时,Git 行高与设置导航宽度同步调整;窄侧栏优先保留分支名,长文件名须明确省略并可查看完整路径。
|
||||
- 侧栏当前标签页标题用 medium(测宽与渲染同一字重),分组标题用 medium;正文和辅助说明保持 regular。
|
||||
@@ -96,7 +96,17 @@ Git 的新增/修改标记种子为绿 `#2F8A52` / `#4CC27A`、琥珀 `#B7791F`
|
||||
目录右对齐、从开头省略。History 区以细线分隔,标题 32px;提交行 26px,1px 连线 + 7px 节点,
|
||||
HEAD 实心、其余空心环;整页只有一条 lane 时连线与节点改用中性色;时间列固定宽度右对齐,
|
||||
HEAD 引用用淡底胶囊。
|
||||
- **设置**:章节标题 > 标签 > 描述;开关/滑块/主操作共享强调色;分隔线弱于控件边界。
|
||||
- **设置**:页标题 > 分组标题 > 标签 > 描述。左侧导航用 `Neutrals.rail` 底与其 surface 阶,右缘细分隔线;
|
||||
搜索框 28px 浅底(圆角 7);导航行 28px、圆角 7、左右内边距 8,当前项为 selected 阶 + medium,不用强调色。
|
||||
页标题立在 48px 标题栏带内;分组标题 28px、11.5/16rem medium 辅助色;分组之间是 0.5px 分隔线,上下各 16px。
|
||||
设置行:标签正文色 regular,描述 12/16rem 辅助色,行最低 28px、内边距 8(hover/搜索命中的底色外扩 8px);
|
||||
搜索命中行用浅中性底,不用强调色。输入框与下拉框 28px,按钮、分段控件、步进器 26px(圆角 6);
|
||||
输入框/下拉框/分段轨道/次要按钮都用同一浅底(surface 半阶)且无描边,分段当前格为 selected 阶 + medium。
|
||||
每个视图唯一的主操作(保存主题草稿、连接、安装更新)用反色中性,同 Git 提交按钮;不可执行时回到浅底。
|
||||
开关与滑块仍用强调色。SSH 主机列表:标题行带 26px 图标按钮,28px 浅底搜索,分组标题 22px,
|
||||
主机行 42px 两行(标题正文、地址 11.5/16rem 辅助色);主机表单字段名为辅助色右对齐标签列。
|
||||
主题卡片为浅底无描边,展开时为 selected 阶;主题面板与内容同色、左缘细分隔线,标题立在标题栏带内。
|
||||
快捷键键帽为浅底无描边,行间 0.5px 分隔线。
|
||||
- **菜单与命令面板**:亮度抬升、有限阴影;当前键盘行清楚,普通项不着色;小窗口内可滚动。
|
||||
- **工作区切换器**:760px 浮层,距顶 112px,圆角 12px;搜索行 48px(右侧 `esc` 键帽),
|
||||
主体 420px 分两栏、只用细线分隔,页脚 40px(左「新建工作区」幽灵按钮,右键帽提示
|
||||
|
||||
@@ -852,7 +852,7 @@ impl Tty7App {
|
||||
|
||||
/// The two views, as a switch rather than a control.
|
||||
///
|
||||
/// Not [`Tty7App::segmented_on`]: that one is a bordered track, which is
|
||||
/// Not [`Tty7App::segmented_on`]: that one is a filled track, which is
|
||||
/// right in a settings row, where it ends a line of prose and has to
|
||||
/// announce itself as something you operate. On a title bar it was the
|
||||
/// only bordered thing on the strip — the close tile beside it is a bare
|
||||
|
||||
@@ -86,7 +86,7 @@ const PROC_ROW_H: f32 = 26.;
|
||||
const PROC_INDENT: f32 = 14.;
|
||||
|
||||
/// The space between two sections of the Info tab.
|
||||
const SECTION_GAP: f32 = 16.;
|
||||
pub(crate) const SECTION_GAP: f32 = 16.;
|
||||
|
||||
/// The Session label column's floor, gap included, at the default 16px rem.
|
||||
const INFO_LABEL_MIN: f32 = 76.;
|
||||
|
||||
+1067
-627
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user