Skip to content

BL-15659 Placeholder work #7594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrew-polk merged 3 commits into from
Jan 22, 2026
Merged

BL-15659 Placeholder work #7594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a255e82
Update placeholder images
hatton Jan 9, 2026
f4e2e28
More placeholder work
hatton Jan 16, 2026
1e60a95
HaveOutput --> HaveFullyProcessedRequest, Fix ExternalLinkSucceeded
hatton Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,5 +68,13 @@
"Winforms",
"xmatter"
],
"chat.useNestedAgentsMdFiles": true
"chat.useNestedAgentsMdFiles": true,
"workbench.colorCustomizations": {
"statusBar.background": "#96668f",
"statusBar.foreground": "#e7e7e7",
"statusBarItem.hoverBackground": "#ab84a5",
"statusBarItem.remoteBackground": "#96668f",
"statusBarItem.remoteForeground": "#e7e7e7"
},
"peacock.color": "#96668f"
Comment on lines +71 to +79
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of Peacock color customization settings appears to be a personal workspace preference rather than a project-wide requirement. These color customizations affect the VS Code status bar appearance and are typically user-specific. Consider removing these settings from the shared repository configuration and adding them to your local user settings instead, or to a .vscode/settings.json.user file that is gitignored.

Suggested change
"chat.useNestedAgentsMdFiles": true,
"workbench.colorCustomizations": {
"statusBar.background": "#96668f",
"statusBar.foreground": "#e7e7e7",
"statusBarItem.hoverBackground": "#ab84a5",
"statusBarItem.remoteBackground": "#96668f",
"statusBarItem.remoteForeground": "#e7e7e7"
},
"peacock.color": "#96668f"
"chat.useNestedAgentsMdFiles": true

Copilot uses AI. Check for mistakes.
Copy link
Member Author

@hatton hatton Jan 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

VSCode does not have a notion of settings that are both per-user and per-project, so it has to be here in the project settings. However its up to individual devs to decide if they want to install the peacock extension. If they don't, then these settings are ignored.

}
9 changes: 7 additions & 2 deletions src/BloomBrowserUI/bookEdit/toolbox/canvas/image-overlay.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/BloomBrowserUI/images/placeHolder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 18 additions & 4 deletions src/BloomBrowserUI/placeHolderImages.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
//@image-placeholder: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 134 131"><g clip-path="url(%23a)"><path fill="%23888A85" d="M61 0C50 0 45 13 49 22c2 9 6 17 7 26-7-10-18-21-31-18C11 34-3 48 1 63c4 12 19 10 29 10 4 0 16 0 12 2-12 2-24 11-24 24 0 14 9 32 25 32 13-2 14-18 18-28 2-4 6-15 5-5-2 14 7 28 22 29 12 2 31-3 32-18-1-13-17-18-25-26-9-7 1-3 6-1 15 4 30-7 32-22 3-11-1-28-14-28-14 1-23 14-35 19 8-9 15-23 8-35C85 6 73-1 61 0Z"/><path fill="%23BABDB6" d="M66 52c-14 1-20 20-10 29s28 1 28-12c0-10-9-18-18-17Z"/></g><defs><clipPath id="a"><path fill="%23fff" d="M0 0h134v131H0z"/></clipPath></defs></svg>');
// bloom blue looks better on white, but conflicts with some page colors #3994a5;
@placeholder-color-encoded: "%234f4f4f"; // %23 instead of # for URL encoding
@placeholder-opacity: 0.2;

