Added a new action menu in files and trash list.

Uses the new file-multi-select-menu component.

Towards #7647

Signed-off-by: Abijeet <abijeetpatro@gmail.com>

2 files changed, 13 insertions, 14 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index bbc95d7cd6d..b3ce4c02392 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -169,13 +169,16 @@ table.multiselect th a {
 	color: #000;
 }
 table th .columntitle {
-	display: inline-block;
+	display: block;
 	padding: 15px;
 	height: 50px;
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	vertical-align: middle;
 }
+table.multiselect th .columntitle {
+    display: inline-block;
+}
 table th .columntitle.name {
 	padding-left: 5px;
 	margin-left: 50px;
@@ -482,9 +485,7 @@ a.action > img {
 	line-height: 50px;
 	padding: 18px 5px;
 }
-.selectedActions a.delete-selected {
-	padding-right: 15px;
-}
+
 .selectedActions a.hidden {
 	display: none;
 }
@@ -493,10 +494,6 @@ 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 {
diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss
index c5bb8193924..42526a5c3f5 100644
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -28,7 +28,7 @@ table td {
 table.multiselect thead {
 	padding-left: 0;
 }
-	
+
 #fileList a.action.action-menu img {
 	padding-left: 0;
 }
@@ -41,10 +41,6 @@ table.multiselect thead {
 	display: none !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 {
@@ -70,8 +66,14 @@ table.dragshadow {
 
 }
 @media only screen and (max-width: 480px)  {
+    	table thead {
+        	width: 100% !important;
+    	}
 	/* Only show icons */
-	table th .selectedActions a span:not(.icon) {
+	table th .selectedActions {
+		float: right;
+	}
+	table th .selectedActions > a span:not(.icon) {
 		display: none;
 	}