Merge pull request #7634 from Abijeet/bug-7539

Fixes the delete button not appearing on certain lower resolutions

apps/files/css/files.scss

@@ -542,6 +542,10 @@ a.action > img {
 	vertical-align: text-bottom;
 	margin-bottom: -1px;
 }
+/* hide the delete icon in name column normal resolutions */
+table th#headerName .selectedActions .delete-selected {
+	display: none;
+}
 
 #fileList td a {
 	a.action {

apps/files/css/mobile.scss

@@ -12,7 +12,6 @@
 	min-width: initial !important;
 }
 
-/* hide size and date columns */
 table th#headerSize,
 table td.filesize,
 table th#headerDate,
@@ -52,6 +51,11 @@ table td.filename .nametext .innernametext {
 	max-width: calc(100% - 175px) !important;
 }
 
+/* show the delete icon in name column in lower resolutions */
+table th#headerName .selectedActions .delete-selected {
+	display: inline;
+}
+
 /* proper notification area for multi line messages */
 #notification-container {
 	display: flex;
@@ -75,3 +79,19 @@ table.dragshadow {
 }
 
 }
+@media only screen and (max-width: 480px)  {
+	/* Only show icons */
+	table th .selectedActions a span:not(.icon) {
+		display: none;
+	}
+
+	/* Increase touch area for the icons */
+	table th .selectedActions a {
+		padding: 17px 14px;
+	}
+
+	/* Remove the margin to reduce the overlap between the name and the icons */
+	table.multiselect th .columntitle.name {
+		margin-left: 0;
+	}
+}

apps/files/templates/list.php

@@ -59,6 +59,10 @@
 							<span class="icon icon-download"></span>
 							<span><?php p($l->t('Download'))?></span>
 						</a>
+						<a href="" class="delete-selected">
+							<span class="icon icon-delete"></span>
+							<span><?php p($l->t('Delete'))?></span>
+						</a>
 					</span>
 				</div>
 			</th>

apps/files_trashbin/templates/index.php

@@ -35,6 +35,10 @@
 							<span class="icon icon-history"></span>
 							<span><?php p($l->t('Restore'))?></span>
 						</a>
+						<a href="" class="delete-selected">
+							<span class="icon icon-delete"></span>
+							<span><?php p($l->t('Delete'))?></span>
+						</a>
 					</span>
 				</div>
 			</th>