@image-placeholder: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 352 348"><path fill="%23ECECEC" d="M138.151 193.175c-4.457 16.046 31.239 38.434 45.161 33.909-12.014 26.453-21.986 54.322-30.473 82.069-2.945 9.395-7.04 18.414-13.491 25.941-5.721 6.563-13.145 11.023-21.807 12.292-19.0634 2.573-36.2414-11.683-46.7487-26.062-8.7175-12.046-14.7963-25.785-16.9971-40.542-2.527-16.944.0493-32.856 10.1582-46.995 17.4019-23.993 49.1156-28.22 74.1976-40.612Zm-7.38 24.559c-16.237 6.674-39.1688 12.194-50.2141 27.225-6.7876 9.237-8.9319 19.788-6.9805 32.873 1.6596 11.127 5.9856 21.374 12.8448 30.975 5.979 8.368 17.0318 20.56 28.7468 18.714 11.286-2.025 16.268-16.551 19.07-25.929 6.379-21.353 14.449-42.293 22.661-62.996-8.573-3.345-20.584-13.866-26.128-20.862Z"/><path fill="%23ECECEC" d="M178.526 225.537c13.883 9.198 46.206-17.833 46.205-32.472 21.446 19.6 44.869 37.697 68.636 54.342 8.025 5.704 15.337 12.386 20.502 20.847 4.473 7.469 6.422 15.909 4.951 24.538-3.443 18.926-22.31 30.858-39.232 36.407-14.15 4.569-29.096 6.104-43.81 3.637-16.896-2.832-31.233-10.2-41.556-24.183-17.441-23.964-11.661-55.432-15.696-83.116Zm21.076 14.608c1.33 17.505-.506 41.02 10.376 56.17 6.687 9.309 16.06 14.609 29.107 16.797 11.095 1.86 22.177.912 33.428-2.645 9.806-3.1 24.817-9.844 26.682-21.557 1.561-11.359-10.714-20.585-18.768-26.148-18.336-12.666-35.757-26.811-52.91-41.02-5.831 7.12-19.548 15.292-27.915 18.403Z"/><path fill="%23ECECEC" d="M221.781 197.139c13.037-10.361-2.682-49.456-16.604-53.978 25.267-14.34 49.716-31.025 72.891-48.4841 7.905-5.8697 16.519-10.7592 26.162-13.0563 8.486-1.9469 17.115-1.1917 24.867 2.8732 16.936 9.1233 22.453 30.7542 22.503 48.5622-.028 14.87-3.186 29.558-10.08 42.79-7.915 15.194-19.352 26.553-35.841 32.049-28.181 9.182-56.323-6.039-83.898-10.756Zm20.406-15.531c17.059 4.145 38.856 13.158 56.626 7.49 10.921-3.483 18.858-10.759 24.97-22.492 5.198-9.978 7.721-20.81 7.815-32.609.082-10.285-1.693-26.645-12.257-32.038-10.321-4.9952-22.889 3.828-30.668 9.769-17.712 13.525-36.549 25.722-55.362 37.645 4.97 7.745 8.503 23.316 8.876 32.235Z"/><path fill="%23ECECEC" d="M208.139 147.226c-5.825-15.602-47.864-12.733-56.467-.889-5.83-28.462-14.143-56.8707-23.586-84.3065-3.14-9.3318-5.128-19.0353-4.333-28.9162.771-8.6725 4.155-16.645 10.417-22.7621 13.91-13.28743 36.187-11.85051 53.139-6.39419 14.133 4.62133 27.127 12.16379 37.581 22.80859 12.004 12.2225 19.273 26.6102 19.405 43.9907.024 29.6397-23.149 51.6997-36.156 76.4687Zm-8.465-24.207c9.214-14.943 24.521-32.8884 24.622-51.5406.062-11.4624-4.406-21.2592-13.675-30.6979-7.883-8.0267-17.406-13.7737-28.598-17.5091-9.756-3.256-25.864-6.6233-34.258 1.7565-7.94 8.2722-3.432 22.9519-.186 32.1863 7.39 21.0242 13.169 42.708 18.695 64.2848 8.902-2.333 24.803-.881 33.4 1.52Z"/><path fill="%23ECECEC" d="M156.453 144.775c-16.638.72-26.9 41.587-18.294 53.43-28.871-3.252-58.458-4.124-87.4692-3.621-9.8452.102-19.6883-1.005-28.8398-4.815-8.0098-3.413-14.54632-9.095-18.42906-16.941-8.33863-17.335-.08801-38.078 10.33976-52.514 8.7624-12.013 19.951-22.0404 33.3053-28.6935 15.3338-7.6393 31.2634-10.1063 47.8342-4.8613 28.1958 9.1359 42.0158 37.9918 61.5528 58.0158Zm-25.638.571c-11.364-13.38-23.701-33.484-41.4092-39.344-10.8821-3.601-21.58-2.379-33.4212 3.52-10.0697 5.017-18.4782 12.297-25.4894 21.788-6.1114 8.272-14.2916 22.551-8.9155 33.123 5.4137 10.108 20.7679 10.357 30.5534 10.123 22.2788-.531 44.6873.673 66.9159 2.086.532-9.188 6.826-23.861 11.766-31.296Z"/><path fill="%23ECECEC" d="M221.625 181.587c-.001-22.789-18.474-41.262-41.262-41.262s-41.262 18.473-41.262 41.262c0 22.788 18.474 41.261 41.262 41.261v20c-33.834 0-61.262-27.427-61.262-61.261s27.428-61.262 61.262-61.262 61.261 27.428 61.262 61.262c0 33.834-27.428 61.261-61.262 61.261v-20c22.788 0 41.262-18.473 41.262-41.261Z"/></svg>');
@image-placeholder: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 352 348"><g opacity="@{placeholder-opacity}"><path fill="@{placeholder-color-encoded}" d="M138.151 193.175c-4.457 16.046 31.239 38.434 45.161 33.909-12.014 26.453-21.986 54.322-30.473 82.069-2.945 9.395-7.04 18.414-13.491 25.941-5.721 6.563-13.145 11.023-21.807 12.292-19.0634 2.573-36.2414-11.683-46.7487-26.062-8.7175-12.046-14.7963-25.785-16.9971-40.542-2.527-16.944.0493-32.856 10.1582-46.995 17.4019-23.993 49.1156-28.22 74.1976-40.612Zm-7.38 24.559c-16.237 6.674-39.1688 12.194-50.2141 27.225-6.7876 9.237-8.9319 19.788-6.9805 32.873 1.6596 11.127 5.9856 21.374 12.8448 30.975 5.979 8.368 17.0318 20.56 28.7468 18.714 11.286-2.025 16.268-16.551 19.07-25.929 6.379-21.353 14.449-42.293 22.661-62.996-8.573-3.345-20.584-13.866-26.128-20.862Z"/><path fill="@{placeholder-color-encoded}" d="M178.526 225.537c13.883 9.198 46.206-17.833 46.205-32.472 21.446 19.6 44.869 37.697 68.636 54.342 8.025 5.704 15.337 12.386 20.502 20.847 4.473 7.469 6.422 15.909 4.951 24.538-3.443 18.926-22.31 30.858-39.232 36.407-14.15 4.569-29.096 6.104-43.81 3.637-16.896-2.832-31.233-10.2-41.556-24.183-17.441-23.964-11.661-55.432-15.696-83.116Zm21.076 14.608c1.33 17.505-.506 41.02 10.376 56.17 6.687 9.309 16.06 14.609 29.107 16.797 11.095 1.86 22.177.912 33.428-2.645 9.806-3.1 24.817-9.844 26.682-21.557 1.561-11.359-10.714-20.585-18.768-26.148-18.336-12.666-35.757-26.811-52.91-41.02-5.831 7.12-19.548 15.292-27.915 18.403Z"/><path fill="@{placeholder-color-encoded}" d="M221.781 197.139c13.037-10.361-2.682-49.456-16.604-53.978 25.267-14.34 49.716-31.025 72.891-48.4841 7.905-5.8697 16.519-10.7592 26.162-13.0563 8.486-1.9469 17.115-1.1917 24.867 2.8732 16.936 9.1233 22.453 30.7542 22.503 48.5622-.028 14.87-3.186 29.558-10.08 42.79-7.915 15.194-19.352 26.553-35.841 32.049-28.181 9.182-56.323-6.039-83.898-10.756Zm20.406-15.531c17.059 4.145 38.856 13.158 56.626 7.49 10.921-3.483 18.858-10.759 24.97-22.492 5.198-9.978 7.721-20.81 7.815-32.609.082-10.285-1.693-26.645-12.257-32.038-10.321-4.9952-22.889 3.828-30.668 9.769-17.712 13.525-36.549 25.722-55.362 37.645 4.97 7.745 8.503 23.316 8.876 32.235Z"/><path fill="@{placeholder-color-encoded}" d="M208.139 147.226c-5.825-15.602-47.864-12.733-56.467-.889-5.83-28.462-14.143-56.8707-23.586-84.3065-3.14-9.3318-5.128-19.0353-4.333-28.9162.771-8.6725 4.155-16.645 10.417-22.7621 13.91-13.28743 36.187-11.85051 53.139-6.39419 14.133 4.62133 27.127 12.16379 37.581 22.80859 12.004 12.2225 19.273 26.6102 19.405 43.9907.024 29.6397-23.149 51.6997-36.156 76.4687Zm-8.465-24.207c9.214-14.943 24.521-32.8884 24.622-51.5406.062-11.4624-4.406-21.2592-13.675-30.6979-7.883-8.0267-17.406-13.7737-28.598-17.5091-9.756-3.256-25.864-6.6233-34.258 1.7565-7.94 8.2722-3.432 22.9519-.186 32.1863 7.39 21.0242 13.169 42.708 18.695 64.2848 8.902-2.333 24.803-.881 33.4 1.52Z"/><path fill="@{placeholder-color-encoded}" d="M156.453 144.775c-16.638.72-26.9 41.587-18.294 53.43-28.871-3.252-58.458-4.124-87.4692-3.621-9.8452.102-19.6883-1.005-28.8398-4.815-8.0098-3.413-14.54632-9.095-18.42906-16.941-8.33863-17.335-.08801-38.078 10.33976-52.514 8.7624-12.013 19.951-22.0404 33.3053-28.6935 15.3338-7.6393 31.2634-10.1063 47.8342-4.8613 28.1958 9.1359 42.0158 37.9918 61.5528 58.0158Zm-25.638.571c-11.364-13.38-23.701-33.484-41.4092-39.344-10.8821-3.601-21.58-2.379-33.4212 3.52-10.0697 5.017-18.4782 12.297-25.4894 21.788-6.1114 8.272-14.2916 22.551-8.9155 33.123 5.4137 10.108 20.7679 10.357 30.5534 10.123 22.2788-.531 44.6873.673 66.9159 2.086.532-9.188 6.826-23.861 11.766-31.296Z"/><path fill="@{placeholder-color-encoded}" d="M221.625 181.587c-.001-22.789-18.474-41.262-41.262-41.262s-41.262 18.473-41.262 41.262c0 22.788 18.474 41.261 41.262 41.261v20c-33.834 0-61.262-27.427-61.262-61.261s27.428-61.262 61.262-61.262 61.261 27.428 61.262 61.262c0 33.834-27.428 61.261-61.262 61.261v-20c22.788 0 41.262-18.473 41.262-41.261Z"/></g></svg>');

