Skip to content

Commit

Permalink
fix(NcBreadcrumb): do not introduce visual changes
Browse files Browse the repository at this point in the history
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
  • Loading branch information
raimund-schluessler authored and emoral435 committed Jan 17, 2024
1 parent cfc5bd6 commit 3062161
Showing 1 changed file with 47 additions and 6 deletions.
53 changes: 47 additions & 6 deletions src/components/NcBreadcrumb/NcBreadcrumb.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,18 @@ Renders a button element when given no redirection props, otherwise, renders <a/
<NcButton v-if="(name || icon) && !$slots.default"
:title="title"
:aria-label="icon ? name : undefined"
type="tertiary"
v-bind="linkAttributes"
v-on="$listeners">
<slot name="icon">
<span v-if="icon" :class="icon" class="icon" />
<span v-else>{{ name }}</span>
</slot>
<template v-if="$slots.icon || icon" #icon>
<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->
<slot name="icon">
<span :class="icon" class="icon" />
</slot>
</template>
<template v-else #default>
{{ name }}
</template>
</NcButton>
<NcActions v-if="$slots.default"
ref="actions"
Expand Down Expand Up @@ -185,7 +191,12 @@ export default {
*/
linkAttributes() {
// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button
return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : (this.href ? { href: this.href, ...this.$attrs } : { type: 'tertiary', ...this.$attrs })
return this.to
? { to: this.to, exact: this.exact, ...this.$attrs }
: (this.href
? { href: this.href, ...this.$attrs }
: this.$attrs
)
},
},
methods: {
Expand Down Expand Up @@ -276,7 +287,6 @@ export default {
padding: 0;
&:last-child {
font-weight: bold;
min-width: 0;
// Don't show breadcrumb separator for last crumb
Expand All @@ -285,6 +295,37 @@ export default {
}
}
// Necessary to hide hidden crumbs
&--hidden {
display: none;
}
&__separator {
padding: 0;
color: var(--color-text-maxcontrast);
}
// Necessary for indicating hovering for drag and drop
&#{&}--hovered :deep(.button-vue) {
background-color: var(--color-background-dark);
color: var(--color-main-text);
}
// Adjust button style
&:not(:last-child) :deep() .button-vue {
color: var(--color-text-maxcontrast);
&:hover,
&:focus {
background-color: var(--color-background-dark);
color: var(--color-main-text);
}
&__text {
font-weight: normal;
}
}
:deep(.button-vue__text) {
margin: 0;
}
// Adjust action item appearance for crumbs with actions
// to match other crumbs
&:not(.dropdown) :deep(.action-item) {
Expand Down

0 comments on commit 3062161

Please sign in to comment.