TSK-1527: Modify how badge messages are displayed

web/src/app/administration/components/classification-details/classification-details.component.html

@@ -4,8 +4,16 @@
 
     <!-- TITLE + ACTION BUTTONS -->
     <mat-toolbar class="action-toolbar">
-      <h4 class="action-toolbar__headline">{{classification.name}}&nbsp; [{{classification.type}}]
+      <h4 class="action-toolbar__headline">
-        <span *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message"> {{badgeMessage$ | async}}</span>
+        <span
+          class="{{isCreatingNewClassification? 'action-toolbar__title-badge' : 'action-toolbar__title'}}"
+          matTooltip="{{classification.name}}&nbsp; [{{classification.type}}]">
+          {{classification.name}}&nbsp; [{{classification.type}}]
+        </span>
+        <span
+          *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message" matTooltip="{{badgeMessage$ | async}}">
+          {{badgeMessage$ | async}}
+        </span>
       </h4>
 
       <div>

web/src/app/administration/components/classification-details/classification-details.component.scss

@@ -21,15 +21,36 @@
 
   &__headline {
     font-size: 1.5rem;
-    padding: 0.5rem;
+    padding: 0 0.5rem 0.5rem 0.5rem;
-    max-width: calc(100% - 350px);
+    max-width: calc(100% - 350px) !important;
+  }
+
+  &__title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    position: relative;
+    top: 8px;
+  }
+
+  &__title-badge {
+    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &__badge-message {
-    font-size: 13px;
+    display: block;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 20px;
+    font-size: 1rem;
     background-color: $transparent-grey;
+    border-radius: 4px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__button {

web/src/app/administration/components/classification-details/classification-details.component.spec.ts

@@ -32,6 +32,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({ selector: 'taskana-shared-field-error-display', template: '' })
 class FieldErrorDisplayStub {
@@ -129,6 +130,7 @@ describe('ClassificationDetailsComponent', () => {
         MatSelectModule,
         MatProgressBarModule,
         MatMenuModule,
+        MatTooltipModule,
         BrowserAnimationsModule
       ],
       declarations: [ClassificationDetailsComponent, InputStub, FieldErrorDisplayStub, SvgIconStub, TextareaStub],
@@ -274,7 +276,7 @@ describe('ClassificationDetailsComponent', () => {
     expect(headline).toBeTruthy();
     expect(headline.textContent).toContain('Recommendation');
     expect(headline.textContent).toContain('DOCUMENT');
-    const badgeMessage = headline.children[0];
+    const badgeMessage = headline.children[1];
     expect(badgeMessage).toBeTruthy();
     expect(badgeMessage.textContent.trim()).toBe('Creating new classification');
   });

web/src/app/administration/components/workbasket-details/workbasket-details.component.html

@@ -1,8 +1,8 @@
 <div class="workbasket-details">
   <mat-toolbar class="workbasket-details__toolbar">
     <h4 class="workbasket-details__title">
-      <span class="workbasket-details__title-name">{{workbasket.name}}</span>
+      <span class="workbasket-details__title-name" matTooltip="{{workbasket.name}}">{{workbasket.name}}</span>
-      <span class="workbasket-details__title-badge"> {{ badgeMessage$ | async }}</span>
+      <span class="workbasket-details__title-badge" matTooltip="{{ badgeMessage$ | async }}"> {{ badgeMessage$ | async }}</span>
     </h4>
     <span class="workbasket-details__spacer"></span>
     <button mat-button class="workbasket-details__button workbasket-details__save-button"

web/src/app/administration/components/workbasket-details/workbasket-details.component.scss

@@ -9,18 +9,24 @@
   &__title {
     font-size: 1.5rem;
     padding: 4px;
+    max-width: 392px;
   }
 
   &__title-name {
     display: block;
-    max-width: 392px;
+
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   &__title-badge {
-    background-color: $brown;
+    font-size: 1.1rem;
+    background-color: $transparent-grey;
     border-radius: 4px;
+
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__spacer {

web/src/app/administration/components/workbasket-details/workbasket-details.component.spec.ts

@@ -27,6 +27,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CopyWorkbasket, CreateWorkbasket } from '../../../shared/store/workbasket-store/workbasket.actions';
 import { take } from 'rxjs/operators';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({ selector: 'taskana-administration-workbasket-information', template: '<div>i</div>' })
 class WorkbasketInformationStub {
@@ -91,6 +92,7 @@ describe('WorkbasketDetailsComponent', () => {
         MatTabsModule,
         MatMenuModule,
         MatToolbarModule,
+        MatTooltipModule,
         BrowserAnimationsModule
       ],
       declarations: [