@canvas-placeholder: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 106"><g stroke="%23ECECEC" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 34c0-14 0-20 5-25 4-4 12-4 28-4h10c16 0 23 0 28 4 5 5 5 11 5 25v42H10V34Z"/><path d="M5 76h86"/><path d="M42 22c6-1 15 0 7 8-10 10-25 32-7 25 17-8 25-3 17 5"/><path d="M48 76v19m-33 5 14-24m52 24L67 76"/></g></svg>');
@canvas-placeholder: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 106"><g opacity="@{placeholder-opacity}" stroke="@{placeholder-color-encoded}" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 34c0-14 0-20 5-25 4-4 12-4 28-4h10c16 0 23 0 28 4 5 5 5 11 5 25v42H10V34Z"/><path d="M5 76h86"/><path d="M42 22c6-1 15 0 7 8-10 10-25 32-7 25 17-8 25-3 17 5"/><path d="M48 76v19m-33 5 14-24m52 24L67 76"/></g></svg>');

@video-placeholder: url('data:image/svg+xml,<svg width="163" height="114" viewBox="0 0 163 114" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="@{placeholder-opacity}"><path d="M105.562 40.6008L142.533 22.1193C143.771 21.5008 145.146 21.2088 146.528 21.2711C147.91 21.3333 149.254 21.7478 150.431 22.475C151.608 23.2022 152.58 24.2181 153.254 25.4264C153.928 26.6346 154.282 27.9951 154.283 29.3787V84.3035C154.282 85.6871 153.928 87.0475 153.254 88.2558C152.58 89.464 151.608 90.4799 150.431 91.2072C149.254 91.9344 147.91 92.3488 146.528 92.4111C145.146 92.4733 143.771 92.1813 142.533 91.5629L105.562 73.0814V40.6008ZM8.12015 24.3604C8.12015 20.0532 9.83118 15.9224 12.8768 12.8768C15.9225 9.83115 20.0533 8.12012 24.3605 8.12012H89.3217C93.6289 8.12012 97.7597 9.83115 100.805 12.8768C103.851 15.9224 105.562 20.0532 105.562 24.3604V89.3217C105.562 93.6289 103.851 97.7597 100.805 100.805C97.7597 103.851 93.6289 105.562 89.3217 105.562H24.3605C20.0533 105.562 15.9225 103.851 12.8768 100.805C9.83118 97.7597 8.12015 93.6289 8.12015 89.3217V24.3604Z" stroke="@{placeholder-color-encoded}" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');

