Skip to content

feat: Move to contenteditable for inline title editing #5282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusknorr merged 1 commit into from
Nov 14, 2023
Merged

feat: Move to contenteditable for inline title editing #5282

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat: Move to contenteditable for inline title editing 
fix #2563
fix #4522

Signed-off-by: Julius Härtl <[email protected]>
  • Loading branch information
@juliusknorr
juliusknorr committed Nov 13, 2023
commit a6b561acb7aacf9a64ed72de765ac319789f292c
87 changes: 34 additions & 53 deletions src/components/cards/CardItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

<template>
<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing, 'card__editable': canEdit, 'card__archived': card.archived }"
<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'card__editable': canEdit, 'card__archived': card.archived }"
tag="div"
class="card"
@click="openCard">
Expand All @@ -39,29 +39,19 @@
<h3 v-if="inlineEditingBlocked" dir="auto">
{{ card.title }}
</h3>
<h3 v-else-if="!editing"
<h3 v-else
dir="auto"
tabindex="0"
class="editable"
:aria-label="t('deck', 'Edit card title')"
@keydown.enter.stop.prevent="startEditing(card)">
<span @click.stop="startEditing(card)">{{ card.title }}</span>
:aria-label="t('deck', 'Edit card title')">
<span ref="titleContentEditable"
tabindex="0"
contenteditable="true"
role="textbox"
@blur="blurTitle"
@click.stop
@keyup.esc="cancelEdit"
@keyup.stop>{{ card.title }}</span>
</h3>
<form v-else-if="editing"
v-click-outside="cancelEdit"
class="dragDisabled"
@click.stop
@keyup.esc="cancelEdit"
@submit.prevent="finishedEdit(card)">
<input v-model="copiedCard.title"
v-focus
dir="auto"
type="text"
autocomplete="off"
required
pattern=".*\S+.*">
<input type="submit" value="" class="icon-confirm">
</form>

<CardMenu v-if="showMenuAtTitle" :card="card" class="right card-menu" />
</div>
Expand Down Expand Up @@ -126,12 +116,6 @@ export default {
default: false,
},
},
data() {
return {
editing: false,
copiedCard: null,
}
},
computed: {
...mapState({
compactMode: state => state.compactMode,
Expand Down Expand Up @@ -183,9 +167,6 @@ export default {
return this.$store.getters.config('cardIdBadge')
},
showMenuAtTitle() {
if (this.editing) {
return false
}
return this.compactMode || (!this.compactMode && !this.hasBadges && !this.hasLabels)
},
showMenuAtLabels() {
Expand All @@ -207,6 +188,12 @@ export default {
this.$nextTick(() => this.$el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }))
}
},
'card.title'(value) {
if (document.activeElement === this.$refs.titleContentEditable || this.$refs.titleContentEditable.textContent === value) {
return
}
this.$refs.titleContentEditable.textContent = value
},
},
methods: {
openCard() {
Expand All @@ -216,18 +203,17 @@ export default {
const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
},
startEditing(card) {
this.copiedCard = Object.assign({}, card)
this.editing = true
},
finishedEdit(card) {
if (this.copiedCard.title !== card.title) {
this.$store.dispatch('updateCardTitle', this.copiedCard)
blurTitle(e) {
// TODO Handle empty title
if (e.target.innerText !== this.card.title) {
this.$store.dispatch('updateCardTitle', {
...this.card,
title: e.target.innerText,
})
}
this.editing = false
},
cancelEdit() {
this.editing = false
this.$refs.titleContentEditable.textContent = this.card.title
},
applyLabelFilter(label) {
if (this.dragging) {
Expand Down Expand Up @@ -272,22 +258,13 @@ export default {
border: 2px solid var(--color-primary-element);
}

&:focus, &:focus-visible, &:focus-within, &:hover {
&:focus, &:focus-visible, &:focus-within {
outline: none;
border: 2px solid var(--color-primary-element);
}

.card-upper {
display: flex;
form {
display: flex;
padding: 3px 5px;
width: 100%;
input[type=text] {
flex-grow: 1;
}

}
h3 {
margin: 0;
padding: 6px;
Expand All @@ -300,17 +277,21 @@ export default {
&.editable {
span {
cursor: text;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 3px;

&:focus, &:focus-visible {
outline: none;
}
}

&:focus {
&:focus-within {
outline: 2px solid var(--color-border-dark);
border-radius: 3px;
}
}
}
input[type=text] {
font-size: 100%;
}
.card-menu {
height: 44px;
align-self: end;
Expand Down