diff options
| author | Murtaza Sultani <sultani@data-quest.de> | 2025-09-25 10:47:15 +0200 |
|---|---|---|
| committer | Murtaza Sultani <sultani@data-quest.de> | 2025-09-25 10:47:15 +0200 |
| commit | 92176f565b5269238d059fa8cdfd0b35cbdb1f7d (patch) | |
| tree | 4ab7114bd52454d7b6713fb1160e105018617fb8 | |
| parent | 2c701ef239b24980a0658df3e707dad4edba08a1 (diff) | |
Resolve "Vue Komponente: StudipSelect - funktioniert schlecht, wenn das Item einen langen Namen hat und beim Auf- oder Zuklappen"
Closes #5820
Merge request studip/studip!4499
30 files changed, 600 insertions, 449 deletions
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss index ccfe15f..480a3ca 100644 --- a/resources/assets/stylesheets/scss/forum.scss +++ b/resources/assets/stylesheets/scss/forum.scss @@ -334,9 +334,6 @@ $card-max-width: 300px; .forum-form { flex: 1; padding: 5px 10px; - .multi-select-input .vs__dropdown-toggle { - max-height: fit-content; - } fieldset:not(.undecorated) > :not(legend, table) { max-width: calc(100% - 1px); diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss index 22c6c20..e9c3ddf 100644 --- a/resources/assets/stylesheets/scss/select.scss +++ b/resources/assets/stylesheets/scss/select.scss @@ -83,6 +83,10 @@ form.default .studip-v-select .vs__selected { display: none; } } + + &__dropdown-toggle { + max-height: fit-content; + } } .multiselect__tags { diff --git a/resources/vue/apps/ConsultationCreator.vue b/resources/vue/apps/ConsultationCreator.vue index c0e3551..4e92eb5 100644 --- a/resources/vue/apps/ConsultationCreator.vue +++ b/resources/vue/apps/ConsultationCreator.vue @@ -157,47 +157,60 @@ </p> </template> - <label v-if="withResponsible.users"> - {{ $gettext('Durchführende Personen') }} - <StudipSelect v-model="responsibleUsers" - :options="withResponsible.users" - :reduce="option => option.id" - multiple - :clearable="true" + <template v-if="withResponsible.users"> + <label for="responsible-users"> + {{ $gettext('Durchführende Personen') }} + + </label> + <StudipSelect + id="responsible-users" + v-model="responsibleUsers" + :options="withResponsible.users" + :reduce="option => option.id" + multiple + :clearable="true" > <template #open-indicator> <span><studip-icon shape="arr_1down" :size="10" /></span> </template> </StudipSelect> - </label> + </template> - <label v-if="withResponsible.groups"> - {{ $gettext('Durchführende Gruppen') }} - <StudipSelect v-model="responsibleGroups" - :options="withResponsible.groups" - :reduce="option => option.id" - multiple - :clearable="true" + <template v-if="withResponsible.groups"> + <label id="responsible-groups"> + {{ $gettext('Durchführende Gruppen') }} + </label> + <StudipSelect + id="responsible-groups" + v-model="responsibleGroups" + :options="withResponsible.groups" + :reduce="option => option.id" + multiple + :clearable="true" > <template #open-indicator> <span><studip-icon shape="arr_1down" :size="10" /></span> </template> </StudipSelect> - </label> + </template> - <label v-if="withResponsible.institutes"> - {{ $gettext('Durchführende Einrichtungen') }} - <StudipSelect v-model="responsibleInstitutes" - :options="withResponsible.institutes" - :reduce="option => option.id" - multiple - :clearable="true" + <template v-if="withResponsible.institutes"> + <label for="responsible-institutes"> + {{ $gettext('Durchführende Einrichtungen') }} + </label> + <StudipSelect + id="responsible-institutes" + v-model="responsibleInstitutes" + :options="withResponsible.institutes" + :reduce="option => option.id" + multiple + :clearable="true" > <template #open-indicator> <span><studip-icon shape="arr_1down" :size="10" /></span> </template> </StudipSelect> - </label> + </template> </fieldset> <fieldset> diff --git a/resources/vue/apps/forum/discussions/Edit.vue b/resources/vue/apps/forum/discussions/Edit.vue index 26960b1..68ef00f 100644 --- a/resources/vue/apps/forum/discussions/Edit.vue +++ b/resources/vue/apps/forum/discussions/Edit.vue @@ -118,21 +118,43 @@ onMounted(() => { </section> <section class="inputs-container"> - <label class="flex-1"> - <span class="sr-only">{{ $gettext('Thema') }}</span> + <div class="flex-1"> + <label for="select-topic-input"> + <span class="sr-only">{{ $gettext('Thema') }}</span> + </label> + <SelectTopicInput + id="select-topic-input" + :options="topics" + v-model="discussionForm.topic" + :taggable="true" + :required="true" + /> <input type="hidden" name="topic" :value="JSON.stringify(discussionForm.topic)"> - <SelectTopicInput :options="topics" v-model="discussionForm.topic" :taggable="true" :required="true" /> - </label> - <label class="flex-1"> - <span class="sr-only">{{ $gettext('Diskussionstyp') }}</span> + </div> + <div class="flex-1"> + <label for="select-discussion-type"> + <span class="sr-only">{{ $gettext('Diskussionstyp') }}</span> + </label> + <SelectDiscussionType + id="select-discussion-type" + :options="discussion_types" + v-model="discussionForm.type" + /> <input v-if="discussionForm.type" type="hidden" name="type_id" :value="discussionForm.type.type_id"> - <SelectDiscussionType :options="discussion_types" v-model="discussionForm.type" /> - </label> - <label class="flex-1"> - <span class="sr-only">{{ $gettext('Schlagworte') }}</span> + </div> + <div class="flex-1"> + <label for="select-tags-input"> + <span class="sr-only">{{ $gettext('Schlagworte') }}</span> + </label> + <SelectTagsInput + id="select-tags-input" + :options="availableTags" + v-model="discussionForm.tags" + multiple + :taggable="true" + /> <input type="hidden" name="tags" :value="JSON.stringify(discussionForm.tags)"> - <SelectTagsInput :options="availableTags" v-model="discussionForm.tags" multiple :taggable="true" /> - </label> + </div> </section> <section class="mt-10" v-if="!discussion.discussion_id"> diff --git a/resources/vue/apps/forum/search/Index.vue b/resources/vue/apps/forum/search/Index.vue index bf077f4..7ae1b74 100644 --- a/resources/vue/apps/forum/search/Index.vue +++ b/resources/vue/apps/forum/search/Index.vue @@ -265,21 +265,46 @@ onMounted(async () => { <StudipIcon v-else shape="arr_1down" :size="20" /> </button> <div v-if="isFilterVisible" class="filter-controls"> - <label> - <span class="sr-only">{{ $gettext('Thema') }}</span> - <SelectTopicInput id="" :options="availableTopics" v-model="searchForm.topics" :required="false" multiple /> - </label> - <label> - <span class="sr-only">{{ $gettext('Diskussionstyp') }}</span> - <SelectDiscussionType :options="availableTypes" v-model="searchForm.types" multiple /> - </label> - <label> - <span class="sr-only">{{ $gettext('Schlagworte') }}</span> - <SelectTagsInput :options="availableTags" v-model="searchForm.tags" multiple /> - </label> - <label> - <span class="sr-only">{{ $gettext('Status der Diskussion') }}</span> + <div> + <label for="select-topic-input" class="sr-only"> + {{ $gettext('Thema') }} + </label> + <SelectTopicInput + id="select-topic-input" + :options="availableTopics" + v-model="searchForm.topics" + :required="false" + multiple + /> + </div> + <div> + <label for="select-discussion-type" class="sr-only"> + {{ $gettext('Diskussionstyp') }} + </label> + <SelectDiscussionType + id="select-discussion-type" + :options="availableTypes" + v-model="searchForm.types" + multiple + /> + </div> + <div> + <label for="select-tags-input" class="sr-only"> + {{ $gettext('Schlagworte') }} + </label> + <SelectTagsInput + id="select-tags-input" + :options="availableTags" + v-model="searchForm.tags" + multiple + /> + </div> + <div> + <label for="discussion-statuses-input" class="sr-only"> + {{ $gettext('Status der Diskussion') }} + </label> <StudipSelect + id="discussion-statuses-input" :options="discussionStatuses" :placeholder="$gettext('Status der Diskussion')" v-model="searchForm.status" @@ -290,19 +315,22 @@ onMounted(async () => { </div> </template> </StudipSelect> - </label> + </div> <div class="date-inputs-container"> <input type="date" v-model="searchForm.begin" :placeholder="$gettext('Von')" :aria-label="$gettext('Von')" autocomplete="off" /> <input type="date" v-model="searchForm.end" :placeholder="$gettext('Bis')" :aria-label="$gettext('Bis')" autocomplete="off" /> </div> - <label> - <span class="sr-only">{{ $gettext('Autor/-in') }}</span> + <div> + <label for="select-user-input" class="sr-only"> + {{ $gettext('Autor/-in') }} + </label> <SelectUserInput + id="select-user-input" :options="course_members" multiple v-model="searchForm.authors" /> - </label> + </div> </div> </div> </form> diff --git a/resources/vue/apps/forum/topics/Edit.vue b/resources/vue/apps/forum/topics/Edit.vue index 845e062..b0c2018 100644 --- a/resources/vue/apps/forum/topics/Edit.vue +++ b/resources/vue/apps/forum/topics/Edit.vue @@ -76,39 +76,39 @@ onMounted(() => { <input type="hidden" name="category" :value="JSON.stringify(topicForm.category)"> <label for="category_input"> {{ $gettext('Kategorie') }} - <StudipSelect - id="category_input" - label="name" - :options="categories" - v-model="topicForm.category" - :reduce="(category) => { - if(category.name) { - return category; - } - - return { name: category }; - }" - :taggable="true" - > - <template #selected-option="{name, color}"> - <div class="flex items-center"> - <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span> - <span class="line-clamp-1 flex-1">{{name}}</span> - </div> - </template> - <template #option="{name, color}"> - <div :style="{ display: 'flex', alignItems: 'center' }"> - <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span> - <span :style="{ flex: '1'}" class="line-clamp-1">{{name}}</span> - </div> - </template> - <template #no-options> - <div> - {{ $gettext('Es gibt keine Kategorie.') }} - </div> - </template> - </StudipSelect> </label> + <StudipSelect + id="category_input" + label="name" + :options="categories" + v-model="topicForm.category" + :reduce="(category) => { + if(category.name) { + return category; + } + + return { name: category }; + }" + :taggable="true" + > + <template #selected-option="{name, color}"> + <div class="flex items-center"> + <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span> + <span class="line-clamp-1 flex-1">{{name}}</span> + </div> + </template> + <template #option="{name, color}"> + <div :style="{ display: 'flex', alignItems: 'center' }"> + <span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}"></span> + <span :style="{ flex: '1'}" class="line-clamp-1">{{name}}</span> + </div> + </template> + <template #no-options> + <div> + {{ $gettext('Es gibt keine Kategorie.') }} + </div> + </template> + </StudipSelect> </section> </fieldset> <footer data-dialog-button> diff --git a/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue b/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue index cbf62f9..2051adc 100644 --- a/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareChartBlock.vue @@ -18,9 +18,12 @@ {{ $gettext('Beschriftung') }} <input type="text" v-model="currentLabel" /> </label> - <label class="col-3"> - {{ $gettext('Typ') }} - <studip-select + <div class="col-3"> + <label for="current-type"> + {{ $gettext('Typ') }} + </label> + <StudipSelect + id="current-type" v-model="currentType" :options="chartTypes" :reduce="chartTypes => chartTypes.value" @@ -36,8 +39,8 @@ <template #option="option"> <span>{{ option.name }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </div> </form> <button class="button add" @click="addItem">{{ $gettext('Datensatz hinzufügen') }}</button> <button class="button" @click="buildChart">{{ $gettext('Diagramm aktualisieren') }}</button> @@ -59,9 +62,12 @@ {{ $gettext('Wert') }} <input type="number" v-model="item.value" /> </label> - <label class="col-2"> - {{ $gettext('Farbe') }} - <studip-select + <div class="col-2"> + <label for="colors"> + {{ $gettext('Farbe') }} + </label> + <StudipSelect + id="colors" :options="colors" :reduce="colors => colors.value" label="name" @@ -80,8 +86,8 @@ <template #option="option"> <span class="vs__option-color" :style="{'background-color': 'rgb(' + option.rgb + ')'}"></span><span>{{ option.name }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </div> <label class="col-3"> {{ $gettext('Bezeichnung') }} <input type="text" v-model="item.label" /> diff --git a/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue b/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue index bfce0d4..f80d93a 100644 --- a/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareHeadlineBlock.vue @@ -93,42 +93,46 @@ {{ $gettext('2. Untertitel') }} <input type="text" v-model="currentSecondSubtitle" /> </label> - <label> + <label for="current-text-color"> {{ $gettext('Textfarbe') }} - <studip-select - :options="colors" - label="name" - :reduce="(color) => color.hex" - :clearable="false" - v-model="currentTextColor" - > - <template #open-indicator="{ selectAttributes }"> + </label> + <StudipSelect + id="current-text-color" + :options="colors" + label="name" + :reduce="(color) => color.hex" + :clearable="false" + v-model="currentTextColor" + > + <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" :size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }" ></span ><span>{{ option.name }}</span> - </template> - <template #option="option"> + </template> + <template #option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }" ></span ><span>{{ option.name }}</span> - </template> - </studip-select> - </label> - <label v-if="hasTextBackgroundColor"> - {{ $gettext('Texthintergrundfarbe') }} - <studip-select + </template> + </StudipSelect> + <template v-if="hasTextBackgroundColor"> + <label for="current-tex-background-color"> + {{ $gettext('Texthintergrundfarbe') }} + </label> + <StudipSelect + id="current-tex-background-color" :options="colors" label="name" :reduce="(color) => color.hex" @@ -136,51 +140,56 @@ v-model="currentTextBackgroundColor" > <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes" + <span v-bind="selectAttributes" ><studip-icon shape="arr_1down" :size="10" - /></span> + /></span> </template> <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} </template> <template #selected-option="option"> - <span - class="vs__option-color" - :style="{ 'background-color': option.hex }" - ></span - ><span>{{ option.name }}</span> + <span + class="vs__option-color" + :style="{ 'background-color': option.hex }" + ></span + ><span>{{ option.name }}</span> </template> <template #option="option"> - <span - class="vs__option-color" - :style="{ 'background-color': option.hex }" - ></span - ><span>{{ option.name }}</span> + <span + class="vs__option-color" + :style="{ 'background-color': option.hex }" + ></span + ><span>{{ option.name }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </template> <template v-if="hasIcon"> - <label> + <label for="current-icon"> {{ $gettext('Icon') }} - <studip-select :clearable="false" :options="icons" v-model="currentIcon"> - <template #open-indicator="{ selectAttributes }"> + </label> + <StudipSelect + id="current-icon" + :clearable="false" + :options="icons" + v-model="currentIcon" + > + <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" :size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> - <studip-icon :shape="option.label" /> - <span class="vs__option-with-icon">{{ option.label }}</span> - </template> - <template #option="option"> - <studip-icon :shape="option.label" /> - <span class="vs__option-with-icon">{{ option.label }}</span> - </template> - </studip-select> - </label> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> + <studip-icon :shape="option.label" /> + <span class="vs__option-with-icon">{{ option.label }}</span> + </template> + <template #option="option"> + <studip-icon :shape="option.label" /> + <span class="vs__option-with-icon">{{ option.label }}</span> + </template> + </StudipSelect> </template> </form> </courseware-tab> @@ -195,9 +204,12 @@ <option value="structural-element-image">{{ $gettext('Seiten-Bild') }}</option> </select> </label> - <label v-if="currentBackgroundType === 'color'"> - {{ $gettext('Hintergrundfarbe') }} - <studip-select + <template v-if="currentBackgroundType === 'color'"> + <label for="current-background-color"> + {{ $gettext('Hintergrundfarbe') }} + </label> + <StudipSelect + id="current-background-color" :options="colors" label="name" :reduce="(color) => color.hex" @@ -205,29 +217,29 @@ :clearable="false" > <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes" + <span v-bind="selectAttributes" ><studip-icon shape="arr_1down" :size="10" - /></span> + /></span> </template> <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} </template> <template #selected-option="option"> - <span - class="vs__option-color" - :style="{ 'background-color': option.hex }" - ></span - ><span>{{ option.name }}</span> + <span + class="vs__option-color" + :style="{ 'background-color': option.hex }" + ></span + ><span>{{ option.name }}</span> </template> <template #option="option"> - <span - class="vs__option-color" - :style="{ 'background-color': option.hex }" - ></span - ><span>{{ option.name }}</span> + <span + class="vs__option-color" + :style="{ 'background-color': option.hex }" + ></span + ><span>{{ option.name }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </template> <label v-if="currentBackgroundType === 'image'"> <div>{{ $gettext('Hintergrundbild') }}</div> diff --git a/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue b/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue index 4b55693..dd5d180 100644 --- a/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue @@ -97,9 +97,12 @@ :icon="shape.title === '' ? 'link-extern' : ''" :selected="index === 0" > - <label class="col-2"> - {{ $gettext('Farbe') }} - <studip-select + <div class="col-2"> + <label for="shape-color"> + {{ $gettext('Farbe') }} + </label> + <StudipSelect + id="shape-color" :options="colors" label="name" :reduce="(color) => color.class" @@ -123,11 +126,14 @@ <span class="vs__option-color" :style="{ 'background-color': option.rgba }"></span ><span>{{ option.name }}</span> </template> - </studip-select> - </label> - <label class="col-2"> - {{ $gettext('Textfarbe') }} - <studip-select + </StudipSelect> + </div> + <div class="col-2"> + <label for="shape-text-color"> + {{ $gettext('Textfarbe') }} + </label> + <StudipSelect + id="shape-text-color" :options="colors" label="name" :reduce="(color) => color.class" @@ -151,8 +157,8 @@ <span class="vs__option-color" :style="{ 'background-color': rgba }"></span ><span>{{ name }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </div> <br /> <template v-if="shape.type === 'arc'"> <label class="col-1"> diff --git a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue index 1c0e9ce..736ba32 100644 --- a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue @@ -30,9 +30,12 @@ /> </label> <br /> - <label class="col-2"> - {{ $gettext('Farbe') }} - <studip-select + <div class="col-2"> + <label for="current-color"> + {{ $gettext('Farbe') }} + </label> + <StudipSelect + id="current-color" :options="colors" label="name" :clearable="false" @@ -53,11 +56,17 @@ <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> </template> - </studip-select> - </label> - <label class="col-2"> - {{ $gettext('Icon') }} - <studip-select :options="icons" :clearable="false" v-model="currentIcon"> + </StudipSelect> + </div> + <div class="col-2"> + <label for="current-icon"> + {{ $gettext('Icon') }} + </label> + <StudipSelect + id="current-icon" + :options="icons" + :clearable="false" + v-model="currentIcon"> <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> </template> @@ -72,8 +81,8 @@ <studip-icon :shape="option.label" /> <span class="vs__option-with-icon">{{ option.label }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </div> </form> </template> <template #info> diff --git a/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue index 0659604..6b8e880 100644 --- a/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareTestBlock.vue @@ -66,33 +66,34 @@ </template> <template v-if="canEdit" #edit> <form class="default" @submit.prevent=""> - <label> + <label for="assignments"> {{ $gettext('Aufgabenblatt') }} - <studip-select - :options="assignments" - label="title" - :reduce="assignment => assignment.id" - :clearable="false" - v-model="assignment_id" - class="cw-vs-select" - > - <template #open-indicator="{ attributes }"> - <span v-bind="attributes"><studip-icon shape="arr_1down" :size="10"/></span> - </template> - <template #no-options="{}"> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="{title, icon, start, end}"> - <studip-icon :shape="icon" role="info"/> - {{title}} ({{start}} - {{end}}) - </template> - <template #option="{title, icon, start, end, block}"> - <studip-icon :shape="icon" role="info"/> - {{ block ? block + ' / ' + title : title }}<br> - <small>{{start}} - {{end}}</small> - </template> - </studip-select> </label> + <StudipSelect + id="assignments" + :options="assignments" + label="title" + :reduce="assignment => assignment.id" + :clearable="false" + v-model="assignment_id" + class="cw-vs-select" + > + <template #open-indicator="{ attributes }"> + <span v-bind="attributes"><studip-icon shape="arr_1down" :size="10"/></span> + </template> + <template #no-options="{}"> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="{title, icon, start, end}"> + <studip-icon :shape="icon" role="info"/> + {{title}} ({{start}} - {{end}}) + </template> + <template #option="{title, icon, start, end, block}"> + <studip-icon :shape="icon" role="info"/> + {{ block ? block + ' / ' + title : title }}<br> + <small>{{start}} - {{end}}</small> + </template> + </StudipSelect> </form> </template> </courseware-default-block> diff --git a/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue b/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue index 8b5e64d..7e884fe 100644 --- a/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareTimelineBlock.vue @@ -79,9 +79,12 @@ <textarea v-model="item.description" /> </label> <br> - <label class="col-2"> - {{ $gettext('Farbe') }} - <studip-select + <div class="col-2"> + <label for="item-color"> + {{ $gettext('Farbe') }} + </label> + <StudipSelect + id="item-color" :options="colors" label="name" :clearable="false" @@ -100,11 +103,18 @@ <template #option="option"> <span class="vs__option-color" :style="{'background-color': option.hex}"></span><span>{{ option.name }}</span> </template> - </studip-select> - </label> - <label class="col-2"> - {{ $gettext('Icon') }} - <studip-select :options="icons" :clearable="false" v-model="item.icon"> + </StudipSelect> + </div> + <div class="col-2"> + <label for="item-icon"> + {{ $gettext('Icon') }} + </label> + <StudipSelect + id="item-icon" + :options="icons" + :clearable="false" + v-model="item.icon" + > <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10"/></span> </template> @@ -117,8 +127,8 @@ <template #option="option"> <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> </template> - </studip-select> - </label> + </StudipSelect> + </div> <br> <label class="col-1"> {{ $gettext('Datum') }} diff --git a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue index a5af503..6f1ee0d 100644 --- a/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue +++ b/resources/vue/components/courseware/containers/CoursewareAccordionContainer.vue @@ -108,23 +108,27 @@ {{ $gettext('Titel')}} <input type="text" v-model="section.name" /> </label> - <label> + <label for="section-icon"> {{ $gettext('Symbol')}} - <studip-select :options="icons" v-model="section.icon"> - <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.')}} - </template> - <template #selected-option="option"> - <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> - </template> - <template #option="option"> - <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> - </template> - </studip-select> </label> + <StudipSelect + id="section-icon" + :options="icons" + v-model="section.icon" + > + <template #open-indicator="{ selectAttributes }"> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.')}} + </template> + <template #selected-option="option"> + <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> + </template> + <template #option="option"> + <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> + </template> + </StudipSelect> <label class="cw-container-section-delete" v-if="currentContainer.attributes.payload.sections.length > 1" diff --git a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue index e74d3ae..b86e610 100644 --- a/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue +++ b/resources/vue/components/courseware/containers/CoursewareTabsContainer.vue @@ -104,23 +104,27 @@ {{ $gettext('Titel') }} <input type="text" v-model="section.name" /> </label> - <label> + <label for="section-icon"> {{ $gettext('Symbol') }} - <studip-select :options="icons" v-model="section.icon"> - <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> - <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> - </template> - <template #option="option"> - <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> - </template> - </studip-select> </label> + <StudipSelect + id="section-icon" + :options="icons" + v-model="section.icon" + > + <template #open-indicator="{ selectAttributes }"> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10"/></span> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> + <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> + </template> + <template #option="option"> + <studip-icon :shape="option.label"/> <span class="vs__option-with-icon">{{option.label}}</span> + </template> + </StudipSelect> <label class="cw-container-section-delete" v-if="currentContainer.attributes.payload.sections.length > 1" diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue index 235fa52..1c3a6fb 100644 --- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue +++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogAdd.vue @@ -80,25 +80,33 @@ class="cw-companion-box-in-form" /> </label> - <label> + <label for="color"> {{ $gettext('Farbe') }} - <studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="name" name="color" :clearable="false"> - <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span> - <span>{{ option.name }}</span> - </template> - <template #option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span> - <span>{{ option.name }}</span> - </template> - </studip-select> </label> + <StudipSelect + id="color" + v-model="color" + :options="colors" + :reduce="(color) => color.class" + label="name" + name="color" + :clearable="false" + > + <template #open-indicator="{ selectAttributes }"> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span> + <span>{{ option.name }}</span> + </template> + <template #option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span> + <span>{{ option.name }}</span> + </template> + </StudipSelect> </form> </template> <template v-slot:advanced> diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue index 9652bfb..a3669b4 100644 --- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue +++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogCopy.vue @@ -63,9 +63,12 @@ </option> </select> </label> - <label> - <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span> - <studip-select + <div> + <label for="selected-range"> + <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span> + </label> + <StudipSelect + id="selected-range" v-if="filteredCourses.length !== 0 && !loadingCourses" :options="filteredCourses" :clearable="false" @@ -75,17 +78,17 @@ > <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" :size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> </template> - </studip-select> + </StudipSelect> <p v-if="loadingCourses"> {{$gettext('Lade Veranstaltungen…')}} </p> <p v-if="filteredCourses.length === 0 && !loadingCourses"> {{$gettext('Es wurden keine geeigneten Veranstaltungen gefunden.')}} </p> - </label> + </div> </template> </form> @@ -138,33 +141,34 @@ {{$gettext('Titel')}} <input type="text" v-model="modifiedTitle" name="title" required /> </label> - <label> + <label for="modified-color"> {{$gettext('Farbe')}} - <studip-select - v-model="modifiedColor" - :options="colors" - :reduce="(color) => color.class" - :clearable="false" - label="name" - > - <template #open-indicator="{ selectAttributes }"> + </label> + <StudipSelect + id="modified-color" + v-model="modifiedColor" + :options="colors" + :reduce="(color) => color.class" + :clearable="false" + label="name" + > + <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" :size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - <template #option="option"> + </template> + <template #option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - </studip-select> - </label> + </template> + </StudipSelect> <label> {{$gettext('Beschreibung')}} <textarea v-model="modifiedDescription" required /> diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue index fa81530..e15268d 100644 --- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue +++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElementDialogSettings.vue @@ -30,32 +30,33 @@ </courseware-tab> <courseware-tab :name="$gettext('Metadaten')" :index="1"> <form class="default" @submit.prevent=""> - <label> + <label for="current-payload-color"> {{ $gettext('Farbe') }} - <studip-select - v-model="currentElement.attributes.payload.color" - :options="colors" - :reduce="(color) => color.class" - label="name" - class="cw-vs-select" - :clearable="false" - > - <template #open-indicator="selectAttributes"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. - </template> - <template #selected-option="option"> + </label> + <StudipSelect + id="current-payload-color" + v-model="currentElement.attributes.payload.color" + :options="colors" + :reduce="(color) => color.class" + label="name" + class="cw-vs-select" + :clearable="false" + > + <template #open-indicator="selectAttributes"> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. + </template> + <template #selected-option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - <template #option="option"> + </template> + <template #option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - </studip-select> - </label> + </template> + </StudipSelect> <label v-if="!isTask"> {{ $gettext('Art des Lernmaterials') }} <select v-model="currentElement.attributes.purpose"> diff --git a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue index 30531aa..c964fe8 100644 --- a/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue +++ b/resources/vue/components/courseware/toolbar/CoursewareToolbarBlocks.vue @@ -34,7 +34,8 @@ </form> <form class="default"> <span class="sr-only">{{ $gettext('Kategorien-Filter') }}</span> - <studip-select + <StudipSelect + id="current-filter-category" :clearable="true" label="title" :options="blockCategories" @@ -50,7 +51,7 @@ </template> <template #selected-option="{ title }"><span>{{ title }}</span></template> <template #option="{ title }"><span>{{ title }}</span></template> - </studip-select> + </StudipSelect> </form> </div> <div class="cw-toolbar-tool-content" :style="toolContentStyle"> diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue index 36d4c56..4305766 100644 --- a/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue +++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogAdd.vue @@ -50,33 +50,34 @@ </button> <StockImageSelector v-if="showStockImageSelector" @close="showStockImageSelector = false" @select="onSelectStockImage" /> </label> - <label> + <label for="color"> {{ $gettext('Farbe') }} - <studip-select - v-model="addWizardData.color" - :options="colors" - :reduce="(color) => color.class" - label="name" - :clearable="false" - > - <template #open-indicator="selectAttributes"> - <span v-bind="{ selectAttributes }" - ><studip-icon shape="arr_1down" :size="10" - /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span - ><span>{{ option.name }}</span> - </template> - <template #option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span - ><span>{{ option.name }}</span> - </template> - </studip-select> </label> + <StudipSelect + id="color" + v-model="addWizardData.color" + :options="colors" + :reduce="(color) => color.class" + label="name" + :clearable="false" + > + <template #open-indicator="selectAttributes"> + <span v-bind="{ selectAttributes }" + ><studip-icon shape="arr_1down" :size="10" + /></span> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span + ><span>{{ option.name }}</span> + </template> + <template #option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span + ><span>{{ option.name }}</span> + </template> + </StudipSelect> <label> <span>{{ $gettext('Titelseite') }}</span> <select v-model="addWizardData.rootLayout" name="layout"> diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue index 0d17cc1..07c1083 100644 --- a/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue +++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogCopy.vue @@ -64,9 +64,12 @@ </option> </select> </label> - <label> - <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span> - <studip-select + <div> + <label for="selected-range"> + <span>{{ $gettext('Veranstaltung') }}</span><span aria-hidden="true" class="wizard-required">*</span> + </label> + <StudipSelect + id="selected-range" v-if="filteredCourses.length !== 0 && !loadingCourses" :options="filteredCourses" :clearable="false" @@ -79,14 +82,14 @@ ><studip-icon shape="arr_1down" :size="10" /></span> </template> - </studip-select> + </StudipSelect> <p v-if="loadingCourses"> {{$gettext('Lade Veranstaltungen…')}} </p> <p v-if="filteredCourses.length === 0 && !loadingCourses"> {{$gettext('Es wurden keine geeigneten Veranstaltungen gefunden.')}} </p> - </label> + </div> </template> </form> @@ -124,33 +127,34 @@ {{$gettext('Titel')}} <input type="text" v-model="modifiedTitle" :placeholder="selectedUnitTitle" name="title" /> </label> - <label> + <label for="modified-color"> {{$gettext('Farbe')}} - <studip-select - v-model="modifiedColor" - :options="colors" - :reduce="(color) => color.class" - :clearable="false" - label="name" - > - <template #open-indicator="{ selectAttributes }"> + </label> + <StudipSelect + id="modified-color" + v-model="modifiedColor" + :options="colors" + :reduce="(color) => color.class" + :clearable="false" + label="name" + > + <template #open-indicator="{ selectAttributes }"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" :size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - <template #option="option"> + </template> + <template #option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - </studip-select> - </label> + </template> + </StudipSelect> <label> {{$gettext('Beschreibung')}} <textarea v-model="modifiedDescription" :placeholder="selectedUnitDescription" /> diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue index 841360c..7c2c267 100644 --- a/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue +++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogImport.vue @@ -34,33 +34,34 @@ {{ text.title }} <input type="text" v-model="modifiedData.title" :placeholder="loadedTitle" /> </label> - <label> + <label for="color"> {{ text.color }} - <studip-select - v-model="modifiedData.color" - :options="colors" - :reduce="(color) => color.class" - :clearable="false" - label="name" - > - <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" :size="10" - /></span> - </template> - <template #no-options> - {{$gettext('Es steht keine Auswahl zur Verfügung.')}} - </template> - <template #selected-option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span - ><span>{{ option.name }}</span> - </template> - <template #option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span - ><span>{{ option.name }}</span> - </template> - </studip-select> </label> + <StudipSelect + id="color" + v-model="modifiedData.color" + :options="colors" + :reduce="(color) => color.class" + :clearable="false" + label="name" + > + <template #open-indicator="{ selectAttributes }"> + <span v-bind="selectAttributes" + ><studip-icon shape="arr_1down" :size="10" + /></span> + </template> + <template #no-options> + {{$gettext('Es steht keine Auswahl zur Verfügung.')}} + </template> + <template #selected-option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span + ><span>{{ option.name }}</span> + </template> + <template #option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span + ><span>{{ option.name }}</span> + </template> + </StudipSelect> <label> {{ text.description }} <textarea v-model="modifiedData.description" :placeholder="loadedDescription" /> diff --git a/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue b/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue index e105c31..1f24005 100644 --- a/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue +++ b/resources/vue/components/courseware/unit/CoursewareShelfDialogTopics.vue @@ -62,25 +62,32 @@ @select="onSelectStockImage" /> </label> - <label> + <label for="color"> {{ $gettext('Farbe') }} - <studip-select v-model="color" :options="colors" :reduce="(color) => color.class" label="name" :clearable="false"> - <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> - {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} - </template> - <template #selected-option="option"> - <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span> - <span>{{ name }}</span> - </template> - <template #option="option"> + </label> + <StudipSelect + id="color" + v-model="color" + :options="colors" + :reduce="(color) => color.class" + label="name" + :clearable="false" + > + <template #open-indicator="{ selectAttributes }"> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> + </template> + <template #no-options> + {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} + </template> + <template #selected-option="option"> + <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span> + <span>{{ name }}</span> + </template> + <template #option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - </studip-select> - </label> + </template> + </StudipSelect> </courseware-collapsible-box> </form> </template> diff --git a/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue b/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue index 14a9195..e6169e4 100644 --- a/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue +++ b/resources/vue/components/courseware/unit/CoursewareUnitItemDialogLayout.vue @@ -66,30 +66,31 @@ class="cw-structural-element-description" /> </label> - <label> + <label for="payload-color"> {{ $gettext('Farbe') }} - <studip-select - v-model="currentElement.attributes.payload.color" - :options="colors" - :reduce="(color) => color.class" - label="name" - class="cw-vs-select" - :clearable="false" - > - <template #open-indicator="{ selectAttributes }"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> - </template> - <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. </template> - <template #selected-option="option"> + </label> + <StudipSelect + id="payload-color" + v-model="currentElement.attributes.payload.color" + :options="colors" + :reduce="(color) => color.class" + label="name" + class="cw-vs-select" + :clearable="false" + > + <template #open-indicator="{ selectAttributes }"> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> + </template> + <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }}. </template> + <template #selected-option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - <template #option="option"> + </template> + <template #option="option"> <span class="vs__option-color" :style="{ 'background-color': option.hex }"></span ><span>{{ option.name }}</span> - </template> - </studip-select> - </label> + </template> + </StudipSelect> <label> {{ $gettext('Titelseite') }} <select v-model="currentRootLayout"> diff --git a/resources/vue/components/file-chooser/FileChooserToolbar.vue b/resources/vue/components/file-chooser/FileChooserToolbar.vue index ff98463..1331347 100644 --- a/resources/vue/components/file-chooser/FileChooserToolbar.vue +++ b/resources/vue/components/file-chooser/FileChooserToolbar.vue @@ -35,9 +35,12 @@ @click="$refs.fileInput.click()" /> </label> - <label class="file-chooser-license"> - {{ $gettext('Lizenzauswahl') }} - <studip-select + <div class="file-chooser-license"> + <label for="upload-file-license"> + {{ $gettext('Lizenzauswahl') }} + </label> + <StudipSelect + id="upload-file-license" :options="termsOfUse" label="name" :reduce="(termsOfUse) => termsOfUse.id" @@ -58,8 +61,8 @@ <studip-icon :shape="option.attributes.icon" /> <span>{{ option.attributes.name }}</span> </template> - </studip-select> - </label> + </StudipSelect> + </div> <div class="inline-button-group"> <button :title="$gettext('Datei hochladen')" @click="createFile"><studip-icon shape="accept" /></button> diff --git a/resources/vue/components/forum/SelectTagsInput.vue b/resources/vue/components/forum/SelectTagsInput.vue index 2582852..6875289 100644 --- a/resources/vue/components/forum/SelectTagsInput.vue +++ b/resources/vue/components/forum/SelectTagsInput.vue @@ -6,12 +6,10 @@ import StudipIcon from "@/vue/components/StudipIcon.vue"; <template> <StudipSelect - v-bind="$attrs" - class="multi-select-input" :placeholder="$gettext('Schlagworte')" label="name" :clearable="true" - :reduce="(tag) => { + :reduce="tag => { if(tag.name) { return tag; } @@ -19,6 +17,7 @@ import StudipIcon from "@/vue/components/StudipIcon.vue"; return { name: tag }; }" :closeOnSelect="false" + v-bind="{...$props, ...$attrs}" > <template #open-indicator> <StudipIcon shape="add" :size="15" /> diff --git a/resources/vue/components/forum/SelectUserInput.vue b/resources/vue/components/forum/SelectUserInput.vue index 68bd283..16b272c 100644 --- a/resources/vue/components/forum/SelectUserInput.vue +++ b/resources/vue/components/forum/SelectUserInput.vue @@ -7,6 +7,7 @@ import StudipSelect from "..//StudipSelect.vue"; <StudipSelect label="name" :placeholder="$gettext('Autor/-in')" + v-bind="{...$props, ...$attrs}" > <template #selected-option="{name, avatar_url}"> <div class="flex items-center"> diff --git a/resources/vue/components/forum/discussions/SelectDiscussionType.vue b/resources/vue/components/forum/discussions/SelectDiscussionType.vue index c6e71d4..e8b1595 100644 --- a/resources/vue/components/forum/discussions/SelectDiscussionType.vue +++ b/resources/vue/components/forum/discussions/SelectDiscussionType.vue @@ -6,10 +6,9 @@ import StudipSelect from "@/vue/components/StudipSelect.vue"; <template> <StudipSelect - v-bind="$attrs" - class="multi-select-input" :placeholder="$gettext('Diskussionstyp (Optional)')" label="name" + v-bind="{...$props, ...$attrs}" > <template #open-indicator> <StudipIcon shape="arr_1sort" :size="15"/> diff --git a/resources/vue/components/forum/topics/SelectTopicInput.vue b/resources/vue/components/forum/topics/SelectTopicInput.vue index 0b4d0c1..55f56d3 100644 --- a/resources/vue/components/forum/topics/SelectTopicInput.vue +++ b/resources/vue/components/forum/topics/SelectTopicInput.vue @@ -7,18 +7,17 @@ const selectedTopics = defineModel(); <template> <StudipSelect - v-bind="$attrs" - class="multi-select-input" :placeholder="$gettext('Thema')" label="name" v-model="selectedTopics" - :reduce="(topic) => { + :reduce="topic => { if(topic.name) { return topic; } return { name: topic }; }" + v-bind="{...$props, ...$attrs}" > <template #search="{attributes, events}"> <input diff --git a/resources/vue/components/stock-images/ColorFilterWidget.vue b/resources/vue/components/stock-images/ColorFilterWidget.vue index d9546fe..59be388 100644 --- a/resources/vue/components/stock-images/ColorFilterWidget.vue +++ b/resources/vue/components/stock-images/ColorFilterWidget.vue @@ -1,7 +1,13 @@ <template> <SidebarWidget :title="$gettext('Farbe')"> <template #content> - <studip-select multiple v-model="selectedColors" :options="selectableColors" @input="onVueSelectInput" label="name"> + <StudipSelect + multiple + v-model="selectedColors" + :options="selectableColors" + @input="onVueSelectInput" + label="name" + > <template #open-indicator> <span><studip-icon shape="arr_1down" :size="10" /></span> </template> @@ -16,7 +22,7 @@ </template> <template #no-options>{{ $gettext('Keine Auswahlmöglichkeiten') }}</template> - </studip-select> + </StudipSelect> </template> </SidebarWidget> </template> diff --git a/resources/vue/components/stock-images/SelectorSearch.vue b/resources/vue/components/stock-images/SelectorSearch.vue index 4820474..6edfe5a 100644 --- a/resources/vue/components/stock-images/SelectorSearch.vue +++ b/resources/vue/components/stock-images/SelectorSearch.vue @@ -37,7 +37,7 @@ <div> <div>{{ $gettext('Farbfilter') }}</div> - <studip-select + <StudipSelect multiple v-model="selectedColors" :options="selectableColors" @@ -55,7 +55,7 @@ <template #selected-option-container>{{ ' ' }}</template> <template #no-options>{{ $gettext('Keine Auswahlmöglichkeiten') }}</template> - </studip-select> + </StudipSelect> </div> </div> </SearchWithFilter> |