ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Improvements to Card Heading Editing (#1255)

Browse Source 
Improvements to Card Heading Editing
This commit is contained in:
Julius Härtl
2019-10-22 12:10:50 +02:00
committed by GitHub
parent 97864ac1ff 067ec5e057
commit 7390acae26
1 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/cards/CardItem.vue
View File

@@ -1,8 +1,12 @@
<!--
- @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-
- @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @author Gary Kim <gary@garykim.dev>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
@@ -25,22 +29,22 @@
@click.self="openCard">
<div class="card-upper">
<h3 v-if="showArchived">{{ card.title }}</h3>
<h3 v-else @click.stop="startEditing(card)">{{ card.title }}</h3>
<transition name="fade" mode="out-in">
<form v-if="editing">
<input v-model="copiedCard.title" type="text" autofocus>
<input type="button" class="icon-confirm" @click="finishedEdit(card)">
</form>
<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
<h3 v-else>&nbsp;</h3>
<form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit"
@submit.prevent="finishedEdit(card)">
<input v-model="copiedCard.title" type="text" autofocus>
<input type="button" class="icon-confirm" @click="finishedEdit(card)">
</form>
<Actions @click.stop.prevent>
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
</Actions>
<Actions v-if="!editing" @click.stop.prevent>
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
</Actions>
</transition>
<modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
<div class="modal__content">
<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
@@ -54,7 +58,6 @@
</div>
</modal>
</div>
<ul class="labels" @click="openCard">
<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
@@ -157,6 +160,9 @@ export default {
}
this.editing = false
},
cancelEdit() {
this.editing = false
},
deleteCard() {
this.$store.dispatch('deleteCard', this.card)
},
@@ -216,7 +222,7 @@ export default {
display: flex;
padding: 5px 7px;
position: absolute;
width: calc(100% - 14px);
width: 100%;
input[type=text] {
flex-grow: 1;
}
@@ -227,6 +233,8 @@ export default {
flex-grow: 1;
font-size: 100%;
cursor: text;
overflow-x: hidden;
word-wrap: break-word;
}
}