Moar work

appinfo/routes.php

@@ -41,6 +41,7 @@ return [
         ['name' => 'card#rename', 'url' => '/cards/{cardId}/rename', 'verb' => 'PUT'],
         ['name' => 'card#reorder', 'url' => '/cards/{cardId}/reorder', 'verb' => 'PUT'],
         ['name' => 'card#archive', 'url' => '/cards/{cardId}/archive', 'verb' => 'PUT'],
+        ['name' => 'card#unarchive', 'url' => '/cards/{cardId}/unarchive', 'verb' => 'PUT'],
         ['name' => 'card#assignLabel', 'url' => '/cards/{cardId}/label/{labelId}', 'verb' => 'POST'],
         ['name' => 'card#removeLabel', 'url' => '/cards/{cardId}/label/{labelId}', 'verb' => 'DELETE'],
         // TODO: card - assign user

controller/cardcontroller.php

@@ -64,14 +64,14 @@ class CardController extends Controller {
     /**
      * @NoAdminRequired
      */
-    public function archive($id) {
+    public function archive($cardId) {
-        return $this->cardService->archive($id);
+        return $this->cardService->archive($cardId);
     }
     /**
      * @NoAdminRequired
      */
-    public function unarchive($id) {
+    public function unarchive($cardId) {
-        return $this->cardService->unarchive($id);
+        return $this->cardService->unarchive($cardId);
     }
     /**
      * @NoAdminRequired

controller/pagecontroller.php

@@ -15,15 +15,18 @@ use OCP\IRequest;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\Controller;
+use OCP\IL10N;
 
 class PageController extends Controller {
 
 
 	private $userId;
+  private $l10n;
 
-	public function __construct($AppName, IRequest $request, $UserId){
+	public function __construct($AppName, IRequest $request,IL10N $l10n, $UserId){
 		parent::__construct($AppName, $request);
 		$this->userId = $UserId;
+    $this->l10n = $l10n;
 	}
 
 	/**

css/style.css

@@ -72,7 +72,6 @@
 	font-size:14pt;
 	margin: 0;
 	padding:12px;
-  padding-left:50px;
 
 }
 #board-actions {
@@ -135,10 +134,11 @@
 	margin-right:10px;
 	vertical-align: top;
   	display:inline-block !important;
+	background-color: #fafafa;
 }
 .stack h2 {
-	padding: 5px;
+	padding: 10px;
-	padding-bottom:3px;
+	padding-bottom:8px;
 	margin: 0;
 	font-size:12pt;
 	font-weight:700;
@@ -171,15 +171,14 @@
 	float:right;
 }
 .card {
-	background-color:#f0f0f0;
+	background-color:#ffffff;
-	margin:5px;
+	margin:10px;
 	white-space: normal;
-	padding-bottom:4px;
 	position: relative;
 	opacity: 1.0;
-	border:1px solid #aaaaaa;
+	-webkit-box-shadow: 0px 0px 5px #bbb;
 }
-.card.archived {
+.card.archived .card-upper {
 	opacity:0.5;
 }
 .card-upper {
@@ -191,6 +190,10 @@
 	position: absolute;
 	bottom: 10px;
 	right:10px;
+	display: none;
+}
+.card:hover .card-options {
+	display: block;
 }
 .card .popovermenu {
 	z-index:999;
@@ -212,11 +215,13 @@
 	font-size:10pt;
 	margin:0;
 	padding:0;
-	margin-bottom:-5px;
+	margin: 5px;
-	margin-top:15px;
 	display: inline-block;
 	float:left;
 }
+.card.has-labels h3 {
+	margin-top:15px;
+}
 .card h3 .fa {
 	font-size:18pt;
 	line-height:10pt;
@@ -251,8 +256,7 @@
 }
 
 .as-sortable-placeholder {
-	margin:5px;
+	margin:10px;
-	margin-bottom:5px;
 	border: 1px dashed #aaa;
 }
 
@@ -274,9 +278,11 @@
 	text-align:center;
 	margin:0;
 	padding:0;
-	padding-top:4px;
+	padding:10px;
 	border: none;
 	overflow:hidden;
+	margin: 10px;
+	-webkit-box-shadow: none;
 }
 .card.create:hover {
 	text-align:center;
@@ -321,10 +327,12 @@
 
 
 #card-header {
+	height: 44px;
 }
 #card-header h2 {
-	font-weight:600;
+	font-size: 14pt;
 	padding:10px;
+	padding-bottom:9px;
 	overflow: hidden;
 	margin-bottom:0px;
 	background-color:#f0f0f0;
@@ -342,6 +350,9 @@
 	color: #aaaaaa;
 	margin-bottom: 3px;
 }
+#card-meta #labels {
+	margin-bottom: 10px;
+}
 #card-dates span {
 }
 
@@ -426,14 +437,18 @@
 }
 .labels li span {
 
-}
-#assigned-users {
-	margin-top:15px;
-
 }
 .avatardiv {
 	float:left;
-	margin-right:5px;
+	background-color: #eee;
+	border-radius: 16px;
+	width:32px;
+	height:32px;
+	margin-right: 3px;
+}
+.avatardiv .fa-group {
+	padding: 7px;
+	opacity: 0.5;
 }
 
 /* color selector */
@@ -625,6 +640,14 @@ margin-bottom:2px; width:100%;
 		display:none !important;
 	}
 }
+@media only screen and (max-width: 768px) {
+	#board-header h1 {
+		margin-left: 50px;
+	}
+}
+
+
+
 
 #markdown p {
 	margin-bottom:15px;
@@ -658,6 +681,9 @@ margin-bottom:2px; width:100%;
 }
 
 
