From 7bc942ae164164dadba94045f1f249a6cbb17284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 2 May 2022 20:04:34 +0300
Subject: [PATCH] CSS & page header ng content

---
 src/assets/styles/_common-mixins.scss                |  9 +++++++++
 src/assets/styles/common-base-screen.scss            |  3 +++
 src/assets/styles/common-tabs.scss                   |  1 +
 .../listing/page-header/page-header.component.html   | 12 +++++++++---
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss
index 0787a12..7034d9f 100644
--- a/src/assets/styles/_common-mixins.scss
+++ b/src/assets/styles/_common-mixins.scss
@@ -56,3 +56,12 @@
     cursor: pointer;
     outline: inherit;
 }
+
+@mixin clear-a {
+    text-decoration: none;
+    color: initial;
+
+    &:hover {
+        color: initial;
+    }
+}
diff --git a/src/assets/styles/common-base-screen.scss b/src/assets/styles/common-base-screen.scss
index 346f630..ec2c3ef 100644
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@@ -1,3 +1,5 @@
+@use 'common-mixins';
+
 .top-bar {
     height: 61px;
     width: 100vw;
@@ -12,6 +14,7 @@
     }
 
     .logo {
+        @include common-mixins.clear-a;
         display: flex;
         align-items: center;
     }
diff --git a/src/assets/styles/common-tabs.scss b/src/assets/styles/common-tabs.scss
index 05726ea..7bc7308 100644
--- a/src/assets/styles/common-tabs.scss
+++ b/src/assets/styles/common-tabs.scss
@@ -2,6 +2,7 @@
 
 .red-tab {
     @include mixins.clear-btn;
+    @include mixins.clear-a;
 
     &:not(:last-child) {
         margin-right: 2px;
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index bbf539a..fda1b89 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -2,7 +2,13 @@
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
     <div *ngIf="filters$ | async as filters" class="filters">
-        <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
+        <ng-content select="[slot=beforeFilters]"></ng-content>
+
+        <div
+            *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters"
+            class="text-muted"
+            translate="filters.filter-by"
+        ></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
 
@@ -51,15 +57,15 @@
                     *ngIf="!config.hide"
                     [disabled]="config.disabled$ && (config.disabled$ | async)"
                     [icon]="config.icon"
+                    [id]="config.id"
                     [iqserHelpMode]="config.helpModeKey"
                     [tooltip]="config.label"
-                    [id]="config.id"
                     tooltipPosition="below"
                 ></iqser-circle-button>
             </ng-container>
 
             <!-- Extra custom actions here -->
-            <ng-content></ng-content>
+            <ng-content select="[slot=right]"></ng-content>
 
             <iqser-circle-button
                 (action)="closeAction.emit()"