@windward/core 0.20.0 → 0.21.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## Hotfix [0.21.1] created - 2025-08-20
+
+
+## Release [0.21.0] - 2025-08-01
+
+* Merged in feature/LE-2045/lableing-fixes (pull request #414)
+* Merged in feature/LE-2009-organizations-custom-color-palle (pull request #410)
+* Merged in feature/LE-2011-open-response-download-field-to- (pull request #411)
+* Merged in feature/LE-1912/sorting-game-gen-2 (pull request #413)
+* Merged in feature/LE-2029-open-response-block-design (pull request #412)
+* Merged in feature/LE-1912/sorting-game-gen (pull request #409)
+* Merged in feature/LE-2011-open-response-download-field-to- (pull request #408)
+* Merged in feature/LE-1924-clickable-icons-ux (pull request #407)
+* Merged in feature/LE-1913/matching-block (pull request #405)
+* Merged in feature/LE-1924-clickable-icons-ux (pull request #404)
+* Merged in feature/LE-2011-open-response-download-field-to- (pull request #406)
+* Merged in bugfix/LE-1928-user-upload-allowed-file-types (pull request #398)
+* Merged release/0.21.0 into feature/LE-2011-open-response-download-field-to-
+* Merge branch 'release/0.21.0' into feature/LE-1913/matching-block
+* Merged in bugfix/LE-1990-video-black-line-on-left-and-rig (pull request #403)
+* Merged in feature/LE-1900-fill-in-the-blank-formatting-sho (pull request #402)
+* Merged release/0.21.0 into feature/LE-1924-clickable-icons-ux
+* Merge branch 'release/0.20.0' into feature/LE-1913/matching-block
+
+
 ## Release [0.20.0] - 2025-07-01
 
 * Merge remote-tracking branch 'origin/release/0.20.0' into release/0.20.0

package/components/Content/Blocks/ClickableIcons.vue

@@ -19,71 +19,87 @@
             </p>
         </v-container>
         <v-container class="pa-0">
-            <v-row
+            <v-container
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
                 no-gutters
+                role="button"
+                class="flex-nowrap mb-3"
                 :class="rowClass(itemIndex)"
-                class="pa-0"
+                @click="item.active = !item.active"
             >
-                <v-col cols="8" v-bind="iconColumnAttrs">
-                    <button
-                        class="mr-1"
-                        :class="activatorButtonClass(itemIndex)"
-                        @click="item.active = !item.active"
-                    >
-                        <v-avatar
-                            v-if="item.iconImage && item.fileConfig"
-                            class="clickable--image"
-                            :rounded="
-                                block.metadata.config.display.round_icon
-                                    ? '100%'
-                                    : '0'
-                            "
-                            size="100%"
-                        >
-                            <ImageAssetViewer
-                                v-if="
-                                    item.fileConfig.asset &&
-                                    item.fileConfig.asset.file_asset_id
+                <v-row class="mb-0 pb-0" no-gutters>
+                    <v-col cols="auto" class="flex-shrink-0 ma-2 mr-0">
+                        <button :class="activatorButtonClass(itemIndex)">
+                            <v-avatar
+                                v-if="item.iconImage && item.fileConfig"
+                                class="clickable--image"
+                                :rounded="
+                                    block.metadata.config.display.round_icon
+                                        ? '100%'
+                                        : '0'
                                 "
-                                v-model="item.fileConfig"
-                                :assets="block.assets"
-                                class="image-asset-viewer"
-                                :inherit-sizing="true"
-                            ></ImageAssetViewer>
-                        </v-avatar>
-                        <v-icon
-                            v-else-if="isIcon(item.icon)"
-                            class="clickable--icon black--text"
-                            >{{ item.icon }}</v-icon
-                        >
-                        <span v-else :class="iconClass + ' black--text'">{{
-                            decode(item.icon)
-                        }}</span>
-                    </button>
-                </v-col>
-                <v-col cols="12" v-bind="bodyColumnAttrs">
-                    <v-container :class="bodyClass">
-                        <h4
-                            v-if="
-                                block.metadata.config.display.show_title ||
-                                item.active
-                            "
-                            role="button"
-                            @click="item.active = !item.active"
-                        >
-                            {{ item.title }}
-                        </h4>
-                        <v-expand-transition>
-                            <div v-if="item.active">
-                                <v-divider light class="my-4" />
-                                <TextViewer v-model="item.body"></TextViewer>
-                            </div>
-                        </v-expand-transition>
-                    </v-container>
-                </v-col>
-            </v-row>
+                                size="100%"
+                            >
+                                <ImageAssetViewer
+                                    v-if="
+                                        item.fileConfig.asset &&
+                                        item.fileConfig.asset.file_asset_id
+                                    "
+                                    v-model="item.fileConfig"
+                                    :assets="block.assets"
+                                    class="image-asset-viewer"
+                                    :inherit-sizing="true"
+                                ></ImageAssetViewer>
+                            </v-avatar>
+                            <v-icon
+                                v-else-if="isIcon(item.icon)"
+                                class="clickable--icon black--text"
+                                >{{ item.icon }}</v-icon
+                            >
+                            <span v-else :class="iconClass + ' black--text'">{{
+                                decode(item.icon)
+                            }}</span>
+                        </button>
+                    </v-col>
+                    <v-col style="min-width: 0" class="ma-3 mt-5">
+                        <v-row :class="clickableContainerClass">
+                            <v-col style="min-width: 0">
+                                <h3
+                                    v-if="
+                                        block.metadata.config.display
+                                            .show_title || item.active
+                                    "
+                                    class="wrap-text"
+                                >
+                                    {{ item.title }}
+                                </h3>
+                            </v-col>
+                            <v-col cols="auto" class="d-flex justify-end">
+                                <v-icon v-if="!item.active" class="icon-chevron"
+                                    >mdi-chevron-down</v-icon
+                                >
+                                <v-icon v-else class="icon-chevron"
+                                    >mdi-chevron-up</v-icon
+                                >
+                            </v-col>
+                        </v-row>
+                        <div v-if="item.active && !isMobile" class="pr-8">
+                            <TextViewer
+                                v-model="item.body"
+                                class="content-body"
+                            />
+                        </div>
+                    </v-col>
+                </v-row>
+                <v-row
+                    v-if="isMobile && item.active"
+                    cols="12"
+                    class="px-6 pb-4"
+                >
+                    <TextViewer v-model="item.body" class="content-body" />
+                </v-row>
+            </v-container>
         </v-container>
     </div>
 </template>
@@ -128,46 +144,9 @@ export default {
                 ) {
                     classes += ' ' + this.itemColor(itemIndex) + ' black--text'
                 }
-                if (window.innerWidth <= 600) {
-                    classes += 'd-flex justify-center '
-                }
                 return classes
             }
         },
-        iconColumnAttrs() {
-            if (this.block.metadata.config.display.large_icon) {
-                return {
-                    xl: '3',
-                    lg: '3',
-                    md: '4',
-                    sm: '4',
-                }
-            } else {
-                return {
-                    xl: '2',
-                    lg: '3',
-                    md: '3',
-                    sm: '3',
-                }
-            }
-        },
-        bodyColumnAttrs() {
-            if (this.block.metadata.config.display.large_icon) {
-                return {
-                    xl: '9',
-                    lg: '8',
-                    md: '8',
-                    sm: '8',
-                }
-            } else {
-                return {
-                    xl: '10',
-                    lg: '9',
-                    md: '9',
-                    sm: '9',
-                }
-            }
-        },
         iconClass() {
             let classes = 'clickable--text'
             if (
@@ -198,12 +177,12 @@ export default {
                 // If autocolor is enabled then calculate the color on the index
                 if (this.block.metadata.config.display.autocolor) {
                     const colors = [
-                        'light-blue lighten-4',
-                        'light-green lighten-4',
-                        'yellow lighten-4',
-                        'orange lighten-3',
-                        'red lighten-3',
-                        'deep-purple lighten-3',
+                        'extended-system-9',
+                        'extended-system-7',
+                        'extended-system-6',
+                        'extended-system-5',
+                        'extended-system-4',
+                        'extended-system-10',
                     ]
                     let colorIndex = itemIndex
                     // If we exceed the above list of colors loop back around to the beginning
@@ -230,12 +209,15 @@ export default {
                 }
             }
         },
-        bodyClass() {
-            if (window.innerWidth <= 665) {
-                return ''
-            } else {
-                return 'ml-4'
+        isMobile() {
+            return window.innerWidth <= 400
+        },
+        clickableContainerClass() {
+            let classList = 'align-start'
+            if (window.innerWidth > 400) {
+                classList += ' mb-3'
             }
+            return classList
         },
     },
     beforeMount() {
@@ -277,11 +259,6 @@ export default {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
-        getImagePublicUrl(asset) {
-            const foundAsset = this.resolveAsset(asset)
-
-            return _.get(foundAsset, 'asset.public_url', null)
-        },
     },
 }
 </script>
@@ -291,9 +268,8 @@ export default {
 }
 button.button-icon {
     border-width: 4px;
-    width: 100% !important;
-    height: auto !important;
     aspect-ratio: 1 / 1;
+    border-radius: 16px;
 }
 
 button.button-icon.button-icon--outline {
@@ -307,16 +283,20 @@ button.button-icon.button-icon--rounded {
 }
 
 .button-icon--normal {
+    width: 5rem;
+    height: 5rem;
     .clickable--icon {
-        font-size: 5rem;
+        font-size: 3rem;
     }
     .clickable--text {
         font-size: 1.5rem;
     }
 }
 .button-icon--large {
+    width: 7rem;
+    height: 7rem;
     .clickable--icon {
-        font-size: 9rem;
+        font-size: 5rem;
     }
     .clickable--text {
         font-size: 2.5rem;
@@ -326,4 +306,21 @@ button.button-icon.button-icon--rounded {
     height: inherit;
     width: inherit;
 }
+
+.content-body {
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+.icon-chevron {
+    color: inherit;
+}
+h3 {
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+.wrap-text {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+}
 </style>

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -34,13 +34,21 @@ import UserContentBlockState from '~/models/UserContentBlockState'
 
 export default {
     name: 'ContentBlockOpenResponseCollate',
-    extends: BaseContentBlock,
     components: {},
+    extends: BaseContentBlock,
     data() {
         return {
             saveState: false, // Override the base block to disable state saving
         }
     },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            enrollment: 'enrollment/get',
+            content: 'content/get',
+        }),
+    },
     beforeMount() {
         if (_.isEmpty(this.block.body)) {
             this.block.body = ''
@@ -59,20 +67,10 @@ export default {
             this.block.metadata.config.include_prompts = false
         }
     },
-    computed: {
-        ...mapGetters({
-            organization: 'organization/get',
-            course: 'course/get',
-            enrollment: 'enrollment/get',
-            content: 'content/get',
-        }),
-    },
-    watch: {},
-    mounted() {},
     methods: {
         async onCollate() {
             try {
-                let userState = await UserContentBlockState.where({
+                const userState = await UserContentBlockState.where({
                     'metadata->block->tag': 'plugin-core-open-response',
                     course_user_id: this.enrollment.id,
                 })
@@ -98,14 +96,14 @@ export default {
                             '</strong><hr />'
                     }
                     if (!_.isEmpty(state.metadata.response)) {
-                        collated += '\n' + state.metadata.response
+                        collated += '\n' + state.metadata.response + '<br>'
                     } else {
                         collated +=
                             '\n<p>' +
                             this.$t(
                                 'windward.core.components.content.blocks.open_response_collate.no_response'
                             ) +
-                            '</p>'
+                            '</p><br>'
                     }
                 })
                 let filename = this.block.metadata.config.filename
@@ -123,7 +121,24 @@ export default {
                     filename = filename.replaceAll(/\s+/gi, '_')
                     filename = filename.replaceAll(/[^a-z0-9\-\_]/gi, '')
                 }
-
+                if (!_.isEmpty(this.block.metadata.config.additional_text)) {
+                    if (
+                        this.block.metadata.config.additional_text_alignment ===
+                        'top'
+                    ) {
+                        collated =
+                            this.block.metadata.config.additional_text +
+                            '<br><br><br>' +
+                            collated
+                    } else if (
+                        this.block.metadata.config.additional_text_alignment ===
+                        'bottom'
+                    ) {
+                        collated +=
+                            '<br><br><br>' +
+                            this.block.metadata.config.additional_text
+                    }
+                }
                 this.generateDocument(collated, filename)
             } catch (e) {
                 // eslint-disable-next-line no-console

package/components/Content/Blocks/Video.vue

@@ -13,46 +13,48 @@
             {{ block.metadata.config.instructions }}
         </p>
 
-        <VuetifyPlayer
-            :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
-            type="auto"
-            :playlist="linkedPlaylist"
-            :autoplay="block.metadata.config.attributes.autoplay"
-            :autopictureinpicture="
-                block.metadata.config.attributes.autopictureinpicture
-            "
-            :controls="block.metadata.config.attributes.controls"
-            :controlslist="block.metadata.config.attributes.controlslist"
-            :crossorigin="block.metadata.config.attributes.crossorigin"
-            :disablepictureinpicture="
-                block.metadata.config.attributes.disablepictureinpicture
-            "
-            :disableremoteplayback="
-                block.metadata.config.attributes.disableremoteplayback
-            "
-            :height="block.metadata.config.attributes.height"
-            :width="block.metadata.config.attributes.width"
-            :rewind="block.metadata.config.attributes.rewind"
-            :loop="block.metadata.config.attributes.loop"
-            :muted="block.metadata.config.attributes.muted"
-            :volume.sync="volume"
-            :cc.sync="ccVisible"
-            :playsinline="block.metadata.config.attributes.playsinline"
-            :poster="linkedPosterPublicUrl"
-            :preload="block.metadata.config.attributes.preload"
-            :captionsmenu="block.metadata.config.attributes.captionsmenu"
-            :playlistmenu="block.metadata.config.attributes.playlistmenu"
-            :playlistautoadvance="
-                block.metadata.config.attributes.playlistautoadvance
-            "
-            :playbackrates="block.metadata.config.attributes.playbackrates"
-            :captions-autoscroll.sync="captionsAutoscroll"
-            :captions-paragraph-view.sync="captionsParagraphView"
-            :captions-visible.sync="captionsVisible"
-            flat
-            @seeking="onSeeking"
-            @timeupdate="onTimeupdate"
-        >
+        <div class="video-wrapper">
+            <VuetifyPlayer
+                class="no-border-player"
+                :language="$i18n && $i18n.locale ? $i18n.locale : 'en-US'"
+                type="auto"
+                :playlist="linkedPlaylist"
+                :autoplay="block.metadata.config.attributes.autoplay"
+                :autopictureinpicture="
+                    block.metadata.config.attributes.autopictureinpicture
+                "
+                :controls="block.metadata.config.attributes.controls"
+                :controlslist="block.metadata.config.attributes.controlslist"
+                :crossorigin="block.metadata.config.attributes.crossorigin"
+                :disablepictureinpicture="
+                    block.metadata.config.attributes.disablepictureinpicture
+                "
+                :disableremoteplayback="
+                    block.metadata.config.attributes.disableremoteplayback
+                "
+                :height="block.metadata.config.attributes.height"
+                :width="block.metadata.config.attributes.width"
+                :rewind="block.metadata.config.attributes.rewind"
+                :loop="block.metadata.config.attributes.loop"
+                :muted="block.metadata.config.attributes.muted"
+                :volume.sync="volume"
+                :cc.sync="ccVisible"
+                :playsinline="block.metadata.config.attributes.playsinline"
+                :poster="linkedPosterPublicUrl"
+                :preload="block.metadata.config.attributes.preload"
+                :captionsmenu="block.metadata.config.attributes.captionsmenu"
+                :playlistmenu="block.metadata.config.attributes.playlistmenu"
+                :playlistautoadvance="
+                    block.metadata.config.attributes.playlistautoadvance
+                "
+                :playbackrates="block.metadata.config.attributes.playbackrates"
+                :captions-autoscroll.sync="captionsAutoscroll"
+                :captions-paragraph-view.sync="captionsParagraphView"
+                :captions-visible.sync="captionsVisible"
+                flat
+                @seeking="onSeeking"
+                @timeupdate="onTimeupdate"
+            >
             <template #no-source>
                 <v-card>
                     <v-card-title class="justify-center">
@@ -71,6 +73,7 @@
                 </v-card>
             </template>
         </VuetifyPlayer>
+        </div>
         <!--    display first note in the playlist for now    -->
         <v-alert
             v-if="notes.length > 0"
@@ -475,3 +478,27 @@ export default {
     overflow: hidden;
 }
 </style>
+
+<style>
+/* Remove black backgrounds from video player containers */
+.no-border-player,
+.no-border-player > div:not(.vjs-control-bar),
+.no-border-player .video-js:not(.vjs-control-bar) {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+/* Ensure video element has transparent background */
+.no-border-player video {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+/* Make video player larger */
+.video-wrapper {
+    margin-left: -15px;
+    margin-right: -15px;
+    padding-left: 0;
+    padding-right: 0;
+}
+</style>

package/components/Settings/OpenResponseCollateSettings.vue

@@ -60,6 +60,30 @@
                     </v-list-item>
                 </v-list-item-group>
             </v-list>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.core.components.settings.open_response_collate.additional_text'
+                        )
+                    }}
+                </p>
+                <TextEditor
+                    v-model="block.metadata.config.additional_text"
+                    :disabled="render"
+                ></TextEditor>
+                <v-btn-toggle
+                    v-model="block.metadata.config.additional_text_alignment"
+                    class="pt-2"
+                >
+                    <v-btn value="top" :disabled="render">{{
+                        $t('windward.core.shared.settings.top')
+                    }}</v-btn>
+                    <v-btn value="bottom" :disabled="render">{{
+                        $t('windward.core.shared.settings.bottom')
+                    }}</v-btn>
+                </v-btn-toggle>
+            </v-container>
         </v-form>
     </v-container>
 </template>
@@ -67,16 +91,15 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import draggable from 'vuedraggable'
-import TextEditor from '~/components/Text/TextEditor'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlock from '~/models/ContentBlock'
 import Course from '~/models/Course'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'OpenResponseCollateSettings',
+    components: { TextEditor },
     extends: BaseContentSettings,
-    components: { draggable, TextEditor },
     props: {
         settings: { type: Object, required: false, default: null },
         context: { type: String, required: false, default: 'block' },
@@ -87,6 +110,16 @@ export default {
             linked: [],
         }
     },
+    async fetch() {
+        this.contentBlocks = await ContentBlock.where(
+            'tag',
+            'plugin-core-open-response'
+        )
+            .for(new Course({ id: this.course.id }))
+            .get()
+
+        this.sortContentBlocks(this.contentBlocks)
+    },
     computed: {
         ...mapGetters({
             organization: 'organization/get',
@@ -100,16 +133,6 @@ export default {
             }
         },
     },
-    async fetch() {
-        this.contentBlocks = await ContentBlock.where(
-            'tag',
-            'plugin-core-open-response'
-        )
-            .for(new Course({ id: this.course.id }))
-            .get()
-
-        this.sortContentBlocks(this.contentBlocks)
-    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -129,21 +152,30 @@ export default {
         if (_.isEmpty(this.block.metadata.config.filename)) {
             this.block.metadata.config.filename = ''
         }
+        if (_.isEmpty(this.block.metadata.config.additional_text)) {
+            this.block.metadata.config.additional_text = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.additional_text_alignment)) {
+            this.block.metadata.config.additional_text_alignment = 'top'
+        }
         // _.isEmpty(true) returns false. use isBoolean to check if this prop exists
         if (!_.isBoolean(this.block.metadata.config.include_prompts)) {
             this.block.metadata.config.include_prompts = false
         }
         this.linked = this.block.metadata.config.linked
     },
-    watch: {},
     mounted() {},
     methods: {
         sortContentBlocks(contentBlocks) {
-            let contentBlocksByPage = []
+            const contentBlocksByPage = []
             const blockMap = []
             // getting page order
             const contentBlockTree = this.$ContentService.getFlatTree()
-            contentBlockTree.forEach(function (page, index) {
+            const homePage = this.$ContentService.getHomepage()
+            if (homePage !== null) {
+                contentBlockTree.unshift(homePage)
+            }
+            contentBlockTree.forEach(function (page) {
                 contentBlocks.forEach((block) => {
                     // If the block is on this page and it wasn't already used on a different page
                     if (