@windward/core 0.1.4 → 0.2.1

package/components/Content/Blocks/Accordion.vue

@@ -5,13 +5,16 @@
             flat
             accordion
             focusable
-            id="expansion-panel-setting"
+            class="expansion-panels-container"
         >
             <v-expansion-panel
                 v-for="(item, itemIndex) in block.metadata.config.items"
                 :key="itemIndex"
             >
-                <v-expansion-panel-header class="header" color="primary">
+                <v-expansion-panel-header
+                    class="expansion-panel-header"
+                    color="primary"
+                >
                     {{
                         item.header === '' || item.header === null
                             ? 'Item ' + (itemIndex + 1)
@@ -19,7 +22,7 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content
-                    class="body"
+                    class="expansion-panel-body"
                     :key="expansionPanelKey"
                 >
                     <v-container>
@@ -77,7 +80,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.currentAccordion)) {
             this.block.metadata.config.currentAccordion = 0
         }
-        this.block.body = 'accordion'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.accordion'
+        )
     },
     data() {
         return {
@@ -125,14 +130,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header {
+.expansion-panel-header {
     color: white;
     margin-top: 1px;
 }
-.body {
+.expansion-panel-body {
     background: var(--v-surface-base);
 }
-#expansion-panel-setting {
+.expansion-panels-container {
     z-index: 0;
 }
 </style>

package/components/Content/Blocks/BlockQuote.vue

@@ -70,7 +70,9 @@ export default {
                 source_type: '',
             }
         }
-        this.block.body = 'block quote'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.block_quote.body'
+        )
     },
     data() {
         return {

package/components/Content/Blocks/ClickableIcons.vue

@@ -71,6 +71,35 @@ export default {
         TextViewer,
     },
     extends: BaseContentBlock,
+    beforeMount() {
+        // Apply the default config
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.clickable_icons'
+        )
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            this.block.metadata.config.items = []
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.description)) {
+            this.block.metadata.config.description = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.display)) {
+            this.block.metadata.config.display = {
+                show_title: false,
+                show_background: false,
+                round_icon: false,
+                italic_icon: false,
+                autocolor: true,
+            }
+        }
+        if (this.block.metadata.config.items.length) {
+            for (const index in this.block.metadata.config.items) {
+                this.block.metadata.config.items[index].active = false
+            }
+        }
+    },
     data() {
         return {}
     },
@@ -146,33 +175,6 @@ export default {
             }
         },
     },
-    beforeMount() {
-        // Apply the default config
-        this.block.body = 'clickable icons'
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            this.block.metadata.config.items = []
-        }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.description)) {
-            this.block.metadata.config.description = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.display)) {
-            this.block.metadata.config.display = {
-                show_title: false,
-                show_background: false,
-                round_icon: false,
-                italic_icon: false,
-                autocolor: true,
-            }
-        }
-        if (this.block.metadata.config.items.length) {
-            for (const index in this.block.metadata.config.items) {
-                this.block.metadata.config.items[index].active = false
-            }
-        }
-    },
     methods: {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0

package/components/Content/Blocks/Email.vue

@@ -231,7 +231,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.activeEmail)) {
             this.block.metadata.config.activeEmail = 0
         }
-        this.block.body = 'emails'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.email.title'
+        )
     },
     data() {
         return {

package/components/Content/Blocks/Feedback.vue

@@ -186,7 +186,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.definition)) {
             this.block.metadata.config.definition = {}
         }
