fixed text and visuals (#352)

nextmcloud · Jun 21, 2024 · e1f0574 · e1f0574
1 parent 4efccf8
commit e1f0574
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 65 deletions.
diff --git a/css/apps/files.scss b/css/apps/files.scss
@@ -169,8 +169,8 @@
 					.minus-box-icon {
 						width: 16px;
 						height: 16px;
-						border: 1px solid black;
-						border-radius: 20%;
+						border: 1px solid var(--telekom-color-ui-border-standard);
+						border-radius: var(--telekom-radius-small);
 
 						svg {
 							display: none;
@@ -370,8 +370,8 @@ table.files-filestable {
 			tbody:not(.files-list__tbody--grid) {
 
 				.files-list__row-icon {
-					margin-right: 16px;
-					margin-left: 24px;
+					margin-right: 1rem;
+					margin-left: 1rem;
 					z-index: 100;
 
 					.material-design-icon {

diff --git a/css/components/ncactions.scss b/css/components/ncactions.scss
@@ -16,6 +16,7 @@
 		}
 	}
 }
+
 #body-user {
 	.v-popper__popper {
 		.v-popper__wrapper {
@@ -39,81 +40,107 @@
 	}
 }
 
-
 // dropdown menu styles
-.v-popper__inner {
-	li.action {
-		.action-button__icon {
-			background-size: 20px;
-			background-position: center;
-		}
+.v-popper--theme-dropdown {
 
-		&.action-separator.action--disabled {
-			border-bottom: 1px solid var(--telekom-color-ui-border-pressed);
-		}
+	&.v-popper__popper {
 
-		&.active {
-			background-color: initial;
+		.v-popper__wrapper {
 
-			// do not set Delete icon to red when hovered
-			.icon-delete:hover {
-				background-image: var(--icon-delete-dark);
-			}
-		}
-
-		&:hover {
-			.action-button__icon, .material-design-icon, .icon-vue {
-				filter: var(--nmc-color-icon);
-			}
+			.v-popper__inner {
+				background-color: var(--telekom-color-background-surface);
 
-			.action-button__text, .action-button__longtext, .action-link__text, .action-link__longtext {
-				color: var(--telekom-color-primary-standard);
-			}
-		}
-	}
-
-	// hide upload file menu item in Photos Album
-	li[data-upload-picker-add=""]{
-		display: none;
-	}
-}
-
-.v-popper__popper {
-	.v-popper__inner {
-		.material-design-icon {
+				.material-design-icon {
+
+					&.pencil-icon {
+						background-image: var(--icon-edit-dark);
+					}
 
-			&.pencil-icon {
-				background-image: var(--icon-edit-dark);
-			}
-
-			&.download-multiple-icon {
-				background-image: var(--icon-download-dark);
+					&.download-multiple-icon {
+						background-image: var(--icon-download-dark);
+					}
+
+					&.star-icon {
+						background-image: var(--icon-star-dark);
+					}
+
+					&.close-icon {
+						background-image: var(--icon-close-dark);
+					}
+
+					&.folder-icon {
+						background-image: var(--icon-folder-dark);
+					}
+				}
+
+				li.action {
+
+					.action-button__icon {
+						background-size: 20px;
+						background-position: center;
+					}
+
+					&.action-separator.action--disabled {
+						border-bottom: 1px solid var(--telekom-color-ui-border-pressed);
+					}
+
+					&.active {
+						background-color: initial;
+
+						// do not set Delete icon to red when hovered
+						.icon-delete:hover {
+							background-image: var(--icon-delete-dark);
+						}
+					}
+
+					&:hover {
+						.action-button__icon, .material-design-icon, .icon-vue {
+							filter: var(--nmc-color-icon);
+						}
+
+						.action-button__text, .action-button__longtext, .action-link__text, .action-link__longtext {
+							color: var(--telekom-color-primary-standard);
+						}
+					}
+				}
+
+				// hide upload file menu item in Photos Album
+				li[data-upload-picker-add=""]{
+					display: none;
+				}
+
+				li:last-child > .action-input  {
+					padding-bottom: 0;
+
+					.action-input__form {
+						padding-right: 0;
+					}
+
+					label {
+						display: none;
+					}
+				}
 			}
+		}
 
-			&.star-icon {
-				background-image: var(--icon-star-dark);
-			}
+		&[data-popper-placement^=top] {
 
-			&.close-icon {
-				background-image: var(--icon-close-dark);
-			}
+			.v-popper__wrapper {
 
-			&.folder-icon {
-				background-image: var(--icon-folder-dark);
+				.v-popper__arrow-container {
+					border-top-color: var(--telekom-color-background-surface);
+				}
 			}
 		}
 
-		li:last-child > .action-input  {
-			padding-bottom: 0;
-
-			.action-input__form {
-				padding-right: 0;
-			}
+		&[data-popper-placement^=bottom] {
+
+			.v-popper__wrapper {
 
-			label {
-				display: none;
+				.v-popper__arrow-container {
+					border-bottom-color: var(--telekom-color-background-surface);
+				}
 			}
 		}
 	}
 }
-
diff --git a/src/nmcfiles.ts b/src/nmcfiles.ts
@@ -61,7 +61,7 @@ if (sharingStatusAction) {
 			return ''
 		},
 		displayName() {
-			return t('files_sharing', 'Show sharing options')
+			return t('files_sharing', 'Sharing')
 		},
 		enabled() {
 			return true