Merge pull request #592 from nextcloud/251-card-title-inline

editable inline card titles
nextcloud · Aug 24, 2018 · 939f5fa · 939f5fa
2 parents abb5290 + d17d0ec
commit 939f5fa
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/css/style.scss b/css/style.scss
@@ -5,6 +5,7 @@
  * @author Artem Anufrij <artem.anufrij@live.de>
  * @author Marin Treselj <marin@pixelipo.com>
  * @author Oskar Kurz <oskar.kurz@gmail.com>
+ * @author Ryan Fletcher <ryan.fletcher@codepassion.ca>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -513,6 +514,17 @@ input.input-inline {
 		margin: 0 5px;
 		overflow: hidden;
 		text-overflow: ellipsis;
+
+		span {
+			padding: 6px 0;
+			padding-top: 7px;
+			display: block;
+		}
+
+		input {
+			width: 100%;
+			margin: 0;
+		}
 	}
 
 	.labels {

diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
@@ -44,7 +44,10 @@
 			 data-columnindex="{{$index}}" id="column{{$index}}"
 			 style="">
 			<h3 data-as-sortable-item-handle>
-				<span class="editable-inline" ng-show="!s.status.editStack" ng-click="s.status.editStack=true">{{ s.title }}</span>
+				<span class="editable-inline"
+				 ng-show="!s.status.editStack"
+				 ng-click="s.status.editStack=true">{{ s.title }}</span>
+
 				<form ng-if="s.status.editStack" ng-submit="stackservice.update(s); s.status.editStack=false">
 					<input type="text" placeholder="<?php p($l->t('Add a new stack')); ?>"
 						   ng-blur="stackservice.update(s); s.status.editStack=false" ng-model="s.title"
@@ -67,7 +70,17 @@
 					</div>
 					<div data-as-sortable-item-handle>
 						<div class="card-upper">
-							<h4>{{ cardservice.get(c.id).title }}</h4>
+							<h4>
+								<span class="editable-inline"
+									ng-show="!c.status.editCard"
+									ng-click="c.status.editCard=true">{{cardservice.get(c.id).title}}</span>
+
+								<form ng-if="c.status.editCard" ng-submit="cardservice.update(c); c.status.editCard=false">
+									<input class="input-inline" type="text" placeholder="<?php p($l->t('Add a new card')); ?>"
+										ng-blur="cardservice.update(c); c.status.editCard=false" ng-model="c.title"
+										autofocus-on-insert required maxlength="100" />
+								</form>
+							</h4>
 							<ul class="labels">
 								<li ng-repeat="label in cardservice.get(c.id).labels"
 									ng-style="labelStyle(label.color)" title="{{ label.title }}">