diff options
Diffstat (limited to 'resources/vue/components')
24 files changed, 447 insertions, 360 deletions
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> |