Insert attachments to description

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

css/style.scss

@@ -793,8 +793,40 @@ input.input-inline {
 	.icon-upload.icon-loading-small {
 		background-image: none;
 	}
-	.card-attachments {
-		ul {
+	.attachment-list-wrapper {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		background-color: rgba($color-darkgrey, 0.5);
+		left: 0;
+		top: 0;
+	}
+	.attachment-list {
+		&.selector {
+			padding: 10px;
+			position: absolute;
+			width: 30%;
+			max-width: 500px;
+			min-width: 200px;
+			max-height: 50%;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			background-color: $color-main-background;
+			z-index: 2;
+			border-radius: 3px;
+			box-shadow: 0 0 3px $color-darkgrey;
+			overflow: scroll;
+		}
+		h3.attachment-selector {
+			margin: 0 0 10px;
+			padding: 0;
+			.icon-close {
+				display: inline-block;
+				float: right;
+			}
+		}
+
 		li.attachment {
 			display: flex;
 
@@ -846,8 +878,6 @@ input.input-inline {
 		}
 	}
 
-	}
-
 	.card-description {
 		&.section-header {
 			.save-indicator {
@@ -1235,7 +1265,11 @@ input.input-inline {
 			border: 0 !important;
 			overflow: hidden;
 		}
+		.select2-search-field {
+			margin-right: -10px;
 		}
+	}
+
 	.select2-choice {
 		height: auto;
 	}
@@ -1332,6 +1366,10 @@ input.input-inline {
 		}
 	}
 
+	img {
+		max-width: 100%;
+	}
+
 	input[type=checkbox] {
 		margin: 0px 10px 0px 0px;
 		line-height: 10px;

js/controller/AttachmentController.js

@@ -0,0 +1,78 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *  
+ */
+
+/* global OC */
+
+class AttachmentListController {
+	constructor ($scope, CardService, FileService) {
+		'ngInject';
+		this.cardservice = CardService;
+		this.fileservice = FileService;
+		this.attachments = CardService.getCurrent().attachments;
+	}
+
+	mimetypeForAttachment(attachment) {
+		let url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype);
+		let styles = {
+			'background-image': `url("${url}")`,
+		};
+		return styles;
+	}
+
+	attachmentUrl(attachment) {
+		let cardId = this.cardservice.getCurrent().id;
+		let attachmentId = attachment.id;
+		return OC.generateUrl(`/apps/deck/cards/${cardId}/attachment/${attachmentId}`);
+	}
+
+	getAttachmentMarkdown(attachment) {
+		const inlineMimetypes = ['image/png', 'image/jpg', 'image/jpeg'];
+		let url = this.attachmentUrl(attachment);
+		let filename = attachment.data;
+		let insertText = `[📎 ${filename}](${url})`;
+		if (inlineMimetypes.indexOf(attachment.extendedData.mimetype) > -1) {
+			insertText = `![📎 ${filename}](${url})`;
+		}
+		return insertText;
+	};
+
+	select(attachment) {
+		this.onSelect({attachment: this.getAttachmentMarkdown(attachment)});
+	}
+
+	abort() {
+		this.onAbort();
+	}
+
+}
+
+let attachmentListComponent = {
+	templateUrl: '/card.attachments.html',
+	controller: AttachmentListController,
+	bindings: {
+		isFileSelector: '<',
+		attachments: '=',
+		onSelect: '&',
+		onAbort: '&'
+	}
+};
+export default attachmentListComponent;

js/controller/CardController.js

@@ -45,17 +45,28 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 		$scope.params = params;
 	}, true);
 	$scope.params = $state.params;
-	$scope.mimetypeForAttachment = function(attachment) {
-		let url = OC.MimeType.getIconUrl(attachment.extendedData.mimetype);
-		let style = {
-			'background-image': `url("${url}")`,
+
+	$scope.addAttachmentToDescription = function(insertText) {
+		let el = document.querySelectorAll('textarea')[0];
+		let start = el.selectionStart;
+		let end = el.selectionEnd;
+		let text = $scope.status.edit.description || '';
+		let before = text.substring(0, start);
+		let after = text.substring(end, text.length);
+		let newText = before + "\n" + insertText + "\n" + after;
+		$scope.status.edit.description = newText;
+		el.selectionStart = el.selectionEnd = start + newText.length;
+		el.focus();
+		$scope.status.continueEdit = false;
+		$scope.cardEditDescriptionChanged();
+		$scope.status.selectAttachment = false;
 	};
-		return style;
-	};
-	$scope.attachmentUrl = function(attachment) {
-		let cardId = $scope.cardservice.getCurrent().id;
-		let attachmentId = attachment.id;
-		return OC.generateUrl(`/apps/deck/cards/${cardId}/attachment/${attachmentId}`);
+
+	$scope.abortAttachmentSelection = function() {
+		$scope.status.continueEdit = false;
+		$scope.status.selectAttachment = false;
+		let el = document.querySelectorAll('textarea')[0];
+		el.focus();
 	};
 
 	$scope.statusservice.retainWaiting();
@@ -162,6 +173,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
 	$scope.cardUpdate = function (card) {
 		CardService.update(card).then(function (data) {
 			$scope.status.cardEditDescription = false;
+			$scope.updateMarkdown($scope.status.edit.description);
 			var header = $('.section-header-tabbed .tabDetails');
 			header.find('.save-indicator.unsaved').hide();
 			header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);

js/init.js

@@ -13,7 +13,10 @@ import './app/Run.js';
 
 
 import ListController from 'controller/ListController.js';
+import attachmentListComponent from './controller/AttachmentController.js';
+
 app.controller('ListController', ListController);
+app.component('attachmentListComponent', attachmentListComponent);
 
 
 // require all the js files from subdirectories

templates/main.php

@@ -58,5 +58,8 @@ Util::addScript('deck', 'build/deck');
 	<script type="text/ng-template" id="/card.sidebarView.html">
 		<?php print_unescaped($this->inc('part.card')); ?>
 	</script>
+	<script type="text/ng-template" id="/card.attachments.html">
+		<?php print_unescaped($this->inc('part.card.attachments')); ?>
+	</script>
 
 </div>

templates/part.card.attachments.php

@@ -0,0 +1,42 @@
+<div ng-class="{'attachment-list-wrapper': $ctrl.isFileSelector}">
+<div class="attachment-list" ng-class="{selector: $ctrl.isFileSelector}">
+	<h3 class="attachment-selector" ng-if="$ctrl.isFileSelector"><?php p($l->t('Select an attachment')); ?>	<a class="icon-close" ng-click="$ctrl.abort()"></a></h3>
+<ul>
+	<li class="attachment"
+		ng-repeat="attachment in $ctrl.cardservice.getCurrent().attachments | filter: {type: 'deck_file'} | orderBy: ['deletedAt', '-lastModified']"
+		ng-class="{deleted: attachment.deletedAt > 0, selector: $ctrl.isFileSelector}"
+		ng-if="!$ctrl.isFileSelector || attachment.deletedAt == 0">
+		<a class="fileicon" ng-style="$ctrl.mimetypeForAttachment(attachment)" ng-href="{{ attachmentUrl(attachment) }}"></a>
+			<div class="details">
+				<a ng-href="{{ $ctrl.attachmentUrl(attachment) }}" target="_blank">
+				<div class="filename">
+					<span class="basename">{{ attachment.extendedData.info.filename}}</span>
+					<span class="extension">.{{ attachment.extendedData.info.extension}}</span>
+				</div>
+					<span class="filesize">{{ attachment.extendedData.filesize | bytes }}</span>
+					<span class="filedate">{{ attachment.lastModified|relativeDateFilter }}</span>
+					<span class="filedate"><?php p($l->t('by')); ?> {{ attachment.createdBy }}</span>
+				</a>
+			</div>
+			<button class="icon icon-history button-inline" ng-click="$ctrl.cardservice.attachmentRemoveUndo(attachment)" ng-if="!$ctrl.isFileSelector && attachment.deletedAt > 0" title="<?php p($l->t('Undo file deletion - Otherwise the file will be deleted during the next cronjob run.')); ?>">
+				<span class="hidden-visually"><?php p($l->t('Undo file deletion')); ?></span>
+			</button>
+			<button class="icon icon-confirm button-inline" ng-click="$ctrl.select(attachment)" ng-if="$ctrl.isFileSelector">
+				<span class="hidden-visually"><?php p($l->t('Insert the file into the description')); ?></span>
+			</button>
+			<div class="app-popover-menu-utils" ng-if="!$ctrl.isFileSelector && attachment.deletedAt == 0">
+				<button class="button-inline icon icon-more"></button>
+				<div class="popovermenu hidden">
+					<ul>
+						<li>
+							<a class="menuitem action action-delete"
+							   ng-click="$ctrl.cardservice.attachmentRemove(attachment); $event.stopPropagation();"><span
+										class="icon icon-delete"></span><span><?php p($l->t('Delete')); ?></span></a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</a>
+	</li>
+</ul>
+</div>

templates/part.card.php

@@ -97,50 +97,26 @@
 			<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>
+			<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
 			<input id="attachment-upload" type="file" nv-file-select="" uploader="uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
+			<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
+
 		</div>
 	</div>
-	<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>
-					<div class="details">
-						<a ng-href="{{ attachmentUrl(attachment) }}" target="_blank">
-						<div class="filename">
-							<span class="basename">{{ attachment.extendedData.info.filename}}</span>
-							<span class="extension">.{{ attachment.extendedData.info.extension}}</span>
-						</div>
-							<span class="filesize">{{ attachment.extendedData.filesize | bytes }}</span>
-							<span class="filedate">{{ attachment.createdAt|relativeDateFilter }}</span>
-							<span class="filedate">{{ attachment.lastModified|relativeDateFilter }}</span>
-							<span class="filedate">{{ attachment.createdBy }}</span>
-						</a>
-					</div>
-					<button class="icon icon-history button-inline" ng-click="cardservice.attachmentRemoveUndo(attachment)" ng-if="attachment.deletedAt > 0" title="<?php p($l->t('Undo file deletion - Otherwise the file will be deleted during the next cronjob run.')); ?>">
-						<span class="hidden-visually"><?php p($l->t('Undo file deletion')); ?></span>
-					</button>
-					<div class="app-popover-menu-utils" ng-if="attachment.deletedAt == 0">
-						<button class="button-inline icon icon-more" ng-model="attachment"></button>
-						<div class="popovermenu hidden">
-							<ul>
-								<li>
-									<a class="menuitem action action-delete"
-									   ng-click="cardservice.attachmentRemove(attachment); $event.stopPropagation();"><span
-												class="icon icon-delete"></span><span><?php p($l->t('Delete')); ?></span></a>
-								</li>
-							</ul>
-						</div>
-					</div>
-				</a>
-			</li>
-		</ul>
+	<div class="section-content card-attachments">
+		<attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component>
 	</div>
 
 	<div class="section-content card-description" ng-if="params.tab === 0">
+		<attachment-list-component
+				ng-if="status.selectAttachment"
+				attachments="cardservice.getCurrent().attachments"
+				is-file-selector="true"
+				on-select="addAttachmentToDescription(attachment)" on-abort="abortAttachmentSelection()">
+		</attachment-list-component>
 		<textarea elastic ng-if="status.cardEditDescription"
 				  placeholder="<?php p($l->t('Add a card description…')); ?>"
-				  ng-blur="cardUpdate(status.edit)"
+				  ng-blur="!status.continueEdit && cardUpdate(status.edit)"
 				  ng-model="status.edit.description"
 				  ng-change="cardEditDescriptionChanged(); updateMarkdown(status.edit.description)"
 				  autofocus-on-insert> </textarea>