Merge pull request #173 from nextcloud/click-title-to-edit

Click title to edit

css/style.css

@@ -58,6 +58,9 @@ button.button-inline:hover {
 	display: flex !important;
 }
 
+.editable-inline {
+	cursor: text;
+}
 /**
  * Navigation sidebar
  */
@@ -248,27 +251,21 @@ button.button-inline:hover {
 	width: 100%;
 }
 
-.stack h2 button,
-.stack .stack-actions {
-	float: right;
-	margin: 0px 0px 0px 10px;
-}
-
 .stack h2 span {
-	width: 100%;
 	white-space: normal;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.stack h2 .stack-actions {
+.stack h2 button {
+	margin-left: auto;
 	display: flex;
 	opacity: 0.25;
+	padding-right: 0;
 }
 
-.stack h2:hover .stack-actions {
+.stack h2:hover button {
 	display: flex;
-	float: right;
 }
 
 .card {
@@ -856,7 +853,7 @@ button.button-inline:hover {
 		width: 320px;
 		display: inline-block;
 	}
-	.stack h2 .stack-actions {
+	.stack h2 button {
 		display: none;
 	}
 }

templates/part.board.mainView.php

@@ -34,19 +34,16 @@
 		<div class="stack" ng-repeat="s in stacks" data-as-sortable-item
 			 data-columnindex="{{$index}}" id="column{{$index}}"
 			 style="">
-			<h2 data-as-sortable-item-handle><span ng-show="!s.status.editStack">{{ s.title }}</span>
-				<form ng-if="s.status.editStack" ng-submit="stackservice.update(s)">
+			<h2 data-as-sortable-item-handle>
+				<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="Add a new stack"
 						   ng-blur="stackservice.update(s); s.status.editStack=false" ng-model="s.title"
-						   ng-if="s.status.editStack" autofocus-on-insert
-						   required maxlength="100"/>
+						   autofocus-on-insert required maxlength="100" />
 				</form>
-				<div ng-if="!s.status.editStack" class="stack-actions">
-					<button class="icon-rename button-inline"
-							ng-click="s.status.editStack=true"></button>
-					<button class="icon-delete button-inline"
-							ng-click="stackservice.delete(s.id)"></button>
-				</div>
+				<button class="icon-delete button-inline stack-actions"
+						ng-if="!s.status.editStack"
+                        ng-click="stackservice.delete(s.id)"></button>
 			</h2>
 			<ul data-as-sortable="sortOptions" is-disabled="!boardservice.canEdit() || filter==='archive'" data-ng-model="s.cards"
 				style="min-height: 40px;">