From f3b87c55ddb5219f49f9ba960ffbca7cb96ccd15 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Tue, 26 Apr 2022 10:08:23 +0200
Subject: [PATCH] The `_editable` class should only be set if the toolbar is
 really editable

---
 .../editable-toolbar-title.component.ts       | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/shared/components/editable-toolbar-title/editable-toolbar-title.component.ts b/frontend/src/app/shared/components/editable-toolbar-title/editable-toolbar-title.component.ts
index 7bed9073d3..5420bf6e86 100644
--- a/frontend/src/app/shared/components/editable-toolbar-title/editable-toolbar-title.component.ts
+++ b/frontend/src/app/shared/components/editable-toolbar-title/editable-toolbar-title.component.ts
@@ -69,7 +69,10 @@ export class EditableToolbarTitleComponent implements OnInit, OnChanges {
 
   @HostBinding('class.title-container') baseClass = true;
 
-  @HostBinding('class.title-container_editable') editableClass = true;
+  @HostBinding('class.title-container_editable')
+  public get editableClass():boolean {
+    return this.editable;
+  }
 
   @ViewChild('editableTitleInput') inputField?:ElementRef;
 
@@ -95,7 +98,7 @@ export class EditableToolbarTitleComponent implements OnInit, OnChanges {
   constructor(readonly injector:Injector) {
   }
 
-  ngOnInit() {
+  ngOnInit():void {
     this.text.input_title = `${this.text.click_to_edit} ${this.text.press_enter_to_save}`;
 
     jQuery(this.elementRef.nativeElement).on(triggerEditingEvent, (evt:Event, val = '') => {
@@ -125,36 +128,36 @@ export class EditableToolbarTitleComponent implements OnInit, OnChanges {
     }
   }
 
-  public onFocus(event:FocusEvent) {
+  public onFocus(event:FocusEvent):void {
     this.toggleToolbarButtonVisibility(true);
     this.selectInputOnInitalFocus(event.target as HTMLInputElement);
   }
 
-  public onBlur() {
+  public onBlur():void {
     this.toggleToolbarButtonVisibility(false);
   }
 
-  public selectInputOnInitalFocus(input:HTMLInputElement) {
+  public selectInputOnInitalFocus(input:HTMLInputElement):void {
     if (this.initialFocus) {
       input.select();
       this.initialFocus = false;
     }
   }
 
-  public saveWhenFocusOutside($event:FocusEvent) {
+  public saveWhenFocusOutside($event:FocusEvent):void {
     whenOutside(this.elementRef.nativeElement, () => this.save($event));
   }
 
-  public reset() {
+  public reset():void {
     this.resetInputField();
     this.selectedTitle = this.inputTitle;
   }
 
-  public get showSave() {
+  public get showSave():boolean {
     return this.editable && this.showSaveCondition;
   }
 
-  public save($event:Event, force = false) {
+  public save($event:Event, force = false):void {
     $event.preventDefault();
 
     this.resetInputField();
@@ -195,20 +198,20 @@ export class EditableToolbarTitleComponent implements OnInit, OnChanges {
   /**
    * Called when saving the changed title
    */
-  private emitSave(title:string) {
+  private emitSave(title:string):void {
     this.onSave.emit(title);
   }
 
   /**
    * Called when trying to save an empty text
    */
-  private onEmptyError() {
+  private onEmptyError():void {
     // this.updateItemInMenu();  // Throws an error message, when name is empty
     this.onEmptySubmit.emit();
     this.focusInputOnError();
   }
 
-  private focusInputOnError() {
+  private focusInputOnError():void {
     if (this.inputField) {
       const el = this.inputField.nativeElement;
       el.classList.add('-error');
@@ -216,14 +219,14 @@ export class EditableToolbarTitleComponent implements OnInit, OnChanges {
     }
   }
 
-  private resetInputField() {
+  private resetInputField():void {
     if (this.inputField) {
       const el = this.inputField.nativeElement;
       el.classList.remove('-error');
     }
   }
 
-  private toggleToolbarButtonVisibility(hidden:boolean) {
+  private toggleToolbarButtonVisibility(hidden:boolean):void {
     jQuery('.toolbar-items').toggleClass('hidden-for-mobile', hidden);
   }
 }