diff options
Diffstat (limited to 'resources/vue/components')
| -rw-r--r-- | resources/vue/components/OERMaterialEditor.vue | 62 | ||||
| -rw-r--r-- | resources/vue/components/Quicksearch.vue | 46 | ||||
| -rw-r--r-- | resources/vue/components/StudipLevelSlider.vue | 21 |
3 files changed, 92 insertions, 37 deletions
diff --git a/resources/vue/components/OERMaterialEditor.vue b/resources/vue/components/OERMaterialEditor.vue index 88b9232..1ad1f86 100644 --- a/resources/vue/components/OERMaterialEditor.vue +++ b/resources/vue/components/OERMaterialEditor.vue @@ -6,7 +6,7 @@ data-secure enctype="multipart/form-data" > - <input type="hidden" :name="csrf.name" :value="csrf.token"> + <input type="hidden" :name="csrf.name" :value="csrf.value"> <input v-if="template?.redirect_url" type="hidden" name="redirect_url" @@ -136,18 +136,18 @@ <div class="oer_tags_container"> <h4>{{ $gettext('Themen (am besten mindestens 5)') }}</h4> <ul class="clean oer_tags"> - <li v-for="(tag, index) in displayTags" :key="index"> + <li v-for="(tag, index) in tags" :key="index"> # <quicksearch name="tags[]" :searchtype="tagSearch" v-model="tags[index]" :autocomplete="true" + v-focus-on-create ></quicksearch> - <a href="#" - @click.prevent="removeTag(index)" + <button class="as-link" @click.prevent="removeTag(index)" :title="$gettext('Thema aus der Liste streichen')"> <studip-icon shape="trash" :size="20" class="text-bottom"></studip-icon> - </a> + </button> </li> </ul> @@ -196,9 +196,12 @@ </fieldset> <footer data-dialog-button> - <button type="button" name="save"> - {{ material.id ? $gettext('Hochladen') : $gettext('Speichern') }} + <button type="submit" name="save" class="button"> + {{ material.id ? $gettext('Speichern') : $gettext('Hochladen') }} </button> + <a :href="URLHelper.getURL('dispatch.php/oer/mymaterial')" class="button cancel"> + {{ $gettext('Abbrechen') }} + </a> </footer> </form> </template> @@ -206,10 +209,25 @@ import Quicksearch from "./Quicksearch.vue"; import StudipIcon from "./StudipIcon.vue"; import StudipLevelSlider from "./StudipLevelSlider.vue"; +import Vue from "vue"; + +let mounted = false; export default { name: "OERMaterialEditor", components: {StudipLevelSlider, StudipIcon, Quicksearch }, + directives: { + ['focus-on-create']: { + bind(el) { + if (mounted) { + Vue.nextTick(() => el.querySelector('input')?.focus()); + } + } + } + }, + mounted () { + mounted = true; + }, props: { material: { type: Object, @@ -287,11 +305,6 @@ export default { return this.template?.image_tmp_name?.length > 0 || this.material.front_image_content_type?.length > 0; }, - displayTags () { - return this.material.tags.concat( - Array(this.minimumTags).fill('') - ).slice(0, this.minimumTags); - }, logoUrl() { return this.template?.image_tmp_name ? STUDIP.URLHelper.getURL('dispatch.php/oer/mymaterial/show_tmp_image') : this.material.logoUrl; }, @@ -299,9 +312,6 @@ export default { return STUDIP.URLHelper; } }, - mounted() { - jQuery('.oercampus_editmaterial').find(':focusable').first().focus(); - }, methods: { editImage(event) { let reader = new FileReader(); @@ -336,12 +346,13 @@ export default { this.tags.push(''); }, removeTag(i) { - this.$delete(this.tags, i); - if ( - this.minimumTags > this.tags.length - && this.minimumTags > 5 - ) { - this.minimumTags--; + this.tags = this.tags.filter((element, index) => index !== i); + } + }, + watch: { + tags(current) { + if (current.length === 0) { + this.tags.push(''); } } } @@ -383,14 +394,5 @@ export default { .oer_tags_container { margin-top: 10px; } - - .level_labels { - display: flex; - justify-content: space-between; - font-size: 0.8em; - color: var(--black); - margin-top: 20px; - } - } </style> diff --git a/resources/vue/components/Quicksearch.vue b/resources/vue/components/Quicksearch.vue index 0f37ae0..cdfdeb0 100644 --- a/resources/vue/components/Quicksearch.vue +++ b/resources/vue/components/Quicksearch.vue @@ -181,3 +181,49 @@ export default { } } </script> +<style lang="scss"> +.quicksearch_container { + align-items: center; + display: inline-flex; + flex-direction: row-reverse; + width: 100%; + + .dropdownmenu { + max-width: 0; + max-height: 0; + overflow: visible; + position: relative; + top: 31px; + z-index: 99999; + + .autocomplete__results { + list-style-type: none; + padding: 1px; + border: 1px solid var(--light-gray-color-40); + background-color: var(--white); + max-height: 275px; + width: 600px; + overflow-x: auto; + overflow-y: hidden; + + > li { + padding: 5px; + cursor: pointer; + display: flex; + align-items: flex-start; + + &:hover, &.autocomplete__result--selected { + background-color: var(--base-color); + color: var(--white); + } + + img { + max-width: 40px; + max-height: 40px; + margin-right: 5px; + } + } + } + } +} +</style> diff --git a/resources/vue/components/StudipLevelSlider.vue b/resources/vue/components/StudipLevelSlider.vue index a1b91e0..ee362e6 100644 --- a/resources/vue/components/StudipLevelSlider.vue +++ b/resources/vue/components/StudipLevelSlider.vue @@ -1,11 +1,16 @@ <template> <div class="level-slider" :style="{width: this.width}"> <div class="level-labels"> - <div>{{ lowerLabel }}</div> - <div>{{ upperLabel }}</div> + <div class="level-label">{{ lowerLabel }}</div> + <div class="level-label">{{ upperLabel }}</div> </div> <div class="level-numbers"> - <div v-for="i in this.maxValue" :key="`level-${i}`">{{ i }}</div> + <div v-for="i in this.maxValue" + :key="`level-${i}`" + class="level-number" + > + {{ i }} + </div> </div> <div ref="slider" class="slider-element"></div> </div> @@ -48,8 +53,6 @@ export default { max: this.maxValue, values: [this.lowerValue, this.upperValue], change: (event, ui) => { - console.log('Updating', ui.values[0], ui.values[1]); - this.$emit('update:lowerValue', ui.values[0]); this.$emit('update:upperValue', ui.values[1]); } @@ -71,10 +74,14 @@ export default { display: flex; justify-content: space-between; } + .level-number { + flex: 0 2ex; + text-align: right; + } .slider-element { - margin-left: 5px; - margin-right: 9px; margin-top: 5px; + margin-left: 0.5ex; + margin-right: 0.5ex; } } </style> |