+.shareWithList .username {
+	min-width:100px;
+}
 .shareWithList .icon {
 	display: inline-block;
 	background-size: 16px 16px;

db/boardmapper.php

@@ -51,7 +51,13 @@ class BoardMapper extends Mapper {
      */
     public function findAll($userId, $limit=null, $offset=null) {
         $sql = 'SELECT * FROM `*PREFIX*deck_boards` WHERE `owner` = ?  ORDER BY `title`';
-        return $this->findEntities($sql, [$userId], $limit, $offset);
+        $entries = $this->findEntities($sql, [$userId], $limit, $offset);
+        /* @var Board $entry */
+        foreach ($entries as $entry) {
+            $acl = $this->aclMapper->findAll($entry->id);
+            $entry->setAcl($acl);
+        }
+        return $entries;
     }
 
     public function delete(\OCP\AppFramework\Db\Entity $entity) {

db/labelmapper.php

@@ -14,7 +14,7 @@ class LabelMapper extends DeckMapper {
     }
 
     public function findAll($boardId, $limit=null, $offset=null) {
-        $sql = 'SELECT * FROM `*PREFIX*deck_labels` WHERE `board_id` = ?';
+        $sql = 'SELECT * FROM `*PREFIX*deck_labels` WHERE `board_id` = ? ORDER BY `id`';
         return $this->findEntities($sql, [$boardId], $limit, $offset);
     }
 

js/Makefile

@@ -4,3 +4,7 @@ default:
 watch:
 	grunt watch
 
+install:
+	npm install
+	bower install
+

js/app/Config.js

@@ -22,23 +22,22 @@ app.config(function ($provide, $routeProvider, $interpolateProvider, $httpProvid
             controller: 'ListController',
         })
         .state('board', {
-            url: "/board/:boardId",
+            url: "/board/:boardId/:filter",
             templateUrl: "/board.html",
             controller: 'BoardController',
+            params: {
+                filter: { value: '', dynamic: true }
+            }
         })
         .state('board.detail', {
             url: "/detail/",
+            reloadOnSearch : false,
             views: {
                 "sidebarView": {
                     templateUrl: "/board.sidebarView.html",
                 }
             },
         })
-        .state('board.archive', {
-            url: "/archive/",
-            templateUrl: "/board.html",
-            controller: 'BoardController',
-        })
         .state('board.card', {
             url: "/card/:cardId",
             views: {
@@ -47,12 +46,6 @@ app.config(function ($provide, $routeProvider, $interpolateProvider, $httpProvid
                     controller: 'CardController'
                 }
             }
-        })
-        .state('board.settings', {
-
-        })
-        .state('board.sharing', {
-            
         });
 
 

js/app/Run.js

@@ -19,8 +19,7 @@ app.run(function ($document, $rootScope, $transitions) {
         $rootScope.sidebar.show = false;
     });
     $transitions.onEnter({to: 'board.archive'}, function ($state) {
-        //BoardController.update();
+        //BoardController.loadArchived();
-        console.log($state.$current.parent)
     });
 
     $('link[rel="shortcut icon"]').attr(

js/controller/AppController.js

@@ -14,6 +14,6 @@ app.controller('AppController', function ($scope, $location, $http, $route, $log
         $scope.searchText = value;
     };
     
-    $scope.searchText = $location.search().search;
+    $rootScope.searchText = $location.search().search;
 
 });

js/controller/BoardController.js

@@ -1,4 +1,4 @@
-app.controller('BoardController', function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions) {
+app.controller('BoardController', function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions, $filter) {
 
   $scope.sidebar = $rootScope.sidebar;
 
@@ -6,10 +6,6 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
   $scope.status={},
   $scope.newLabel={};
   $scope.status.boardtab = $stateParams.detailTab;
-  $scope.state = $state.current;
-
-
-
 
   $scope.stackservice = StackService;
   $scope.boardservice = BoardService;
@@ -18,26 +14,87 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
   $scope.labelservice = LabelService;
   $scope.defaultColors = ['31CC7C', '317CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'];
 
-  // fetch data
+  $scope.search = function (searchText) {
-  StackService.clear();
+    $scope.searchText = searchText;
+    $scope.refreshData();
+  };
+
+  $scope.board = BoardService.getCurrent();
+  StackService.clear(); //FIXME: Is this still needed?
   $scope.statusservice.retainWaiting();
   $scope.statusservice.retainWaiting();
 
-  BoardService.fetchOne($scope.id).then(function(data) {
+  // FIXME: ugly solution for archive
-    $scope.statusservice.releaseWaiting();
+  $scope.$state = $stateParams;
-  }, function(error) {
+  $scope.filter = $stateParams.filter;
-    $scope.statusservice.setError('Error occured', error);
+  $scope.$watch('$state.filter', function (name) {
+    console.log("statewatch" + name);
+    $scope.filter = name;
+  });
+  $scope.switchFilter = function(filter) {
+    console.log("switch filter click  " + name);
+    $state.go('.', {filter: filter}, {notify: false});
+    $scope.filter = filter;
+  };
+  $scope.$watch('filter', function(name) {
+    if(name==="archive") {
+      $scope.loadArchived();
+    } else {
+      $scope.loadDefault();
+    }
   });
 
-  console.log($scope.state);
 
+  $scope.stacksData = StackService;
+  $scope.stacks = {};
+  $scope.$watch('stacksData', function(value) {
+    $scope.refreshData();
+  }, true);
+  $scope.refreshData = function () {
+    if($scope.filter === "archive") {
+      $scope.filterData('-lastModified', $scope.searchText);
+    } else {
+      $scope.filterData('order', $scope.searchText);
+    }
+  };
+
+  // filter cards here, as ng-sortable will not work nicely with html-inline filters
+  $scope.filterData = function (order, text) {
+    if ($scope.stacks === undefined)
+      return;
+    angular.copy($scope.stackservice.data, $scope.stacks);
+    angular.forEach($scope.stacks, function (value, key) {
+      var cards = [];
+      cards = $filter('cardSearchFilter')(value.cards, text);
+      cards = $filter('orderBy')(cards, order);
+      $scope.stacks[key].cards = cards;
+    });
+  };
+
+  $scope.loadDefault = function() {
+    console.log("Load default");
     StackService.fetchAll($scope.id).then(function(data) {
       $scope.statusservice.releaseWaiting();
     }, function(error) {
       $scope.statusservice.setError('Error occured', error);
     });
+  };
 
+  $scope.loadArchived = function() {
+    console.log("Load archived!");
+    StackService.fetchArchived($scope.id).then(function(data) {
+      $scope.statusservice.releaseWaiting();
+    }, function(error) {
+      $scope.statusservice.setError('Error occured', error);
+    });
+  };
 
+  // Handle initial Loading
+  BoardService.fetchOne($scope.id).then(function(data) {
+    $scope.statusservice.releaseWaiting();
+  }, function(error) {
+    $scope.statusservice.setError('Error occured', error);
+  });
 
 
 
@@ -68,7 +125,14 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
   $scope.cardDelete = function(card) {
     CardService.delete(card.id);
     StackService.deleteCard(card);
-
+  }
+  $scope.cardArchive = function(card) {
+    CardService.archive(card);
+    StackService.deleteCard(card);
+  };
+  $scope.cardUnarchive = function(card){
+    CardService.unarchive(card);
+    StackService.deleteCard(card);
   }
 
   $scope.labelDelete = function(label) {
@@ -102,27 +166,33 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
     BoardService.updateAcl(acl);
   }
 
-
+  $scope.checkCanEdit = function() {
+    if($scope.archived) {
+      return false;
+    }
+    return true;
+  }
 
   // settings for card sorting
   $scope.sortOptions = {
     itemMoved: function (event) {
-      // TODO: Implement reodering here
+      // TODO: Implement reodering here (set new order of all cards in stack)
       event.source.itemScope.modelValue.status = event.dest.sortableScope.$parent.column;
       var order = event.dest.index;
       var card = event.source.itemScope.c;
       var newStack = event.dest.sortableScope.$parent.s.id;
       card.stackId = newStack;
       CardService.update(card);
-
       CardService.reorder(card, order).then(function(data) {
         StackService.data[newStack].addCard(card);
       });
     },
     orderChanged: function (event) {
-      // TODO: Implement ordering here
+      // TODO: Implement ordering here (set new order of all cards in stack)
+      // then maybe also call $scope.filterData('order')?
       var order = event.dest.index;
       var card = event.source.itemScope.c;
+      var stack = event.dest.sortableScope.$parent.s.id;
       CardService.reorder(card, order);
     },
     scrollableContainer: '#board',

js/controller/CardController.js

@@ -14,12 +14,11 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
 
     CardService.fetchOne($scope.cardId).then(function(data) {
         $scope.statusservice.releaseWaiting();
-
+        $scope.archived = CardService.getCurrent().archived;
         console.log(data);
     }, function(error) {
     });
 
-
     // handle rename to update information on the board as well
     $scope.renameCard = function(card) {
         CardService.rename(card).then(function(data) {
@@ -42,14 +41,9 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo
         var card = CardService.getCurrent();
         StackService.updateCard(card);
     }
+    
     $scope.labelRemove = function(element, model) {
         CardService.removeLabel($scope.cardId, element.id)
     }
 
-    /*var menu = $('#app-content');
-     menu.click(function(event){
-     $scope.location.path('/board/'+$scope.boardId);
-     $scope.$apply();
-
-     });*/
 });

js/directive/avatar.js

@@ -2,17 +2,15 @@ app.directive('avatar', function() {
 	'use strict';
 	return {
 		restrict: 'A',
-		scope: false,
+		scope: true,
-		link: function(scope, elm, attr) {
+		link: function(scope, element, attr){
-			return attr.$observe('user', function() {
+			attr.$observe('displayname', function(value){
-				if (attr.user) {
+				console.log(value);
-					var url = OC.generateUrl('/avatar/{user}/{size}',
+				if(value!==undefined) {
-						{user: attr.user, size: Math.ceil(attr.size * window.devicePixelRatio)});
+					$(element).avatar(value, 32);
-					var inner = '<img src="'+url+'" />';
-					elm.html(inner);
-					//elm.avatar(attr.user, attr.size);
 				}
 			});
+
 		}
 	};
 });

js/filters/cardSearchFilter.js

@@ -1,11 +1,9 @@
-// usage | cardFilter({ member: 'admin'})
-
 app.filter('cardSearchFilter', function() {
 	return function(cards, searchString) {
 		var _result = {};
 		var rules = {
 			title: searchString,
-			owner: searchString,
+			//owner: searchString,
 		};
 		angular.forEach(cards, function(card){
 			var _card = card;
@@ -15,6 +13,11 @@ app.filter('cardSearchFilter', function() {
 				}
 			});
 		});
-		return _result;
+
+		var arrayResult = $.map(_result, function(value, index) {
+			return [value];
+		});
+
+		return arrayResult;
 	};
 });

js/public/app.js

@@ -52,23 +52,22 @@ app.config(["$provide", "$routeProvider", "$interpolateProvider", "$httpProvider
             controller: 'ListController',
         })
         .state('board', {
-            url: "/board/:boardId",
+            url: "/board/:boardId/:filter",
             templateUrl: "/board.html",
             controller: 'BoardController',
+            params: {
+                filter: { value: '', dynamic: true }
+            }
         })
         .state('board.detail', {
             url: "/detail/",
+            reloadOnSearch : false,
             views: {
                 "sidebarView": {
                     templateUrl: "/board.sidebarView.html",
                 }
             },
         })
-        .state('board.archive', {
-            url: "/archive/",
-            templateUrl: "/board.html",
-            controller: 'BoardController',
-        })
         .state('board.card', {
             url: "/card/:cardId",
             views: {
@@ -77,12 +76,6 @@ app.config(["$provide", "$routeProvider", "$interpolateProvider", "$httpProvider
                     controller: 'CardController'
                 }
             }
-        })
-        .state('board.settings', {
-
-        })
-        .state('board.sharing', {
-            
         });
 
 
@@ -108,8 +101,7 @@ app.run(["$document", "$rootScope", "$transitions", function ($document, $rootSc
         $rootScope.sidebar.show = false;
     });
     $transitions.onEnter({to: 'board.archive'}, function ($state) {
-        //BoardController.update();
+        //BoardController.loadArchived();
-        console.log($state.$current.parent)
     });
 
     $('link[rel="shortcut icon"]').attr(
@@ -135,7 +127,7 @@ app.controller('AppController', ["$scope", "$location", "$http", "$route", "$log
         $scope.searchText = value;
     };
     
-    $scope.searchText = $location.search().search;
+    $rootScope.searchText = $location.search().search;
 
 }]);
 
@@ -304,7 +296,7 @@ app.controller('ArchiveController', ["$rootScope", "$scope", "$stateParams", "St
 
 }]);
 
-app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "StatusService", "BoardService", "StackService", "CardService", "LabelService", "$state", "$transitions", function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions) {
+app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "StatusService", "BoardService", "StackService", "CardService", "LabelService", "$state", "$transitions", "$filter", function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions, $filter) {
 
   $scope.sidebar = $rootScope.sidebar;
 
@@ -312,10 +304,6 @@ app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "Stat
   $scope.status={},
   $scope.newLabel={};
   $scope.status.boardtab = $stateParams.detailTab;
-  $scope.state = $state.current;
-
-
-
 
   $scope.stackservice = StackService;
   $scope.boardservice = BoardService;
@@ -324,26 +312,87 @@ app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "Stat
   $scope.labelservice = LabelService;
   $scope.defaultColors = ['31CC7C', '317CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'];
 
-  // fetch data
+  $scope.search = function (searchText) {
-  StackService.clear();
+    $scope.searchText = searchText;
+    $scope.refreshData();
+  };
+
+  $scope.board = BoardService.getCurrent();
+  StackService.clear(); //FIXME: Is this still needed?
   $scope.statusservice.retainWaiting();
   $scope.statusservice.retainWaiting();
 
-  BoardService.fetchOne($scope.id).then(function(data) {
+  // FIXME: ugly solution for archive
-    $scope.statusservice.releaseWaiting();
+  $scope.$state = $stateParams;
-  }, function(error) {
+  $scope.filter = $stateParams.filter;
-    $scope.statusservice.setError('Error occured', error);
+  $scope.$watch('$state.filter', function (name) {
+    console.log("statewatch" + name);
+    $scope.filter = name;
+  });
+  $scope.switchFilter = function(filter) {
+    console.log("switch filter click  " + name);
+    $state.go('.', {filter: filter}, {notify: false});
+    $scope.filter = filter;
+  };
+  $scope.$watch('filter', function(name) {
+    if(name==="archive") {
+      $scope.loadArchived();
+    } else {
+      $scope.loadDefault();
+    }
   });
 
-  console.log($scope.state);
 
+  $scope.stacksData = StackService;
+  $scope.stacks = {};
+  $scope.$watch('stacksData', function(value) {
+    $scope.refreshData();
+  }, true);
+  $scope.refreshData = function () {
+    if($scope.filter === "archive") {
+      $scope.filterData('-lastModified', $scope.searchText);
+    } else {
+      $scope.filterData('order', $scope.searchText);
+    }
+  };
+
+  // filter cards here, as ng-sortable will not work nicely with html-inline filters
+  $scope.filterData = function (order, text) {
+    if ($scope.stacks === undefined)
+      return;
+    angular.copy($scope.stackservice.data, $scope.stacks);
+    angular.forEach($scope.stacks, function (value, key) {
+      var cards = [];
+      cards = $filter('cardSearchFilter')(value.cards, text);
+      cards = $filter('orderBy')(cards, order);
+      $scope.stacks[key].cards = cards;
+    });
+  };
+
+  $scope.loadDefault = function() {
+    console.log("Load default");
     StackService.fetchAll($scope.id).then(function(data) {
       $scope.statusservice.releaseWaiting();
     }, function(error) {
       $scope.statusservice.setError('Error occured', error);
     });
+  };
 
+  $scope.loadArchived = function() {
+    console.log("Load archived!");
+    StackService.fetchArchived($scope.id).then(function(data) {
+      $scope.statusservice.releaseWaiting();
+    }, function(error) {
+      $scope.statusservice.setError('Error occured', error);
+    });
+  };
 
+  // Handle initial Loading
+  BoardService.fetchOne($scope.id).then(function(data) {
+    $scope.statusservice.releaseWaiting();
+  }, function(error) {
+    $scope.statusservice.setError('Error occured', error);
+  });
 
 
 
@@ -374,7 +423,14 @@ app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "Stat
   $scope.cardDelete = function(card) {
     CardService.delete(card.id);
     StackService.deleteCard(card);
-
+  }
+  $scope.cardArchive = function(card) {
+    CardService.archive(card);
+    StackService.deleteCard(card);
+  };
+  $scope.cardUnarchive = function(card){
+    CardService.unarchive(card);
+    StackService.deleteCard(card);
   }
 
   $scope.labelDelete = function(label) {
@@ -408,27 +464,33 @@ app.controller('BoardController', ["$rootScope", "$scope", "$stateParams", "Stat
     BoardService.updateAcl(acl);
   }
 
-
+  $scope.checkCanEdit = function() {
+    if($scope.archived) {
+      return false;
+    }
+    return true;
+  }
 
   // settings for card sorting
   $scope.sortOptions = {
     itemMoved: function (event) {
-      // TODO: Implement reodering here
+      // TODO: Implement reodering here (set new order of all cards in stack)
       event.source.itemScope.modelValue.status = event.dest.sortableScope.$parent.column;
       var order = event.dest.index;
       var card = event.source.itemScope.c;
       var newStack = event.dest.sortableScope.$parent.s.id;
       card.stackId = newStack;
       CardService.update(card);
-
       CardService.reorder(card, order).then(function(data) {
         StackService.data[newStack].addCard(card);
       });
     },
     orderChanged: function (event) {
-      // TODO: Implement ordering here
+      // TODO: Implement ordering here (set new order of all cards in stack)
+      // then maybe also call $scope.filterData('order')?
       var order = event.dest.index;
       var card = event.source.itemScope.c;
+      var stack = event.dest.sortableScope.$parent.s.id;
       CardService.reorder(card, order);
     },
     scrollableContainer: '#board',
@@ -473,12 +535,11 @@ app.controller('CardController', ["$scope", "$rootScope", "$routeParams", "$loca
 
     CardService.fetchOne($scope.cardId).then(function(data) {
         $scope.statusservice.releaseWaiting();
-
+        $scope.archived = CardService.getCurrent().archived;
         console.log(data);
     }, function(error) {
     });
 
-
     // handle rename to update information on the board as well
     $scope.renameCard = function(card) {
         CardService.rename(card).then(function(data) {
@@ -501,16 +562,11 @@ app.controller('CardController', ["$scope", "$rootScope", "$routeParams", "$loca
         var card = CardService.getCurrent();
         StackService.updateCard(card);
     }
+    
     $scope.labelRemove = function(element, model) {
         CardService.removeLabel($scope.cardId, element.id)
     }
 
-    /*var menu = $('#app-content');
-     menu.click(function(event){
-     $scope.location.path('/board/'+$scope.boardId);
-     $scope.$apply();
-
-     });*/
 }]);
 
 
@@ -570,14 +626,12 @@ app.filter('cardFilter', function() {
 		return result;
     };
 });
-// usage | cardFilter({ member: 'admin'})
-
 app.filter('cardSearchFilter', function() {
 	return function(cards, searchString) {
 		var _result = {};
 		var rules = {
 			title: searchString,
-			owner: searchString,
+			//owner: searchString,
 		};
 		angular.forEach(cards, function(card){
 			var _card = card;
@@ -587,7 +641,12 @@ app.filter('cardSearchFilter', function() {
 				}
 			});
 		});
-		return _result;
+
+		var arrayResult = $.map(_result, function(value, index) {
+			return [value];
+		});
+
+		return arrayResult;
 	};
 });
 app.filter('lightenColorFilter', function() {
@@ -701,17 +760,15 @@ app.directive('avatar', function() {
 	'use strict';
 	return {
 		restrict: 'A',
-		scope: false,
+		scope: true,
-		link: function(scope, elm, attr) {
+		link: function(scope, element, attr){
-			return attr.$observe('user', function() {
+			attr.$observe('displayname', function(value){
-				if (attr.user) {
+				console.log(value);
-					var url = OC.generateUrl('/avatar/{user}/{size}',
+				if(value!==undefined) {
-						{user: attr.user, size: Math.ceil(attr.size * window.devicePixelRatio)});
+					$(element).avatar(value, 32);
-					var inner = '<img src="'+url+'" />';
-					elm.html(inner);
-					//elm.avatar(attr.user, attr.size);
 				}
 			});
+
 		}
 	};
 });
@@ -1067,7 +1124,19 @@ app.factory('CardService', ["ApiService", "$http", "$q", function(ApiService, $h
     CardService.prototype.archive = function (card) {
         var deferred = $q.defer();
         var self = this;
-        $http.put(this.baseUrl + '/' + card.id + '/archive').then(function (response) {
+        $http.put(this.baseUrl + '/' + card.id + '/archive', {}).then(function (response) {
+            deferred.resolve(response.data);
+        }, function (error) {
+            deferred.reject('Error while update ' + self.endpoint);
+        });
+        return deferred.promise;
+
+    };
+
+    CardService.prototype.unarchive = function (card) {
+        var deferred = $q.defer();
+        var self = this;
+        $http.put(this.baseUrl + '/' + card.id + '/unarchive', {}).then(function (response) {
             deferred.resolve(response.data);
         }, function (error) {
             deferred.reject('Error while update ' + self.endpoint);
@@ -1092,6 +1161,7 @@ app.factory('StackService', ["ApiService", "$http", "$q", function(ApiService, $
         ApiService.call(this, $http, ep, $q);
     };
     StackService.prototype = angular.copy(ApiService.prototype);
+    StackService.prototype.dataFiltered = {};
     StackService.prototype.fetchAll = function(boardId) {
         var deferred = $q.defer();
         var self=this;
@@ -1139,6 +1209,7 @@ app.factory('StackService', ["ApiService", "$http", "$q", function(ApiService, $
             }
         }
     };
+    
     service = new StackService($http, 'stacks', $q);
     return service;
 }]);
@@ -1149,8 +1220,8 @@ app.factory('StatusService', function(){
     var StatusService = function() {
         this.active = true;
         this.icon = 'loading';
-        this.title = 'Please wait';
+        this.title = '';
-        this.text = 'Es dauert noch einen kleinen Moment';
+        this.text = '';
         this.counter = 0;
     }
 
@@ -1182,8 +1253,8 @@ app.factory('StatusService', function(){
     StatusService.prototype.retainWaiting = function() {
         this.active = true;
         this.icon = 'loading';
-        this.title = 'Please wait';
+        this.title = '';
-        this.text = 'Es dauert noch einen kleinen Moment';
+        this.text = '';
         this.counter++;
     }
 

js/service/CardService.js

@@ -54,7 +54,19 @@ app.factory('CardService', function(ApiService, $http, $q){
     CardService.prototype.archive = function (card) {
         var deferred = $q.defer();
         var self = this;
-        $http.put(this.baseUrl + '/' + card.id + '/archive').then(function (response) {
+        $http.put(this.baseUrl + '/' + card.id + '/archive', {}).then(function (response) {
+            deferred.resolve(response.data);
+        }, function (error) {
+            deferred.reject('Error while update ' + self.endpoint);
+        });
+        return deferred.promise;
+
+    };
+
+    CardService.prototype.unarchive = function (card) {
+        var deferred = $q.defer();
+        var self = this;
+        $http.put(this.baseUrl + '/' + card.id + '/unarchive', {}).then(function (response) {
             deferred.resolve(response.data);
         }, function (error) {
             deferred.reject('Error while update ' + self.endpoint);

js/service/StackService.js

@@ -3,6 +3,7 @@ app.factory('StackService', function(ApiService, $http, $q){
         ApiService.call(this, $http, ep, $q);
     };
     StackService.prototype = angular.copy(ApiService.prototype);
+    StackService.prototype.dataFiltered = {};
     StackService.prototype.fetchAll = function(boardId) {
         var deferred = $q.defer();
         var self=this;
@@ -50,6 +51,7 @@ app.factory('StackService', function(ApiService, $http, $q){
             }
         }
     };
+    
     service = new StackService($http, 'stacks', $q);
     return service;
 });

js/service/StatusService.js

@@ -3,8 +3,8 @@ app.factory('StatusService', function(){
     var StatusService = function() {
         this.active = true;
         this.icon = 'loading';
-        this.title = 'Please wait';
+        this.title = '';
-        this.text = 'Es dauert noch einen kleinen Moment';
+        this.text = '';
         this.counter = 0;
     }
 
@@ -36,8 +36,8 @@ app.factory('StatusService', function(){
     StatusService.prototype.retainWaiting = function() {
         this.active = true;
         this.icon = 'loading';
-        this.title = 'Please wait';
+        this.title = '';
-        this.text = 'Es dauert noch einen kleinen Moment';
+        this.text = '';
         this.counter++;
     }
 

service/boardservice.php

@@ -33,6 +33,7 @@ class BoardService {
         $this->labelMapper = $labelMapper;
         $this->aclMapper = $aclMapper;
         $this->logger = $logger;
+        $this->l10n = $l10n;
     }
 
     public function findAll($userId) {
@@ -58,11 +59,16 @@ class BoardService {
         $new_board = $this->boardMapper->insert($board);
 
         // create new labels
-        $default_labels = ['31CC7C', '317CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'];
+        $default_labels = [
+            '31CC7C' => $this->l10n->t('Finished'),
+            '317CCC' => $this->l10n->t('To review'),
+            'FF7A66' => $this->l10n->t('Action needed'),
+            'F1DB50' => $this->l10n->t('Maybe')];
         $labels = [];
-        foreach ($default_labels as $color) {
+        foreach ($default_labels as $color=>$title) {
             $label = new Label();
             $label->setColor($color);
+            $label->setTitle($title);
             $label->setBoardId($new_board->getId());
             $labels[] = $this->labelMapper->insert($label);
         }

templates/part.board.mainView.php

@@ -4,105 +4,120 @@
 		<h2>{{ statusservice.title }}</h2>
 		<p>{{ statusservice.text }}</p></div>
 </div>
-<div id="board-header" style="background-color: {{boardservice.getCurrent().color | lightenColorFilter}}; color: {{boardservice.getCurrent().color | textColorFilter }};">
+<div id="board-header"
+	 style="background-color: {{boardservice.getCurrent().color | lightenColorFilter }}; color: {{boardservice.getCurrent().color | textColorFilter }};">
 	<h1>
 		{{ boardservice.data[id].title }}
 		<div id="board-actions">
-        <!--
+			<div class="board-action-button" ng-if="filter!='archive'"><a class="fa fa-archive" ng-click="switchFilter('archive')" style="opacity:0.5;"> </a></div>
-        <div><i class="fa fa-filter"> </i> Filter</div>
+			<div class="board-action-button" ng-if="filter=='archive'"><a class="fa fa-archive" ng-click="switchFilter('')"> </a></div>
-        <div><i class="icon icon-search"> </i> {{ searchText }}</div>
+			<div class="board-action-button"><a class="fa fa-info"	ui-sref="board.detail({ id: id })"> </a>
-        <div class="filter"><span class="filter-button" ng-click="status.filter.label=!status.filter.label">by label <i class="fa  fa-caret-down"> </i></span></div>
+			</div>
-        <ul class="filter-select bubble" ng-if="status.filter.label">
-            <li ng-repeat="label in boardservice.data[id].labels"><span style="background-color:#{{ label.color }};"> </span> {{ label.title }}</li>
-        </ul>
-        <div class="filter"><span class="filter-button" ng-click="status.filter.assignee=!status.filter.assignee">by assignee<i class="fa  fa-caret-down"> </i></span></div>
-        <ul class="filter-select bubble" ng-if="status.filter.assignee">
-            <li ng-repeat="label in boardservice.data[id].labels"><span style="background-color:#{{ label.color }};"> </span> {{ label.title }}</li>
-        </ul>
-        //-->
-
-        <div class="board-action-button"><a class="fa fa-archive" ui-sref="board.archive({ id: id })"> </a></div>
-        <div class="board-action-button"><a class="fa fa-info" ui-sref="board.detail({ id: id })"> </a></div>
-
 		</div>
 	</h1>
 </div>
 <div id="board" class="scroll-container">
 
-
 	<search on-search="search" class="ng-hide"></search>
 
-
-
 	<div id="innerBoard" data-ng-model="stacks">
-    <div class="stack" ng-repeat="s in stackservice.data" data-columnindex="{{$index}}" id="column{{$index}}" data-ng-model="stackservice.data"  style="border: 5px solid #{{ boardservice.getCurrent().color }};">
+		<div class="stack" ng-repeat="s in stacks"
+			 data-columnindex="{{$index}}" id="column{{$index}}"
+			 data-ng-model="stackservice.data" style="">
 			<h2><span ng-show="!s.status.editStack">{{ s.title }}</span>
 				<form ng-submit="stackservice.update(s)">
-          <input type="text" placeholder="Add a new stack" ng-blur="s.status.editStack=false" ng-model="s.title" ng-if="s.status.editStack" autofocus-on-insert required />
+					<input type="text" placeholder="Add a new stack"
-          <button class="icon icon-save" ng-if="s.status.editStack" type="submit"></button>
+						   ng-blur="s.status.editStack=false" ng-model="s.title"
+						   ng-if="s.status.editStack" autofocus-on-insert
+						   required/>
+					<button class="icon icon-save" ng-if="s.status.editStack"
+							type="submit"></button>
 				</form>
 				<div class="stack-actions">
-             <button class="icon-rename" ng-click="s.status.editStack=true"></button>
+					<button class="icon-rename"
-              <button class="icon-delete" ng-click="stackservice.delete(s.id)"></button>
+							ng-click="s.status.editStack=true"></button>
+					<button class="icon-delete"
+							ng-click="stackservice.delete(s.id)"></button>
 				</div>
 			</h2>
-        <ul data-as-sortable="sortOptions" data-ng-model="s.cards"  style="min-height: 40px;">
+			<ul data-as-sortable="sortOptions" is-disabled="filter==='archive'" data-ng-model="s.cards"
-      <li class="card as-sortable-item" ng-repeat="c in s.cards | cardSearchFilter: searchText | orderObjectBy:'order'" data-as-sortable-item  ui-sref="board.card({boardId: id, cardId: c.id})" ng-class="{'archived': c.archived }">
+				style="min-height: 40px;">
+				<li class="card as-sortable-item"
+					ng-repeat="c in s.cards"
+					data-as-sortable-item
+					ui-sref="board.card({boardId: id, cardId: c.id})"
+					ng-class="{'archived': c.archived, 'has-labels': c.labels }">
 					<div data-as-sortable-item-handle>
 						<div class="card-upper">
 							<h3>{{ c.title }}</h3>
 							<ul class="labels">
-                <li ng-repeat="label in c.labels" style="background-color: #{{ label.color }};"><span>{{ label.title }}</span>
+								<li ng-repeat="label in c.labels"
+									style="background-color: #{{ label.color }};">
+									<span>{{ label.title }}</span>
 								</li>
 							</ul>
 
 						</div>
-			  <button class="card-options icon-more" ng-click="c.status.showMenu=!c.status.showMenu; $event.stopPropagation();" ng-model="card"></button>
+						<button class="card-options icon-more"
-			  <div class="popovermenu bubble" ng-show="c.status.showMenu"><ul>
+								ng-click="c.status.showMenu=!c.status.showMenu; $event.stopPropagation();"
-					  <li><a class="menuitem action action-rename permanent" data-action="Rename"><span class="icon icon-rename"></span><span>Umbenennen</span></a></li>
+								ng-model="card"></button>
-					  <li><a class="menuitem action action-rename permanent" data-action="Rename" ng-click="cardservice.archive(c); $event.stopPropagation();"><span class="fa fa-archive"></span><span>Archive</span></a></li>
+						<div class="popovermenu bubble"
-					  <li><a class="menuitem action action-delete permanent" data-action="Delete" ng-click="cardDelete(c)"><span class="icon icon-delete"></span><span>Löschen</span></a></li></ul>
+							 ng-show="c.status.showMenu">
+							<ul>
+								<li ng-if="filter!=='archive'">
+									<a class="menuitem action action-rename permanent"
+									   data-action="Archive"
+									   ng-click="cardArchive(c); $event.stopPropagation();"><span
+											class="fa fa-archive"></span><span><?php p($l->t('Archive')); ?></span></a>
+								</li>
+								<li ng-if="filter==='archive'">
+									<a class="menuitem action action-rename permanent"
+									   data-action="Unarchive"
+									   ng-click="cardUnarchive(c); $event.stopPropagation();"><span
+											class="fa fa-archive"></span><span><?php p($l->t('Unarchive')); ?></span></a>
+								</li>
+								<li>
+									<a class="menuitem action action-delete permanent"
+									   data-action="Delete"
+									   ng-click="cardDelete(c)"><span
+											class="icon icon-delete"></span><span><?php p($l->t('Delete')); ?></span></a>
+								</li>
+							</ul>
 						</div>
-		<div class="card-assignees">
+						<div class="card-assignees" ng-if="c.assignees">
 							<!--   <div class="avatar" avatar user="{{c.owner}}" size="24"></div>//-->
 						</div>
 						<!--<span class="info due"><i class="fa fa-clock-o" aria-hidden="true"></i> <span>Today</span></span>
 						<span class="info tasks"><i class="fa fa-list" aria-hidden="true"></i> <span>3/12</span></span>
-        <span class="info members"><i class="fa fa-users" aria-hidden="true"></i> <span>4</span></span>
 						//-->
 
 
-          </div>
-      </li></ul>
-        <ul>
-            <li class="card archived" ng-repeat="card in s.cards | cardSearchFilter: searchText | orderObjectBy:'lastModified'" ui-sref="board.card({boardId: id, cardId: c.id})">
-                <div>
-                    <div class="card-upper">
-                        <h3>{{ card.title }}</h3>
-                        <ul class="labels">
-                            <li ng-repeat="label in c.labels" style="background-color: #{{ label.color }};"><span>{{ label.title }}</span>
-                            </li>
-                        </ul>
-                    </div>
-                    <button class="card-options fa fa-archive"></button>
 					</div>
 				</li>
 			</ul>
 			<!-- CREATE CARD //-->
-      <div class="card create" style="background-color:#{{ boardservice.getCurrent().color }};">
+			<div class="card create"
+				 style="background-color:#{{ boardservice.getCurrent().color }};" ng-if="checkCanEdit()">
 				<form ng-submit="createCard(s.id, newCard.title)">
 					<h3 ng-if="s.status.addCard">
-                <input type="text" autofocus-on-insert ng-model="newCard.title" ng-blur="s.status.addCard=false" required />
+						<input type="text" autofocus-on-insert
+							   ng-model="newCard.title"
+							   ng-blur="s.status.addCard=false" required/>
 					</h3>
 				</form>
-        <div class="fa fa-plus" ng-if="!s.status.addCard" ng-click="s.status.addCard=!s.status.addCard"></div>
+				<div class="fa fa-plus" ng-if="!s.status.addCard"
+					 ng-click="s.status.addCard=!s.status.addCard"></div>
 			</div>
 		</div>
-    <div class="stack" style="display: inline-block;">
+		<div class="stack" style="display: inline-block;" ng-if="checkCanEdit()">
 			<form class="ng-pristine ng-valid" ng-submit="createStack()">
 				<h2>
-            <input type="text" placeholder="Add a new stack" ng-focus="status.addStack=true" ng-blur="status.addStack=false" ng-model="newStack.title" required />
+					<input type="text" placeholder="Add a new stack"
-            <button class="icon icon-add" ng-show="status.addStack" type="submit"></button>
+						   ng-focus="status.addStack=true"
+						   ng-blur="status.addStack=false"
+						   ng-model="newStack.title" required/>
+					<button class="icon icon-add" ng-show="status.addStack"
+							type="submit"></button>
 				</h2>
 			</form>
 		</div>

templates/part.board.sidebarView.php

@@ -11,15 +11,14 @@
 
 
 <ul class="tabHeaders">
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a>Sharing</a></li>
+    <li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a><?php p($l->t('Sharing')); ?></a></li>
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a>Labels</a></li>
+    <li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a><?php p($l->t('Labels')); ?></a></li>
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==2)}" ng-click="status.boardtab=2"><a>Settings</a></li>
 </ul>
 <div class="tabsContainer">
     <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==0 || !status.boardtab">
 
         <ui-select ng-model="status.addSharee" theme="bootstrap" style="width:100%;" title="Choose a user to assign" placeholder="Assign users ..." on-select="addAcl(status.addSharee)">
-            <ui-select-match placeholder="Select users...">
+            <ui-select-match placeholder="<?php p($l->t('Select users...')); ?>">
                 <span><i class="fa fa-{{$item.type}}"></i> {{ $item.participant }}</span>
             </ui-select-match>
             <!-- FIXME: filter by selected or add multiple //-->
@@ -27,30 +26,38 @@
                 <span><i class="fa fa-{{sharee.type}}"></i> {{ sharee.participant }}</span>
             </ui-select-choices>
             <ui-select-no-choice>
-                Dang!  We couldn't find any choices...
+            <?php p($l->t('Dang!  We couldn\'t find any choices...')); ?>
             </ui-select-no-choice>
         </ui-select>
 
         <ul id="shareWithList" class="shareWithList">
+            <li>
+                <span class="icon-loading-small" style="display:none;"></span>
+                <div class="avatardiv" avatar ng-attr-displayname="{{ boardservice.getCurrent().owner }}" ng-if="boardservice.id"></div>
+                <span class="has-tooltip username">
+                    {{ boardservice.getCurrent().owner }}</span>
+                <span class="shareOption"><?php p($l->t('Board owner')); ?></span>
+            </li>
             <li ng-repeat="acl in boardservice.getCurrent().acl track by $index">
                 <span class="icon-loading-small" style="display:none;"></span>
-                <div class="avatar " data-username="directmenu" style="height: 32px; width: 32px; color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 32px; font-size: 17.6px; background-color: rgb(195, 222, 124);">D</div>
+                <div class="avatardiv" avatar displayname="{{ acl.participant }}" ng-if="acl.type=='user'"></div>
+                <div class="avatardiv" ng-if="acl.type=='group'"><i class="fa fa-{{acl.type}}"></i></div>
+
                 <span class="has-tooltip username">
-                    <i class="fa fa-{{acl.type}}"></i>
                     {{ acl.participant }}</span>
                 <span class="shareOption">
                     <input type="checkbox" class="permissions checkbox" id="checkbox-permission-{{ acl.id }}-share" ng-model="acl.permissionInvite" ng-change="updateAcl(acl)" />
-                    <label for="checkbox-permission-{{ acl.id }}-share">teilen</label>
+                    <label for="checkbox-permission-{{ acl.id }}-share"><?php p($l->t('Share')); ?></label>
                 </span>
                 <span class="shareOption">
                     <input type="checkbox" class="permissions checkbox" id="checkbox-permission-{{ acl.id }}-edit" ng-model="acl.permissionWrite" ng-change="updateAcl(acl)" />
-                    <label for="checkbox-permission-{{ acl.id }}-edit">bearbeiten</label>
+                    <label for="checkbox-permission-{{ acl.id }}-edit"><?php p($l->t('Edit')); ?></label>
                 </span>
                 <span class="shareOption">
                     <input type="checkbox" class="permissions checkbox" id="checkbox-permission-{{ acl.id }}-manage" ng-model="acl.permissionManage" ng-change="updateAcl(acl)" />
-                    <label for="checkbox-permission-{{ acl.id }}-manage">verwalten</label>
+                    <label for="checkbox-permission-{{ acl.id }}-manage"><?php p($l->t('Manage')); ?></label>
                 </span>
-                <a class="unshare" ng-click="deleteAcl(acl)"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">Freigabe aufheben</span></a>
+                <a class="unshare" ng-click="deleteAcl(acl)"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually"><?php p($l->t('Discard share')); ?></span></a>
             </li>
         </ul>
 
@@ -85,16 +92,9 @@
                     </form>
                 </li>
                 <li ng-if="!status.createLabel">
-                    <a ng-click="status.createLabel=true"><span class="fa fa-plus"> </span> Create a new Label</a>
+                    <a ng-click="status.createLabel=true"><span class="fa fa-plus"> </span> <?php p($l->t('Create a new label')); ?></a>
                 </li>
             </ul>
 
     </div>
-    <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==2">
-        <p><input type="checkbox" class="checkbox" id="allowInvite" /> <label for="allowInvite">Allow members to invite other users</label></p>
-        <p><input type="checkbox" class="checkbox" id="allowInvite" /> <label for="allowInvite">Allow members to make board public</label></p>
-        <p><input type="checkbox" class="checkbox" id="allowInvite" /> <label for="allowInvite">Allow members to change labels</label></p>
-        <p><input type="checkbox" class="checkbox" id="allowInvite" /> <label for="allowInvite">Allow members to create new stacks</label></p>
-
-    </div>
 </div>

templates/part.boardlist.php

@@ -3,48 +3,51 @@
 		<thead>
 		<tr>
 			<td class="cell-board-bullet"></td>
-            <td class="cell-board-title">Board Title</td>
+			<td class="cell-board-title" width="90%"><?php p($l->t('Board title')); ?></td>
-            <td class="cell-board-members">Members</td>
+			<td class="cell-board-members"><?php p($l->t('Members')); ?></td>
-            <td class="cell-board-actions">Actions</td>
-
 		</tr>
 		</thead>
 		<tbody>
-        <tr data-ng-repeat="b in boardservice.data" ui-sref="board({boardId: b.id})">
+		<tr data-ng-repeat="b in boardservice.data"
+			ui-sref="board({boardId: b.id})">
 			<td>
-                <span class="board-bullet"  style="background-color:#{{b.color}};"> </span>
+				<span class="board-bullet"
+					  style="background-color:#{{b.color}};"> </span>
 			</td>
 			<td><a href="#/board/{{b.id}}">{{ b.title }}</a></td>
 			<td>
 				<div id="assigned-users">
-                    <!--<div class="avatardiv" style="height: 30px; width: 30px; color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 30px; font-size: 17px; background-color: rgb(213, 231, 116);">D</div>//-->
+					<div class="avatardiv" avatar
+						 displayname="{{ b.owner }}"></div>
+					<div class="avatardiv" avatar
+						 displayname="{{ acl.participant }}"
+						 ng-repeat="acl in b.acl | limitTo: 7"></div>
 				</div>
-
 			</td>
-            <td>
-                    <a class="action action-share permanent" href="#" data-action="Share" data-original-title="" title=""><span class="icon icon-share"></span><span class="hidden-visually">Sharing</span></a>
-                    <a class="action action-menu permanent" href="#" data-action="menu" data-original-title="" title=""><span class="icon icon-more"></span><span class="hidden-visually">Aktionen</span></a>
-</td>
-
 		</tr>
 		<tr>
 			<td><span class="icon icon-add"></span></td>
 			<td>
-                <a ng-click="status.addBoard=!status.addBoard" ng-show="!status.addBoard">
+				<a ng-click="status.addBoard=!status.addBoard"
-                    Board erstellen
+				   ng-show="!status.addBoard">
+					<?php p($l->t('Create new board')); ?>
 				</a>
-                <form ng-show="status.addBoard" ng-disabled="isAddingList" class="ng-pristine ng-valid"  ng-submit="createBoard()">
+				<form ng-show="status.addBoard" ng-disabled="isAddingList"
-                    <input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="Neue Liste" autofocus-on-insert ng-model="newBoard.title">
+					  class="ng-pristine ng-valid" ng-submit="createBoard()">
+					<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">
 					<div class="colorselect">
-                        <div class="color" ng-repeat="c in colors" style="background-color:#{{ c }};" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color) }"><br /></div>
+						<div class="color" ng-repeat="c in colors"
+							 style="background-color:#{{ c }};"
+							 ng-click="selectColor(c)"
+							 ng-class="{'selected': (c == newBoard.color) }">
+							<br/></div>
 					</div>
 					<input type="submit" value="" class="icon-checkmark svg">
-
 				</form>
 			</td>
 			<td></td>
-            <td></td>
-
 		</tr>
 		</tbody>
 	</table>

templates/part.card.php

@@ -10,69 +10,98 @@
 	<h2>
 		<form ng-submit="renameCard(cardservice.getCurrent())">
 			<!-- TODO: change to textarea elastic //-->
-            <input class="input-inline" type="text" ng-if="status.renameCard" ng-model="cardservice.getCurrent().title" ng-blur="renameCard(cardservice.getCurrent())" autofocus-on-insert required>
+			<input class="input-inline" type="text" ng-if="status.renameCard"
+				   ng-model="cardservice.getCurrent().title"
+				   ng-blur="renameCard(cardservice.getCurrent())"
+				   autofocus-on-insert required>
 		</form>
-        <div ng-click="status.renameCard=true" ng-show="!status.renameCard">{{ cardservice.getCurrent().title }}</div>
+		<div ng-click="status.renameCard=true" ng-show="!status.renameCard">{{
+			cardservice.getCurrent().title }}
+		</div>
 	</h2>
 </div>
 
 <div id="card-meta" class="card-block">
 	<div id="card-dates">
-            Modified: <span>{{ cardservice.getCurrent().lastModified*1000|date:'medium' }}</span>
+		<?php p($l->t('Modified:')); ?> <span>{{ cardservice.getCurrent().lastModified*1000|date:'medium' }}</span>
-            Created: <span>{{ cardservice.getCurrent().createdAt*1000|date:'medium' }}</span>
+		<?php p($l->t('Created:')); ?> <span>{{ cardservice.getCurrent().createdAt*1000|date:'medium' }}</span>
-            by <span>{{ cardservice.getCurrent().owner }}</span>
+		<?php p($l->t('by')); ?>
+		<span>{{ cardservice.getCurrent().owner }}</span>
 	</div>
 
-        <ui-select multiple tagging="" ng-model="card.labels" theme="bootstrap" style="width:100%;" title="Choose a label" placeholder="Add a label"
+	<div id="labels">
-                   on-select="labelAssign($item, $model)" on-remove="labelRemove($item, $model)">
+		<ui-select multiple tagging="" ng-model="card.labels" theme="bootstrap"
-            <ui-select-match placeholder="Select labels..."><span class="select-label" style="background-color:#{{$item.color}}">{{$item.title}}</span></ui-select-match>
+				   style="width:100%;" title="Choose a label"
-            <ui-select-choices repeat="label in boardservice.getCurrent().labels | filter:$select.search">
+				   placeholder="Add a label"
-                <span style="background-color:#{{label.color}}">{{label.title}}</span>
+				   on-select="labelAssign($item, $model)"
-            </ui-select-choices>
+				   on-remove="labelRemove($item, $model)">
-        </ui-select>
+			<ui-select-match placeholder="Select labels..."><span
-
+					class="select-label"
-    <div id="assigned-users">
+					style="background-color:#{{$item.color}}">{{$item.title}}</span>
-        <ui-select multiple tagging="" ng-model="card.assignees" theme="bootstrap" style="width:100%;" title="Choose a user to assign" placeholder="Assign users ..."
+			</ui-select-match>
-                   on-select="userAssign($item, $model)" on-remove="userRemove($item, $model)">
+			<ui-select-choices
-            <ui-select-match placeholder="Select users...">{{$item.title}}</ui-select-match>
+				repeat="label in boardservice.getCurrent().labels | filter:$select.search">
-            <ui-select-choices repeat="label in boardservice.getCurrent().labels | filter:$select.search">
+				<span
-                <span style="background-color:#{{label.color}}">{{label.title}}</span>
+					style="background-color:#{{label.color}}">{{label.title}}</span>
 			</ui-select-choices>
 		</ui-select>
 	</div>
 
+	<!--<div id="assigned-users">
+		<ui-select multiple tagging="" ng-model="card.assignees"
+				   theme="bootstrap" style="width:100%;"
+				   title="Choose a user to assign"
+				   placeholder="Assign users ..."
+				   on-select="userAssign($item, $model)"
+				   on-remove="userRemove($item, $model)">
+			<ui-select-match placeholder="Select users...">{{$item.title}}
+			</ui-select-match>
+			<ui-select-choices
+				repeat="label in boardservice.getCurrent().labels | filter:$select.search">
+				<span
+					style="background-color:#{{label.color}}">{{label.title}}</span>
+			</ui-select-choices>
+		</ui-select>
+	</div>//-->
+
 	<div id="card-description">
 		<h3>Description</h3>
-    <textarea elastic ng-if="status.description" placeholder="Enter your description here ..." ng-blur="updateCard(cardservice.getCurrent())" ng-model="cardservice.getCurrent().description" autofocus-on-insert> </textarea>
+		<textarea elastic ng-if="status.description"
-    <div class="container" ng-click="editDescription()" ng-show="!status.description" ng-animate><div ng-bind-html="cardservice.getCurrent().description | markdown" id="markdown"></div><div class="placeholder" ng-if="!cardservice.getCurrent().description">Add a card description ...</div></div>
+				  placeholder="Enter your description here ..."
+				  ng-blur="updateCard(cardservice.getCurrent())"
+				  ng-model="cardservice.getCurrent().description"
+				  autofocus-on-insert> </textarea>
+		<div class="container" ng-click="editDescription()"
+			 ng-show="!status.description" ng-animate>
+			<div ng-bind-html="cardservice.getCurrent().description | markdown"
+				 id="markdown"></div>
+			<div class="placeholder"
+				 ng-if="!cardservice.getCurrent().description"><?php p($l->t('Add a card description ...')); ?></div>
+		</div>
 
 	</div>
 
 
 </div>
 
-
+<!--
 <ul class="tabHeaders">
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a>Attachments</a></li>
+    <li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a><?php p($l->t('Attachments')); ?></a></li>
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a>Comments</a></li>
+    <li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a><?php p($l->t('Comments')); ?></a></li>
-    <li class="tabHeader" ng-class="{'selected': (status.boardtab==2)}" ng-click="status.boardtab=2"><a>History</a></li>
+    <li class="tabHeader" ng-class="{'selected': (status.boardtab==2)}" ng-click="status.boardtab=2"><a><?php p($l->t('History')); ?></a></li>
 </ul>
 <div class="tabsContainer">
     <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==0 || !status.boardtab">
-
         <div id="card-attachments">
             <button ng-click="status.addAttachment=true"><i class="fa fa-plus"></i> Add an attachment</button>
             <div ng-if="status.addAttachment" id="attachment-add">
             <button><i class="fa fa-file"></i> Attach a File</button>
             <button><i class="fa fa-link"></i> Attach a URL</button>
-            <button><i class="fa fa-calendar"></i> Attach an Event</button>
-            <button><i class="fa fa-user"></i> Attach an Contact</button>
-            <button><i class="fa fa-image"></i> Attach an Image</button>
             </div>
             <ul>
                 <li>
                     <a href="#">
-                        <span class="fa fa-file"></span> clienta_webdesign_darft_032.pdf
+                        <span class="fa fa-file"></span> myfilename.pdf
                         <div class="details">
                             <span class="user">Added by John Doe at</span>
                             <span class="added">1.3.2014 14:13</span>
@@ -81,41 +110,11 @@
                 </li>
             </ul>
         </div>
-
-
-
     </div>
     <div id="board-detail-labels" class="tab commentsTabView" ng-if="status.boardtab==1">
-
-
-
     </div>
     <div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==2">
-
     </div>
 </div>
 
-
+//-->
-<!--
-
-<div class="card-block">
-
-<h3>Comments</h3>
-</div>
-<div class="card-block">
-<h3>Build Status</h3>
-    <p>
-        Autem inventore et exercitationem quas voluptatem perspiciatis nostrum. Eligendi numquam officia quas facere voluptas mollitia. Blanditiis quia eveniet ipsum magnam. Et consectetur repellat eum odio impedit dolorem veritatis. Aperiam delectus qui quis enim consequatur nihil. Provident molestiae et occaecati facere.
-        Quod perspiciatis ea dolores nostrum numquam rerum consectetur ut. Ex voluptatem fugiat officia voluptas et officia eaque consequatur. Voluptas minus soluta minima consequatur aspernatur ad voluptas. Neque et deleniti sunt a reprehenderit rerum.
-        Non rerum natus recusandae dolorem nihil. Impedit dolore molestiae dolorum aspernatur. Impedit nulla dolore amet consectetur voluptatem iusto sit. Repellendus in pariatur officiis eos necessitatibus saepe est ut. Quia vel adipisci voluptate expedita hic. Ad sed quia aut inventore consequatur.
-        Quia quia qui aspernatur cumque quo omnis corporis. Reprehenderit id sint architecto magni in. Et harum sequi eaque quasi qui sed id quod.
-        Officia quaerat facere et totam officiis dolores velit qui. Earum velit sint quia. Id libero quibusdam voluptatem.
-    </p>
-    <p>
-    Autem inventore et exercitationem quas voluptatem perspiciatis nostrum. Eligendi numquam officia quas facere voluptas mollitia. Blanditiis quia eveniet ipsum magnam. Et consectetur repellat eum odio impedit dolorem veritatis. Aperiam delectus qui quis enim consequatur nihil. Provident molestiae et occaecati facere.
-    Quod perspiciatis ea dolores nostrum numquam rerum consectetur ut. Ex voluptatem fugiat officia voluptas et officia eaque consequatur. Voluptas minus soluta minima consequatur aspernatur ad voluptas. Neque et deleniti sunt a reprehenderit rerum.
-    Non rerum natus recusandae dolorem nihil. Impedit dolore molestiae dolorum aspernatur. Impedit nulla dolore amet consectetur voluptatem iusto sit. Repellendus in pariatur officiis eos necessitatibus saepe est ut. Quia vel adipisci voluptate expedita hic. Ad sed quia aut inventore consequatur.
-    Quia quia qui aspernatur cumque quo omnis corporis. Reprehenderit id sint architecto magni in. Et harum sequi eaque quasi qui sed id quod.
-    Officia quaerat facere et totam officiis dolores velit qui. Earum velit sint quia. Id libero quibusdam voluptatem.
-</p>
-</div>// -->

templates/part.navigation.php

@@ -1,21 +1,21 @@
 <ul class="with-icon">
 
-	<li><a href="#" class="">All Boards</a></li>
+	<li><a href="#" class=""><?php p($l->t('All Boards')); ?></a></li>
 	<!--
 	<li><a href="#" class="icon-starred">Starred Boards</a></li>
 	<li><a href="#" class="icon-share">Shared Boards</a></li>
 	<li><a href="#" class="icon-public">Public Boards</a></li>
 	//-->
 
-	<li class="with-menu" data-ng-repeat="b in boardservice.data">
+	<li class="with-icon with-menu" data-ng-repeat="b in boardservice.data">
 		<span class="board-bullet"  style="background-color:#{{b.color}};" ng-if="!b.status.edit"> </span>
-		<a href="#/board/{{b.id}}" ng-if="!b.status.edit">{{ b.title }}</a>
+		<a href="#/board/{{b.id}}/" ng-if="!b.status.edit">{{ b.title }}</a>
-		<div class="app-navigation-entry-utils" ng-show="!b.status.edit">
+		<div class="app-navigation-entry-utils" ng-show="!b.status.edit" style="position:absolute;">
 			<ul>
 				<li class="app-navigation-entry-utils-menu-button svg"><button class="icon-more"></button></li>
 			</ul>
 		</div>
-		<div class="app-navigation-entry-menu" ng-show="!b.status.edit">
+		<div class="app-navigation-entry-menu app-navigation-noclose" ng-show="!b.status.edit">
 			<ul>
 				<li><button class="icon-share svg" title="share"></button></li>
 				<li><button class="icon-rename svg" title="rename" ng-click="b.status.edit=true"></button></li>
@@ -40,15 +40,16 @@
 
 	<!-- Add new Board //-->
 	<li>
-		<a ng-click="status.addBoard=!status.addBoard" ng-show="!status.addBoard" class="icon-add">
+		<a ng-click="status.addBoard=!status.addBoard" ng-show="!status.addBoard" class="icon-add app-navigation-noclose">
-			Board erstellen
+			<?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="createBoard()">
-				<input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="Neue Liste" autofocus-on-insert ng-model="newBoard.title">
+				<input id="newTitle" class="edit ng-valid ng-empty" type="text" placeholder="<?php p($l->t('Board title')); ?>" autofocus-on-insert ng-model="newBoard.title">
 				<input type="submit" value="" class="action icon-checkmark svg">
 				<div class="colorselect">
-					<div class="color" ng-repeat="c in colors" style="background-color:#{{ c }};" ng-click="selectColor(c)" ng-class="{'selected': (c == newBoard.color) }"><br /></div>
+					<div class="color" ng-repeat="c in colors" style="background-color:#{{ c }};" ng-click="selectColor(c)" n:w
+          g-class="{'selected': (c == newBoard.color) }"><br /></div>
 				</div>
 			</form>
 		</div>

templates/part.settings.php

@@ -5,11 +5,7 @@
 		></button>
 	</div>
 	<div id="app-settings-content">
-		We will provide some options here!
+		<?php p($l->t('We will provide some options here!')); ?>
 		<br />
-		<input type="checkbox" /> Show labels on cards<br />
-		<input type="checkbox" /> Show summary on cards<br />
-		<input type="checkbox" /> Show members on cards<br />
-		<input type="checkbox" /> Show archived cards
 	</div>
 </div>