Skip to content

Add shared ViewerToolbar and EmbeddedReadCard across content viewers #15038

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
rtibbles merged 4 commits into from
Jul 31, 2026
Merged

Add shared ViewerToolbar and EmbeddedReadCard across content viewers #15038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ea37d02
Add shared ViewerToolbar and EmbeddedReadCard components
rtibbles Jul 18, 2026
18f1acf
Integrate shared viewer chrome across viewers
rtibbles Jul 18, 2026
4e07cee
Move table styles into SafeHtmlTable
rtibbles Jul 24, 2026
a3fa1c6
Enable the safe_html5_viewer plugin by default
rtibbles Jul 27, 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
56 changes: 8 additions & 48 deletions kolibri/plugins/bloompub_viewer/frontend/views/BloomPubRendererIndex.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,10 @@
:style="{ width: iframeWidth }"
@changeFullscreen="isInFullscreen = $event"
>
<div
class="fullscreen-header"
:style="{ backgroundColor: $themePalette.grey.v_200 }"
>
<KButton
:primary="false"
appearance="flat-button"
@click="$refs.bloompubViewer.toggleFullscreen()"
>
<KIcon
v-if="isInFullscreen"
icon="fullscreen_exit"
class="fs-icon"
/>
<KIcon
v-else
icon="fullscreen"
class="fs-icon"
/>
{{ fullscreenText }}
</KButton>
</div>
<ViewerToolbar
:isInFullscreen="isInFullscreen"
@toggleFullscreen="$refs.bloompubViewer.toggleFullscreen()"
/>
<div
class="iframe-container"
:style="containerStyle"
Expand Down Expand Up @@ -59,15 +41,17 @@
import urls from 'kolibri/urls';
import { now } from 'kolibri/utils/serverClock';
import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
import ViewerToolbar from 'kolibri-common/components/ViewerToolbar';
import Sandbox from 'kolibri-sandbox';
import useContentViewer from 'kolibri/composables/useContentViewer';

const defaultContentHeight = '500px';
const frameTopbarHeight = '37px';
const frameTopbarHeight = '48px';
export default {
name: 'BloomPubRendererIndex',
components: {
CoreFullscreen,
ViewerToolbar,
},
setup(props, context) {
const {
Expand Down Expand Up @@ -109,9 +93,6 @@
iframeWidth() {
return (this.options && this.options.width) || 'auto';
},
fullscreenText() {
return this.isInFullscreen ? this.$tr('exitFullscreen') : this.$tr('enterFullscreen');
},
userData() {
return {
userId: this.userId,
Expand Down Expand Up @@ -177,16 +158,6 @@
this.$emit('stopTracking');
},
$trs: {
exitFullscreen: {
message: 'Exit fullscreen',
context:
"Learners can use the Esc key or the 'exit fullscreen' button to close the fullscreen view on an html5 app.",
},
enterFullscreen: {
message: 'Enter fullscreen',
context:
'Learners can use the full screen button in the upper right corner to open an html5 app in fullscreen view.\n',
},
contentFrameTitle: {
message: 'Content viewer',
context: 'Accessible title for the iframe that displays the content',
Expand All @@ -200,18 +171,7 @@
<style lang="scss" scoped>

@import '~kolibri-design-system/lib/styles/definitions';
$frame-topbar-height: 37px;

.fullscreen-header {
text-align: right;
}

.fs-icon {
position: relative;
top: 8px;
width: 24px;
height: 24px;
}
$frame-topbar-height: 48px;

.bloompub-viewer {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion kolibri/plugins/epub_viewer/frontend/views/BottomBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@

.bottom-bar {
height: 54px;
padding: 8px 8px 0;
padding: 8px 40px 0;

@rtibblesbot rtibblesbot Jul 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

✅ Resolved — addressed in the current code.

nitpick: d797bb8a ("Integrate shared viewer chrome across viewers") also carries changes that aren't toolbar integration and aren't mentioned in the body: this 8px 8px 0 → 8px 40px 0 absorption of the padding: 0 40px rule deleted from EpubRendererIndex's scoped block (right call — two same-specificity scoped rules whose winner depended on bundle order — but note the resulting vertical padding is the child's 8px 0, not the parent's 0 0); size="small" dropped from TocButton/SettingsButton/SearchButton, enlarging all three; and the handleMouseDown guard replacing the in-FocusLock button copies, which is behavioural. 9593597d shows your own bar for explaining a style merge — a sentence in d797bb8a's body would match it.

overflow: hidden;
text-align: center;
}
Expand Down
Loading
Loading