Performance optimizations in list template

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2017-10-26 11:19:46 +02:00
committed by Julius Härtl
parent f533f2bd80
commit e1793b5c31
2 changed files with 17 additions and 18 deletions

View File

@@ -26,16 +26,15 @@
<tbody> <tbody>
<tr data-ng-repeat="b in boardservice.sorted" ng-class="{deleted: b.deletedAt > 0}"> <tr data-ng-repeat="b in boardservice.sorted" ng-class="{deleted: b.deletedAt > 0}">
<td ng-click="gotoBoard(b)"> <td ng-click="gotoBoard(b)">
<div class="board-bullet" <div class="board-bullet" ng-style="{'background-color':'#'+b.color}"> </div>
ng-style="{'background-color':'#{{b.color}}'};"> </div>
</td> </td>
<td> <td>
<div ng-click="gotoBoard(b)" ng-show="!b.status.edit">{{ b.title }}</div> <div ng-click="gotoBoard(b)" ng-show="!b.status.edit">{{ b.title }}</div>
<div class="app-navigation-entry-edit" ng-show="b.status.edit"> <div class="app-navigation-entry-edit" ng-show="b.status.edit">
<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardUpdate(b)"> <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="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> </div>
</form> </form>
</div> </div>
@@ -101,9 +100,9 @@
class="ng-pristine ng-valid" ng-submit="boardCreate()"> class="ng-pristine ng-valid" ng-submit="boardCreate()">
<input id="newTitle" class="edit ng-valid ng-empty" <input id="newTitle" class="edit ng-valid ng-empty"
type="text" placeholder="<?php p($l->t('New board title')); ?>" 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="colorselect">
<div class="color" ng-repeat="c in colors" <div class="color" ng-repeat="c in ::colors"
ng-style="{'background-color':'#{{ c }}'}" ng-style="{'background-color':'#{{ c }}'}"
ng-click="selectColor(c)" ng-click="selectColor(c)"
ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div> ng-class="{'selected': (c == newBoard.color), 'dark': (newBoard.color | textColorFilter) === '#ffffff' }"></div>

View File

@@ -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 === '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 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> <a href="#!/board/{{b.id}}/">{{ b.title }}</a>
<div class="app-navigation-entry-utils"> <div class="app-navigation-entry-utils">
<ul> <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> <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> </ul>
</div> </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> <ul>
<li ng-show="boardservice.canManage(b)"> <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>
<li ng-show="boardservice.canManage(b)"> <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> <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"> <div class="app-navigation-entry-edit">
<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardUpdate(b)"> <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"> <input type="submit" value="" class="action icon-checkmark svg">
</form> </form>
<div class="colorselect"> <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>
</div> </div>
</li> </li>
<li> <li ng-class="{editing: status.addBoard}">
<a ng-click="status.addBoard=!status.addBoard" ng-show="!status.addBoard" class="icon-add app-navigation-noclose"> <a ng-click="status.addBoard=!status.addBoard" class="icon-add app-navigation-noclose">
<?php p($l->t('Create a new board')); ?> <?php p($l->t('Create a new board')); ?>
</a> </a>
<div class="app-navigation-entry-edit" ng-if="status.addBoard"> <div class="app-navigation-entry-edit" ng-if="status.addBoard">
<form ng-disabled="isAddingList" class="ng-pristine ng-valid" ng-submit="boardCreate()"> <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"> <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> </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> </div>
</li> </li>