feat: image background options of pages and apps — size, position, scrolling, repeat EXO-90087 - #569
Merged
Merged
Conversation
Implements [task 90087](https://community.exoplatform.com/portal/dw/tasks/taskDetail/90087) — *[Layout] Suggest new options to center and fix image background of pages and apps*. Requires `Meeds-io/portal#1319` (persistence) and `Meeds-io/platform-ui` (rendering). Companion: `Meeds-io/social` for the branding admin. Same `EXO-90087`. ### Problem Size and repeat shared a **single** radio group, so the four values were mutually exclusive: choosing *Repeat* silently cleared `background-size`, and "fit the whole image **and** tile it" was unreachable. There was also no way to center a background or to keep it fixed while scrolling. ### The options, as the board specifies them | Group | Options (first = default) | |---|---| | Size | Fill, cropped *(was Cover)* · Fit, whole image *(was Contain)* | | Position | **Center** *(new)* · Top right · Top left · Bottom right · Bottom left | | Scrolling *(new)* | **Stays fixed** · Scrolls with page | | Repeat | No repeat · Repeat | Four independent captioned groups, two per row (`col-6`, with Center full width), so size and repeat now compose freely. ### Changes - **`BackgroundInput.vue`** — the four groups; the `backgroundImageStyle` intermediate state is gone, each group binds its own container property. Removing the image clears all four, so a stale `fixed`/`repeat` is not re-applied to the next image. - **`LayoutModel` / `EntityMapper`** — carry `backgroundAttachment` and `appBackgroundAttachment` - **`LayoutUtils.js`** — defaults and `parseContainerStyle` - **`ApplicationUtils.js`** — emit the value on all four paths (site / page / app / background layer) - **`LayoutEditor_en.properties`** — group captions, the two renamed size labels, Center and the two Scrolling labels ### Drive-by fix `backgroundPosition` was never declared in the `backgroundProperties` of either application drawer, nor in the page drawer's `appBackgroundProperties`. Under Vue 2 the key was therefore non-reactive, the deep watcher never fired, and **app background position was silently never saved**. Now declared alongside `backgroundAttachment`. ### Points for the reviewer - **Labels use the board's sentence case** ("Fill, cropped", "Fit, whole image"). The mockup attached to the task title-cases them ("Fill, Cropped"). Trivial to flip if the PO prefers the mockup. - **`imageSizeCover`/`imageSizeContain` keep their keys** with new English values, so Crowdin re-translates rather than orphaning keys in 40 locale files. Other locales show the old wording until it syncs. - **No data upgrade.** Existing pages keep their current rendering; Center / Stays fixed apply once a background is re-saved. ### Tests - `layout-service`: 365/365 pass. `npm run eslint-check`: 0 errors. - Deployed to a local 7.3.x-ai-contribution bundle; the production build reproduces the shipped `layout.war` byte-for-byte for every bundle not touched here. Knowledge: none — no architectural change; the new option follows the existing background style plumbing. A `/domain-doc` refresh of `layout` may still be worth folding into the eXip's knowledge sub-task. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> (cherry picked from commit d2aa07f)
…EXO-90087 (#568) Follow-up to `#567` (merged), for [task 90087](https://community.exoplatform.com/portal/dw/tasks/taskDetail/90087). Requires `Meeds-io/platform-ui#1004`. Same translation as `Meeds-io/portal#1320`, applied to the **site** background written by the site layout editor. The site background paints on the scrolling container (`Meeds-io/platform-ui#1004`), where `background-attachment: scroll` means *"fixed with regard to that box"* and so looks identical to `fixed`. `local` is what makes it follow the scrolled content: ```js function siteBackgroundAttachment(attachment) { return attachment === 'scroll' ? 'local' : attachment; } ``` Applied only on the `options.siteStyle` path of `getStyle`. ### Deliberately not applied elsewhere **Page, section and app backgrounds keep `scroll` untranslated.** They paint on elements *inside* that scroller (`.layout-page-parent`, the section/app elements), which physically move as the container scrolls — so `scroll`, meaning "fixed with regard to the element's own box", already makes the background travel with the content. `fixed` there correctly anchors to the viewport. That asymmetry is the whole point of the helper: the surface determines the CSS keyword, while the stored value keeps the user's intent (`fixed` / `scroll`) uniformly across every background. ### Tests `npm run eslint-check`: 0 errors. Production bundles rebuilt and deployed to a local 7.3.x-ai-contribution bundle (eval-free AMD, verified). Knowledge: none — one value translation, no architectural change. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> (cherry picked from commit 3f72457)
Contributor
Author
|
The red Locally the same tree builds green against the portal#1321 artefact — BUILD SUCCESS, 365 tests, 0 failures (built offline so the remote snapshot could not be substituted mid-build; details in the PR body). The build here will turn green on its own once portal#1321 is merged and its snapshot republished; I will re-trigger it at that point. Merge order: portal → platform-ui / social → this one. |
ahamdi
approved these changes
Sep 9, 2026
|
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
3 participants
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.
Backport of EXO-90087 — [N2] [Layout] Suggest new options to center and fix image background of pages and apps — from
feature/ai-contributionontodevelop. layout part of a four-repo ticket, and the one that depends on the others.Scope
Two
-x-stamped cherry-picks of the FB squash-merges, applied to a freshorigin/developwith no conflict:d2aa07f53f7245759 files:
LayoutModelandEntityMapperinlayout-service(the newbackgroundAttachment/appBackgroundAttachmentfields and their two mapping lines — DTO mapping, not a JPA entity); the page and application editor drawers,BackgroundInput.vue,LayoutUtils.js,ApplicationUtils.jsandLayoutEditor_en.propertiesinlayout-webapp.The four halves and their merge order
EntityMappercallsModelStyle#setBackgroundAttachment, which portal#1321 addsMerge this one last, after portal#1321. On today's
developthis PR does not compile —setBackgroundAttachmentdoes not exist there yet — so expect the PR build to stay red until portal#1321 has landed and the7.3.x-SNAPSHOThas been republished.Verification
Built on a fresh
origin/developworktree against the portal#1321 artefact installed locally (mvn clean installon the portal backport first, thenmvn -o clean installhere so the snapshot could not be replaced by the remote one mid-build): BUILD SUCCESS, 365 tests, 0 failures, 0 errors, 0 skipped, all four modules green. A guard checked that the installedportal.component.apijar actually carried the newapp-background-attachmentkey before the build started — the first attempt had found the remote snapshot in its place.Classification: N2
Shared UI component + DTO model fields. No ACL, schema, entity, bridge, upload or MCP surface (the
EntityMapperhere is the Storage-layer mapper, not a persistence entity). Matches the ticket's own[N2].Its approver must be an Architect/Senior Developer who knows it is N2, not an approval on AI review alone. Author ≠ approver.
Validated on the FB acceptance by the PO (Samuel Renault) and tested by me, 2026-09-09.
Knowledge: none — mechanical backport; the knowledge for this ticket is owed by the FB delivery, not by this PR.
🤖 Generated with Claude Code