Merge exip layout builder enhancement mips - #563
Merged
srenault-meeds merged 24 commits intoAug 27, 2026
Conversation
Switching the page width from full window back to custom collapsed the value to 0 because the customWidth computed property fell back to 0 when width was '100%', which the number-input then clamped to its min (300). Introduce a defaultWidth data property (1320) used as the fallback everywhere the previous default value was hardcoded. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Extend the shared BackgroundInput.vue component (used both from site "branding options" and the per-page "Edit Page Properties" drawer for page/site/application backgrounds) with 3 gradient types instead of the single implicit top-to-bottom linear gradient: - Linear Gradient: Top to Bottom (default, matches previous behavior) or Left to Right. - Radial Gradient: From color at the center, To color on the outside. - Angular Gradient: conic gradient anchored at one of the 4 corners (Top Left / Top Right / Bottom Right / Bottom Left), From color used as the start of the angle. backgroundEffect stays an opaque CSS background-image string end to end (no backend/DTO changes needed), so existing persisted values (plain `linear-gradient(from, to)`) keep parsing correctly as "Linear / Top to Bottom". Note: the angle mapping used for the angular/conic gradient per corner is a best-effort CSS implementation (I could not access the linked Adobe XD mockup); please visually confirm against the design before merging. EXO-88418 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Since the corner only shows a 90deg slice of the full 360deg conic gradient, the 2-color transition needs explicit 0deg/90deg stops so it completes within that visible slice instead of barely starting before the box edge cuts it off. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Two independent bugs prevented alpha transparency from actually showing on gradient backgrounds (page, section and application): - BackgroundInput.vue: switching the background type radio to a gradient (linear/radial/angular) triggered two watchers reacting to the same change. The backgroundColorChoice watcher correctly set the container's backgroundColor to the fully-transparent #FFFFFF00 marker, but the choice() watcher ran right after and unconditionally reset it back to the opaque defaultBackgroundColor. That opaque white then became the CSS backdrop painted behind the gradient's background-image, so any alpha in the From/To colors blended against solid white instead of true transparency. The reset is now scoped to the "color" choice only. - ColorPicker.vue: the From/To color swatches painted their color directly on the drawer's panel background, so a semi-transparent color (e.g. #FFFFFF41) looked identical to a fully opaque one, making it impossible to visually confirm transparency was applied. Added a checkerboard backdrop behind the swatch (in editor.less, since this module's webpack config has no loader for Vue SFC <style> blocks) so alpha is now visible in the picker itself. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
(#532) Editable portlets (Text Block, Links List, News List, etc.) can hold custom content added by admins, so removing them from a page now asks for confirmation instead of deleting immediately.
Adds nested "Margins" and "Radius" controls under the Background section (page, section and app), inset/rounding a new dedicated background layer independently of the container's own box so portlet content and text stay untouched. - New BackgroundMarginInput.vue / BackgroundRadiusInput.vue form components, mirroring the existing generic Margins/Radius UX. - New getBackgroundLayerStyle()/parseBackgroundLayerValues()/ setBackgroundLayerValues() in ApplicationUtils.js: the 8 values can't be stored as ModelStyle fields (external, not owned by this repo) so they're opaquely encoded as cssClass tokens, mirroring the existing mt-/brtr- token pattern. - getStyle() gains a background-layer gate: skips the container's own background paint when the layer is active, and explicitly clears --appBackgroundColor/Image for application-styled containers so the descendant .PORTLET-FRAGMENT doesn't fall back to its own opaque default background. - New <div class="layout-background-layer"> rendered across ContainerBase/Application/Section (editor + live page) and the section-template/page-preview editors. - applyContainerStyle() replicates the bg-* cssClass tokens onto the real container when called with a curated stand-in object (the application drawers' backgroundProperties), since that object never reaches the real container's cssClass otherwise. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Section-level drag reordering never recorded undo/redo history: the history event was only emitted for app-in-cell moves, and the dragged section's DOM element carries no data-storage-id to resolve it by. Undo now captures the pre-move order of the section list on drag start and restores it via the existing Undo/Redo header buttons and Ctrl+Z/Ctrl+Y. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
#529) Add application Toolbar so users can filter by name and description the list of apps while adding portlets to be added to the page layout --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
…XO-88434 (#536) Enable Sortable's JS-simulated drag (forceFallback) instead of native HTML5 drag, which was silently blocking mouse-wheel scrolling during a drag on most browsers. Append the fallback drag clone to <body> (fallbackOnBody) to avoid a CSS transform on an ancestor breaking its position: fixed tracking. Add explicit auto-scroll of .site-scroll-parent when the cursor nears the top/bottom edge while dragging, independent of the drag library's own scroll handling. Fixes: https://community.exoplatform.com/portal/dw/tasks/taskDetail/88434
…XO-88435 (#535) Section move/edit/clone/save-as-template buttons were positioned via a margin-based offset that goes negative once the page spans full window width, pushing them past the section bounds where they get clipped. Inset them flush inside the viewport when full page mode is enabled instead. Also fixes pageFullWindow detection: EditPageDrawer never updated its fullWindow flag from the width radio selection (dead property, always false), so applying the full-window setting only took effect after a publish + page refresh. And the initial detection in layout-editor fell back to an ambient document.body CSS variable that can be left over from unrelated rendering, causing false positives on pages that are not actually full window.
Relax the clone/duplicate-section button visibility from platform administrators only to any user with edit rights (space admins included), matching backend authorization (canEditPage) and sibling section actions. "Save as section template" stays admin-only since it creates a global platform-wide template. Also add missing error handling around the editor's initial draft/page load so a rejected request surfaces an error instead of leaving the loading spinner stuck forever.
…539) - Add a "View options" group to the section drawer (display both / hide on desktop / hide on mobile), replacing the old mobile-view-only radios - Keep sections and applications editable while previewing mobile (previously all edit affordances were disabled in that mode) - Fix: saving a section edit while in mobile preview corrupted every section's column count and merged them into one, because parseSections re-derives colsCount from breakpoint CSS classes that mobile preview temporarily strips --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
The section margin editor already handles all four sides in SectionMarginInput.vue and the underlying storage/style pipeline; only the plain content section drawer restricted the UI to top and bottom. Enable the left/right props there too.
…-88511 (#540) The page-properties drawer read a CSS var (--allPagesLightGrey) that is never actually set by the branding admin page. The real value the admin configures is exposed as --allPagesBackgroundColor, so non-customized pages silently ignored the branding default. Also normalize the read value to an 8-digit hex so the color picker keeps its alpha/transparency support when the branding value has no alpha channel. --------- Co-authored-by: ayoub cherif <aycherif@exoplatform.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
…O-89042 (#552) Opening the page/site width editor previously pre-selected Full window whenever the ambient --allPagesWidth CSS var happened to be set, even though the page container itself had no explicit width. Admins who applied without noticing could unintentionally switch the page to full window.
EXO-89043 (#553) getStyle() removed the --allPagesBackgroundColor/Image/Repeat/Size/Position custom properties from <body> on every render where the site container had no explicit background - the common/default case. Those properties aren't just a client-side convention: UIPortalApplication.gtmpl writes them as inline <body> style from the branding admin's configured page background, before any JS runs. Removing them unconditionally silently defeated that branding default on every normal page load. Now only clear them when reverting an override getStyle() itself applied (a site background toggled on then back off within the same session), leaving the server-rendered branding default alone otherwise.
Add a "View options" group to the application drawer (display both / hide on desktop / hide on mobile), replacing the old mobile-view-only checkbox, mirroring the equivalent Section feature (EXO-88437). Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
…8488 (#555) Adds a "Text Background" option (color, gradient, image, margin, radius) for each of Title/Header/Body/Subtitle text styles, mirroring the existing app/section Background feature. The margin/radius are painted on a ::before layer positioned behind the text via negative insets, so configuring them never shifts the text itself. --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
…refactor - EXO-88488 (#556) PR #555 extracted shared logic into AbstractLayoutAttachmentPlugin and added 4 new per-text-type attachment plugins, leaving ~156 instructions untested. That dropped layout-service instruction coverage to 0.64, below the 0.65 JaCoCo gate, which is why the PR Build check failed even after merge. Adds LayoutBackgroundAttachmentPluginTest covering hasEditPermission/ hasAccessPermission for both page_ and site_ prefixed entity ids, exercising the shared abstract-class logic that had no test at all. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
…XIP-89116 The Text Background feature sets position:relative on .text-color/.text-subtitle via a blanket :where() selector, even when no background is configured. That turned the card's title/description wrapper into a positioned element with z-index:auto stacking above the (also z-index:auto) absolute-positioned + button, since it comes later in the DOM. Its near-full-width box silently swallowed clicks meant for the button, which then bubbled to the card's own preview() handler instead of emitting add. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…XO-89116 (#559) The Text Background feature sets position:relative on .text-color/.text-subtitle via a blanket :where() selector, even when no background is configured. That turned the card's title/description wrapper into a positioned element with z-index:auto stacking above the (also z-index:auto) absolute-positioned + button, since it comes later in the DOM. Its near-full-width box silently swallowed clicks meant for the button, which then bubbled to the card's own preview() handler instead of emitting add. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
## Summary - Vuetify's `.text-truncate` sets `overflow: hidden`, which clips a Text Background `::before` layer painted on the same element whenever its configured margin pushes it outside the box. - Splits the truncated text onto a dedicated inner `.text-truncate` child in the 5 affected sites (`ApplicationCard.vue`, `EditPortletDialog.vue`, `SectionTemplate.vue`, `SiteNavigationNewPageElementItem.vue`), so the outer element keeps the background and the inner one keeps the ellipsis. - Companion fix to `platform-ui`'s `helpers.less` (separate PR) provides the CSS side of this split. ## Test plan - [ ] Configure a Text Background with a margin on an app card title / portlet dialog title / section template description / site navigation description with long text - [ ] Confirm ellipsis truncation still works - [ ] Confirm the background bleeds past the text box instead of clipping flush --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
This change will remove the usage of Text Body and Subtitle Background Style. In addition, this will fix the Layout Editor Menu position in site Layout.
boubaker
approved these changes
Aug 27, 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
2 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.
Merge to MIPS work done for eXIP Page Builder Enhancement