Skip to content

Wear the look of the other abap2UI5 tools - #13

Merged
oblomov-dev merged 1 commit into
mainfrom
claude/beautiful-cerf-sm95qv
Nov 1, 2026
Merged

oblomov-dev merged 1 commit into
mainfrom
claude/beautiful-cerf-sm95qv

Conversation

@oblomov-dev

Copy link
Copy Markdown
Member

The Layout Editor moves off Fiori Horizon and onto the look of the Playground, the AI App Builder and the AI Agent. All four tools read as one family. The playground half is in abap2UI5/playground (branch claude/beautiful-cerf-sm95qv).

What changes

  • Bar: sits on the sunken page with the mark and "abap2UI5". The tool's name, Layout Editor ▾, is in the accent and opens a menu of all four tools (Playground, Layout Editor, AI App Builder, AI Agent), this one marked. It is wired through the existing wireMenu(). The list is the playground's TOOLS (src/shell/tool-switch.mjs there).
  • Palette: copied from the playground's shell.css, in light and dark.
  • Type: Inter, self-hosted in fonts/ (OFL, NOTICE.md). pages.yaml now copies fonts/.
  • Cards: drawer, canvas, code and inspector sit on white 18px cards, 14px apart. The resizers are the gaps between the cards.
  • Controls:
    • The segmented controls (Layout/Split/Code, Edit/Preview, Desktop/Tablet/Phone, ABAP class/XML view) are the AI App Builder's pills.
    • Buttons are pills; Export is red with a glow.
  • The canvas keeps the UI5 theme chosen for it.
  • AGENTS.md and README.md say so instead of "styled after SAP Fiori Horizon".

Tests

  • npm test (unit) is green.
  • Playwright: 83 of 84 green.
    • workflow.spec.mjs checks the editor's dark background; the expected colour is updated to the new palette's.
    • render.spec.mjs › kitchen-sink-1 renders (ui5-current) times out. It times out on main in the same environment too, so it is not caused by this change.

Generated by Claude Code

The editor moves off Fiori Horizon and onto what the Playground, the AI
App Builder and the AI Agent wear. The bar sits on a sunken page, and
the tool's name in the accent is a menu of all four tools. The work
sits on white 18px cards, the segmented controls are the AI App
Builder's pills, buttons are pills, and the type is Inter (fonts/,
self-hosted, OFL). The pages workflow copies fonts/. The canvas keeps
the UI5 theme chosen for it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014YZFmEpRdxrjNxTq4x9J4J
@oblomov-dev
oblomov-dev merged commit b100cec into main Nov 1, 2026
2 checks passed
@oblomov-dev
oblomov-dev deleted the claude/beautiful-cerf-sm95qv branch November 1, 2026 14:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants