[NEW] Download button for each file in fileslist (#12874)

* Add menu icon to fileslist items and implement download-action.

* Import global popover

packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.html

@@ -37,6 +37,9 @@
 							<span class="attachments__details">{{formatTimestamp uploadedAt}}</span>
 						</span>
 					</a>
+
+					{{> icon file=. block="attachments-menu js-action" icon="menu"}}
+
 				</li>
 			{{/each}}
 		</ul>

packages/rocketchat-ui-flextab/client/tabs/uploadedFilesList.js

@@ -2,6 +2,7 @@ import { Mongo } from 'meteor/mongo';
 import { fixCordova } from 'meteor/rocketchat:lazy-load';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { DateFormat } from 'meteor/rocketchat:lib';
+import { popover } from 'meteor/rocketchat:ui';
 import { Template } from 'meteor/templating';
 import _ from 'underscore';
 
@@ -119,4 +120,40 @@ Template.uploadedFilesList.events({
 			return t.limit.set(t.limit.get() + 50);
 		}
 	}, 200),
+
+	'click .js-action'(e) {
+		e.currentTarget.parentElement.classList.add('active');
+
+		const config = {
+			columns: [
+				{
+					groups: [
+						{
+							items: [
+								{
+									icon: 'import',
+									name: t('Download'),
+									action: () => {
+										const a = document.createElement('a');
+										a.href = this.file.url;
+										a.download = this.file.name;
+										document.body.appendChild(a);
+										a.click();
+										window.URL.revokeObjectURL(this.file.url);
+										a.remove();
+									},
+								},
+							],
+						},
+					],
+				},
+			],
+			currentTarget: e.currentTarget,
+			onDestroyed:() => {
+				e.currentTarget.parentElement.classList.remove('active');
+			},
+		};
+
+		popover.open(config);
+	},
 });

packages/rocketchat_theme/client/imports/components/contextual-bar.css

@@ -119,15 +119,21 @@
 
 .attachments {
 	&__item {
+		position: relative;
 
 		margin-bottom: 10px;
 
 		transition: background-color 300ms linear;
 
+		&.active,
 		&:hover {
 			cursor: pointer;
 
 			background-color: #f7f8fa;
+
+			.attachments-menu {
+				display: inline-block;
+			}
 		}
 
 		&-link {
@@ -231,6 +237,24 @@
 	}
 }
 
+.attachments-menu {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+
+	display: none;
+
+	color: var(--color-darkest);
+
+	font-size: 16px;
+
+	fill: currentColor;
+
+	&:hover {
+		fill: var(--rc-color-button-primary);
+	}
+}
+
 .contextual-bar__content.mail-messages {
 	& .rc-popup-list {
 		z-index: 1;