Merge pull request #331 from nextmcloud/nmc/breadcrumb-v28

Breadcrumb v28
nextmcloud · Apr 18, 2024 · f70ff21 · f70ff21
2 parents b095cb6 + 7c7151c
commit f70ff21
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 123 deletions.
diff --git a/css/_mixins.scss b/css/_mixins.scss
@@ -9,6 +9,10 @@
 	}
 }
 
+@mixin magenta-icon {
+	filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(6096%) hue-rotate(321deg) brightness(75%) contrast(104%);
+}
+
 // Scale primary button style
 @mixin primary-button {
     border: none;

diff --git a/css/apps/files.scss b/css/apps/files.scss
@@ -112,49 +112,6 @@
 #app-content-vue {
 	.files-list__header {
 
-		.breadcrumb__crumbs {
-			a {
-
-				&:active,
-				&:focus,
-				&:focus-visible {
-					background-color: transparent;
-					outline: none;
-				}
-
-				&:hover {
-					background-color: transparent;
-					outline: none;
-					opacity: 0.7;
-				}
-			}
-
-			span.material-design-icon.home-icon {
-				background-image: var(--icon-delete-dark);
-				background-size: 24px;
-				height: 24px;
-				width: 24px;
-
-				svg {
-					display: none;
-				}
-			}
-
-			span.material-design-icon.chevron-right-icon.vue-crumb__separator {
-				background-image: var(--icon-breadcrumb-arrow-grey);
-				background-size: 24px;
-				height: 24px;
-				width: 24px;
-				background-position: center;
-				background-repeat: no-repeat;
-
-				svg {
-					display: none;
-				}
-			}
-
-		}
-
 		// Context menu when table header checkbox is checked
 		&+.vue-recycle-scroller {
 
@@ -273,60 +230,6 @@
 	}
 }
 
-// breadcrumb wrapper
-.files-controls {
-	background-color: var(--color-main-background);
-	opacity: 0.97;
-	padding-top: 0;
-
-	@media screen and (min-width: $breakpoint-mobile) {
-		padding-left: 0;
-	}
-
-	li.crumbhome {
-		margin-right: 5px;
-	}
-}
-
-.actions.creatable {
-
-	// 'Add new file/folder' button inside breadcrumb
-	&>a.button.new {
-		padding: 9px;
-		background-color: var(--color-main-background);
-		border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
-		border-radius: 50%;
-		min-height: unset;
-		height: 24px;
-		width: 24px;
-		margin: auto 0;
-
-		.icon.icon-add {
-			@include magenta-icon;
-			background-size: 16px 16px;
-			opacity: 1;
-		}
-
-		// Do not display text "New" after file add breadcrumb
-		span:nth-child(2) {
-			display: none;
-		}
-	}
-
-	.newFileMenu {
-
-		// hide "Add description" menu item
-		[data-action=rich-workspace-init] {
-			display: none;
-		}
-	}
-
-	// change position of popover menu arrow
-	.newFileMenu::after {
-		left: 51px !important;
-	}
-}
-
 table.files-filestable {
 
 	thead {

diff --git a/css/components/ncbreadcrumb.scss b/css/components/ncbreadcrumb.scss
@@ -1,38 +1,117 @@
-.breadcrumb {
-	.crumb {
-		// change arrow icon
-		background-image: var(--icon-breadcrumb-arrow-grey);
-		padding: 0px;
-		// link text styling
-		& > a {
-			margin-right: 1.5rem;
-			font-size: var(--telekom-typography-font-size-body);
-			opacity: 1;
-			color: var(--telekom-color-text-and-icon-standart);
+@import '../_mixins.scss';
+@import '../variables';
+
+#content-vue .breadcrumb {
+	nav {
+		height: 44px;
+		ul.breadcrumb__crumbs {
+			// Display root as a Home icon
+			li.vue-crumb:first-child {
+				.button-vue__icon {
+					background-image: var(--icon-home-dark);
+					background-position: center;
+					background-repeat: no-repeat;
+					svg {
+						display: none;
+					}
+				}
+				.button-vue__text {
+					display: none;
+				}
+				&:hover {
+					.button-vue__icon {
+						opacity: 0.7;
+					}
+				}
 
-			&:hover {
-				color: var(--color-hover);
 			}
+
+			li.vue-crumb {
+				a.button-vue {
+					margin: 0;
+					padding: 0 6px;
+					&:hover {
+						background-color: initial;
+					}
+					&:focus {
+						outline: none;
+						background-color: initial;
+					}
+				}
 
-			&.icon-home {
-				margin-left: 2px;
+				// Three dot button for navigation across folders
+				button.action-item__menutoggle {
+					&:hover {
+						background-color: initial;
+						svg {
+							color: initial;
+						}
+					}
+				}
+
+				// Right arrow change
+				span.chevron-right-icon {
+					background-image: var(--icon-breadcrumb-arrow-grey);
+					width: 24px;
+					height: 24px;
+					svg {
+						display: none;
+					}
+				}
 			}
 		}
+	}
 
-		// hide 'Shared' icon
-		span.shared, span.icon-shared {
+	.breadcrumb__actions {
+		// hide Share button
+		button.files-list__header-share-button {
 			display: none;
 		}
-	}
 
-	// style flyout menu
-	.crumbmenu .crumblist {
-		a {
-			opacity: 1;
+		// 'Add new file/folder' button inside breadcrumb
+		.files-list__header-upload-button {
+			button {
+				all: unset;
+				display: flex;
+				background-color: var(--color-main-background);
+				border: 1px solid var(--telekom-color-text-and-icon-primary-standard);
+				border-radius: 50%;
+				min-height: unset;
+				height: 24px;
+				width: 24px;
+				margin: auto 0;
+				margin-left: 6px;
+
+				&:hover:not(:disabled) {
+					background-color: initial;
+					border-color: var(--telekom-color-text-and-icon-primary-standard);
+				}
+
+				.button-vue__icon {
+					@include magenta-icon;
+					background-image: var(--icon-add-white);
+					background-size: 16px 16px;
+					opacity: 1;
+					width: 16px;
+					height: 16px;
+					background-position: center;
+					background-repeat: no-repeat;
+					svg {
+						display: none;
+					}
+				}
+
+				// Do not display text "New" in the button
+				.button-vue__text {
+					display: none;
+				}
+			}
+
+			// Hide if disabled
+			&--disabled {
+				display: none;
+			}
 		}
-		&:hover > a {
-			background-color: var(--color-main-background);
-			color: var(--color-hover);
-		}	
 	}
+
 }