diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index d366c5f1831..f95e34d2d2e 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -60,17 +60,14 @@ export class DashNav extends PureComponent { } } - onOpenSearch = () => { - const { dashboard } = this.props; - const haveFolder = dashboard.meta.folderId > 0; - appEvents.emit( - 'show-dash-search', - haveFolder - ? { - query: 'folder:current', - } - : null - ); + onDahboardNameClick = () => { + appEvents.emit('show-dash-search'); + }; + + onFolderNameClick = () => { + appEvents.emit('show-dash-search', { + query: 'folder:current', + }); }; onClose = () => { @@ -148,11 +145,20 @@ export class DashNav extends PureComponent { return ( <>
- +
{!this.isInFullscreenOrSettings && } - {haveFolder && {folderTitle} / } - {dashboard.title} - + {haveFolder && ( + <> + + {folderTitle} + + + + )} + + {dashboard.title} + +
{this.isSettings &&  / Settings}
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 8c950f72859..67071bb61c8 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -67,11 +67,6 @@ min-height: $navbarHeight; line-height: $navbarHeight; - .fa-caret-down { - font-size: 60%; - padding-left: 6px; - } - .gicon { top: -2px; position: relative; @@ -85,17 +80,32 @@ display: inline-block; } } +} - &--folder { - color: $text-color-weak; - display: none; +.navbar-page-btn__folder { + color: $text-color-weak; + display: none; - @include media-breakpoint-up(lg) { - display: inline-block; - } + @include media-breakpoint-up(lg) { + display: inline-block; } } +// element is needed here to override font-awesome specificity +i.navbar-page-btn__folder-icon { + font-size: $font-size-sm; + color: $text-color-weak; + padding: 0 $space-sm; + position: relative; + top: -1px; +} + +// element is needed here to override font-awesome specificity +i.navbar-page-btn__search { + font-size: $font-size-xs; + padding: 0 $space-xs; +} + .navbar-buttons { // height: $navbarHeight; display: flex;