fix: align the attachments list drawer rows (info/detach icons) - EXO-88777 - #2014
Merged
bmestrallet merged 1 commit intoJul 22, 2026
Conversation
bmestrallet
force-pushed
the
feat/EXO-88732-attachments-drawer-ux-revamp
branch
from
July 22, 2026 19:14
f4cd7dc to
42704c9
Compare
Base automatically changed from
feat/EXO-88732-attachments-drawer-ux-revamp
to
feature/ai-contribution
July 22, 2026 19:16
…-88777 The EXO-88732 revamp styled only the picker (.attachmentsAppDrawer); the 'View all attachments' list drawer (.attachmentsListDrawer) kept raw Vuetify — its rows had no right gutter (info/detach icons hugging the panel edge + scrollbar) and align-items:normal (icons not vertically centered). Add a scoped .attachmentsListDrawer block: 20px right gutter on .uploadedFilesItems, align-items:center on the row, and zeroed v-list-item__action margins. Scoped so the picker and other consumers are untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
bmestrallet
force-pushed
the
feat/EXO-88777-attachments-list-drawer-align
branch
from
July 22, 2026 21:09
eb853bd to
de60007
Compare
bmestrallet
added a commit
that referenced
this pull request
Jul 24, 2026
…2019) The attachment rows shown in the task drawer (and every other place the shared attachment list appears — activities, notes, news) render the detach/info icons aligned to the top of the row instead of vertically centered against the two-line title + size block. Cause: the row root .attachment.d-flex declares no vertical alignment, so its three columns — thumbnail, the title/size content, and the action icons — top-align. EXO-88777 (#2014) fixed the same thing but only via a LESS rule scoped to .attachmentsListDrawer, so the inline "View all attachments" list rendered in the task drawer, which is not that drawer, kept the misalignment. Fix it at the source: add align-center to the row in AttachmentItem.vue, so every surface centers its rows. The conflict-actions block is a sibling of the row, not a child, so the failed/conflict layouts are unaffected. #2014's drawer LESS is left in place (harmless; the right-gutter and action-margin parts are drawer-specific). Verified that the deployed bundle rendered "attachment d-flex" without the class, and that adding align-center centers the icons; a full local WAR build was not possible offline (npm install needs network), so the built-bundle capture was done by patching the class string in the deployed bundle, which is exactly what this source change compiles to. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
bmestrallet
added a commit
that referenced
this pull request
Jul 28, 2026
…-88777 (#2014) The EXO-88732 revamp styled only the picker (.attachmentsAppDrawer); the 'View all attachments' list drawer (.attachmentsListDrawer) kept raw Vuetify — its rows had no right gutter (info/detach icons hugging the panel edge + scrollbar) and align-items:normal (icons not vertically centered). Add a scoped .attachmentsListDrawer block: 20px right gutter on .uploadedFilesItems, align-items:center on the row, and zeroed v-list-item__action margins. Scoped so the picker and other consumers are untouched. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
bmestrallet
added a commit
that referenced
this pull request
Jul 28, 2026
…2019) The attachment rows shown in the task drawer (and every other place the shared attachment list appears — activities, notes, news) render the detach/info icons aligned to the top of the row instead of vertically centered against the two-line title + size block. Cause: the row root .attachment.d-flex declares no vertical alignment, so its three columns — thumbnail, the title/size content, and the action icons — top-align. EXO-88777 (#2014) fixed the same thing but only via a LESS rule scoped to .attachmentsListDrawer, so the inline "View all attachments" list rendered in the task drawer, which is not that drawer, kept the misalignment. Fix it at the source: add align-center to the row in AttachmentItem.vue, so every surface centers its rows. The conflict-actions block is a sibling of the row, not a child, so the failed/conflict layouts are unaffected. #2014's drawer LESS is left in place (harmless; the right-gutter and action-margin parts are drawer-specific). Verified that the deployed bundle rendered "attachment d-flex" without the class, and that adding align-center centers the icons; a full local WAR build was not possible offline (npm install needs network), so the built-bundle capture was done by patching the class string in the deployed bundle, which is exactly what this source change compiles to. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Jihed525
pushed a commit
that referenced
this pull request
Jul 30, 2026
…-88777 (#2014) The EXO-88732 revamp styled only the picker (.attachmentsAppDrawer); the 'View all attachments' list drawer (.attachmentsListDrawer) kept raw Vuetify — its rows had no right gutter (info/detach icons hugging the panel edge + scrollbar) and align-items:normal (icons not vertically centered). Add a scoped .attachmentsListDrawer block: 20px right gutter on .uploadedFilesItems, align-items:center on the row, and zeroed v-list-item__action margins. Scoped so the picker and other consumers are untouched. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit b8d00d6)
Jihed525
pushed a commit
that referenced
this pull request
Jul 30, 2026
…2019) The attachment rows shown in the task drawer (and every other place the shared attachment list appears — activities, notes, news) render the detach/info icons aligned to the top of the row instead of vertically centered against the two-line title + size block. Cause: the row root .attachment.d-flex declares no vertical alignment, so its three columns — thumbnail, the title/size content, and the action icons — top-align. EXO-88777 (#2014) fixed the same thing but only via a LESS rule scoped to .attachmentsListDrawer, so the inline "View all attachments" list rendered in the task drawer, which is not that drawer, kept the misalignment. Fix it at the source: add align-center to the row in AttachmentItem.vue, so every surface centers its rows. The conflict-actions block is a sibling of the row, not a child, so the failed/conflict layouts are unaffected. #2014's drawer LESS is left in place (harmless; the right-gutter and action-margin parts are drawer-specific). Verified that the deployed bundle rendered "attachment d-flex" without the class, and that adding align-center centers the icons; a full local WAR build was not possible offline (npm install needs network), so the built-bundle capture was done by patching the class string in the deployed bundle, which is exactly what this source change compiles to. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit 4ced318)
Jihed525
added a commit
that referenced
this pull request
Jul 31, 2026
…XO-88732 - EXO-88752 - EXO-88777 - EXO-88830 (#2022) * EXO-88721: Revamp attachment drive-explorer picker onto /v1/documents API (#2007) Rewrite the level-2 "Use existing uploads" picker (AttachmentsDriveExplorerDrawer) off the legacy ECMS/WCM XML drive listing onto the modern documents-service /v1/documents JSON API. - Two-source model: My Documents (userIdentityId) + My Spaces (space.identity.id); cloud drives dropped. - Reuse the mobile FolderTreeViewDrawer for drive/space/folder navigation; the panel icon opens it and it auto-expands to the current folder (fix a Vuetify v-treeview buildTree crash caused by backend children:null on empty leaf folders). - Reuse documents-breadcrumb with a new global mobile branch (fa-angle-left to parent + current folder / drive name). - Simple list rows (checkbox + icon + name); exo-drawer use-filter header search driving server-side query; server-side pagination. - Reuse Documents list cells via a $root shim on the attachment app. - Preserve the level-1 emit contract and folder CRUD. - Scope two leaking documents.css rules (.v-alert__content, .py-10px) under .documents-application to avoid bleeding into other portlets. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit 015a1ea) * feat: revamp attachments drawer UX and add dedicated create-document drawer - EXO-88732 (#2009) Level-1 "Attach files" drawer: - Empty state: hero drop-zone + secondary tiles (Select from Documents / Create a new document); populated state: compact add bar (Upload / Documents / New) keeping room for the list. - Full-drawer drag-and-drop overlay (bound to the drawer body, since exo-drawer teleports its panel out of the component root), remove-all with confirm, retry-on-failed-upload, and de-dup of the rendered list by (id || uploadId). - Richer attachment rows: thumbnails, transparent source + location chips, and a remove/detach control that shows in both composer and entity-bound modes. Create document is now a dedicated nested "Add a document" drawer (replacing the popup menu): - Doc-type selectable cards (Document/Spreadsheet/Presentation) with hover and a primary-ring selected state, keyboard-accessible (role/tabindex/Enter-Space). - Inline title field + a footer Cancel/Create (Create disabled until a type is picked and the title is valid); reuses the existing create / 409 / OnlyOffice editor-tab logic; returns to the populated level-1 list on success. - "Or start from a template" separator + a Templates placeholder empty-state (scaffold for a future templates backend). Level-2 drive picker: - Explicit back arrow returning to level-1. - Ship the breadcrumb root label keys in the attachments bundle so they resolve on host pages (notes/task/news editors) that do not load the Documents bundle. UI polish: shadow + light-grey tile hover (kept border), larger top margin, and FA5-safe icons throughout. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit 34d6107) * feat: Drive "+ New" menu — Upload item + shared "Add a document" drawer - EXO-88752 (#2010) Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit b9c589a) * fix: align the attachments list drawer rows (info/detach icons) - EXO-88777 (#2014) The EXO-88732 revamp styled only the picker (.attachmentsAppDrawer); the 'View all attachments' list drawer (.attachmentsListDrawer) kept raw Vuetify — its rows had no right gutter (info/detach icons hugging the panel edge + scrollbar) and align-items:normal (icons not vertically centered). Add a scoped .attachmentsListDrawer block: 20px right gutter on .uploadedFilesItems, align-items:center on the row, and zeroed v-list-item__action margins. Scoped so the picker and other consumers are untouched. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit b8d00d6) * fix: center the attachment row so the detach icon aligns - EXO-88777 (#2019) The attachment rows shown in the task drawer (and every other place the shared attachment list appears — activities, notes, news) render the detach/info icons aligned to the top of the row instead of vertically centered against the two-line title + size block. Cause: the row root .attachment.d-flex declares no vertical alignment, so its three columns — thumbnail, the title/size content, and the action icons — top-align. EXO-88777 (#2014) fixed the same thing but only via a LESS rule scoped to .attachmentsListDrawer, so the inline "View all attachments" list rendered in the task drawer, which is not that drawer, kept the misalignment. Fix it at the source: add align-center to the row in AttachmentItem.vue, so every surface centers its rows. The conflict-actions block is a sibling of the row, not a child, so the failed/conflict layouts are unaffected. #2014's drawer LESS is left in place (harmless; the right-gutter and action-margin parts are drawer-specific). Verified that the deployed bundle rendered "attachment d-flex" without the class, and that adding align-center centers the icons; a full local WAR build was not possible offline (npm install needs network), so the built-bundle capture was done by patching the class string in the deployed bundle, which is exactly what this source change compiles to. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit 4ced318) * feat: Reusable Documents folder picker (+ remove add-folder from the destination picker) - EXO-88830 (#2018) * feat: Reusable standalone Documents folder picker on the revamped drive explorer - EXO-88830 Two-part module: a tiny site-wide bootstrap (DocumentsFolderPickerQuickActionExtension, QuickActionsGrp) listening for open-documents-folder-picker, and a lazily required SHARED/DocumentsFolderPickerApp that mounts JUST the existing revamped attachments-drive-explorer-drawer on its own small root, replicating the attachment app's $root shim. On confirm it publishes documents-folder-picker-selected with BOTH the /v1/documents folder id (breadcrumb tail) and the legacy drive + relative path; closing without picking publishes documents-folder-picker-cancelled. The compose/staging attachment flow and its $root events are untouched; there is still exactly one explorer implementation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix: Clean create-folder button and inline validate/cancel on the drive explorer folder input - EXO-88830 The create-folder header control was a legacy bordered <a> box misaligned with the breadcrumb row; it is now the same v-btn/v-icon markup as the drawer's other header icons. The inline new-folder / rename input was a bare <input> with no visible confirm/cancel: it now mirrors the Documents app inline name edit (DocumentsFileEditNameCell) — a dense outlined field with appended validate (check) and cancel (times) icons — while keeping Enter/Esc and the existing folder CRUD calls unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat: Remove the add-folder feature from the drive-explorer picker - EXO-88830 The inline create-folder affordance (header button + inline new-folder input) was introduced into the destination-picker with the July-22 drive-explorer revamp (EXO-88721). It is removed here: the picker's job is to choose an existing destination, and the create-folder UI is unwanted. Only the create path is removed — folder rename/delete via the folder-actions menu is untouched. Removed: the add-folder header button, the inline new-folder input row, the creatingNewFolder/newFolderName state, and addNewFolder/ createNewFolder/cancelCreatingNewFolder. The destination-selection and /v1/documents navigation are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix: No phantom "Load more" in the folders-only destination picker - EXO-88830 In destination-picker mode the list shows only folders, but hasMore was computed from the mixed folder+file page, so a folder holding more than a page of files kept offering a "Load more" that revealed no new folder. The server returns folders before files, so once a fetched page contains a file every folder is already loaded — hasMore is now false in that case. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> (cherry picked from commit 5299d4c) --------- Co-authored-by: Benjamin Mestrallet <benjamin.mestrallet@gmail.com> Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Small CSS-only fix on the EXO-88732 attachments-drawer line (PR #2009).
Problem
The 88732 revamp styled only the picker (
.attachmentsAppDrawer); the "View all attachments" list drawer (.attachmentsListDrawer) kept raw Vuetify — its rows had no right gutter (the info / detach icons hug the panel edge + scrollbar) andalign-items: normal(those icons aren't vertically centered against the row).Fix
One scoped
.attachmentsListDrawer { … }block inattachmentsApp.less: a 20px right gutter on.uploadedFilesItems(symmetric with the existingml-5),align-items: centeron the.attachmentrow, and zeroedv-list-item__actiontop/bottom margins. Everything is scoped under the list-drawer root, so the picker and other consumers are untouched.Proven live (CSS injection) and code-reviewed; applies cleanly.
🤖 Generated with Claude Code