@windward/games 0.0.9 → 0.1.0

package/components/settings/SevenStrikesSettingsManager.vue

@@ -1,139 +1,125 @@
 <template>
     <div>
-        <v-text-field
-            v-model="block.metadata.config.title"
-            :counter="50"
-            :label="
-                $t('plugin.games.components.settings.bucket_game.form.title')
-            "
-            ref="title"
-        ></v-text-field>
-        <br />
-        <v-textarea
-            outlined
-            auto-grow
-            v-model="block.metadata.config.instructions"
-            :label="
-                $t(
-                    'plugin.games.components.settings.bucket_game.form.instructions'
-                )
-            "
-        ></v-textarea>
-        <v-expansion-panels flat>
-            <v-expansion-panel>
-                <v-expansion-panel-header class="pa-0">
-                    <h3>
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    outlined
+                    :counter="50"
+                    :autofocus="true"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.bucket_game.form.title'
+                        )
+                    "
+                    ref="title"
+                ></v-text-field>
+                <v-textarea
+                    v-model="block.metadata.config.instructions"
+                    outlined
+                    auto-grow
+                    :label="
+                        $t(
+                            'windward.games.components.settings.bucket_game.form.instructions'
+                        )
+                    "
+                ></v-textarea>
+            </v-container>
+            <v-divider class="my-4 primary"></v-divider>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.games.components.settings.seven_strikes.items'
+                        )
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.words"
+                    @click:close="onDelete($event)"
+                >
+                    <template #header="{ item, index }">
                         {{
-                            $t(
-                                'plugin.games.components.settings.seven_strikes.items'
-                            )
+                            item.value
+                                ? block.metadata.config.words[index].value
+                                : $t(
+                                      'windward.games.components.settings.bucket_game.form.enter_text'
+                                  )
                         }}
-                    </h3>
-                </v-expansion-panel-header>
-                <v-expansion-panel-content class="ma-0">
-                    <v-card
-                        v-for="(item, index) in block.metadata.config.words"
-                        :key="'bucket_' + index"
-                        class="pa-2 flex-fill cardOutline"
-                        elevation="0"
-                        outlined
-                        tile
-                    >
-                        <v-row class="itemHeight">
-                            <p
-                                class="text-truncate pa-0 ma-0 seventy"
-                                @click="onOpenEditor(index)"
-                                v-on:keyup.enter="onOpenEditor(index)"
-                                @mouseover="onHover"
-                                @mouseleave="onHoverLeave"
-                                :class="cursor"
-                                tabindex="0"
-                            >
-                                <v-icon class="pl-2"
-                                    >mdi-gesture-tap-hold</v-icon
-                                >
-                                {{
-                                    item.value
-                                        ? block.metadata.config.words[index]
-                                              .value
-                                        : $t(
-                                              'plugin.games.components.settings.bucket_game.form.enter_text'
-                                          )
-                                }}
-                            </p>
-                            <v-icon class="twenty" @click="onDelete(index)"
-                                >mdi-delete-outline</v-icon
-                            >
-                        </v-row>
-                        <v-textarea
-                            v-if="item.expand"
-                            outlined
-                            :autofocus="true"
-                            :label="
-                                $t(
-                                    'plugin.games.components.settings.seven_strikes.word'
-                                )
-                            "
-                            class="pt-4"
-                            v-model="block.metadata.config.words[index].value"
-                        ></v-textarea>
-                        <v-textarea
-                            v-if="item.expand"
-                            outlined
-                            class="pt-4"
-                            :label="
-                                $t(
-                                    'plugin.games.components.settings.seven_strikes.hint'
-                                )
-                            "
-                            v-model="block.metadata.config.words[index].hint"
-                        ></v-textarea>
-                    </v-card>
-                    <p
-                        @mouseover="onHover"
-                        @mouseleave="onHoverLeave"
-                        @click="onAddElement"
-                        v-on:keyup.enter="onAddElement"
-                        class="fullWidth"
-                        :class="cursor"
-                        tabindex="0"
-                    >
-                        <v-icon class="primary addIcon">mdi-plus</v-icon>
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.seven_strikes.word'
+                                        )
+                                    }}
+                                </p>
+                                <v-textarea
+                                    v-model="
+                                        block.metadata.config.words[index].value
+                                    "
+                                    outlined
+                                    :autofocus="true"
+                                ></v-textarea>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.seven_strikes.hint'
+                                        )
+                                    }}
+                                </p>
+                                <v-textarea
+                                    v-model="
+                                        block.metadata.config.words[index].hint
+                                    "
+                                    outlined
+                                    class="pt-4"
+                                ></v-textarea>
+                            </v-flex>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
+            </v-container>
+            <v-container class="pa-0">
+                <v-row justify="center" class="my-4">
+                    <v-btn color="primary" @click="onAddElement">
+                        <v-icon>mdi-plus</v-icon>
                         {{
                             $t(
-                                'plugin.games.components.content.blocks.sorting_game.add_element'
+                                'windward.games.components.content.blocks.sorting_game.add_element'
                             )
                         }}
-                    </p>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-        </v-expansion-panels>
-        <v-row class="mt-3">
-            <v-textarea
-                v-model="block.metadata.config.feedback_correct"
-                outlined
-                auto-grow
-                :counter="50"
-                :label="
-                    $t(
-                        'plugin.games.components.settings.word_jumble.feedback_correct'
-                    )
-                "
-                ref="title"
-            ></v-textarea>
-            <br />
-            <v-textarea
-                outlined
-                auto-grow
-                v-model="block.metadata.config.feedback_incorrect"
-                :label="
-                    $t(
-                        'plugin.games.components.settings.word_jumble.feedback_incorrect'
-                    )
-                "
-            ></v-textarea>
-            <br />
-        </v-row>
+                    </v-btn>
+                </v-row>
+            </v-container>
+            <v-row class="mt-3">
+                <v-textarea
+                    v-model="block.metadata.config.feedback_correct"
+                    outlined
+                    auto-grow
+                    :counter="50"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.word_jumble.feedback_correct'
+                        )
+                    "
+                    ref="title"
+                ></v-textarea>
+                <v-textarea
+                    v-model="block.metadata.config.feedback_incorrect"
+                    outlined
+                    auto-grow
+                    :label="
+                        $t(
+                            'windward.games.components.settings.word_jumble.feedback_incorrect'
+                        )
+                    "
+                ></v-textarea>
+            </v-row>
+        </v-form>
     </div>
 </template>
 
@@ -142,11 +128,12 @@ import _ from 'lodash'
 import draggable from 'vuedraggable'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import CrudTable from '../content/CrudTable.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'SevenStrikesSettingsManager',
     extends: BaseContentSettings,
-    components: { CrudTable, draggable },
+    components: { CrudTable, draggable, SortableExpansionPanel },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -158,18 +145,24 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.settings.seven_strikes.title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = this.$t(
-                'plugin.games.components.settings.seven_strikes.instructions'
+                'windward.games.components.settings.seven_strikes.instructions'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_correct = ''
+            this.block.metadata.config.feedback_correct = this.$t(
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
+            )
         }
-        if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_incorrect = ''
+        if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
+            this.block.metadata.config.feedback_incorrect = this.$t(
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.words)) {
             this.block.metadata.config.words = []
@@ -184,7 +177,8 @@ export default {
     },
     data() {
         return {
-            cursor: null,
+            valid: true,
+            loading: false,
         }
     },
     methods: {
@@ -221,24 +215,6 @@ export default {
             }
             this.block.metadata.config.words.push(default_object)
         },
-        onHover(index) {
-            this.cursor = 'changePointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
-        },
-        onOpenEditor(index) {
-            // open target element
-            this.block.metadata.config.words[index].expand =
-                !this.block.metadata.config.words[index].expand
-            // close all other expanded areas
-            this.block.metadata.config.words.forEach((element) => {
-                let indexOf = this.block.metadata.config.words.indexOf(element)
-                if (index !== indexOf) {
-                    element.expand = false
-                }
-            })
-        },
         onDelete(index) {
             this.block.metadata.config.words.splice(index, 1)
         },
@@ -250,46 +226,8 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.cardOutline {
-    border: 2px solid var(--v-primary-base);
-    margin-bottom: 8px;
-}
-.fullWidth {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
+.p-label {
     font-size: 16px;
-}
-.itemHeight {
-    display: flex;
-    align-content: center;
-    justify-content: space-between;
-    height: 60px;
-}
-.changePointer {
-    cursor: pointer !important;
-}
-.seventy {
-    width: 70%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-}
-.twenty {
-    width: 20%;
-    height: 90%;
-    margin-top: 3px;
-    border-left: 2px solid var(--v-primary-base);
-}
-.addButton {
-    height: 50%;
-    width: 50%;
-}
-.addIcon {
-    margin-right: 5px;
-}
-.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
-    padding: 0 !important;
+    font-weight: 500;
 }
 </style>

package/components/settings/SlideShowManager.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
-        <div>
-            <v-form ref="form" v-model="valid" v-if="!loading">
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
+                    outlined
                     :counter="50"
                     maxlength="50"
                     :label="
                         $t(
-                            'plugin.games.components.settings.slideshow.form.title'
+                            'windward.games.components.settings.slideshow.form.title'
                         )
                     "
                 ></v-text-field>
-                <br />
                 <v-textarea
                     outlined
                     auto-grow
@@ -21,150 +21,110 @@
                     maxlength="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.slideshow.form.instructions'
+                            'windward.games.components.settings.slideshow.form.instructions'
                         )
                     "
                 ></v-textarea>
-                <br />
-            </v-form>
-            <div v-if="loading" class="text-center">
-                <v-progress-circular
-                    :size="70"
-                    :width="7"
-                    color="primary"
-                    indeterminate
-                ></v-progress-circular>
-            </div>
-        </div>
-        <div>
-            <v-layout class="d-flex">
-                <v-toolbar flat class="toolbar">
-                    <v-text-field
-                        class="shrink pt-7 pr-2"
-                        :label="
-                            $t(
-                                'plugin.games.components.content.blocks.slideshow.amount_of_slides'
-                            )
-                        "
-                        :placeholder="
-                            $t(
-                                'plugin.games.components.content.blocks.slideshow.amount_of_slides'
-                            )
-                        "
-                        outlined
-                        dense
-                        type="number"
-                        :value="block.metadata.config.slides.length"
-                        :disabled="true"
-                    ></v-text-field>
-                    <v-btn @click="onAddSlide" color="primary">
+            </v-container>
+            <v-divider class="my-4 primary"></v-divider>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.games.components.settings.slideshow.form.items'
+                        )
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.slides"
+                    @click:close="onDeleteSlide($event)"
+                >
+                    <template #header="{ item, index }">
                         {{
-                            $t(
-                                'plugin.games.components.content.blocks.slideshow.add_slide'
-                            )
+                            item.header
+                                ? item.header
+                                : $t(
+                                      'windward.games.components.content.blocks.slideshow.slides.slide',
+                                      [index + 1]
+                                  )
                         }}
-                    </v-btn>
-                </v-toolbar>
-            </v-layout>
-            <div>
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-text-field
+                            v-model="block.metadata.config.slides[index].header"
+                            :autofocus="true"
+                            outlined
+                            :label="
+                                $t(
+                                    'windward.games.components.content.blocks.slideshow.slides.slide_header'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.slides[index].description
+                            "
+                            outlined
+                            :label="
+                                $t(
+                                    'windward.games.components.content.blocks.slideshow.slides.slide_description'
+                                )
+                            "
+                        ></v-text-field>
+                        <v-text-field
+                            v-model="
+                                block.metadata.config.slides[index].image_alt
+                            "
+                            outlined
+                            :label="
+                                $t(
+                                    'windward.games.components.content.blocks.slideshow.slides.image_alt'
+                                )
+                            "
+                        ></v-text-field>
+                        <ContentBlockAsset
+                            id="content-block-asset"
+                            v-model="block.metadata.config.slides[index].image"
+                            mimes="image/png,image/jpeg"
+                        ></ContentBlockAsset>
+                    </template>
+                </SortableExpansionPanel>
                 <v-container>
-                    <v-expansion-panels flat>
-                        <draggable
-                            :list="block.metadata.config.slides"
-                            :disabled="false"
-                            class="flex-fill"
-                            :group="{
-                                name: 'people',
-                                pull: 'clone',
-                                put: false,
-                            }"
-                        >
-                            <v-expansion-panel
-                                v-for="(slide, index) in block.metadata.config
-                                    .slides"
-                                :key="index"
-                            >
-                                <v-expansion-panel-header>
-                                    <v-container>
-                                        <v-row
-                                            align="center"
-                                            justify="space-between"
-                                        >
-                                            <h3>
-                                                {{
-                                                    $t(
-                                                        'plugin.games.components.content.blocks.slideshow.slides.slide',
-                                                        [index + 1]
-                                                    )
-                                                }}
-                                            </h3>
-                                            <v-btn
-                                                @click="onDeleteSlide(index)"
-                                                color="primary"
-                                            >
-                                                <v-icon> mdi-delete</v-icon>
-                                                <span class="sr-only">{{
-                                                    $t('shared.forms.delete')
-                                                }}</span>
-                                            </v-btn>
-                                        </v-row>
-                                    </v-container>
-                                </v-expansion-panel-header>
-                                <v-expansion-panel-content>
-                                    <v-text-field
-                                        v-model="slide['header']"
-                                        :autofocus="true"
-                                        outlined
-                                        :label="
-                                            $t(
-                                                'plugin.games.components.content.blocks.slideshow.slides.slide_header'
-                                            )
-                                        "
-                                    ></v-text-field>
-                                    <v-text-field
-                                        v-model="slide['description']"
-                                        outlined
-                                        :label="
-                                            $t(
-                                                'plugin.games.components.content.blocks.slideshow.slides.slide_description'
-                                            )
-                                        "
-                                    ></v-text-field>
-                                    <v-text-field
-                                        v-model="slide['image_alt']"
-                                        outlined
-                                        :label="
-                                            $t(
-                                                'plugin.games.components.content.blocks.slideshow.slides.image_alt'
-                                            )
-                                        "
-                                    ></v-text-field>
-                                    <ContentBlockAsset
-                                        id="content-block-asset"
-                                        v-model="slide['image']"
-                                        mimes="image/png,image/jpeg"
-                                    ></ContentBlockAsset>
-                                </v-expansion-panel-content>
-                            </v-expansion-panel>
-                        </draggable>
-                    </v-expansion-panels>
+                    <v-row justify="center" class="my-4">
+                        <v-btn @click="onAddSlide" color="primary">
+                            <v-icon>mdi-plus</v-icon>
+                            {{
+                                $t(
+                                    'windward.games.components.content.blocks.slideshow.add_slide'
+                                )
+                            }}
+                        </v-btn>
+                    </v-row>
                 </v-container>
-            </div>
+            </v-container>
+        </v-form>
+        <div v-if="loading" class="text-center">
+            <v-progress-circular
+                :size="70"
+                :width="7"
+                color="primary"
+                indeterminate
+            ></v-progress-circular>
         </div>
     </div>
 </template>
 <script>
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import draggable from 'vuedraggable'
 import _ from 'lodash'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'SlideShowManager',
     extends: BaseContentSettings,
     components: {
-        draggable,
         ContentBlockAsset,
+        SortableExpansionPanel,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -180,7 +140,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.settings.slideshow.form.slideshow_title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''