-        this.block.body = 'feedback'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.feedback.feedback'
+        )
     },
     data() {
         return {
@@ -318,14 +320,3 @@ export default {
     },
 }
 </script>
-<style scoped>
-.question {
-    font-weight: bold;
-}
-.radio-group {
-    width: 100% !important;
-}
-.likert-radio {
-    margin-left: 55px;
-}
-</style>

package/components/Content/Blocks/Image.vue

@@ -43,7 +43,7 @@
                 class="sr-only"
             ></TextViewer>
         </v-container>
-        <Dialog v-model="dialog" persistent :trigger="false">
+        <DialogBox v-model="dialog" persistent :trigger="false">
             <template #title></template>
             <template #form="{ on, attrs }">
                 <v-responsive
@@ -72,13 +72,13 @@
                     </v-img>
                 </v-responsive>
             </template>
-        </Dialog>
+        </DialogBox>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
-import Dialog from '~/components/Dialog'
+import DialogBox from '~/components/DialogBox.vue'
 import TextViewer from '~/components/Text/TextViewer'
 import Crypto from '~/helpers/Crypto'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
@@ -87,7 +87,7 @@ export default {
     name: 'ContentBlockImage',
     extends: BaseContentBlock,
     components: {
-        Dialog,
+        DialogBox,
         TextViewer,
     },
     data() {

package/components/Content/Blocks/Math.vue

@@ -33,7 +33,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'Math Editor'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.math'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Content/Blocks/ScenarioChoice.vue

@@ -202,7 +202,9 @@ export default {
     },
     beforeMount() {
         // Apply the default config
-        this.block.body = 'scenario choice'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.scenario_choice'
+        )
         if (_.isEmpty(this.block.metadata.config.items)) {
             this.block.metadata.config.items = []
         }

package/components/Content/Blocks/Tab.vue

@@ -1,10 +1,7 @@
 <template>
     <div>
-        <v-container>
-            <v-tabs
-                background-color="primary"
-                v-model="block.metadata.config.currentTab"
-            >
+        <v-container class="pa-0">
+            <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>
                 <v-tabs-slider></v-tabs-slider>
                 <v-tab
                     v-for="(tab, tabIndex) in block.metadata.config.items"
@@ -52,7 +49,9 @@ export default {
     },
     extends: BaseContentBlock,
     beforeMount() {
-        this.block.body = 'tab'
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.tab'
+        )
         if (_.isEmpty(this.block.metadata.config.items)) {
             const defaultObject = {
                 tabHeader: '',
@@ -60,9 +59,6 @@ export default {
                 content: '',
             }
             this.block.metadata.config.items = []
-            if (_.isEmpty(this.block.metadata.config.tab)) {
-                this.block.metadata.config.tab = 0
-            }
             this.block.metadata.config.items.push(defaultObject)
         } else {
             this.block.metadata.config.items.forEach((element) => {

package/components/Content/Blocks/UserUpload/ManageDataTableUserFiles.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="text-center">
-        <Dialog
+        <DialogBox
             v-bind="$attrs"
             transition="dialog-bottom-transition"
             :color="color"
@@ -22,20 +22,20 @@
                     :enrollment="enrollment"
                 ></DisplayUserFilesTable>
             </template>
-        </Dialog>
+        </DialogBox>
         <span v-else>---</span>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
-import Dialog from '~/components/Dialog'
+import DialogBox from '~/components/DialogBox'
 
 import DisplayUserFilesTable from './DisplayUserFilesTable.vue'
 
 export default {
     name: 'ManageDataTableUserFiles',
-    components: { Dialog, DisplayUserFilesTable },
+    components: { DialogBox, DisplayUserFilesTable },
     props: {
         value: { type: Object, required: true },
         enrollment: { type: Object, required: true },

package/components/Content/Blocks/UserUpload.vue

@@ -119,7 +119,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'user uplaod'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.user_upload'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Navigation/Items/AskTheExpert.vue

@@ -7,7 +7,7 @@
             <v-list-item-title>
                 {{ $t(config.i18n) }}
             </v-list-item-title>
-            <Dialog v-model="dialog" color="primary" text :trigger="false">
+            <DialogBox v-model="dialog" color="primary" text :trigger="false">
                 <template #title>{{ $t(config.i18n) }}</template>
                 <template #form="{ on, attrs }">
                     <v-card flat v-bind="attrs" v-on="on">
@@ -104,7 +104,7 @@
                         </v-container>
                     </v-card>
                 </template>
-            </Dialog>
+            </DialogBox>
         </v-list-item-content>
     </v-list-item>
 </template>

package/components/Navigation/Items/CourseGlossaryToolNav.vue

@@ -5,14 +5,14 @@
         </v-list-item-action>
         <v-list-item-content>
             <v-list-item-title>{{ $t(config.i18n) }}</v-list-item-title>
-            <Dialog v-model="dialog" color="primary" text :trigger="false">
+            <DialogBox v-model="dialog" color="primary" text :trigger="false">
                 <template #title>{{ $t(config.i18n) }}</template>
                 <template #form="{ on, attrs }">
                     <div v-bind="attrs" v-on="on">
                         <CourseGlossary />
                     </div>
                 </template>
-            </Dialog>
+            </DialogBox>
         </v-list-item-content>
     </v-list-item>
 </template>

package/components/Settings/AccordionSettings.vue

@@ -134,9 +134,7 @@ export default {
         if (_.isEmpty(this.block.metadata.config.currentAccordion)) {
             this.block.metadata.config.currentAccordion = 0
         }
-        this.block.body = this.$t(
-            'windward.core.components.settings.accordion.accordion'
-        )
+        this.block.body = this.$t('windward.core.shared.content_blocks.title.accordion')
     },
     data() {
         return {

package/components/Settings/BlockQuoteSettings.vue

@@ -117,7 +117,7 @@ export default {
             }
         }
         this.block.body = this.$t(
-            'windward.core.shared.settings.title.block_quote'
+            'windward.core.components.content.blocks.block_quote.body'
         )
     },
     data() {

package/components/Settings/ClickableIconsSettings.vue

@@ -171,7 +171,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'clickable icons'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.clickable_icons')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/EmailSettings.vue

@@ -161,7 +161,7 @@ export default {
             }
             this.block.metadata.config.emails.push(defaultObject)
         }
-        this.block.body = 'emails'
+        this.block.body = this.$t('windward.core.components.content.blocks.email.title')
     },
     data() {
         return {

package/components/Settings/FeedbackSettings.vue

@@ -53,7 +53,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.definition)) {
             this.block.metadata.config.definition = {}
         }
-        this.block.body = 'feedback'
+        this.block.body = this.$t(
+            'windward.core.components.content.blocks.feedback.feedback'
+        )
     },
     data() {
         return {

package/components/Settings/ImageSettings.vue

@@ -27,24 +27,68 @@
             v-model="block.metadata.config.modal"
             :label="$t('windward.core.components.settings.image.modal')"
         ></v-switch>
+        <v-tooltip top color="primary">
+            <template v-slot:activator="{ on, attrs }">
+                <div v-bind="attrs" v-on="on" class="d-flex justify-content">
+                    <v-switch
+                        v-model="block.metadata.config.decorative"
+                        @change="onDecorativeToggled($event)"
+                        :label="
+                            $t(
+                                'windward.core.components.settings.image.decorative'
+                            )
+                        "
+                    ></v-switch>
+                    <div class="d-flex align-center pb-4">
+                        <v-icon x-small>mdi-help</v-icon>
+                    </div>
+                </div>
+            </template>
+            <span class="span-description">{{
+                $t('windward.core.components.settings.image.toggle_description')
+            }}</span>
+        </v-tooltip>
 
-        <v-form>
+        <v-form v-if="!block.metadata.config.decorative">
             <v-text-field
                 v-model="block.metadata.config.alt"
+                outlined
+                counter
+                maxlength="125"
                 :label="
                     $t('windward.core.components.navigation.image.default_alt')
                 "
                 :rules="validation.textRules"
-            ></v-text-field>
-            <h3 class="pb-2">
-                {{
-                    $t(
-                        'windward.core.components.navigation.image.default_aria_described'
-                    )
-                }}
-            </h3>
+            >
+                <template v-slot:append>
+                    <v-tooltip top color="primary">
+                        <template v-slot:activator="{ on }">
+                            <v-icon v-on="on" small>mdi-help</v-icon>
+                        </template>
+                        <span class="span-description">{{
+                            $t(
+                                'windward.core.components.settings.image.alt_description'
+                            )
+                        }}</span>
+                    </v-tooltip>
+                </template>
+            </v-text-field>
+            <h5 class="pb-2">
+                {{ $t('windward.core.components.settings.image.screenreader') }}
+                <v-tooltip top color="primary">
+                    <template v-slot:activator="{ on }">
+                        <v-icon v-on="on" small class="pb-3">mdi-help</v-icon>
+                    </template>
+                    <span class="span-description">{{
+                        $t(
+                            'windward.core.components.settings.image.screenreader_description'
+                        )
+                    }}</span>
+                </v-tooltip>
+            </h5>
             <TextEditor
                 v-model="block.metadata.config.aria_describedby"
+                menubar="bullist numlist"
             ></TextEditor>
         </v-form>
     </v-container>
@@ -86,6 +130,9 @@ export default {
         if (!_.isBoolean(this.block.metadata.config.modal)) {
             this.block.metadata.config.modal = false
         }
+        if (!_.isBoolean(this.block.metadata.config.decorative)) {
+            this.block.metadata.config.decorative = false
+        }
         if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
             this.block.metadata.config.aria_describedby = ''
         }
@@ -108,6 +155,12 @@ export default {
     watch: {},
     mounted() {},
     methods: {
+        onDecorativeToggled(evt) {
+            if (evt) {
+                this.block.metadata.config.aria_describedby = ''
+                this.block.metadata.config.alt = ''
+            }
+        },
         onFileSelect(file) {
             // file = null when you remove a file
             if (_.isEmpty(file)) {
@@ -139,3 +192,10 @@ export default {
     },
 }
 </script>
+<style>
+.span-description {
+    display: flex;
+    justify-content: center;
+    width: 200px;
+}
+</style>

package/components/Settings/MathSettings.vue

@@ -36,7 +36,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'Math Editor'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.math')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/ScenarioChoiceSettings.vue

@@ -117,7 +117,7 @@
             </v-col>
         </v-container>
 
-        <Dialog
+        <DialogBox
             v-model="showLinkDialog"
             :trigger="false"
             action-save
@@ -171,7 +171,7 @@
                     </v-treeview>
                 </v-form>
             </template>
-        </Dialog>
+        </DialogBox>
     </div>
 </template>
 <script>
@@ -180,14 +180,14 @@ import { mapGetters } from 'vuex'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
-import Dialog from '~/components/Dialog.vue'
+import DialogBox from '~/components/DialogBox.vue'
 
 export default {
     name: 'ScenarioChoiceSettings',
     components: {
         SortableExpansionPanel,
         TextEditor,
-        Dialog,
+        DialogBox,
     },
     extends: BaseContentSettings,
     computed: {
@@ -231,7 +231,9 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'scenario choice'
+            this.block.body = this.$t(
+                'windward.core.shared.content_blocks.title.scenario_choice'
+            )
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/Settings/TabSettings.vue

@@ -85,7 +85,7 @@ export default {
         }
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
-                'windward.core.components.settings.tab.tab'
+                'windward.core.shared.content_blocks.title.tab'
             )
         }
         if (_.isEmpty(this.block.metadata)) {
@@ -94,9 +94,6 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config.tab)) {
-            this.block.metadata.config.tab = 0
-        }
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }

package/components/Settings/TextEditorSettings.vue

@@ -108,7 +108,7 @@
             type=" table-row-divider, list-item, divider, list-item, divider, image,image"
             v-show="settingSelector.includes(1) && block.metadata.config.expand"
         ></v-skeleton-loader>
-        <Dialog
+        <DialogBox
             v-model="dialog"
             color="primary"
             max-width="600px"
@@ -129,7 +129,7 @@
                     v-on="on"
                 />
             </template>
-        </Dialog>
+        </DialogBox>
     </div>
 </template>
 

package/components/Settings/UserUploadSettings.vue

@@ -62,7 +62,7 @@ export default {
             this.block = {}
         }
         if (_.isEmpty(this.block.body)) {
-            this.block.body = 'user uplaod'
+            this.block.body = this.$t('windward.core.shared.content_blocks.title.user_upload')
         }
         if (_.isEmpty(this.block.metadata)) {
             this.block.metadata = {}

package/components/utils/ContentViewer.vue

@@ -33,7 +33,8 @@ export default {
                 content = _.cloneDeep(this.value)
                 if (
                     MathHelper.containsMathML(content) ||
-                    MathHelper.containsLatex(content)
+                    MathHelper.containsLatex(content) ||
+                    MathHelper.containSREnhancedLatex(content)
                 ) {
                     content = MathHelper.convertMathContentToHtml(content)
                 }