Long email addresses cause incorrect formatting of the left sidebar c…

…hange history - resolved (#254)

* issue resolved

* comments removed

* Overworked - now the email address gets copied and the log service shows a toast to inform the user that the email address was copied.

* margin is not 0px - just 0

src/app/view/variant/variant-view/variant-history/variant-history.component.scss

@@ -37,3 +37,7 @@
   display: flex;
   flex-direction: row;
 }
+
+div {
+  user-select: none;
+}

src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.html

@@ -8,7 +8,10 @@
     <div class="info-field title-field" *ngIf="getTitle(); let title">
       {{ title }}
     </div>
-    <div class="info-field title-field" *ngIf="getUserId(); let userId">
+    <div class="info-field title-field user-id"
+         *ngIf="getUserId(); let userId"
+         [attr.title]="getUserId()"
+          (click)="copyUserId()">
       {{ userId }}
     </div>
     <div class="info-field date-field">
@@ -19,7 +22,9 @@
     <div
       class="info-field comment-field"
       *ngIf="commentField && commentField !== ''"
+      (click)="copyComment()"
     >
+      <br>
       «{{ commentField }}»
     </div>
   </div>

src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.scss

@@ -20,8 +20,8 @@
   }
 }
 
-.comment {
-  font-style: italic;
+.comment-field {
+  cursor: pointer;
 }
 
 .title-field {
@@ -41,6 +41,7 @@
   grid-column-start: 1;
   grid-column-end: span 2;
   grid-row: 2;
+  margin-right: 0;
 }
 
 .in-conflict {
@@ -70,3 +71,13 @@
     border: none;
   }
 }
+
+
+.user-id {
+  width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+}

src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.ts

@@ -1,4 +1,5 @@
 import {Component, Input} from "@angular/core";
+import {LogService} from "../../../../../logger/log.service";
 
 @Component({
   selector: "sbb-version-entry-layout",
@@ -13,6 +14,9 @@ export class VersionEntryLayoutComponent {
   @Input() dateField: Date;
   @Input() commentField?: string;
 
+  constructor(private readonly logService: LogService) {
+  }
+
   isInConflictState(): boolean {
     return this.state === "conflict";
   }
@@ -35,6 +39,26 @@ export class VersionEntryLayoutComponent {
     return undefined;
   }
 
+  copyComment() {
+    const comment = this.commentField;
+    if (!comment) {
+      return;
+    }
+    navigator.clipboard.writeText(comment);
+    const msg = $localize`:@@app.view.variant.variant-view.variant-history.version-entry-layout.user-id-copied:copied ${comment}:msg:`;
+    this.logService.info(msg);
+  }
+
+  copyUserId() {
+    const userId = this.getUserId();
+    if (!userId) {
+      return;
+    }
+    navigator.clipboard.writeText(userId);
+    const msg = $localize`:@@app.view.variant.variant-view.variant-history.version-entry-layout.user-id-copied:copied ${userId}:msg:`;
+    this.logService.info(msg);
+  }
+
   getTitle(): string | undefined {
     if (typeof this.titleField === "string") {
       return this.titleField;
@@ -44,5 +68,6 @@ export class VersionEntryLayoutComponent {
 }
 
 export class UserId {
-  constructor(readonly value: string) {}
+  constructor(readonly value: string) {
+  }
 }

src/assets/i18n/de.json

@@ -560,6 +560,9 @@
               "version-already-available": "Version bereits vorhanden",
               "successfully-published": "Erfolgreich publiziert"
             },
+            "version-entry-layout": {
+              "user-id-copied": "In die Zwischenablage kopiert: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Herunterladen",
               "restore": "Wiederherstellen",

src/assets/i18n/en.json

@@ -560,6 +560,9 @@
               "version-already-available": "Version already available",
               "successfully-published": "Successfully published"
             },
+            "version-entry-layout": {
+              "user-id-copied": "Copied to clipboard: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Download",
               "restore": "Restore",

src/assets/i18n/fr.json

@@ -560,6 +560,9 @@
               "version-already-available": "Version already available",
               "successfully-published": "Successfully published"
             },
+            "version-entry-layout": {
+              "user-id-copied": "Copied to clipboard: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Download",
               "restore": "Restore",

src/assets/i18n/it.json

@@ -560,6 +560,9 @@
               "version-already-available": "Version already available",
               "successfully-published": "Successfully published"
             },
+            "version-entry-layout": {
+              "user-id-copied": "Copied to clipboard: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Download",
               "restore": "Restore",