Studio/opencode
5
0
Fork 0
mirror of https://gitee.com/zhangsken/opencode.git synced 2026-10-16 10:30:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): show composer attachment remove buttons on touch devices (#51047)

Browse Source
This commit is contained in:
Luke Parker
2026-09-24 15:58:30 +10:00
committed by GitHub
parent 318a8c1aba
commit dca73ba9e3
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/component-tests/composer.spec.ts
+17
View File
@@ -214,6 +214,23 @@ for (const draft of ["empty-draft", "multiline-draft", "mixed-attachments"]) {
})
}
story.describe("touch attachments", () => {
story.use({ hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } })
story("keeps attachment remove buttons visible without hover", async ({ mount, page }) => {
const component = await mount("opencode-composer-flow--mixed-attachments")
expect(await page.evaluate(() => matchMedia("(hover: none)").matches)).toBe(true)
const remove = component.getByRole("button", { name: "Remove attachment", exact: true })
await expect(remove).not.toHaveCount(0)
for (const button of await remove.all()) await expect(button).toHaveCSS("opacity", "1")
const count = await remove.count()
await remove.first().tap()
await expect(remove).toHaveCount(count - 1)
})
})
story("renders a draft once and supports editing, caret restoration, and failure recovery", async ({ mount, page }) => {
await page.addInitScript(() => {
const replace = Element.prototype.replaceChildren
packages/app/src/composer/editor/editor.tsx
+3 -3
View File
@@ -542,7 +542,7 @@ export function ComposerAttachments(props: {
<button
type="button"
onClick={() => props.onCommentRemove?.(comment)}
class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center hover-reveal group-hover:opacity-100"
aria-label={props.removeLabel}
>
<Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />
@@ -589,7 +589,7 @@ export function ComposerAttachments(props: {
<button
type="button"
onClick={() => props.onAttachmentRemove(attachment)}
class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center hover-reveal group-hover:opacity-100"
aria-label={props.removeLabel}
>
<Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />
@@ -611,7 +611,7 @@ export function ComposerAttachments(props: {
<button
type="button"
onClick={() => props.onUploadCancel?.(upload)}
class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center hover-reveal group-hover:opacity-100"
aria-label={i18n.t("ui.promptInput.cancelUpload")}
>
<Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />