@windward/core 0.2.0 → 0.2.2

package/components/Settings/EmailSettings.vue

@@ -18,20 +18,14 @@
                 :label="$t('windward.core.shared.settings.title.instructions')"
             ></v-textarea>
         </v-container>
-        <v-container class="pa-0">
-            <v-text-field
-                v-model="block.metadata.config.subject"
-                outlined
-                :label="$t('windward.core.components.settings.email.subject')"
-            ></v-text-field>
-        </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
-            <p>Email Items</p>
+            <p>{{ $t('windward.core.components.settings.email.items') }}</p>
             <SortableExpansionPanel
                 v-model="block.metadata.config.emails"
                 @click:close="onRemoveElement($event)"
                 @change="onDragged"
+                @update:currentPanel="onUpdatePanel"
             >
                 <template #header="{ item }">{{
                     item.from
@@ -66,6 +60,17 @@
                                 $t('windward.core.components.settings.email.cc')
                             "
                         ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.emails[index].subject
+                            "
+                            outlined
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.email.subject'
+                                )
+                            "
+                        ></v-text-field>
                         <v-btn
                             @click="
                                 onToggleExpand(
@@ -73,24 +78,37 @@
                                     index
                                 )
                             "
+                            text
                         >
                             <v-icon
                                 v-if="
-                                    !block.metadata.config.emails[index].expand
+                                    !block.metadata.config.emails[index]
+                                        .tinymce_expand
                                 "
+                                color="primary"
                                 >mdi-arrow-expand-all</v-icon
                             >
                             <v-icon
                                 v-if="
-                                    block.metadata.config.emails[index].expand
+                                    block.metadata.config.emails[index]
+                                        .tinymce_expand
                                 "
+                                color="primary"
                             >
                                 mdi-arrow-collapse-all
                             </v-icon>
                         </v-btn>
                         <TextEditor
-                            v-show="!block.metadata.config.emails[index].expand"
+                            v-show="
+                                !block.metadata.config.emails[index]
+                                    .tinymce_expand
+                            "
                             v-model="block.metadata.config.emails[index].body"
+                            :label="
+                                $t(
+                                    'windward.core.components.settings.email.placeholder'
+                                )
+                            "
                         ></TextEditor>
                     </v-container>
                 </template>
@@ -101,7 +119,7 @@
                 <v-btn color="primary" @click="onAddElement"
                     ><v-icon>mdi-plus</v-icon
                     >{{
-                        $t('windward.core.components.settings.accordion.add')
+                        $t('windward.core.components.settings.email.add')
                     }}</v-btn
                 >
             </v-row>
@@ -155,19 +173,23 @@ export default {
                 from: '',
                 to: '',
                 cc: '',
+                subject: '',
                 body: '',
-                expand: false,
+                tinymce_expand: false,
                 initials: '',
             }
             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 {
             valid: true,
             loading: false,
             expansionPanelKey: 0,
+            editingPanel: 0,
         }
     },
     beforeDestroy() {
@@ -175,14 +197,29 @@ export default {
             clearTimeout(this.debouncer)
         }
     },
+    mounted() {
+        this.block.metadata.config.selectedPanels = 0
+    },
     methods: {
         onBeforeSave() {
             this.block.metadata.config.emails.forEach((element) => {
-                let matches = element.from.match(/\b(\w)/g)
-                element.initials = matches.join('')
-                element.expand = false
+                if (element.from) {
+                    let matches = element.from.match(/\b(\w)/g)
+                    element.initials = matches.join('')
+                }
+                element.tinymce_expand = false
             })
         },
+        onUpdatePanel($event) {
+            if ($event !== this.block.metadata.config.selectedPanels) {
+                //catch click event to open selected panel to edit
+                this.block.metadata.config.selectedPanels = $event
+            } else {
+                // if user clicks same panel again expansion panel closes
+                // setting selected to null will close content blocks expansion panels
+                this.block.metadata.config.selectedPanels = null
+            }
+        },
         onRemoveElement(event) {
             this.block.metadata.config.emails.splice(event, 1)
             this.expansionPanelKey = Crypto.id()
@@ -192,19 +229,24 @@ export default {
                 from: '',
                 to: '',
                 cc: '',
+                subject: '',
                 body: '',
-                expand: false,
+                tinymce_expand: false,
                 initials: '',
             }
             this.block.metadata.config.emails.push(defaultObject)
+            this.block.metadata.config.selectedPanels =
+                this.block.metadata.config.emails.length - 1
         },
         onToggleExpand(item, index) {
             this.expansionPanelKey = Crypto.id()
-            return (item.expand = !item.expand)
+            return (item.tinymce_expand = !item.tinymce_expand)
         },
         onDragged() {
             // need to remount body after dragged to update the content body on the element
             this.expansionPanelKey = Crypto.id()
+            //close all panels on drag, leaving them open confuses the tracking as indexes changes around
+            this.block.metadata.config.selectedPanels = null
         },
     },
 }

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/MathSettings.vue

@@ -1,11 +1,11 @@
 <template>
     <div>
         <br />
-        <v-btn @click="onToggleExpand" class="mb-2">
-            <v-icon v-if="!block.metadata.config.expand"
+        <v-btn @click="onToggleExpand" text class="mb-2">
+            <v-icon v-if="!block.metadata.config.expand" color="primary"
                 >mdi-arrow-expand-all</v-icon
             >
-            <v-icon v-if="block.metadata.config.expand">
+            <v-icon v-if="block.metadata.config.expand" color="primary">
                 mdi-arrow-collapse-all
             </v-icon>
         </v-btn>
@@ -36,7 +36,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/Settings/ScenarioChoiceSettings.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-container>
+        <v-container class="pa-0">
             <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
@@ -47,28 +47,8 @@
                         )
                     "
                 ></v-switch>
-
-                <v-btn
-                    color="primary"
-                    outlined
-                    block
-                    :disabled="block.metadata.config.items.length > 26"
-                    @click="onAddElement"
-                >
-                    <v-icon>mdi-plus</v-icon>
-                    <span v-if="block.metadata.config.items.length <= 26">
-                        {{ $t('shared.forms.add') }}
-                    </span>
-                    <span v-else>
-                        {{
-                            $t(
-                                'windward.core.components.settings.scenario_choice.over_item_limit'
-                            )
-                        }}
-                    </span>
-                </v-btn>
             </v-col>
-            <v-col>
+            <v-col class="pa-0">
                 <SortableExpansionPanel
                     v-model="block.metadata.config.items"
                     @click:close="onRemoveElement"
@@ -84,37 +64,64 @@
                         </span>
                     </template>
                     <template #body="{ index }">
-                        <v-text-field
-                            v-model="block.metadata.config.items[index].title"
-                            :id="'item-' + index + '-title'"
-                            :label="
-                                $t(
-                                    'windward.core.components.settings.scenario_choice.item_title'
-                                )
-                            "
-                        ></v-text-field>
+                        <v-container>
+                            <v-text-field
+                                v-model="
+                                    block.metadata.config.items[index].title
+                                "
+                                :id="'item-' + index + '-title'"
+                                :label="
+                                    $t(
+                                        'windward.core.components.settings.scenario_choice.item_title'
+                                    )
+                                "
+                            ></v-text-field>
+
+                            <v-switch
+                                v-model="
+                                    block.metadata.config.items[index].correct
+                                "
+                                :label="
+                                    $t(
+                                        'windward.core.components.settings.scenario_choice.correct_choice'
+                                    )
+                                "
+                            ></v-switch>
 
-                        <v-switch
-                            v-model="block.metadata.config.items[index].correct"
-                            :label="
+                            <span>{{
                                 $t(
-                                    'windward.core.components.settings.scenario_choice.correct_choice'
+                                    'windward.core.components.settings.scenario_choice.item_text'
                                 )
-                            "
-                        ></v-switch>
-
-                        <span>{{
-                            $t(
-                                'windward.core.components.settings.scenario_choice.item_text'
-                            )
-                        }}</span>
-                        <TextEditor
-                            v-model="block.metadata.config.items[index].body"
-                            :height="200"
-                        ></TextEditor>
+                            }}</span>
+                            <TextEditor
+                                v-model="
+                                    block.metadata.config.items[index].body
+                                "
+                                :height="200"
+                            ></TextEditor>
+                        </v-container>
                     </template>
                 </SortableExpansionPanel>
             </v-col>
+            <v-row justify="center" class="my-4">
+                <v-btn
+                    color="primary"
+                    :disabled="block.metadata.config.items.length > 26"
+                    @click="onAddElement"
+                >
+                    <v-icon>mdi-plus</v-icon>
+                    <span v-if="block.metadata.config.items.length <= 26">
+                        {{ $t('shared.forms.add') }}
+                    </span>
+                    <span v-else>
+                        {{
+                            $t(
+                                'windward.core.components.settings.scenario_choice.over_item_limit'
+                            )
+                        }}
+                    </span>
+                </v-btn>
+            </v-row>
         </v-container>
 
         <DialogBox
@@ -231,7 +238,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

@@ -29,15 +29,17 @@
                             "
                             :placeholder="'item ' + (index + 1)"
                         ></v-text-field>
-                        <v-btn @click="onToggleExpand(index)" class="mb-3">
+                        <v-btn @click="onToggleExpand(index)" text class="mb-3">
                             <v-icon
                                 v-if="
                                     !block.metadata.config.items[index].expand
                                 "
+                                color="primary"
                                 >mdi-arrow-expand-all</v-icon
                             >
                             <v-icon
                                 v-if="block.metadata.config.items[index].expand"
+                                color="primary"
                             >
                                 mdi-arrow-collapse-all
                             </v-icon>
@@ -85,7 +87,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)) {

package/components/Settings/TextEditorSettings.vue

@@ -2,37 +2,79 @@
     <div>
         <br />
         <v-card elevation="0">
-            <v-btn-toggle v-model="settingSelector" multiple>
-                <v-btn>
-                    <v-icon>mdi-comment-text-multiple</v-icon>
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.glossary'
-                        )
-                    }}
-                </v-btn>
-                <v-btn>
-                    <v-icon> mdi-text-long</v-icon>
-                    {{
-                        $t(
-                            'windward.core.components.settings.text_editor.Text_editor'
-                        )
-                    }}
-                </v-btn>
-                <v-btn
-                    v-if="settingSelector.includes(1)"
-                    @click="
-                        block.metadata.config.expand =
-                            !block.metadata.config.expand
-                    "
-                >
-                    <v-icon v-if="!block.metadata.config.expand"
-                        >mdi-arrow-expand-all</v-icon
+            <v-btn-toggle v-model="settingSelector" multiple borderless>
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-btn v-bind="attrs" v-on="on" text>
+                            <v-icon>mdi-comment-text-multiple</v-icon>
+                            {{
+                                $t(
+                                    'windward.core.components.settings.text_editor.glossary'
+                                )
+                            }}
+                        </v-btn>
+                    </template>
+                    <span>
+                        {{
+                            $t(
+                                'windward.core.components.settings.text_editor.click_to_hide_glossary'
+                            )
+                        }}</span
+                    >
+                </v-tooltip>
+
+                <v-tooltip top>
+                    <template #activator="{ on, attrs }">
+                        <v-btn v-bind="attrs" v-on="on" text>
+                            <v-icon> mdi-text-long</v-icon>
+                            {{
+                                $t(
+                                    'windward.core.components.settings.text_editor.text_editor'
+                                )
+                            }}
+                        </v-btn>
+                    </template>
+                    <span>
+                        {{
+                            $t(
+                                'windward.core.components.settings.text_editor.click_to_hide_editor'
+                            )
+                        }}</span
+                    >
+                </v-tooltip>
+
+                <v-tooltip top v-if="settingSelector.includes(1)">
+                    <template #activator="{ on, attrs }">
+                        <v-btn
+                            v-bind="attrs"
+                            v-on="on"
+                            @click="
+                                block.metadata.config.expand =
+                                    !block.metadata.config.expand
+                            "
+                            text
+                        >
+                            <v-icon
+                                v-if="!block.metadata.config.expand"
+                                color="primary"
+                                >mdi-arrow-expand-all</v-icon
+                            >
+                            <v-icon
+                                v-if="block.metadata.config.expand"
+                                color="primary"
+                            >
+                                mdi-arrow-collapse-all
+                            </v-icon>
+                        </v-btn>
+                    </template>
+                    <span>
+                        {{
+                            $t(
+                                'windward.core.components.settings.text_editor.click_to_expand'
+                            )
+                        }}</span
                     >
