[NAE-2413] Minor CSS changes & fixes

- change margin of breadcrumbs
- change buttonfield padding
- change margin
- change background of pagination
- remove sorting icon on double drawer
- remove margin on refs case and task views
- fix alignment on i18n field
- fix alignment of create case button
- fix text color on datafields

Author: Kovy95

nae.json

@@ -321,6 +321,34 @@
                     "routing": {
                         "path": "breadcrumbs"
                     }
+                },
+                "double-menu-tabbed-views": {
+                    "component": {
+                        "class": "TabbedViewsExampleComponent",
+                        "from": "./doc/tabbed-case-view/tabbed-views-example.component"
+                    },
+                    "access": "private",
+                    "navigation": {
+                        "title": "Custom Tabbed View",
+                        "icon": "tab"
+                    },
+                    "routing": {
+                        "path": "double-menu-tabbed-views"
+                    },
+                    "children": {
+                        "custom-redirect": {
+                            "component": {
+                                "class": "TabbedViewsExampleComponent",
+                                "from": "./doc/tabbed-case-view/tabbed-views-example.component"
+                            },
+                            "access": "private",
+                            "navigation": false,
+                            "routing": {
+                                "path": "**"
+                            }
+                        }
+                    },
+                    "processUri": "/"
                 }
             }
         },

projects/nae-example-app/src/app/doc/double-drawer-example/double-drawer-example.component.html

@@ -1,3 +1,3 @@
-<nc-navigation-double-drawer #sidenav image="assets/img/netgrif_full_white.svg" imageRouterLink="/tabbed-views">
+<nc-navigation-double-drawer #sidenav image="assets/img/netgrif_full_black.svg" imageRouterLink="/tabbed-views">
     <router-outlet></router-outlet>
 </nc-navigation-double-drawer>

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.ts

@@ -78,7 +78,11 @@ export class TabbedCaseViewComponent extends AbstractTabbedCaseViewComponent imp
                 @Inject(NAE_TAB_DATA) injectedTabData: InjectedTabbedCaseViewData) {
         super(caseViewService, loggerService, injectedTabData, overflowService, undefined, undefined, {
             enableCaseTitle: true,
-            isCaseTitleRequired: true
+            isCaseTitleRequired: true,
+            newCaseButtonConfig: {
+                createCaseButtonTitle: 'My custom create case button',
+                createCaseButtonIcon: 'home'
+            }
         });
     }
 

projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-task-view/tabbed-task-view.component.scss

@@ -7,7 +7,7 @@
 
 .search-panel {
     margin-top: 16px;
-    padding: 8px 16px;
+    margin-bottom: 2px;
 }
 
 .content-margin {

projects/nae-example-app/src/assets/img/netgrif_full_black.svg

@@ -45,3 +45,7 @@
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }
+
+.mat-paginator {
+    background: transparent !important;
+}

projects/netgrif-components/nae-theme.scss

@@ -36,7 +36,7 @@
 }
 
 .padding-bottom {
-    padding-bottom: 6px;
+    padding-bottom: 12px;
 }
 .no-shadow {
     box-shadow: unset !important;

projects/netgrif-components/src/lib/data-fields/button-field/button-default-field/button-default-field.component.scss

@@ -15,6 +15,10 @@
     $color-text-enabled: #64748B;
     $color-outline-enabled: #64748B;
 
+    .mat-form-field-label {
+        color: $color-text-enabled !important;
+    }
+
     .editor-preview > h1 {
         border-bottom: 1px solid #ddd;
     }
@@ -70,13 +74,13 @@
     }
 
     .invalid-form-input {
-        border: solid 2px mat.get-color-from-palette($primary) !important;
+        border: solid 2px mat.get-color-from-palette($warn) !important;
         padding: 1px !important;
     }
 
-    .invalid-form-label {
-        color: mat.get-color-from-palette($primary) !important;
-    }
+    //.invalid-form-label {
+    //    color: mat.get-color-from-palette($primary) !important;
+    //}
 
     .netgrif-input {
 
@@ -216,7 +220,7 @@
         }
 
         .mat-form-field-appearance-outline .mat-form-field-wrapper {
-            margin: 0.25px 0 0;
+            margin: 0.25px 0 2px;
         }
 
         // DISABLED
@@ -323,6 +327,17 @@
             }
         }
 
+        .netgrif-chip-button-fix {
+            &.mat-form-field .mat-form-field-prefix {
+                top: 0.33em !important;
+                padding-right: 4px !important;
+            }
+
+            .netgrif-label {
+                font-weight: 400 !important;
+            }
+        }
+
         .mat-select-trigger {
             height: unset;
             min-height: 1.125em;

projects/netgrif-components/src/lib/data-fields/data-field.theme.scss

@@ -23,7 +23,7 @@
     </ng-template>
 </ng-template>
 <ng-template [ngIf]="!formControlRef.disabled">
-    <div class="full-width">
+    <div class="full-width" [ngClass]="{'padding-bottom-fix': !dataField.isInvalid(formControlRef) && !hasHint()}">
         <div #i18nLabel class="i18n-label" [ngClass]="{'invalid-form-label': dataField.isInvalid(formControlRef)}">
             {{dataField.title}}
             <nc-required-label *ngIf="dataField.behavior.required" [isIn]="!dataField.disabled"></nc-required-label>
@@ -75,8 +75,10 @@
                 </button>
             </div>
         </div>
-        <mat-hint class="i18n-hint-error" [ngClass]="{'mat-hint-disabled': formControlRef.disabled}"
-                  *ngIf="!dataField.isInvalid(formControlRef) && hasHint()">{{dataField.description}}</mat-hint>
-        <mat-error class="i18n-hint-error" *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
+        <div class="i18n-hint-wrapper" *ngIf="!dataField.isInvalid(formControlRef) && hasHint() || dataField.isInvalid(formControlRef)">
+            <mat-hint class="i18n-hint-error" [ngClass]="{'mat-hint-disabled': formControlRef.disabled}"
+                      *ngIf="!dataField.isInvalid(formControlRef) && hasHint()">{{dataField.description}}</mat-hint>
+            <mat-error class="i18n-hint-error" *ngIf="dataField.isInvalid(formControlRef)">{{getErrorMessage()}}</mat-error>
+        </div>
     </div>
 </ng-template>

projects/netgrif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html

@@ -49,6 +49,7 @@
     padding: 0 1em;
     font-size: 75%;
     width: auto !important;
+    display: block;
 }
 
 .language-svg-wrapper {
@@ -149,3 +150,12 @@
 .i18n-bold-text {
     font-weight: bold;
 }
+
+.padding-bottom-fix {
+    padding-bottom: 1em;
+}
+
+.i18n-hint-wrapper {
+    height: 18px;
+    margin-top: -3px;
+}