From e1793b5c3155e4b0eaa569f790114e3bb3de0ead Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 26 Oct 2017 11:19:46 +0200
Subject: [PATCH] Performance optimizations in list template
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 templates/part.boardlist.php  | 11 +++++------
 templates/part.navigation.php | 24 ++++++++++++------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index ec0e6db56..23c7ad224 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -26,16 +26,15 @@
 		<tbody>
 		<tr data-ng-repeat="b in boardservice.sorted" ng-class="{deleted: b.deletedAt > 0}">
 			<td ng-click="gotoBoard(b)">
-				<div class="board-bullet"
-					  ng-style="{'background-color':'#{{b.color}}'};"> </div>
+				<div class="board-bullet" ng-style="{'background-color':'#'+b.color}"> </div>
 			</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">
+						<input id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 						<div class="colorselect">
-							<div class="color" ng-repeat="c in colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"><br /></div>
+							<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"><br /></div>
 						</div>
 					</form>
 				</div>
@@ -101,9 +100,9 @@
 					  class="ng-pristine ng-valid" ng-submit="boardCreate()">
 					<input id="newTitle" class="edit ng-valid ng-empty"
 						   type="text" placeholder="<?php p($l->t('New board title')); ?>"
-						   autofocus-on-insert ng-model="newBoard.title" maxlength="100">
+						   autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 					<div class="colorselect">
-						<div class="color" ng-repeat="c in colors"
+						<div class="color" ng-repeat="c in ::colors"
 							 ng-style="{'background-color':'#{{ c }}'}"
 							 ng-click="selectColor(c)"
 							 ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>
diff --git a/templates/part.navigation.php b/templates/part.navigation.php
index 8eef2b7f2..4b78d27d1 100644
--- a/templates/part.navigation.php
+++ b/templates/part.navigation.php
@@ -4,9 +4,9 @@
 	<li ng-class="{active: status.filter === 'archived' || (boardservice.getCurrent() && boardservice.getCurrent().archived)}"><a ui-sref="list({ filter: 'archived' })" class="icon-archive"><?php p($l->t('Archived boards')); ?></a></li>
 	<li ng-class="{active: status.filter === 'shared'}"><a ui-sref="list({ filter: 'shared' })" class="icon-share"><?php p($l->t('Shared boards')); ?></a></li>
 
-	<li class="with-icon with-menu" ng-class="{active: b.id === boardservice.getCurrent().id, editing: b.status.edit}" data-ng-repeat="b in boardservice.sidebar" ng-if="b.deletedAt == 0">
+	<li class="with-icon with-menu" ng-class="{active: b.id === boardservice.getCurrent().id, editing: b.status.editNavigation}" data-ng-repeat="b in boardservice.sidebar" ng-if="b.deletedAt == 0">
 
-		<span class="board-bullet"  ng-style="{'background-color':'#{{b.color}}'}"> </span>
+		<span class="board-bullet"  ng-style="{'background-color': '#' + b.color}"> </span>
 		<a href="#!/board/{{b.id}}/">{{ b.title }}</a>
 		<div class="app-navigation-entry-utils">
 			<ul>
@@ -14,10 +14,10 @@
 				<li class="app-navigation-entry-utils-menu-button svg" ng-show="!status.deleteUndo[b.id]"><button class="icon-more" title="<?php p($l->t('View more')); ?>"><span class="hidden-visually"><?php p($l->t('View more')); ?></span></button></li>
 			</ul>
 		</div>
-		<div class="app-navigation-entry-menu app-navigation-noclose" ng-show="!b.status.edit">
+		<div class="app-navigation-entry-menu app-navigation-noclose" ng-show="!b.status.editNavigation">
 			<ul>
 				<li ng-show="boardservice.canManage(b)">
-					<button class="icon-rename svg" title="<?php p($l->t('Edit board')); ?>" ng-click="b.status.edit=true"></button>
+					<button class="icon-rename svg" title="<?php p($l->t('Edit board')); ?>" ng-click="b.status.editNavigation=true"></button>
 				</li>
 				<li ng-show="boardservice.canManage(b)">
 					<button class="icon-archive svg" title="<?php p($l->t('Move board to archive')); ?>" ng-click="boardArchive(b)"></button>
@@ -27,27 +27,27 @@
 
 		<div class="app-navigation-entry-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 id="newTitle" class="edit ng-valid ng-empty" type="text" autofocus-on-insert ng-model="b.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 				<input type="submit" value="" class="action icon-checkmark svg">
 			</form>
 			<div class="colorselect">
-				<div class="color" ng-repeat="c in colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"></div>
+				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="b.color=c" ng-class="{'selected': (c == b.color) }"></div>
 			</div>
 		</div>
 	</li>
 
-	<li>
-		<a ng-click="status.addBoard=!status.addBoard" ng-show="!status.addBoard" class="icon-add app-navigation-noclose">
+	<li ng-class="{editing: status.addBoard}">
+		<a ng-click="status.addBoard=!status.addBoard" class="icon-add app-navigation-noclose">
 			<?php p($l->t('Create a new board')); ?>
 		</a>
 		<div class="app-navigation-entry-edit" ng-if="status.addBoard">
 			<form ng-disabled="isAddingList" class="ng-pristine ng-valid"  ng-submit="boardCreate()">
-				<input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="<?php p($l->t('New board title')); ?>" autofocus-on-insert ng-model="newBoard.title" maxlength="100">
+				<input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="<?php p($l->t('New board title')); ?>" autofocus-on-insert ng-model="newBoard.title" maxlength="100" ng-model-options="{ debounce: 250 }">
 				<input type="submit" value="" class="action icon-checkmark svg">
-				<div class="colorselect">
-					<div class="color" ng-repeat="c in colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
-				</div>
 			</form>
+			<div class="colorselect">
+				<div class="color" ng-repeat="c in ::colors" ng-style="{'background-color':'#{{ c }}'}" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"><br /></div>
+			</div>
 		</div>
 	</li>