ami/tl-vikunja
1
0
Fork 0
Code

fix(labels): remove input interactivity when label edit is disabled

Browse Source 
(cherry picked from commit bdccd633fe7a3418aaedc5d6ea9df57a0c51b62e)
This commit is contained in:
kolaente 2024-09-12 13:38:49 +02:00
parent 1df4a4ea2e
commit 02ab944020
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/input/Multiselect.vue
View File

@ -2,8 +2,9 @@
<div <div
ref="multiselectRoot" ref="multiselectRoot"
class="multiselect" class="multiselect"
:class="{'has-search-results': searchResultsVisible}" :class="{'has-search-results': searchResultsVisible, 'is-disabled': disabled}"
tabindex="-1" tabindex="-1"
:aria-disabled="disabled"
@focus="focus" @focus="focus"
> >
<div <div
@ -12,7 +13,7 @@
> >
<div <div
class="input-wrapper input" class="input-wrapper input"
:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable}" :class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable && !disabled}"
> >
<slot <slot
v-if="Array.isArray(internalValue)" v-if="Array.isArray(internalValue)"
@ -31,6 +32,7 @@
> >
{{ label !== '' ? item[label] : item }} {{ label !== '' ? item[label] : item }}
<BaseButton <BaseButton
v-if="!disabled"
class="delete is-small" class="delete is-small"
@click="() => remove(item)" @click="() => remove(item)"
/> />
@ -40,6 +42,7 @@
</slot> </slot>
<input <input
v-if="!disabled"
:id="id" :id="id"
ref="searchInput" ref="searchInput"
v-model="query" v-model="query"
@ -55,7 +58,7 @@
@focus="handleFocus" @focus="handleFocus"
> >
<BaseButton <BaseButton
v-if="removalAvailable" v-if="removalAvailable && !disabled"
class="removal-button" class="removal-button"
@click="resetSelectedValue" @click="resetSelectedValue"
> >
@ -164,6 +167,8 @@ const props = withDefaults(defineProps<{
closeAfterSelect?: boolean closeAfterSelect?: boolean
/** If false, the search input will get the autocomplete="off" attributes attached to it. */ /** If false, the search input will get the autocomplete="off" attributes attached to it. */
autocompleteEnabled?: boolean autocompleteEnabled?: boolean
/** If true, disables the multiselect input */
disabled?: boolean
}>(), { }>(), {
modelValue: null, modelValue: null,
loading: false, loading: false,
@ -179,6 +184,7 @@ const props = withDefaults(defineProps<{
searchDelay: 200, searchDelay: 200,
closeAfterSelect: true, closeAfterSelect: true,
autocompleteEnabled: true, autocompleteEnabled: true,
disabled: false,
}) })
const emit = defineEmits<{ const emit = defineEmits<{
@ -448,6 +454,18 @@ function focus() {
.control.is-loading::after { .control.is-loading::after {
top: .75rem; top: .75rem;
} }
&.is-disabled {
.input-wrapper, .input, & {
cursor: default !important;
&:focus-within,&:focus-visible, &:hover, &:focus {
border-color: transparent !important;
background: transparent !important;
box-shadow: none;
}
}
}
} }
.input-wrapper { .input-wrapper {

2
frontend/src/components/tasks/partials/EditLabels.vue
View File

@ -10,6 +10,7 @@
:create-placeholder="$t('task.label.createPlaceholder')" :create-placeholder="$t('task.label.createPlaceholder')"
:search-delay="10" :search-delay="10"
:close-after-select="false" :close-after-select="false"
:disabled="disabled"
@search="findLabel" @search="findLabel"
@select="addLabel" @select="addLabel"
@create="createAndAddLabel" @create="createAndAddLabel"
@ -21,6 +22,7 @@
> >
<span>{{ label.title }}</span> <span>{{ label.title }}</span>
<BaseButton <BaseButton
v-if="!disabled"
v-cy="'taskDetail.removeLabel'" v-cy="'taskDetail.removeLabel'"
class="delete is-small" class="delete is-small"
@click="removeLabel(label)" @click="removeLabel(label)"