-                    <v-icon v-if="block.metadata.config.expand">
-                        mdi-arrow-collapse-all
-                    </v-icon>
-                </v-btn>
+                </v-tooltip>
             </v-btn-toggle>
             <br />
         </v-card>

package/components/Settings/UserUploadSettings.vue

@@ -20,11 +20,11 @@
                 $t('windward.core.components.settings.user_upload.accept_types')
             "
         ></v-select>
-        <v-btn @click="onToggleExpand()" class="mt-4">
-            <v-icon v-if="!block.metadata.config.expand"
+        <v-btn @click="onToggleExpand()" text class="mt-4">
+            <v-icon v-if="!block.metadata.config.expand" color="primary"
                 >mdi-arrow-expand-all</v-icon
             >
-            <v-icon v-if="block.metadata.config.expand">
+            <v-icon v-if="block.metadata.config.expand" color="primary">
                 mdi-arrow-collapse-all
             </v-icon>
         </v-btn>
@@ -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/Settings/VideoSettings.vue

@@ -257,7 +257,7 @@
                             <v-btn
                                 v-bind="attrs"
                                 v-on="on"
-                                outlined
+                                text
                                 color="error"
                                 :disabled="
                                     block.metadata.config.playlist.length <= 1
@@ -287,7 +287,7 @@
                                 v-bind="attrs"
                                 v-on="on"
                                 color="primary"
-                                outlined
+                                text
                                 @click="onAddPlaylistItem"
                             >
                                 <v-icon>mdi-plus</v-icon>

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)
                 }

package/components/utils/FillInBlank/FillInTheBlanksManager.vue

@@ -1,30 +1,26 @@
 <template>
     <v-container>
         <v-row align="center" justify="center">
-            <v-col>
-                <v-row align="center" justify="center">
-                    <v-text-field
-                        class="col-10"
-                        :label="
-                            $t(
-                                'windward.core.components.utils.fill_in_the_blank.fill_in_the_blank_manager.answer'
-                            )
-                        "
-                        v-model="answer"
-                        outlined
-                        @input="submit"
-                    ></v-text-field>
-                </v-row>
-
-                <br />
-
-                <v-row align="center" justify="center">
-                    <TextEditor
-                        :key="key"
-                        v-model="feedback"
-                        @input="submit"
-                    ></TextEditor>
-                </v-row>
+            <v-col cols="12">
+                <v-text-field
+                    :label="
+                        $t(
+                            'windward.core.components.utils.fill_in_the_blank.fill_in_the_blank_manager.answer'
+                        )
+                    "
+                    v-model="answer"
+                    outlined
+                    @input="submit"
+                ></v-text-field>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="12">
+                <TextEditor
+                    :key="key"
+                    v-model="feedback"
+                    @input="submit"
+                ></TextEditor>
             </v-col>
         </v-row>
     </v-container>