From b15555e5e2132cb3b018f62cba87103ef3d22efd Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 20 Jun 2017 22:59:03 +0200
Subject: [PATCH] added save and cancel button

Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
---
 css/style.css                   |  6 +++++-
 js/controller/ListController.js | 12 ++++++++++++
 templates/part.boardlist.php    | 13 ++++++-------
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 689e7bbda..5d7405993 100644
--- a/css/style.css
+++ b/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;
@@ -811,6 +811,10 @@ button.button-inline:hover {
 	margin-top: 5px;
 }
 
+#boardlist .board-edit-controls {
+	float: right;
+}
+
 /**
  * Board details
  */
diff --git a/js/controller/ListController.js b/js/controller/ListController.js
index c4b76388e..61df6f6da 100644
--- a/js/controller/ListController.js
+++ b/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') {
@@ -104,6 +105,17 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 		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;
+	};
+
 	$scope.boardArchive = function (board) {
 		board.archived = true;
 		BoardService.update(board).then(function(data) {
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index eb6c9bb53..73b55c8da 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -28,7 +28,6 @@
 				<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">
-						<input type="submit" value="" class="icon-checkmark svg">
 						<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>
@@ -43,18 +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="b.status.edit=true" ng-show="!b.status.edit">
+							<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-click="boardUpdate(b)" ng-show="b.status.edit">
-								<a class="menuitem"><span class="icon-checkmark"></span> <?php p($l->t('Save changes')); ?>
-								</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>
@@ -74,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>