diff --git a/css/style.scss b/css/style.scss index 732f0e342..2d17bf3d6 100644 --- a/css/style.scss +++ b/css/style.scss @@ -793,59 +793,89 @@ input.input-inline { .icon-upload.icon-loading-small { background-image: none; } - .card-attachments { - ul { - 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; - } + .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; + + &.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; diff --git a/js/controller/AttachmentController.js b/js/controller/AttachmentController.js new file mode 100644 index 000000000..892c2bedf --- /dev/null +++ b/js/controller/AttachmentController.js @@ -0,0 +1,78 @@ +/* + * @copyright Copyright (c) 2018 Julius Härtl + * + * @author Julius Härtl + * + * @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 . + * + */ + +/* 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; diff --git a/js/controller/CardController.js b/js/controller/CardController.js index f7002b8b4..59a871e89 100644 --- a/js/controller/CardController.js +++ b/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}")`, - }; - return style; + + $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; }; - $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); diff --git a/js/init.js b/js/init.js index c9d71bdab..3cbcbedb7 100644 --- a/js/init.js +++ b/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 diff --git a/templates/main.php b/templates/main.php index 1d15ebb8c..51567e289 100644 --- a/templates/main.php +++ b/templates/main.php @@ -58,5 +58,8 @@ Util::addScript('deck', 'build/deck'); + diff --git a/templates/part.card.attachments.php b/templates/part.card.attachments.php new file mode 100644 index 000000000..421a1bb9a --- /dev/null +++ b/templates/part.card.attachments.php @@ -0,0 +1,42 @@ +
+
+

t('Select an attachment')); ?>

+ +
\ No newline at end of file diff --git a/templates/part.card.php b/templates/part.card.php index 77d39162f..30165cd2a 100644 --- a/templates/part.card.php +++ b/templates/part.card.php @@ -1,4 +1,4 @@ -
+

t('Drop your files here to upload it to the card')); ?>

@@ -97,50 +97,26 @@ t('Saved')); ?> t('Unsaved changes')); ?> t('Formatting help')); ?> - - + + + +
-
- +
+
+ +