From b50e295e2752e501d6cba62a351214b3e4979051 Mon Sep 17 00:00:00 2001
From: Gary Kim <gary@garykim.dev>
Date: Tue, 17 Sep 2019 18:36:26 +0800
Subject: [PATCH 1/5] Cancel Card Heading Edit on Click Outside

Clicking away while editing a card name
will now cancel the edit.

Signed-off-by: Gary Kim <gary@garykim.dev>
---
 src/components/cards/CardItem.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index fc0000950..1dddbcd39 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -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
@@ -27,7 +31,7 @@
 			<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">
+				<form v-if="editing" v-click-outside="cancelEdit">
 					<input v-model="copiedCard.title" type="text" autofocus>
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>
@@ -157,6 +161,9 @@ export default {
 			}
 			this.editing = false
 		},
+		cancelEdit() {
+			this.editing = false
+		},
 		deleteCard() {
 			this.$store.dispatch('deleteCard', this.card)
 		},

From c2b8408cd2c9e74f5605ea6f25ab72280d4d8d16 Mon Sep 17 00:00:00 2001
From: Gary Kim <gary@garykim.dev>
Date: Tue, 17 Sep 2019 19:02:27 +0800
Subject: [PATCH 2/5] Update Card Name on Form Submit

When editing a card's heading, pressing
"enter" or otherwise submitting the form
will save your edits.

Signed-off-by: Gary Kim <gary@garykim.dev>
---
 src/components/cards/CardItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 1dddbcd39..dac456d9f 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -31,7 +31,7 @@
 			<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" v-click-outside="cancelEdit">
+				<form v-if="editing" v-click-outside="cancelEdit" @submit.prevent="finishedEdit(card)">
 					<input v-model="copiedCard.title" type="text" autofocus>
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>

From 1d4fe311551f40bbce59c0d236204575119eb088 Mon Sep 17 00:00:00 2001
From: Gary Kim <gary@garykim.dev>
Date: Tue, 17 Sep 2019 19:19:08 +0800
Subject: [PATCH 3/5] Cancel editing card header when escape is pressed

Signed-off-by: Gary Kim <gary@garykim.dev>
---
 src/components/cards/CardItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index dac456d9f..a67ba1754 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -31,7 +31,7 @@
 			<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" v-click-outside="cancelEdit" @submit.prevent="finishedEdit(card)">
+				<form v-if="editing" v-click-outside="cancelEdit" @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>

From fd406a0adb43974bedf709275c701f8a935ca0de Mon Sep 17 00:00:00 2001
From: Gary Kim <gary@garykim.dev>
Date: Tue, 17 Sep 2019 19:20:01 +0800
Subject: [PATCH 4/5] Prevent wrapping text being visible while editing card
 header

Also: address errors thrown by linter

Signed-off-by: Gary Kim <gary@garykim.dev>
---
 src/components/cards/CardItem.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index a67ba1754..70a85a0ce 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -29,9 +29,11 @@
 		@click.self="openCard">
 		<div class="card-upper">
 			<h3 v-if="showArchived">{{ card.title }}</h3>
-			<h3 v-else @click.stop="startEditing(card)">{{ card.title }}</h3>
+			<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
+			<h3 v-else>editing</h3>
 			<transition name="fade" mode="out-in">
-				<form v-if="editing" v-click-outside="cancelEdit" @keyup.esc="cancelEdit" @submit.prevent="finishedEdit(card)">
+				<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>

From 067ec5e057737b47d81191196672b4884e92a24a Mon Sep 17 00:00:00 2001
From: Gary Kim <gary@garykim.dev>
Date: Wed, 18 Sep 2019 00:02:24 +0800
Subject: [PATCH 5/5] Fix overflowing card heading

If the heading of a card is too long,
it will push interface elements off the
card.

This change will ensure that text that
does not have spaces and thus cannot be
wrapped will simply be cut off with an
ellipsis instead.

Signed-off-by: Gary Kim <gary@garykim.dev>
---
 src/components/cards/CardItem.vue | 33 +++++++++++++++----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 70a85a0ce..56d7613e3 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -30,23 +30,21 @@
 		<div class="card-upper">
 			<h3 v-if="showArchived">{{ card.title }}</h3>
 			<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
-			<h3 v-else>editing</h3>
-			<transition name="fade" mode="out-in">
-				<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>
+			<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"
@@ -60,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>
@@ -225,7 +222,7 @@ export default {
 				display: flex;
 				padding: 5px 7px;
 				position: absolute;
-				width: calc(100% - 14px);
+				width: 100%;
 				input[type=text] {
 					flex-grow: 1;
 				}
@@ -236,6 +233,8 @@ export default {
 				flex-grow: 1;
 				font-size: 100%;
 				cursor: text;
+				overflow-x: hidden;
+				word-wrap: break-word;
 			}
 		}