feat: improve drag & drop

* permits multiple drag & drop
 * synchronize grid & list view on selection
 * permits copy during ddrag & drop (use sift/alt key according your OS)
 * use batch move / copy on drag & drop

static/css/components/multiSelect.css

@@ -43,21 +43,11 @@
 	padding: 10px 20px;
 	border-radius: 12px;
 	margin: 0 0 12px;
-	opacity: 0;
-	max-height: 0;
+	height: 60px;
 	overflow: hidden;
 	transform: translateY(-8px);
 	transition: opacity 0.2s, max-height 0.25s, transform 0.2s, margin 0.2s, padding 0.2s;
-	pointer-events: none;
-}
-
-.batch-selection-bar.visible {
-	opacity: 1;
-	max-height: 60px;
-	transform: translateY(0);
 	pointer-events: auto;
-	padding: 10px 20px;
-	margin: 0 0 12px;
 }
 
 .batch-bar-left {

static/css/layout/content.css

@@ -16,7 +16,9 @@
 .actions-bar {
 	display: flex;
 	justify-content: space-between;
-	margin-bottom: 20px;
+	margin: 0 0 12px;
+	height: 60px;
+	padding: 10px;
 }
 
 .action-buttons {
@@ -36,3 +38,51 @@
 	height: 300px;
 	grid-column: 1 / -1;
 }
+
+/* invisible element, permits building of drag element without altering display */
+.drag-preview {
+	position: absolute;
+	top: -9999px;
+	left: -9999px;
+  	pointer-events: none;
+	width: 360px;
+}
+
+.dragged-items > div {
+	position: relative;
+  	display: inline-block;
+	padding: 4px;
+	width: 360px;
+	background-color: white;
+	height: 46px;
+}
+
+.dragged-items > div.fading {
+	-webkit-mask-image: linear-gradient(to bottom, white 20%, transparent);
+	mask-image: linear-gradient(to bottom, white 20%, transparent);
+}
+
+.dragged-items-badge {
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	transform: translate(50%, -50%);
+
+	background: red;
+	color: white;
+
+	border-radius: 50%;
+	min-width: 20px;
+	height: 20px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	font-size: 12px;
+	font-weight: bold;
+
+	padding: 2px;
+}
+