Merge pull request #178 from nextmcloud/nmc/2562-files-right-click-menu

Files right click menu

css/apps/files-right-click.scss

@@ -0,0 +1,70 @@
+@import '../_mixins.scss';
+
+// add current style to right click menu and also to the '...' button in filetable
+#rightClickMenu, .fileActionsMenu {
+	padding: 20px 8px;
+	ul li {
+		.menu-option, .menuitem {
+			gap: 8px;
+			padding: 8px 14px 8px 16px;
+			line-height: 26px;
+			span.icon {
+				padding: 26px 0 0 26px;
+				background-position: center;
+				background-size: 24px;
+			}
+
+			// hide 'details' and 'edit locally' buttons in the right click menu
+			&.option-editlocally, &.option-details {
+				display: none;
+			}
+
+			.icon.icon-external {
+				background-image: var(--icon-cut-paste-dark);
+			}
+
+			&:hover {
+				background-color: initial;
+				color: var(--telekom-color-text-and-icon-primary-standard);
+				.icon:not(.icon-starred) {
+					@include color-icon;
+				}
+			}
+		}
+	}
+}
+
+// style overrides for '...' button in filetable
+#app-content-files {
+	.fileActionsMenu .menuitem {
+		padding: 8px 14px 8px 16px !important;
+
+		.icon {
+			background-size: 24px;
+		}
+
+		// Edit locally has an img instead of span
+		&.action-editlocally img{
+			padding: 2px;
+			width: 26px;
+			height: 26px;
+		}
+	}
+}
+
+// override global nextcloud hover styles
+body .icon-delete:hover {
+	background-image: var(--icon-delete-dark);
+}
+
+body .icon-starred:hover {
+	background-image: var(--icon-starred-yellow);
+}
+
+body .icon-rename {
+	background-image: var(--icon-edit-dark);
+}
+
+body .icon-favorite {
+	background-image: var(--icon-star-dark);
+}

css/layouts/guestview.scss

@@ -30,10 +30,6 @@ $footer-height: 60px;
 $breakpoint-mobile: 1024px;
 $breakpoint-mobile-small: 480px;
 
-body .icon-download {
-    background-image: var(--icon-download-white);
-}
-
 #body-public {
     #header .header-right {
         #header-primary-action {
@@ -43,6 +39,10 @@ body .icon-download {
         }
     }
 
+    .icon-download {
+        background-image: var(--icon-download-white);
+    }
+
     .app-files_sharing #app-content {
         position: fixed;
         height: var(--body-height);

css/nmcstyle.scss

@@ -47,6 +47,7 @@
 @import 'apps/viewer.scss';
 @import 'apps/media.scss';
 @import 'apps/rich-workspace.scss';
+@import 'apps/files-right-click.scss';
 
 /* v25 override */
 @import 'v25/ncappnavigation.scss';

src/icons.mjs

@@ -107,6 +107,7 @@ const icons = {
 	'toggle-filelist': path.join(__dirname, '../img', 'actions', 'toggle-filelist.svg'),
 	'toggle-pictures': path.join(__dirname, '../img', 'actions', 'toggle-pictures.svg'),
 	restore: path.join(__dirname, '../img', 'actions', 'restore.svg'),
+	'cut-paste': path.join(__dirname, '../img', 'actions', 'cut-paste.svg'),
 	alert: path.join(__dirname, '../img', 'rich-workspace', 'warning.svg'),
 	bold: path.join(__dirname, '../img', 'rich-workspace', 'bold.svg'),
 	checklist: path.join(__dirname, '../img', 'rich-workspace', 'checklist.svg'),