Rework parameter handling, highlight active card and allow switching tabs in the board sidebar

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/style.scss

@@ -134,6 +134,22 @@ input.input-inline {
 			min-height: 96px;
 		}
 	}
+
+	.card {
+		opacity: 1;
+	}
+
+	&.card-selected {
+
+		.card {
+			opacity: 0.7;
+
+			&.current {
+				opacity: 1.0;
+				box-shadow: 0px 0px 7px 0px $color-darkgrey;
+			}
+		}
+	}
 }
 
 #innerBoard {
@@ -326,7 +342,6 @@ input.input-inline {
 	margin: 10px 10px 20px 10px;
 	white-space: normal;
 	position: relative;
-	opacity: 1.0;
 	box-shadow: 0 0 3px $color-darkgrey;
 	border-radius: 3px;
 

js/app/Config.js

@@ -58,6 +58,9 @@ app.config(function ($provide, $routeProvider, $interpolateProvider, $httpProvid
 		.state('board.detail', {
 			url: '/detail/',
 			reloadOnSearch: false,
+			params: {
+				tab: {value: 0, dynamic: true},
+			},
 			views: {
 				'sidebarView': {
 					templateUrl: '/board.sidebarView.html'

js/controller/BoardController.js

@@ -30,7 +30,6 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 		addCard: [],
 	};
 	$scope.newLabel = {};
-	$scope.status.boardtab = $stateParams.detailTab;
 
 	$scope.OC = OC;
 	$scope.stackservice = StackService;
@@ -39,21 +38,28 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	$scope.statusservice = StatusService.getInstance();
 	$scope.labelservice = LabelService;
 	$scope.defaultColors = ['31CC7C', '317CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'];
+	$scope.board = BoardService.getCurrent();
+
+	// workaround for $stateParams changes not being propagated
+	$scope.$watch(function() {
+		return $state.params;
+	}, function (params) {
+		$scope.params = params;
+		console.log(params);
+	}, true);
+	$scope.params = $state;
+
 
 	$scope.search = function (searchText) {
 		$scope.searchText = searchText;
 		$scope.refreshData();
 	};
 
-	$scope.board = BoardService.getCurrent();
-	StackService.clear(); //FIXME: Is this still needed?
-
 	$scope.$watch(function () {
 		return BoardService.getCurrent().title;
 	}, function () {
 		$scope.setPageTitle();
 	});
-
 	$scope.setPageTitle = function () {
 		if (BoardService.getCurrent()) {
 			document.title = BoardService.getCurrent().title + " | Deck - " + oc_defaults.name;
@@ -61,35 +67,31 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 			document.title = "Deck - " + oc_defaults.name;
 		}
 	};
+
 	$scope.statusservice.retainWaiting();
 	$scope.statusservice.retainWaiting();
 
-	// FIXME: ugly solution for archive
-	$scope.$state = $stateParams;
-	$scope.filter = $stateParams.filter;
-	$scope.$watch('$state.filter', function (name) {
-		$scope.filter = name;
-	});
+	// handle filter parameter for switching between archived/unarchived cards
 	$scope.switchFilter = function (filter) {
-		$state.go('.', {filter: filter}, {notify: false});
-		$scope.filter = filter;
+		$state.go('.', {filter: filter});
 	};
-	$scope.$watch('filter', function (name) {
-		if (name === "archive") {
+	$scope.$watch(function() {
+		return $scope.params.filter;
+	}, function (filter) {
+		if (filter === "archive") {
 			$scope.loadArchived();
 		} else {
 			$scope.loadDefault();
 		}
 	});
 
-
 	$scope.stacksData = StackService;
 	$scope.stacks = [];
 	$scope.$watch('stacksData', function (value) {
 		$scope.refreshData();
 	}, true);
 	$scope.refreshData = function () {
-		if ($scope.filter === "archive") {
+		if ($scope.params.filter === "archive") {
 			$scope.filterData('-lastModified', $scope.searchText);
 		} else {
 			$scope.filterData('order', $scope.searchText);

templates/part.board.headerControls.php

@@ -11,15 +11,15 @@
     </form>
 </div>
 
-<a class="button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
+<a class="button" ng-if="params.filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
     <i class="icon icon-archive"></i>
     <span class="hidden-visually"><?php p($l->t('Show archived cards')); ?></span>
 </a>
-<a class="button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
+<a class="button" ng-if="params.filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
     <i class="icon icon-archive"></i>
     <span class="hidden-visually"><?php p($l->t('Hide archived cards')); ?></span>
 </a>
-<a class="button" ui-sref="board.detail({ id: id })"  title="<?php p($l->t('Board details')); ?>">
+<a class="button" ui-sref="board.detail({ id: id, tab: 1})"  title="<?php p($l->t('Board details')); ?>">
     <i class="icon icon-details"></i>
     <span class="hidden-visually"><?php p($l->t('Board details')); ?></span>
 </a>

templates/part.board.mainView.php

@@ -30,8 +30,8 @@
 	</div>
 </div>
 
-<div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board">
-
+<div id="board" class="scroll-container" ng-click="sidebar.show=false" ui-sref="board" ng-class="{'card-selected': params.cardId}">
+ {{ cardOpen }}
 	<search on-search="search" class="ng-hide"></search>
 
 	<div id="innerBoard" data-ng-model="stacks" data-as-sortable="sortOptionsStack">
@@ -49,13 +49,13 @@
 						ng-if="!s.status.editStack"
                         ng-click="stackservice.delete(s.id)"></button>
 			</h3>
-			<ul data-as-sortable="sortOptions" is-disabled="!boardservice.canEdit() || filter==='archive'" data-ng-model="s.cards" class="card-list">
+			<ul data-as-sortable="sortOptions" is-disabled="!boardservice.canEdit() || params.filter==='archive'" data-ng-model="s.cards" class="card-list">
 				<li class="card as-sortable-item"
 					ng-repeat="c in s.cards"
 					data-as-sortable-item
 					ng-click="$event.stopPropagation()"
 					ui-sref="board.card({boardId: id, cardId: c.id})"
-					ng-class="{'archived': c.archived, 'has-labels': c.labels.length>0 }">
+					ng-class="{'archived': c.archived, 'has-labels': c.labels.length>0, 'current': c.id == params.cardId }">
 					<div data-as-sortable-item-handle>
 						<div class="card-upper">
 							<h4>{{ c.title }}</h4>
@@ -83,13 +83,13 @@
 								<button class="button-inline card-options icon-more" ng-model="card"></button>
 								<div class="popovermenu hidden">
 									<ul>
-										<li ng-if="filter!=='archive'">
+										<li ng-if="params.filter!=='archive'">
 											<a class="menuitem action action-rename permanent"
 											   data-action="Archive"
 											   ng-click="cardArchive(c); $event.stopPropagation();"><span
 														class="icon icon-archive"></span><span><?php p($l->t('Archive')); ?></span></a>
 										</li>
-										<li ng-if="filter==='archive'">
+										<li ng-if="params.filter==='archive'">
 											<a class="menuitem action action-rename permanent"
 											   data-action="Unarchive"
 											   ng-click="cardUnarchive(c); $event.stopPropagation();"><span
@@ -112,7 +112,7 @@
 
 			<!-- CREATE CARD //-->
 			<div class="card create" ng-class="{emptyStack: !s.cards.length}"
-				 ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}" ng-if="boardservice.canEdit() && checkCanEdit() && filter!=='archive'">
+				 ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}" ng-if="boardservice.canEdit() && checkCanEdit() && params.filter!=='archive'">
 				<form ng-submit="createCard(s.id, newCard.title)">
 					<h4 ng-if="status.addCard[s.id]">
 						<input type="text" autofocus-on-insert

templates/part.board.sidebarView.php

@@ -14,12 +14,11 @@
 {{board=boardservice.getCurrent();""}}
 
 <ul class="tabHeaders">
-    <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><?php p($l->t('Tags')); ?></a></li>
+    <li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><?php p($l->t('Sharing')); ?></a></li>
+    <li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><?php p($l->t('Tags')); ?></a></li>
 </ul>
 <div class="tabsContainer">
-    <div id="tabBoardShare" class="tab" ng-if="status.boardtab==0 || !status.boardtab">
-
+    <div id="tabBoardShare" class="tab" ng-if="params.tab==0 || !params.tab">
         <ui-select ng-if="boardservice.canShare()" ng-model="status.addSharee" theme="select2"
 				   title="<?php p($l->t('Select users or groups to share with')); ?>"
 				   placeholder="<?php p($l->t('Select users or groups to share with')); ?>"
@@ -74,7 +73,7 @@
         </ul>
 
     </div>
-    <div id="board-detail-labels" class="tab commentsTabView" ng-if="status.boardtab==1">
+    <div id="board-detail-labels" class="tab commentsTabView" ng-if="params.tab==1">
 
             <ul class="labels">
                 <li ng-repeat="label in boardservice.getCurrent().labels">