Merge pull request #198 from nextcloud/edit-board-in-board-list-view

edit board in board list view

css/style.css

@@ -531,7 +531,7 @@ button.button-inline:hover {
 	background-color: #f0f0f0;
 }
 
-.icon-close {
+#app-sidebar .icon-close {
 	position: absolute;
 	top: 5px;
 	right: 5px;
@@ -685,7 +685,6 @@ button.button-inline:hover {
 	min-width: 240px;
 	height: 34px;
 	display: flex;
-	margin: 3px 3px 3px 0;
 }
 
 .colorselect .color {
@@ -740,6 +739,7 @@ button.button-inline:hover {
 	position: relative;
 	cursor: pointer;
 	display: block;
+	margin: 2px 0px;
 }
 
 .popovermenu ul {
@@ -755,7 +755,7 @@ button.button-inline:hover {
 #boardlist span.icon {
 	width: 30px;
 	height: 30px;
-	display: inline-block;
+	margin: 2px 0px;
 }
 
 .cell-board-bullet {
@@ -811,6 +811,15 @@ button.button-inline:hover {
 	margin-top: 5px;
 }
 
+#boardlist .board-edit-controls {
+	float: right;
+	display: flex;
+}
+
+#boardlist input {
+	margin: 0px;
+}
+
 /**
  * Board details
  */

js/controller/ListController.js

@@ -33,6 +33,7 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 	$scope.colors = ['0082c9', '00c9c6','00c906', 'c92b00', 'F1DB50', '7C31CC', '3A3B3D', 'CACBCD'];
 	$scope.boardservice = BoardService;
 	$scope.newBoard.color = $scope.colors[0];
+	$scope.updatingBoard = null;
 
 	// FIXME: not nice, but we want to load this only once
 	if($element.attr('id') === 'app-navigation') {
@@ -100,7 +101,18 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 	$scope.boardUpdate = function(board) {
 		BoardService.update(board).then(function(data) {
 			$scope.filterData();
+			board.status.edit = false;
 		});
+	};
+
+	$scope.boardUpdateBegin = function(board) {
+		$scope.updatingBoard = board;
+	};
+
+	$scope.boardUpdateReset = function(board) {
+		board.title = $scope.updatingBoard.title;
+		board.color = $scope.updatingBoard.color;
+		$scope.filterData();
 		board.status.edit = false;
 	};
 

js/service/ApiService.js

@@ -124,9 +124,8 @@ app.factory('ApiService', function($http, $q){
         } else {
             Object.keys(entity).forEach(function (key) {
                 element[key] = entity[key];
-                if(element[key]!==null)
-                    element[key].status = {};
             });
+            element.status = {};
         }
     };
     ApiService.prototype.remove = function(id) {

templates/part.boardlist.php

@@ -23,7 +23,17 @@
 				<span class="board-bullet"
 					  style="background-color:#{{b.color}};"> </span>
 			</td>
-			<td ng-click="gotoBoard(b)">{{ b.title }}</a></td>
+			<td>
+				<div ng-click="gotoBoard(b)" ng-show="!b.status.edit">{{ b.title }}</div>
+				<div class="app-navigation-entry-edit" ng-show="b.status.edit">
+					<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardUpdate(b)">
+						<input id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100">
+						<div class="colorselect">
+							<div class="color" ng-repeat="c in colors" style="background-color:#{{ c }};" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"><br /></div>
+						</div>
+					</form>
+				</div>
+			</td>
 			<td>
 				<div id="assigned-users">
 					<div class="avatardiv" avatar displayname="{{ b.owner.uid }}" title="{{ b.owner.displayname }}"></div>
@@ -32,10 +42,14 @@
 			</td>
 			<td>
 				<div class="hint"></div>
-				<div class="app-popover-menu-utils" ng-if="b.deletedAt == 0">
+				<div class="app-popover-menu-utils" ng-if="b.deletedAt == 0" ng-show="!b.status.edit">
 					<button class="icon icon-more button-inline" title="<?php p($l->t('More actions')); ?>"></button>
 					<div class="popovermenu bubble hidden">
 						<ul>
+							<li ng-click="boardUpdateBegin(b); b.status.edit = true">
+								<a class="menuitem"><span class="icon-rename"></span> <?php p($l->t('Edit board')); ?>
+								</a>
+							</li>
 							<li ng-if="boardservice.canManage(b) && !b.archived" ng-click="boardArchive(b)">
 								<a class="menuitem"><span class="icon-archive"></span> <?php p($l->t('Archive board')); ?>
 								</a>
@@ -55,6 +69,10 @@
 						</ul>
 					</div>
 				</div>
+				<div class="board-edit-controls" ng-show="b.status.edit">
+					<span class="icon icon-checkmark" ng-click="boardUpdate(b)"></span>
+					<span class="icon icon-close" ng-click="boardUpdateReset(b)"></span>
+				</div>
 				<div class="app-popover-menu-utils" ng-if="b.deletedAt > 0">
 					<button class="icon icon-history button-inline" ng-click="boardDeleteUndo(b)" title="Undo board deletion - Otherwise the board will be deleted during the next cronjob run."></button>
 				</div>
@@ -84,11 +102,15 @@
 							 ng-click="selectColor(c)"
 							 ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
 					</div>
-					<input type="submit" value="" class="icon-checkmark svg" />
 				</form>
 			</td>
 			<td></td>
-			<td></td>
+			<td>
+				<div class="board-edit-controls">
+					<span class="icon icon-checkmark" ng-click="boardCreate()"></span>
+					<span class="icon icon-close" ng-click="status.addBoard=!status.addBoard"></span>
+				</div>
+			</td>
 		</tr>
 		</tbody>
 	</table>