BL-15642 Intro Page Settings #7557
Conversation
There was a problem hiding this comment.
Pull request overview
This PR implements a Page Settings dialog (BL-15642) that allows users to customize per-page appearance properties including background color, page number color, and page number background color. The settings are stored as CSS custom properties on the page element's inline style attribute.
Key Changes:
- Added a new Page Settings dialog accessible via a settings button in the page editing interface
- Implemented backend support for saving page-level CSS custom properties
- Restructured appearance theme CSS to allow page-level overrides of page number styling
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Added empty yarn.lock file (autogenerated file header only) |
| src/content/bookLayout/pageNumbers.less | Added support for --pageNumber-color CSS variable and included commented-out experimental code for automatic page number background matching |
| src/content/appearanceThemes/appearance-theme-zero-margin-ebook.css | Moved --pageNumber-background-color declaration to allow page settings to override it |
| src/content/appearanceThemes/appearance-theme-rounded-border-ebook.css | Moved --pageNumber-background-color declaration to allow page settings to override it |
| src/content/appearanceThemes/appearance-theme-default.css | Added default --pageNumber-color variable definition |
| src/content/appearanceMigrations/efl-zeromargin1/customBookStyles.css | Changed page number background from white to transparent for migration compatibility |
| src/BloomExe/web/controllers/EditingViewApi.cs | Added API endpoint handler for showing page settings dialog |
| src/BloomExe/Edit/EditingView.cs | Added SaveAndOpenPageSettingsDialog method and click handler |
| src/BloomExe/Book/HtmlDom.cs | Added logic to save/restore page-level inline style attributes |
| src/BloomBrowserUI/bookEdit/pageSettings/PageSettingsDialog.tsx | New component implementing the page settings dialog with color pickers for page and page number customization |
| src/BloomBrowserUI/bookEdit/js/origami.ts | Added page settings button to the above-page control container and wired up click handler |
| src/BloomBrowserUI/bookEdit/editViewFrame.ts | Exported showPageSettingsDialog function for use across the application |
| src/BloomBrowserUI/bookEdit/css/origamiEditing.less | Added styling for page settings button and changed container layout to space-between |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const setCurrentPageBackgroundColor = (color: string): void => { | ||
| const page = getCurrentPageElement(); | ||
| page.style.setProperty("--page-background-color", color); | ||
| page.style.setProperty("--marginBox-background-color", color); | ||
| }; | ||
|
|
||
| const getPageNumberColor = (): string => { | ||
| const page = getCurrentPageElement(); | ||
|
|
||
| const inline = normalizeToHexOrEmpty( | ||
| page.style.getPropertyValue("--pageNumber-color"), | ||
| ); | ||
| if (inline) return inline; | ||
|
|
||
| const computed = normalizeToHexOrEmpty( | ||
| getComputedStyleForPage(page).getPropertyValue("--pageNumber-color"), | ||
| ); | ||
| return computed || "#000000"; | ||
| }; | ||
|
|
||
| const setPageNumberColor = (color: string): void => { | ||
| const page = getCurrentPageElement(); | ||
| page.style.setProperty("--pageNumber-color", color); | ||
| }; | ||
|
|
||
| const getPageNumberBackgroundColor = (): string => { | ||
| const page = getCurrentPageElement(); | ||
|
|
||
| const inline = normalizeToHexOrEmpty( | ||
| page.style.getPropertyValue("--pageNumber-background-color"), | ||
| ); | ||
| if (inline) return inline; | ||
|
|
||
| const computed = normalizeToHexOrEmpty( | ||
| getComputedStyleForPage(page).getPropertyValue( | ||
| "--pageNumber-background-color", | ||
| ), | ||
| ); | ||
| return computed || ""; | ||
| }; | ||
|
|
||
| const setPageNumberBackgroundColor = (color: string): void => { | ||
| const page = getCurrentPageElement(); | ||
| page.style.setProperty("--pageNumber-background-color", color); | ||
| }; |
There was a problem hiding this comment.
When setting CSS custom properties to empty strings, consider using removeProperty instead of setProperty with an empty value. This is more explicit and ensures the property is actually removed from the inline style, allowing computed styles and CSS rules to take effect properly.
For example, when a color is empty or transparent (normalized to ""), the current code calls setProperty("--page-background-color", ""). According to the pattern used elsewhere in the codebase (e.g., StyleEditor.ts line 683), the preferred approach is to use removeProperty when clearing a value.
Consider checking if the color is empty and using:
page.style.removeProperty("--page-background-color")when color is emptypage.style.setProperty("--page-background-color", color)when color has a value
This applies to all three setter functions: setCurrentPageBackgroundColor, setPageNumberColor, and setPageNumberBackgroundColor.
This change is