fix: reveal conversation actions on hover
Conversation rows always reserved space for the more-actions button, and the active row kept it visible. The button now replaces the right-side timestamp only on hover, keyboard focus, or while its menu is open, leaving more room for conversation titles and timestamps by default. Release note: 会话列表仅在悬停或键盘聚焦时显示更多操作按钮,更新时间默认更靠右,为会话标题留出更多空间。
This commit is contained in:
+5
-3
@@ -285,9 +285,11 @@
|
|||||||
- 关联 Task 的 Conversation 在行最左侧显示独立展开按钮,父会话行不重复任务标签或数量;
|
- 关联 Task 的 Conversation 在行最左侧显示独立展开按钮,父会话行不重复任务标签或数量;
|
||||||
展开后的每个 Task 子项左侧显示名称,模式、计划和共享状态标记收在右侧,与父会话的
|
展开后的每个 Task 子项左侧显示名称,模式、计划和共享状态标记收在右侧,与父会话的
|
||||||
更新时间位置一致;展开层级只到 Task,不展示 Job、Subjob 或 Run。
|
更新时间位置一致;展开层级只到 Task,不展示 Job、Subjob 或 Run。
|
||||||
- 会话标题保持单行且不挤压时间或操作按钮。标题实际溢出时,悬停会话行才在标题的固定裁切
|
- 会话标题保持单行且不挤压更新时间。更新时间默认靠近行右侧;低频的更多操作按钮不常驻
|
||||||
区域内平滑横向滑动以展示完整名称;移开后快速复位。未溢出标题不产生位移动效,
|
占位,只在悬停会话行时替换右侧时间显示。键盘焦点进入会话行或操作菜单展开时,按钮仍
|
||||||
`prefers-reduced-motion` 下禁用滑动并保留完整标题提示。
|
保持可见。标题实际溢出时,悬停会话行才在标题的固定裁切区域内平滑横向滑动以展示完整
|
||||||
|
名称;移开后快速复位。未溢出标题不产生位移动效,`prefers-reduced-motion` 下禁用滑动
|
||||||
|
并保留完整标题提示。
|
||||||
- 分支会话在侧栏标题前和聊天顶栏标题旁显示同一个横向分叉徽标;徽标通过可访问名称和
|
- 分支会话在侧栏标题前和聊天顶栏标题旁显示同一个横向分叉徽标;徽标通过可访问名称和
|
||||||
工具提示说明来源会话,不能只靠图形表达。分支不改成树状会话列表,也不挤压更新时间。
|
工具提示说明来源会话,不能只靠图形表达。分支不改成树状会话列表,也不挤压更新时间。
|
||||||
- 新建 Task 后可以首次自动展开所属 Conversation;用户手动折叠后保持其选择,后台状态变化
|
- 新建 Task 后可以首次自动展开所属 Conversation;用户手动折叠后保持其选择,后台状态变化
|
||||||
|
|||||||
@@ -76,8 +76,10 @@ Task 行只显示聚合后的用户状态,不要求用户理解内部 Job/Run
|
|||||||
|
|
||||||
- 无 Task 的 Conversation 保持现有单行样式。
|
- 无 Task 的 Conversation 保持现有单行样式。
|
||||||
- 有 Task 时在行最左侧显示独立展开按钮;父会话行不重复显示任务标签或数量。
|
- 有 Task 时在行最左侧显示独立展开按钮;父会话行不重复显示任务标签或数量。
|
||||||
- 会话标题溢出时保持时间和操作区固定;悬停会话行后,标题在自身裁切区域内横向滑动展示
|
- 更新时间默认靠近行右侧,更多操作按钮不常驻占位;悬停会话行时,按钮替换右侧时间显示。
|
||||||
完整名称。未溢出标题不滑动,减少动态效果偏好下使用完整标题提示而不产生位移。
|
键盘焦点进入会话行或操作菜单展开时,按钮仍保持可见。会话标题溢出时保持右侧区域固定,
|
||||||
|
并在自身裁切区域内横向滑动展示完整名称。未溢出标题不滑动,减少动态效果偏好下使用完整
|
||||||
|
标题提示而不产生位移。
|
||||||
- 展开后每个 Task 子项左侧显示名称,右侧显示本地化的模式、计划和状态标记,与父会话
|
- 展开后每个 Task 子项左侧显示名称,右侧显示本地化的模式、计划和状态标记,与父会话
|
||||||
更新时间对齐;已完成使用带勾成功点并将文案保留给辅助技术。列表不显示 Job、Subjob、
|
更新时间对齐;已完成使用带勾成功点并将文案保留给辅助技术。列表不显示 Job、Subjob、
|
||||||
Run 或工具步骤。
|
Run 或工具步骤。
|
||||||
|
|||||||
@@ -7640,13 +7640,7 @@ function App(): React.JSX.Element {
|
|||||||
`conversation-branch-disabled-${conversation.id}`
|
`conversation-branch-disabled-${conversation.id}`
|
||||||
return (
|
return (
|
||||||
<div className="conversation-entry" key={conversation.id}>
|
<div className="conversation-entry" key={conversation.id}>
|
||||||
<div
|
<div className="conversation-row">
|
||||||
className={
|
|
||||||
conversation.id === activeId
|
|
||||||
? 'conversation-row conversation-row--active'
|
|
||||||
: 'conversation-row'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{conversationTasks.length > 0 && (
|
{conversationTasks.length > 0 && (
|
||||||
<button
|
<button
|
||||||
aria-expanded={tasksExpanded}
|
aria-expanded={tasksExpanded}
|
||||||
|
|||||||
@@ -251,24 +251,33 @@ describe('WorkspacePrimitives', () => {
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('keeps the conversation action close to the sidebar edge', () => {
|
it('reveals the conversation action without reserving its space', () => {
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.conversation-row:has\(\.conversation-task-toggle\) \.conversation-item\s*\{[^}]*padding-left:\s*34px;/u
|
/\.conversation-row:has\(\.conversation-task-toggle\) \.conversation-item\s*\{[^}]*padding-left:\s*34px;/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.conversation-task-toggle\s*\{[^}]*left:\s*3px;[^}]*width:\s*28px;[^}]*height:\s*28px;/u
|
/\.conversation-task-toggle\s*\{[^}]*left:\s*3px;[^}]*width:\s*28px;[^}]*height:\s*28px;/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).not.toMatch(
|
||||||
/\.conversation-row \.conversation-item\s*\{[^}]*padding-right:\s*36px;/u
|
/\.conversation-row \.conversation-item\s*\{[^}]*padding-right:/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.conversation-more\s*\{[^}]*right:\s*5px;/u
|
/\.conversation-more\s*\{[^}]*right:\s*5px;/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.conversation-row:has\(\.conversation-activity-indicator\)\s+\.conversation-item\s*\{[^}]*padding-right:\s*52px;/u
|
/\.conversation-row:hover \.conversation-more,\s*\.conversation-row:focus-within \.conversation-more,[^{]*\{[^}]*opacity:\s*1;/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).toMatch(
|
expect(stylesheet).toMatch(
|
||||||
/\.conversation-activity-indicator\s*\{[^}]*right:\s*38px;/u
|
/\.conversation-row:hover \.conversation-item small,[^{]*\.conversation-item small\s*\{[^}]*opacity:\s*0;/u
|
||||||
|
)
|
||||||
|
expect(stylesheet).not.toContain(
|
||||||
|
'.conversation-row--active .conversation-more'
|
||||||
|
)
|
||||||
|
expect(stylesheet).toMatch(
|
||||||
|
/\.conversation-row:has\(\.conversation-activity-indicator\)\s+\.conversation-item\s*\{[^}]*padding-right:\s*28px;/u
|
||||||
|
)
|
||||||
|
expect(stylesheet).toMatch(
|
||||||
|
/\.conversation-activity-indicator\s*\{[^}]*right:\s*10px;/u
|
||||||
)
|
)
|
||||||
expect(stylesheet).not.toContain('.conversation-delete')
|
expect(stylesheet).not.toContain('.conversation-delete')
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2846,6 +2846,7 @@ textarea:focus-visible {
|
|||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: var(--font-caption);
|
font-size: var(--font-caption);
|
||||||
|
transition: opacity var(--motion-fast) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflow-marquee {
|
.overflow-marquee {
|
||||||
@@ -8900,18 +8901,14 @@ details.settings-section > :not(summary) + :not(summary) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-row .conversation-item {
|
|
||||||
padding-right: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-row:has(.conversation-activity-indicator)
|
.conversation-row:has(.conversation-activity-indicator)
|
||||||
.conversation-item {
|
.conversation-item {
|
||||||
padding-right: 52px;
|
padding-right: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-activity-indicator {
|
.conversation-activity-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 38px;
|
right: 10px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@@ -8920,6 +8917,7 @@ details.settings-section > :not(summary) + :not(summary) {
|
|||||||
box-shadow: 0 0 0 4px
|
box-shadow: 0 0 0 4px
|
||||||
color-mix(in srgb, var(--success) 14%, transparent);
|
color-mix(in srgb, var(--success) 14%, transparent);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
transition: right var(--motion-fast) ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-more {
|
.conversation-more {
|
||||||
@@ -8940,11 +8938,25 @@ details.settings-section > :not(summary) + :not(summary) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.conversation-row:hover .conversation-more,
|
.conversation-row:hover .conversation-more,
|
||||||
.conversation-row--active .conversation-more,
|
.conversation-row:focus-within .conversation-more,
|
||||||
.conversation-more:focus-visible {
|
.conversation-more:focus-visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.conversation-row:hover .conversation-item small,
|
||||||
|
.conversation-row:focus-within .conversation-item small,
|
||||||
|
.conversation-row:has(.conversation-more[aria-expanded='true'])
|
||||||
|
.conversation-item small {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-row:hover .conversation-activity-indicator,
|
||||||
|
.conversation-row:focus-within .conversation-activity-indicator,
|
||||||
|
.conversation-row:has(.conversation-more[aria-expanded='true'])
|
||||||
|
.conversation-activity-indicator {
|
||||||
|
right: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
.conversation-more[aria-expanded='true'] {
|
.conversation-more[aria-expanded='true'] {
|
||||||
background: var(--accent-subtle);
|
background: var(--accent-subtle);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
|
|||||||
Reference in New Issue
Block a user