.image-placeholder-background() {
background-image: @image-placeholder;
Expand All @@ -20,9 +24,15 @@
.image-placeholder-background();
}

.customPage .bloom-videoContainer.bloom-noVideoSelected {
background: @video-placeholder no-repeat center;
background-size: contain;
}

// When previewing templates in the Collection Tab, and also when in Change Layout mode in the Edit tab,
// img elements may not be wrapped in canvas-element divs (see BL-15514). Also below.
// Real books always have a data-l1 attribute added
.preview.template .bloom-canvas:has(img[src*="placeHolder.png"]),
.preview:not([data-l1]) .bloom-canvas:has(img[src*="placeHolder.png"]),
.origami-layout-mode
.bloom-canvas:not(:has(.bloom-canvas-element)):has(
Expand Down Expand Up @@ -60,7 +70,11 @@
// Hopefully we don't in any way put the string "placeHolder.png" in the inline style of canvases which should not get it!
// We need !important here to override the inline style attribute background-image which we normally use to put images in bloompubs
.bloomPlayer-page.template
.bloom-canvas[style*="background-image"][style*="placeHolder.png"] {
.bloom-canvas:is(
[style*="background-image"][style*="placeHolder.png"],
/* BloomPlayer moves background-image URLs to data-background for lazy loading, so include that too. */
[data-background*="placeHolder.png"]
) {
background-image: @image-placeholder !important;

&[data-tool-id="canvas"] {
Expand Down
Loading