Insert attachments to description

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

css/style.scss

@@ -793,59 +793,89 @@ input.input-inline {
 	.icon-upload.icon-loading-small {
 		background-image: none;
 	}
-	.card-attachments {
+	.attachment-list-wrapper {
-		ul {
+		position: fixed;
-			li.attachment {
+		width: 100%;
-				display: flex;
+		height: 100%;
-
+		background-color: rgba($color-darkgrey, 0.5);
-				&.deleted {
+		left: 0;
-					opacity: .5;
+		top: 0;
-				}
+	}
-
+	.attachment-list {
-				.fileicon {
+		&.selector {
-					display: inline-block;
+			padding: 10px;
-					min-width: 32px;
+			position: absolute;
-					width: 32px;
+			width: 30%;
-					height: 32px;
+			max-width: 500px;
-					background-size: contain;
+			min-width: 200px;
-				}
+			max-height: 50%;
-				.details {
+			top: 50%;
-					flex-grow: 1;
+			left: 50%;
-					flex-shrink: 1;
+			transform: translate(-50%, -50%);
-					min-width: 0;
+			background-color: $color-main-background;
-					flex-basis: 50%;
+			z-index: 2;
-					line-height: 110%;
+			border-radius: 3px;
-					padding: 2px;
+			box-shadow: 0 0 3px $color-darkgrey;
-				}
+			overflow: scroll;
-				.filename {
+		}
-					width: 70%;
+		h3.attachment-selector {
-					display: flex;
+			margin: 0 0 10px;
-					.basename {
+			padding: 0;
-						white-space: nowrap;
+			.icon-close {
-						overflow: hidden;
+				display: inline-block;
-						text-overflow: ellipsis;
+				float: right;
-					}
-					.extension {
-						opacity: 0.7;
-					}
-				}
-				.filesize, .filedate {
-					font-size: 90%;
-					color: $color-darkgrey;
-				}
-				.app-popover-menu-utils {
-					position: relative;
-					button {
-						height: 32px;
-						width: 42px;
-					}
-				}
-				button.icon-history {
-					width: 44px;
-				}
 			}
 		}
 
+		li.attachment {
+			display: flex;
+
+			&.deleted {
+				opacity: .5;
+			}
+
+			.fileicon {
+				display: inline-block;
+				min-width: 32px;
+				width: 32px;
+				height: 32px;
+				background-size: contain;
+			}
+			.details {
+				flex-grow: 1;
+				flex-shrink: 1;
+				min-width: 0;
+				flex-basis: 50%;
+				line-height: 110%;
+				padding: 2px;
+			}
+			.filename {
+				width: 70%;
+				display: flex;
+				.basename {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+				.extension {
+					opacity: 0.7;
+				}
+			}
+			.filesize, .filedate {
+				font-size: 90%;
+				color: $color-darkgrey;
+			}
+			.app-popover-menu-utils {
+				position: relative;
+				button {
+					height: 32px;
+					width: 42px;
+				}
+			}
+			button.icon-history {
+				width: 44px;
+			}
+		}
 	}
 
 	.card-description {
@@ -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);
+	$scope.addAttachmentToDescription = function(insertText) {
-		let style = {
+		let el = document.querySelectorAll('textarea')[0];
-			'background-image': `url("${url}")`,
+		let start = el.selectionStart;
-		};
+		let end = el.selectionEnd;
-		return style;
+		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;
 	};
-	$scope.attachmentUrl = function(attachment) {
+
-		let cardId = $scope.cardservice.getCurrent().id;
+	$scope.abortAttachmentSelection = function() {
-		let attachmentId = attachment.id;
+		$scope.status.continueEdit = false;
-		return OC.generateUrl(`/apps/deck/cards/${cardId}/attachment/${attachmentId}`);
+		$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

@@ -1,4 +1,4 @@
-<div nv-file-drop="" uploader="uploader"  class="drop-zone" options="{cardId: cardservice.getCurrent().id}">
+<div nv-file-drop="" uploader="uploader" class="drop-zone" options="{cardId: cardservice.getCurrent().id}">
 	<div class="drop-indicator" nv-file-over uploader="uploader">
 		<p><?php p($l->t('Drop your files here to upload it to the card')); ?></p>
 	</div>
@@ -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 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)">
+	<div class="section-content card-attachments">
-		<ul>
+		<attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component>
-			<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>
 
 	<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>