8652, 8644, 8652 (#1970)

* 8652, 8644, 8652

* Remove duplicated translation

* 8619

Author: cryptalith

package.json

@@ -2,8 +2,8 @@
   "name": "ng-orcid",
   "version": "0.0.0",
   "scripts": {
-    "start": "ng serve --disable-host-check --host 0.0.0.0",
-    "start-qa": "ng serve --configuration=local-qa --host 0.0.0.0",
+    "start-local": "ng serve --disable-host-check --host 0.0.0.0",
+    "start": "ng serve --configuration=local-qa --host 0.0.0.0",
     "start-sandbox": "ng serve --configuration=local-sandbox --host 0.0.0.0",
     "start:en": "ng serve --configuration=local,en --disable-host-check",
     "start:fr": "ng serve --configuration=local,fr --disable-host-check",

src/app/cdk/side-bar/modals/modal-country/modal-country.component.html

@@ -145,7 +145,7 @@
             <div class="col no-wrap actions-wrapper no-gutters">
               <app-visibility-selector
                 formControlName="visibility"
-                itemTitle="country.countryName || ''"
+                [itemTitle]="country.countryName || ''"
               ></app-visibility-selector>
               <button
                 (click)="deleteCountry(country.putCode)"

src/app/cdk/side-bar/modals/modal-email/modal-email.component.html

@@ -159,7 +159,7 @@ <h2 class="col orc-font-body" i18n="@@side-bar.primaryEmail">
                 [ariaLabelTrustedParty]="
                   ariaLabelVisibilityPrimaryEmailTrustedParty
                 "
-                [itemTitle]="ariaLabelPrimaryEmail"
+                [itemTitle]="emailsForm.value[email.putCode].email"
               ></app-visibility-selector>
               <div></div>
             </div>

src/app/cdk/side-bar/modals/modal-email/modal-email.component.scss

@@ -21,6 +21,7 @@
 
 .email-input-line {
   justify-content: space-between;
+  align-items: center;
 }
 
 mat-form-field {
@@ -57,6 +58,7 @@ mat-form-field {
 
     a {
       width: 100%;
+      max-width: 240px;
     }
   }
 

src/app/cdk/side-bar/side-bar/side-bar.component.html

@@ -250,7 +250,7 @@ <h3 header class="orc-font-body" i18n="@@record.keywords">Keywords</h3>
       [id]="userInfo?.EFFECTIVE_USER_ORCID"
       [userRecord]="userRecord"
     >
-      <h3 header class="orc-font-body" i18n="@@record.countries">Countries</h3>
+      <h3 header class="orc-font-body" i18n="@@side-bar.countries">Countries</h3>
       <app-panel-data *ngIf="userRecord.countries.addresses.length > 0">
         <ng-container *ngIf="!isPublicRecord">
           <app-panel-element

src/app/cdk/visibility-selector/visibility-selector/visibility-selector.component.html

@@ -1,4 +1,7 @@
 <button
+  [ngClass]="{
+    'not-editable': !editable
+  }"
   [disabled]="!editable"
   mat-button
   [matMenuTriggerFor]="menu"
@@ -31,7 +34,9 @@
         >Only me</ng-container
       >
     </div>
-    <mat-icon class="arrow-drop-down">arrow_drop_down</mat-icon>
+    <mat-icon *ngIf="editable" class="arrow-drop-down"
+      >arrow_drop_down</mat-icon
+    >
   </div>
 </button>
 <mat-menu #menu="matMenu">

src/app/cdk/visibility-selector/visibility-selector/visibility-selector.component.scss

@@ -14,6 +14,7 @@
   justify-content: center;
   margin-inline-end: 16px;
 }
+
 [mat-menu-item] {
   display: flex;
   align-items: center;
@@ -41,10 +42,12 @@
 .main-button-container {
   display: flex;
   align-items: center;
+
   .icon-title-container {
     min-width: 100px;
     display: flex;
     align-items: center;
+    font-weight: 400;
   }
 }
 
@@ -65,3 +68,20 @@ h1 {
   padding: 0;
   margin-bottom: 4px;
 }
+
+
+:host {
+  ::ng-deep {
+    .mat-button-disabled {
+      .icon-title-container {
+        color: initial;
+      }
+    }
+
+
+  }
+}
+
+.mat-button-disabled.main-menu {
+  border: none
+}

src/app/cdk/visibility-selector/visibility-selector/visibility-selector.component.ts

@@ -57,18 +57,21 @@ export class VisibilitySelectorComponent
   private() {
     this.privacy = 'PRIVATE'
     this.visibilityError = false
+    this.writeValue(this.privacy)
     this.onChange(this.privacy)
     this.onTouched(this.privacy)
   }
   limited() {
     this.privacy = 'LIMITED'
     this.visibilityError = false
+    this.writeValue(this.privacy)
     this.onChange(this.privacy)
     this.onTouched(this.privacy)
   }
   public() {
     this.privacy = 'PUBLIC'
     this.visibilityError = false
+    this.writeValue(this.privacy)
     this.onChange(this.privacy)
     this.onTouched(this.privacy)
   }

src/locale/properties/record/record.en.properties

@@ -5,7 +5,6 @@ record.noPublicInfo=No public information available.
 record.otherIds=Other IDs
 record.websitesAndSocialLinks=Websites & social links
 record.keywords=Keywords
-record.countries=Countries
 record.previewPublicRecord=Preview public record
 record.ariaLabelpreviewPublicRecord=Preview the public version of this record (Opens in a new tab)
 record.closeOtherSources=Close other sources