Use tabbed headers for description and attachments

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

css/style.scss

@@ -727,10 +727,23 @@ input.input-inline {
 			flex: 1;
 		}
 	}
+	.section-header-tabbed {
+		margin-top: 10px;
+		margin-bottom: 5px;
+		flex-shrink: 0;
+		display: flex;
+		.tabHeaders {
+			margin: 0;
+			flex-grow: 1;
+		}
+		.tabDetails {
+			display: flex;
+		}
+	}
 
 	.save-indicator {
 		border-radius: 3px;
-		float: right;
+		margin: 5px;
 		padding: 0 10px;
 		font-size: 8pt;
 		display: none;

js/app/Config.js

@@ -74,6 +74,9 @@ app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterPr
 		})
 		.state('board.card', {
 			url: '/card/:cardId',
+			params: {
+				tab: {value: 0, dynamic: true},
+			},
 			views: {
 				'sidebarView': {
 					templateUrl: '/card.sidebarView.html',

js/controller/BoardController.js

@@ -48,7 +48,7 @@ app.controller('BoardController', function ($rootScope, $scope, $stateParams, St
 	}, function (params) {
 		$scope.params = params;
 	}, true);
-	$scope.params = $state;
+	$scope.params = $state.params;
 
 	/**
 	 * Check for markdown checkboxes in description to render the counter

js/controller/CardController.js

@@ -23,7 +23,7 @@
 /* global app moment */
 import app from '../app/App.js';
 
-app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
+app.controller('CardController', function ($scope, $rootScope, $sce, $location, $stateParams, $state, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService, markdownItConverter, FileService) {
 	$scope.sidebar = $rootScope.sidebar;
 	$scope.status = {
 		lastEdit: 0,
@@ -38,7 +38,13 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	$scope.boardservice = BoardService;
 
 	$scope.isArray = angular.isArray;
-
+	// workaround for $stateParams changes not being propagated
+	$scope.$watch(function() {
+		return $state.params;
+	}, function (params) {
+		$scope.params = params;
+	}, true);
+	$scope.params = $state.params;
 	$scope.mimetypeForAttachment = function(attachment) {
 		let url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype);
 		let style = {
@@ -97,7 +103,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 			return match;
 		});
 		CardService.update($scope.status.edit).then(function (data) {
-			var header = $('.section-header.card-description');
+			var header = $('.section-header-tabbed .tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
 		});
@@ -126,7 +132,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	};
 	$scope.cardEditDescriptionChanged = function ($event) {
 		$scope.status.lastEdit = Date.now();
-		var header = $('.section-header.card-description');
+		var header = $('.section-header-tabbed .tabDetails');
 		header.find('.save-indicator.unsaved').show();
 		header.find('.save-indicator.saved').hide();
 	};
@@ -136,10 +142,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave && !$scope.status.saving) {
 			$scope.status.lastSave = currentTime;
 			$scope.status.saving = true;
-			var header = $('.section-header.card-description');
+			var header = $('.section-header-tabbed .tabDetails');
 			header.find('.save-indicator.unsaved').fadeIn(500);
 			CardService.update($scope.status.edit).then(function (data) {
-				var header = $('.section-header.card-description');
+				var header = $('.section-header-tabbed .tabDetails');
 				header.find('.save-indicator.unsaved').hide();
 				header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
 				$scope.status.saving = false;
@@ -156,7 +162,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	$scope.cardUpdate = function (card) {
 		CardService.update(card).then(function (data) {
 			$scope.status.cardEditDescription = false;
-			var header = $('.section-content.card-description');
+			var header = $('.section-header-tabbed .tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
 		});

templates/part.card.php

@@ -87,12 +87,21 @@
 		<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"><span class="hidden-visually"><?php p($l->t('Remove due date')); ?></span></button>
 	</div>
 
-	<div class="section-header">
+
-		<h4><?php p($l->t('Attachments')); ?></h4>
+	<div class="section-header-tabbed">
-		<label for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': uploader.isUploading}"></label>
+		<ul class="tabHeaders ng-scope">
-		<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}" />
+			<li class="tabHeader selected" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><?php p($l->t('Description')); ?></a></li>
+			<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><?php p($l->t('Attachments')); ?></a></li>
+		</ul>
+		<div class="tabDetails">
+			<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
+			<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
+			<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
+			<label for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': uploader.isUploading}"></label>
+			<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}" />
+		</div>
 	</div>
-	<div class="section-content card-attachments" ng-if="cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)">
+	<div class="section-content card-attachments" ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)">
 		<ul>
 			<li class="attachment" ng-repeat="attachment in cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']" ng-class="{deleted: attachment.deletedAt > 0}">
 					<a class="fileicon" ng-style="mimetypeForAttachment(attachment)" ng-href="{{ attachmentUrl(attachment) }}"></a>
@@ -128,18 +137,7 @@
 		</ul>
 	</div>
 
-
+	<div class="section-content card-description" ng-if="params.tab === 0">
-	<div class="section-header card-description">
-		<h4>
-			<div>
-				<?php p($l->t('Description')); ?>
-				<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
-			</div>
-		</h4>
-		<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
-		<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
-	</div>
-	<div class="section-content card-description">
 		<textarea elastic ng-if="status.cardEditDescription"
 				  placeholder="<?php p($l->t('Add a card description…')); ?>"
 				  ng-blur="cardUpdate(status.edit)"