🐛 fix(client): preserve desktop settings chrome at narrow widths
This commit is contained in:
Saafo committed
1 parent
2fa68cde12
commit
2d3c9cb964
5 files changed
+21
-21
No files matched your search
@@ -86,7 +86,7 @@ it('keeps settings and expanded plugin dialogs clear of the Windows caption acro
|
||||
}, platform)
|
||||
if (await reopenSidebar.isVisible()) await reopenSidebar.click()
|
||||
await openSettings(page, 'zh')
|
||||
await expect.poll(async () => (await settings.boundingBox())?.y).toBe(platform === 'darwin' ? 68 : 24)
|
||||
await expect.poll(async () => (await settings.boundingBox())?.y).toBe(platform === 'darwin' ? 68 : 0)
|
||||
expect((await settingsMask.boundingBox())?.y).toBe(0)
|
||||
await page.keyboard.press('Escape')
|
||||
await settings.waitFor({ state: 'hidden' })
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
en: cd94b4a8dae32670
|
||||
zh: 333b8603e77f92d7
|
||||
/deepseek-ai-dsh-client-ui-settings-general/table-of-contents:
|
||||
en: ae9928d13ce9a84c
|
||||
zh: 20cd645ebd75934b
|
||||
en: 83760d53b3ee5fb8
|
||||
zh: 30dd8802d4ffdcb7
|
||||
/deepseek-ai-dsh-client-ui-settings-general/use-this-package:
|
||||
en: 7c9131139808880d
|
||||
zh: b0b364ac14017999
|
||||
en: c5f03abc00d8cc94
|
||||
zh: ec235407dda15b3b
|
||||
/deepseek-ai-dsh-client-ui-settings-general/use-this-package/the-general-section:
|
||||
en: 8b8a7c6287bb303b
|
||||
zh: 19535112531aedd5
|
||||
|
||||
@@ -24,16 +24,16 @@ Use this package to give the dsh web client a Settings panel, connection-recover
|
||||
|
||||
The Settings panel uses a shared 800 × 800 layout, bounded by the viewport. Longer sections scroll inside the content column; the Account entry uses the account icon. The panel portals beside `#root` rather than inside it, so a macOS window drag region a chrome row declares later in document order cannot swallow its controls.
|
||||
|
||||
Below 768px viewport width the panel fills the viewport and its navigation becomes a horizontal strip: the title shares the first row with the header's action and close seats, the registered section cells scroll sideways on the second, and the active section fills the rest. Cells grow into spare width and hold a minimum width, and the strip scrolls instead of truncating, so a registrant's label length or a longer section roster cannot wrap or clip a name; the selected cell carries initial focus, which brings it into the strip's view. Section content keeps a 16px inline padding at that width, and the 48px gutter separating a preference label from its control narrows with it.
|
||||
In browsers below 768px viewport width, the panel fills the viewport and navigation becomes a horizontal strip: the title shares the first row with the header's action and close seats, the registered section cells scroll sideways on the second, and the active section fills the rest. Cells grow into spare width and hold a minimum width, and the strip scrolls instead of truncating, so a registrant's label length or a longer section roster cannot wrap or clip a name; the selected cell carries initial focus, which brings it into the strip's view. Section content keeps a 16px inline padding at that width, and the 48px gutter separating a preference label from its control narrows with it.
|
||||
|
||||
<a id="use-this-package"></a>
|
||||
## Use this package
|
||||
|
||||
Users reach the shell through the sidebar's bottom Settings control; feature plugins contribute their pages and onboarding steps through the slot ledgers this shell projects. In both the expanded sidebar and collapsed rail, the control exposes the localized Settings label as its accessible name. A pale-yellow **Disconnected** action beside Settings indicates browser offline suspension; its permanent retry glyph marks the retry action, which the Chinese outage copy also names (连接异常，刷新重试). Every recovery attempt shows the shared ongoing loader beside **Reconnecting** with one to three dots advancing every 500ms, and an attempt stays visible for at least 800ms so brief retries do not flicker. Selecting either yellow state starts an immediate retry; press feedback stays within the warning palette. Recovery changes the region to pale-green **Connected** for two seconds from the moment the green pill becomes visible. The pill fades in on appearance, fades out over 150ms on removal, and sizes to its current label. Initial startup and uninterrupted healthy operation remain silent. The shell renders the modal panel, the navigation built from `settings.section` entries, and exactly one mounted onboarding step at a time.
|
||||
|
||||
Below 768px, the body-portaled panel fills the CSS layout viewport without additional safe-area padding. It retains its layout height when the keyboard opens and lets the browser pan the page to reveal focused controls.
|
||||
In a browser below 768px, the body-portaled panel fills the CSS layout viewport without additional safe-area padding. It retains its layout height when the keyboard opens and lets the browser pan the page to reveal focused controls.
|
||||
|
||||
Above the mobile width, Settings uses the [frame’s shared overlay inset](../ui-layout/README.md#window-chrome-seat) and keeps at least 24px of viewport margin. Its mask leaves the Windows caption unpainted; the full-viewport layer still blocks background clicks, and the full-viewport panel covers the mask.
|
||||
Desktop windows at every width, and wider browser windows, use the [frame’s shared overlay inset](../ui-layout/README.md#window-chrome-seat) and keeps at least 24px of viewport margin. Its mask leaves the Windows caption unpainted; the full-viewport layer still blocks background clicks, and the full-viewport panel covers the mask.
|
||||
|
||||
When the page reconnects to a Host running another release, a **Service version changed** dialog draws two lines: **Service** from the Host's previous release (gray) to its current release, joined by a thin solid green arrow because the Host already switched, and **Page** from the release this page booted from to the Host's release (gray), joined by an equally thin dashed gray arrow because only a reload completes it. A line shows versions when its two versions differ and commits otherwise. The page applies no plugin update from that release. **Reload to load the new version** loads it; **Not now**, the close control, a mask click, and Escape keep the page at its own release and stop asking about that Host release. When the Host returns to the page's release, the dialog closes and live updates resume.
|
||||
|
||||
|
||||
@@ -24,16 +24,16 @@ kind: "package-reference"
|
||||
|
||||
设置面板采用各页面共享的 800 × 800 布局，并受视口大小约束。较长的页面在内容栏内部滚动；账号入口使用账号图标。面板挂载在 `#root` 之外而不是其内部，这样在文档序上更靠后的 chrome 行所声明的 macOS 窗口拖拽区不会吞掉它的控件。
|
||||
|
||||
视口宽度低于 768px 时，面板铺满视口，导航变为横向条带：标题与头部操作、关闭入口同处第一行，注册的分区单元在第二行横向滚动，当前分区占满其余空间。单元会在富余宽度中伸展并保有一个最小宽度，条带滚动而不截断，因此注册方的文案长度或更多的分区都不会换行或裁掉名称；选中的单元承接初始焦点，从而被带入条带的可视范围。该宽度下分区内容保留 16px 的行内边距，分隔偏好标签与其控件的 48px 间距也随之收窄。
|
||||
浏览器视口宽度低于 768px 时，面板铺满视口，导航变为横向条带：标题与头部操作、关闭入口同处第一行，注册的分区单元在第二行横向滚动，当前分区占满其余空间。单元会在富余宽度中伸展并保有一个最小宽度，条带滚动而不截断，因此注册方的文案长度或更多的分区都不会换行或裁掉名称；选中的单元承接初始焦点，从而被带入条带的可视范围。该宽度下分区内容保留 16px 的行内边距，分隔偏好标签与其控件的 48px 间距也随之收窄。
|
||||
|
||||
<a id="use-this-package"></a>
|
||||
## 使用本包
|
||||
|
||||
用户通过侧边栏底部的 Settings 控件进入外壳；功能插件通过本外壳所投影的 slot 账本贡献自己的页面与引导步骤。在展开侧边栏和收起轨道中，该控件都会把本地化的 Settings 文案作为其可访问名称。Settings 右侧浅黄色的**连接异常**操作表示浏览器离线暂停；其常驻重试图形与中文文案「连接异常，刷新重试」都指明重试动作。每次恢复尝试都显示共享 ongoing loading 加**重新连接中**，其后一至三个点每 500ms 前进一次，且每次尝试至少可见 800ms，短暂重试不会闪动。选中任一黄色状态都会立即发起重试；按压反馈留在黄色色阶内。恢复后该区域变为浅绿色的**连接成功**，从绿色药丸可见起驻留 2 秒再消失。药丸出现时淡入、移除时以 150ms 淡出，宽度随当前文案自适应。首次启动与未曾中断的健康连接保持静默。外壳渲染模态面板、由 `settings.section` 条目构建的导航，以及每次只挂载一个的引导步骤。
|
||||
|
||||
低于 768px 时，挂载到 body 的面板铺满 CSS 布局视口，不额外留出安全区边距。键盘抬起时保留原有布局高度，由浏览器平移页面以露出获得焦点的控件。
|
||||
浏览器宽度低于 768px 时，挂载到 body 的面板铺满 CSS 布局视口，不额外留出安全区边距。键盘抬起时保留原有布局高度，由浏览器平移页面以露出获得焦点的控件。
|
||||
|
||||
在移动端宽度以上，设置面板使用[框架共享的浮层起点](../ui-layout/README.zh.md#window-chrome-seat)，视口边距至少为 24px。其遮罩不绘制 Windows 顶栏区域，覆盖整个视口的模态层仍阻挡背景点击；移动端铺满视口的面板覆盖该遮罩。
|
||||
任意宽度的桌面窗口及较宽的浏览器窗口中，设置面板使用[框架共享的浮层起点](../ui-layout/README.zh.md#window-chrome-seat)，视口边距至少为 24px。其遮罩不绘制 Windows 顶栏区域，覆盖整个视口的模态层仍阻挡背景点击；移动端铺满视口的面板覆盖该遮罩。
|
||||
|
||||
页面重连到运行另一个 release 的 Host 时，会弹出**服务版本变化**对话框，画出两条线：**服务**从 Host 之前的 release（灰色）指向它当前的 release，用细的绿色实线箭头连接，表示 Host 已经切换；**页面**从页面启动时的 release 指向 Host 的 release（灰色），用同样细的灰色虚线箭头连接，表示要刷新后才完成。每行两端版本号不同时显示版本号，否则显示 commit。页面不应用该 release 的任何插件更新。**刷新以加载新版本**加载它；**暂不刷新**、关闭按钮、点击遮罩和 Escape 都让页面保持自己的 release，并不再为该 Host release 提示。Host 回到页面的 release 时，对话框关闭，热更新恢复。
|
||||
|
||||
|
||||
@@ -255,13 +255,13 @@
|
||||
clip a name; the active cell carries data-modal-autofocus, so opening the
|
||||
panel scrolls it into view. */
|
||||
@media (max-width: 767px) {
|
||||
.overlay {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .overlay {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: var(--dsw-alias-bg-layer-2);
|
||||
}
|
||||
|
||||
.panel {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .panel {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
@@ -274,25 +274,25 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navTitle {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .navTitle {
|
||||
padding: 22px 0 0 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .header {
|
||||
height: auto;
|
||||
padding: 20px 16px 0 10px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* The strip runs edge to edge and pads its own ends, so the first cell lines
|
||||
up with the title and the last one stays clear of the panel edge. */
|
||||
.navList {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .navList {
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
padding: 12px 16px 14px;
|
||||
@@ -302,25 +302,25 @@
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.navList::-webkit-scrollbar {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .navList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Cells grow into spare width and hold a 108px floor. The four shipped
|
||||
sections already measure more than a 390px viewport, so the next cell shows
|
||||
past the edge and the strip reads as scrollable. */
|
||||
.navCell {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .navCell {
|
||||
flex: 1 0 auto;
|
||||
justify-content: center;
|
||||
min-width: 108px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.navLabel {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .navLabel {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.options {
|
||||
:global(html:not([data-windows-titlebar]):not([data-platform='darwin'])) .options {
|
||||
padding: 0 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user