Style link on the app

Add dialog to see detail of file
Style file tree

src/app/components/footer/footer.component.scss

@@ -26,7 +26,10 @@ $height: 40px;
   font-weight: bold;
 
   &:hover {
-    color: white;
-    text-decoration: underline;
+    color: $white;
+  }
+
+  &:before {
+    background-color: $white;
   }
 }

src/app/components/language-selector/language-selector.component.scss

@@ -7,3 +7,11 @@
 .is-active {
   color: $primary-color;
 }
+
+a {
+  color: $white;
+
+  &:hover {
+    color: $primary-color;
+  }
+}

src/app/components/main-toolbar-mobile/main-toolbar-mobile.component.scss

@@ -9,6 +9,14 @@
   color: $white;
 }
 
+a {
+  color: $white;
+
+  &:hover {
+    color: $primary-color;
+  }
+}
+
 .unige-logo {
   max-height: 50px;
 }

src/app/components/main-toolbar/main-toolbar.component.scss

@@ -10,6 +10,14 @@
   color: $white;
 }
 
+a {
+  color: $white;
+
+  &:hover {
+    color: $primary-color;
+  }
+}
+
 .logo {
   align-self: center;
 }

src/app/deposit/components/file-tree/file-tree.component.html

@@ -6,8 +6,26 @@
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
     <li class="mat-tree-node">
       <!-- use a disabled button to provide padding for tree leaf -->
-      <button mat-icon-button disabled></button>
-      <a href="{{getSourceData(node)}}" target="_blank">{{node.name}}</a> - {{getStatus(node)}}
+      <!--      <button mat-icon-button disabled></button>-->
+      <mat-card class="file">
+        <span>
+          <fa-icon class="ico-file" icon="file"></fa-icon>
+          <a href="{{getSourceData(node)}}" target="_blank">{{node.name}}</a>
+        </span>
+        <div class="right-part">
+          <span *ngIf="isInError(node)"
+                [matTooltip]="'deposit.file.tree.error' | translate"
+                class="status">
+            <fa-icon icon="exclamation-triangle"></fa-icon>
+          </span>
+          <button mat-icon-button
+                  class="more"
+                  (click)="openDetailDialog(node)"
+                  [matTooltip]="'deposit.file.tree.details' | translate">
+            <fa-icon icon="ellipsis-v"></fa-icon>
+          </button>
+        </div>
+      </mat-card>
     </li>
   </mat-tree-node>
 
@@ -17,7 +35,7 @@
       <div class="mat-tree-node">
         <button mat-icon-button matTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name">
-          <fa-icon [icon]="treeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right'"></fa-icon>
+          <fa-icon [icon]="treeControl.isExpanded(node) ? 'folder-open' : 'folder'"></fa-icon>
         </button>
         {{node.name}}
       </div>

src/app/deposit/components/file-tree/file-tree.component.scss

@@ -15,3 +15,36 @@ $line-item-size: 30px;
     line-height: $line-item-size;
   }
 }
+
+.file {
+  width: 100%;
+  padding: 5px 8px;
+  margin: 4px 1px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ico-file {
+  padding-right: 10px;
+}
+
+.right-part {
+  width: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.status {
+  padding-top: 2px;
+  color: $red;
+}
+
+a {
+  position: initial;
+
+  &:before {
+    bottom: 0;
+  }
+}

src/app/deposit/components/file-tree/file-tree.component.ts

 import {NestedTreeControl} from "@angular/cdk/tree";
 import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
-import {MatTreeNestedDataSource} from "@angular/material";
+import {MatDialog, MatTreeNestedDataSource} from "@angular/material";
+import {FileDetailDialog} from "@app/deposit/dialogs/file-detail/file-detail.dialog";
 import {DepositDataFileModel} from "@app/deposit/models/deposit-data-file.model";
 import {StringUtil} from "@app/shared/utils/string.util";
 
@@ -22,6 +23,8 @@ export class FileTreeComponent {
   @Input()
   readonly: boolean;
 
+  readonly inErrorStatus: string = "IN_ERROR";
+
   @Input()
   set listDepositDataFile(val: DepositDataFileModel[]) {
     this._listDepositDataFile = val;
@@ -41,7 +44,7 @@ export class FileTreeComponent {
   private readonly SEPARATOR = "/";
   private readonly ROOT = this.SEPARATOR;
 
-  constructor() {
+  constructor(public dialog: MatDialog) {
   }
 
   adaptListDepositDataFileToTree(): void {
@@ -133,4 +136,16 @@ export class FileTreeComponent {
   getSourceData(node: FileNode): string {
     return node.file.sourceData;
   }
+
+  isInError(node: FileNode): boolean {
+    return node.file.status === this.inErrorStatus;
+  }
+
+  openDetailDialog(node: FileNode) {
+    const dialogRef = this.dialog.open(FileDetailDialog, {
+      data: node.file,
+      height: "400px",
+      width: "600px",
+    });
+  }
 }

src/app/deposit/deposit.module.ts

@@ -4,16 +4,17 @@ import {FileContainer} from "@app/deposit/containers/file/file.container";
 import {DepositRoutingModule} from "@app/deposit/deposit-routing.module";
 import {DepositState} from "@app/deposit/deposit.state";
 import {DeleteDialog} from "@app/deposit/dialogs/delete/delete.dialog";
+import {FileDetailDialog} from "@app/deposit/dialogs/file-detail/file-detail.dialog";
 import {DepositService} from "@app/deposit/services/deposit.service";
 import {EditView} from "@app/deposit/views/edit/edit.view";
 import {ListView} from "@app/deposit/views/list/list.view";
 import {SharedModule} from "@app/shared/shared.module";
 import {TranslateModule} from "@ngx-translate/core";
 import {NgxsModule} from "@ngxs/store";
+import {FileTreeComponent} from "./components/file-tree/file-tree.component";
+import {FileUploadComponent} from "./components/file-upload/file-upload.component";
 import {CreateView} from "./views/create/create.view";
 import {DetailView} from "./views/detail/detail.view";
-import { FileTreeComponent } from './components/file-tree/file-tree.component';
-import { FileUploadComponent } from './components/file-upload/file-upload.component';
 
 const views = [
   ListView,
@@ -26,6 +27,7 @@ const containers = [
 ];
 const dialogs = [
   DeleteDialog,
+  FileDetailDialog,
 ];
 const components = [
   FormComponent,

src/app/deposit/dialogs/file-detail/file-detail.dialog.html

+<h1 mat-dialog-title>{{'deposit.file.details.title' | translate:paramMessage}}</h1>
+<mat-list>
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.createDate' | translate}}</span>
+      <span class="value">{{data.creation.when | date}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.status' | translate}}</span>
+      <span class="value">{{data.status}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.statusMessage' | translate}}</span>
+      <span class="value">{{data.statusMessage}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.category' | translate}}</span>
+      <span class="value">{{data.dataCategory}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.type' | translate}}</span>
+      <span class="value">{{data.dataType}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.complianceLevel' | translate}}</span>
+      <span class="value">{{data.complianceLevel}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.smartSize' | translate}}</span>
+      <span class="value">{{data.smartSize}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.available' | translate}}</span>
+      <span class="value">{{data.available}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.fileFormat' | translate}}</span>
+      <span class="value">{{data.fileFormat}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.virusCheck' | translate}}</span>
+      <span class="value">{{data.virusCheck}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.initialPath' | translate}}</span>
+      <span class="value">{{data.initialPath}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.fileSize' | translate}}</span>
+      <span class="value">{{data.fileSize}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+
+  <mat-list-item>
+    <div class="item-content">
+      <span class="key">{{'deposit.file.detail.data.checksums' | translate}}</span>
+      <span class="value">{{data.checksums | json}}</span>
+    </div>
+  </mat-list-item>
+  <mat-divider></mat-divider>
+</mat-list>
+<div mat-dialog-actions>
+  <button mat-button cdkFocusInitial (click)="close()">{{'deposit.file.details.close' | translate}}</button>
+</div>

src/app/deposit/dialogs/file-detail/file-detail.dialog.scss

+@import "abstracts/variables";
+@import "abstracts/mixins";
+
+.item-content {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  flex-wrap: wrap;
+
+  @include respond-to('sm') {
+    justify-content: space-between;
+  }
+}
+
+.key {
+  flex-basis: 100%;
+  color: $light-grey;
+
+  @include respond-to('sm') {
+    flex-basis: auto;
+    color: initial;
+  }
+}
+

src/app/deposit/dialogs/file-detail/file-detail.dialog.ts

+import {ChangeDetectionStrategy, Component, Inject, OnInit} from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
+import {DepositDataFileModel} from "@app/deposit/models/deposit-data-file.model";
+import {BaseDirective} from "@app/shared/directives/base.directive";
+
+@Component({
+  selector: "dlcm-file-detail-dialog",
+  templateUrl: "./file-detail.dialog.html",
+  styleUrls: ["./file-detail.dialog.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileDetailDialog extends BaseDirective implements OnInit {
+  paramMessage = {name: ""};
+
+  constructor(protected dialogRef: MatDialogRef<FileDetailDialog>,
+              @Inject(MAT_DIALOG_DATA) public data: DepositDataFileModel) {
+    super();
+  }
+
+  ngOnInit() {
+    this.paramMessage.name = this.data.fileName;
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

src/app/material.module.ts

 import {NgModule} from "@angular/core";
 import {
   MatButtonModule,
+  MatCardModule,
   MatCheckboxModule,
   MatDatepickerModule,
   MatDialogModule,
+  MatDividerModule,
+  MatExpansionModule,
   MatInputModule,
+  MatListModule,
   MatNativeDateModule,
   MatPaginatorModule,
   MatProgressSpinnerModule,
@@ -12,7 +16,8 @@ import {
   MatSnackBarModule,
   MatTabsModule,
   MatToolbarModule,
-  MatTooltipModule, MatTreeModule,
+  MatTooltipModule,
+  MatTreeModule,
 } from "@angular/material";
 
 const modules = [
@@ -23,6 +28,7 @@ const modules = [
   MatButtonModule,
   MatSnackBarModule,
   MatDialogModule,
+  MatDividerModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatSelectModule,
@@ -30,6 +36,9 @@ const modules = [
   MatPaginatorModule,
   MatTooltipModule,
   MatTreeModule,
+  MatExpansionModule,
+  MatCardModule,
+  MatListModule,
 ];
 
 @NgModule({

src/app/shared/components/breadcrumb/breadcrumb.component.scss

@@ -18,13 +18,3 @@ li + li:before {
   color: $dark-grey;
   content: "/\00a0";
 }
-
-a {
-  color: $primary-color;
-  text-decoration: none;
-
-  &:hover {
-    color: $accent-color;
-    text-decoration: underline;
-  }
-}

src/assets/i18n/de.json

 {
-	"access": {
-		"organizationalUnitNotFound": "Unable to get data",
-		"table": {
-			"header": {
-				"accessLevel": "Access Level",
-				"organizationalUnit": "Organizational Unit",
-				"title": "Title",
-				"yearPublicationDate": "Publication Year"
-			}
-		}
-	},
-	"app": {
-		"login": {
-			"loginButton": "Log in",
-			"loginMessage": "You are currently not connected, please log in to continue."
-		},
-		"toolbar": {
-			"deposit": "Deposits",
-			"home": "Home",
-			"login": "Log in",
-			"logout": "Log out",
-			"organizationalUnit": "Organizational Units"
-		}
-	},
-	"breadcrumb": {
-		"access": {
-			"root": "Access",
-			"search": "Search"
-		},
-		"deposit": {
-			"create": "Create",
-			"detail": "Detail",
-			"edit": "Edit",
-			"list": "List",
-			"root": "Deposits"
-		},
-		"home": "Home",
-		"organizationalUnit": {
-			"create": "Create",
-			"detail": "Detail",
-			"edit": "Edit",
-			"list": "List",
-			"root": "Organizational Units"
-		}
-	},
-	"deposit": {
-		"accessLevel": "Access Level",
-		"author": "Author",
-		"collectionBegin": "Data Collection Start Date",
-		"collectionEnd": "Data Collection End Date",
-		"delete": "Delete",
-		"description": "Description",
-		"dialog": {
-			"delete": {
-				"cancel": "Cancel",
-				"confirm": "Yes",
-				"message": "Are you sure you want to delete the deposit '{{name}}'?",
-				"title": "Confirm deletion"
-			}
-		},
-		"edit": "Edit",
-		"file": {
-			"search": "Choose file",
-			"tree": {
-				"label": ""
-			},
-			"uploadButton": "Upload"
-		},
-		"hasEmbargo": "The deposit has an embargo",
-		"hint": {
-			"author": "Author"
-		},
-		"language": "Language",
-		"license": "License",
-		"new": "Create deposit",
-		"organizationUnit": "Organizational Unit",
-		"preservationPolicy": "Preservation Policy",
-		"publicationDate": "Publication Date",
-		"refresh": "Refresh",
-		"submissionPolicy": "Submission Policy",
-		"submit": "Submit",
-		"tab": {
-			"datafiles": "Data Files",
-			"details": "Details"
-		},
-		"table": {
-			"header": {
-				"creation": {
-					"when": "Created"
-				},
-				"lastUpdate": {
-					"when": "Last updated"
-				},
-				"publicationDate": "Publication date",
-				"status": "Status",
-				"title": "Title"
-			}
-		},
-		"title": "Title"
-	},
-	"error": {
+  "access": {
+    "organizationalUnitNotFound": "Unable to get data",
+    "table": {
+      "header": {
+        "accessLevel": "Access Level",
+        "organizationalUnit": "Organizational Unit",
+        "title": "Title",
+        "yearPublicationDate": "Publication Year"
+      }
+    }
+  },
+  "app": {
+    "login": {
+      "loginButton": "Log in",
+      "loginMessage": "You are currently not connected, please log in to continue."
+    },
+    "toolbar": {
+      "deposit": "Deposits",
+      "home": "Home",
+      "login": "Log in",
+      "logout": "Log out",
+      "organizationalUnit": "Organizational Units"
+    }
+  },
+  "breadcrumb": {
+    "access": {
+      "root": "Access",
+      "search": "Search"
+    },
+    "deposit": {
+      "create": "Create",
+      "detail": "Detail",
+      "edit": "Edit",
+      "list": "List",
+      "root": "Deposits"
+    },
+    "home": "Home",
+    "organizationalUnit": {
+      "create": "Create",
+      "detail": "Detail",
+      "edit": "Edit",
+      "list": "List",
+      "root": "Organizational Units"
+    }
+  },
+  "deposit": {
+    "accessLevel": "Access Level",
+    "author": "Author",
+    "collectionBegin": "Data Collection Start Date",
+    "collectionEnd": "Data Collection End Date",
+    "delete": "Delete",
+    "description": "Description",
+    "dialog": {
+      "delete": {
+        "cancel": "Cancel",
+        "confirm": "Yes",
+        "message": "Are you sure you want to delete the deposit '{{name}}'?",
+        "title": "Confirm deletion"
+      }
+    },
+    "edit": "Edit",
+    "file": {
+      "detail": {
+        "data": {
+          "available": "Available",
+          "category": "Category",
+          "checksums": "Checksums",
+          "complianceLevel": "Compliance level",
+          "createDate": "Creation date",
+          "fileFormat": "File format",
+          "fileSize": "File size",
+          "initialPath": "Initial path",
+          "smartSize": "Smart size",
+          "status": "Status",
+          "statusMessage": "Status message",
+          "type": "Type",
+          "virusCheck": "Virus check"
+        }
+      },
+      "details": {
+        "close": "Close",
+        "title": "Details of file \"{{name}}\""
+      },
+      "search": "Choose file",
+      "tree": {
+        "details": "Details",
+        "error": "The file is in error state",
+        "label": "List of files :"
+      },
+      "uploadButton": "Upload"
+    },
+    "hasEmbargo": "The deposit has an embargo",
+    "hint": {
+      "author": "Author"
+    },
+    "language": "Language",
+    "license": "License",
+    "new": "Create deposit",
+    "organizationUnit": "Organizational Unit",
+    "preservationPolicy": "Preservation Policy",
+    "publicationDate": "Publication Date",
+    "refresh": "Refresh",
+    "submissionPolicy": "Submission Policy",
+    "submit": "Submit",
+    "tab": {
+      "datafiles": "Data Files",
+      "details": "Details"
+    },
+    "table": {
+      "header": {
+        "creation": {
+          "when": "Created"
+        },
+        "lastUpdate": {
+          "when": "Last updated"
+        },
+        "publicationDate": "Publication date",
+        "status": "Status",
+        "title": "Title"
+      }
+    },
+    "title": "Title"
+  },
+  "error": {
 		"http": {
 			"forbidden": "You can't do this action",
 			"notFound": "The resource requested not exist",
@@ -114,51 +137,51 @@
 		}
 	},
 	"organizationalUnit": {
-		"closingDate": "Closing Date",
-		"delete": "Delete",
-		"description": "Description",
-		"dialog": {
-			"delete": {
-				"cancel": "Cancel",
-				"confirm": "Yes",
-				"message": "Are you sure you want to delete the organizational unit '{{name}}'?",
-				"title": "Confirm deletion"
-			}
-		},
-		"edit": "Edit",
-		"isEmpty": "Is Empty",
-		"name": "Name",
-		"new": "Create new organizational unit",
-		"open": "Open",
-		"openingDate": "Opening Date",
-		"refresh": "Refresh",
-		"submissionPolicy": "Submission policy",
-		"submit": "Submit",
-		"table": {
-			"header": {
-				"creation": {
-					"when": "Created"
-				},
-				"description": "Description",
-				"name": "Name"
-			}
-		}
-	},
-	"required": "This field is required",
-	"search": "Search",
-	"table": {
-		"nodata": "No data has been found",
-		"paginator": {
-			"firstPage": "First page",
-			"itemPerPage": "Items per page",
-			"lastPage": "Last page",
-			"nextPage": "Next page",
-			"ofLabel": "of",
-			"previousPage": "Previous page"
-		}
-	},
-	"tooltip": {
-		"other": "other",
-		"others": "others"
-	}
+    "closingDate": "Closing Date",
+    "delete": "Delete",
+    "description": "Description",
+    "dialog": {
+      "delete": {
+        "cancel": "Cancel",
+        "confirm": "Yes",
+        "message": "Are you sure you want to delete the organizational unit '{{name}}'?",
+        "title": "Confirm deletion"
+      }
+    },
+    "edit": "Edit",
+    "isEmpty": "Is Empty",
+    "name": "Name",
+    "new": "Create new organizational unit",
+    "open": "Open",
+    "openingDate": "Opening Date",
+    "refresh": "Refresh",
+    "submissionPolicy": "Submission policy",
+    "submit": "Submit",
+    "table": {
+      "header": {
+        "creation": {
+          "when": "Created"
+        },
+        "description": "Description",
+        "name": "Name"
+      }
+    }
+  },
+  "required": "This field is required",
+  "search": "Search",
+  "table": {
+    "nodata": "No data has been found",
+    "paginator": {
+      "firstPage": "First page",
+      "itemPerPage": "Items per page",
+      "lastPage": "Last page",
+      "nextPage": "Next page",
+      "ofLabel": "of",
+      "previousPage": "Previous page"
+    }
+  },
+  "tooltip": {
+    "other": "other",
+    "others": "others"
+  }
 }

src/assets/i18n/en.json

 {
-  "access": {
-    "organizationalUnitNotFound": "Unable to get data",
-    "table": {
-      "header": {
-        "accessLevel": "Access Level",
-        "organizationalUnit": "Organizational Unit",
-        "title": "Title",
-        "yearPublicationDate": "Publication Year"
-      }
-    }
-  },
-  "app": {
-    "login": {
-      "loginButton": "Log in",
-      "loginMessage": "You are currently not connected, please log in to continue."
-    },
-    "toolbar": {
-      "deposit": "Deposits",
-      "home": "Home",
-      "login": "Log in",
-      "logout": "Log out",
-      "organizationalUnit": "Organizational Units"
-    }
-  },
-  "breadcrumb": {
-    "access": {
-      "root": "Access",
-      "search": "Search"
-    },
-    "deposit": {
-      "create": "Create",
-      "detail": "Detail",
-      "edit": "Edit",
-      "list": "List",
-      "root": "Deposits"
-    },
-    "home": "Home",
-    "organizationalUnit": {
-      "create": "Create",
-      "detail": "Detail",
-      "edit": "Edit",
-      "list": "List",
-      "root": "Organizational Units"
-    }
-  },
-  "deposit": {
-    "accessLevel": "Access Level",
-    "author": "Author",
-    "collectionBegin": "Data Collection Start Date",
-    "collectionEnd": "Data Collection End Date",
-    "delete": "Delete",
-    "description": "Description",
-    "dialog": {
-      "delete": {
-        "cancel": "Cancel",
-        "confirm": "Yes",
-        "message": "Are you sure you want to delete the deposit '{{name}}'?",
-        "title": "Confirm deletion"
-      }
-    },
-    "edit": "Edit",
-    "file": {
-      "search": "Choose file",
-      "tree": {
-        "label": "List of files :"
-      },
-      "uploadButton": "Upload"
-    },
-    "hasEmbargo": "The deposit has an embargo",
-    "hint": {
-      "author": "Author"
-    },
-    "language": "Language",
-    "license": "License",
-    "new": "Create deposit",
-    "organizationUnit": "Organizational Unit",
-    "preservationPolicy": "Preservation Policy",
-    "publicationDate": "Publication Date",
-    "refresh": "Refresh",
-    "submissionPolicy": "Submission Policy",
-    "submit": "Submit",
-    "tab": {
-      "datafiles": "Data Files",
-      "details": "Details"
-    },
-    "table": {
-      "header": {
-        "creation": {
-          "when": "Created"
-        },
-        "lastUpdate": {
-          "when": "Last updated"
-        },
-        "publicationDate": "Publication date",
-        "status": "Status",
-        "title": "Title"
-      }
-    },
-    "title": "Title"
-  },
-  "error": {
+	"access": {
+		"organizationalUnitNotFound": "Unable to get data",
+		"table": {
+			"header": {
+				"accessLevel": "Access Level",
+				"organizationalUnit": "Organizational Unit",
+				"title": "Title",
+				"yearPublicationDate": "Publication Year"
+			}
+		}
+	},
+	"app": {
+		"login": {
+			"loginButton": "Log in",
+			"loginMessage": "You are currently not connected, please log in to continue."
+		},
+		"toolbar": {
+			"deposit": "Deposits",
+			"home": "Home",
+			"login": "Log in",
+			"logout": "Log out",
+			"organizationalUnit": "Organizational Units"
+		}
+	},
+	"breadcrumb": {
+		"access": {
+			"root": "Access",
+			"search": "Search"
+		},
+		"deposit": {
+			"create": "Create",
+			"detail": "Detail",
+			"edit": "Edit",
+			"list": "List",
+			"root": "Deposits"
+		},
+		"home": "Home",
+		"organizationalUnit": {
+			"create": "Create",
+			"detail": "Detail",
+			"edit": "Edit",
+			"list": "List",
+			"root": "Organizational Units"
+		}
+	},
+	"deposit": {
+		"accessLevel": "Access Level",
+		"author": "Author",
+		"collectionBegin": "Data Collection Start Date",
+		"collectionEnd": "Data Collection End Date",
+		"delete": "Delete",
+		"description": "Description",
+		"dialog": {
+			"delete": {
+				"cancel": "Cancel",
+				"confirm": "Yes",
+				"message": "Are you sure you want to delete the deposit '{{name}}'?",
+				"title": "Confirm deletion"
+			}
+		},
+		"edit": "Edit",
+		"file": {
+			"detail": {
+				"data": {
+					"available": "Available",
+					"category": "Category",
+					"checksums": "Checksums",
+					"complianceLevel": "Compliance level",
+					"createDate": "Creation date",
+					"fileFormat": "File format",
+					"fileSize": "File size",
+					"initialPath": "Initial path",
+					"smartSize": "Smart size",
+					"status": "Status",
+					"statusMessage": "Status message",
+					"type": "Type",
+					"virusCheck": "Virus check"
+				}
+			},
+			"details": {
+				"close": "Close",
+				"title": "Details of file \"{{name}}\""
+			},
+			"search": "Choose file",
+			"tree": {
+				"details": "Details",
+				"error": "The file is in error state",
+				"label": "List of files :"
+			},
+			"uploadButton": "Upload"
+		},
+		"hasEmbargo": "The deposit has an embargo",
+		"hint": {
+			"author": "Author"
+		},
+		"language": "Language",
+		"license": "License",
+		"new": "Create deposit",
+		"organizationUnit": "Organizational Unit",
+		"preservationPolicy": "Preservation Policy",
+		"publicationDate": "Publication Date",
+		"refresh": "Refresh",
+		"submissionPolicy": "Submission Policy",
+		"submit": "Submit",
+		"tab": {
+			"datafiles": "Data Files",
+			"details": "Details"
+		},
+		"table": {
+			"header": {
+				"creation": {
+					"when": "Created"
+				},
+				"lastUpdate": {
+					"when": "Last updated"
+				},
+				"publicationDate": "Publication date",
+				"status": "Status",
+				"title": "Title"
+			}
+		},
+		"title": "Title"
+	},
+	"error": {
 		"http": {
 			"forbidden": "You can't do this action",
 			"notFound": "The resource requested not exist",
@@ -114,51 +137,51 @@
 		}
 	},
 	"organizationalUnit": {
-    "closingDate": "Closing Date",
-    "delete": "Delete",
-    "description": "Description",
-    "dialog": {
-      "delete": {
-        "cancel": "Cancel",
-        "confirm": "Yes",
-        "message": "Are you sure you want to delete the organizational unit '{{name}}'?",
-        "title": "Confirm deletion"
-      }
-    },
-    "edit": "Edit",
-    "isEmpty": "Is Empty",
-    "name": "Name",
-    "new": "Create new organizational unit",
-    "open": "Open",
-    "openingDate": "Opening Date",
-    "refresh": "Refresh",
-    "submissionPolicy": "Submission policy",
-    "submit": "Submit",
-    "table": {
-      "header": {
-        "creation": {
-          "when": "Created"
-        },
-        "description": "Description",
-        "name": "Name"
-      }
-    }
-  },
-  "required": "This field is required",
-  "search": "Search",
-  "table": {
-    "nodata": "No data has been found",
-    "paginator": {
-      "firstPage": "First page",
-      "itemPerPage": "Items per page",
-      "lastPage": "Last page",
-      "nextPage": "Next page",
-      "ofLabel": "of",
-      "previousPage": "Previous page"
-    }
-  },
-  "tooltip": {
-    "other": "other",
-    "others": "others"
-  }
+		"closingDate": "Closing Date",
+		"delete": "Delete",
+		"description": "Description",
+		"dialog": {
+			"delete": {
+				"cancel": "Cancel",
+				"confirm": "Yes",
+				"message": "Are you sure you want to delete the organizational unit '{{name}}'?",
+				"title": "Confirm deletion"
+			}
+		},
+		"edit": "Edit",
+		"isEmpty": "Is Empty",
+		"name": "Name",
+		"new": "Create new organizational unit",
+		"open": "Open",
+		"openingDate": "Opening Date",
+		"refresh": "Refresh",
+		"submissionPolicy": "Submission policy",
+		"submit": "Submit",
+		"table": {
+			"header": {
+				"creation": {
+					"when": "Created"
+				},
+				"description": "Description",
+				"name": "Name"
+			}
+		}
+	},
+	"required": "This field is required",
+	"search": "Search",
+	"table": {
+		"nodata": "No data has been found",
+		"paginator": {
+			"firstPage": "First page",
+			"itemPerPage": "Items per page",
+			"lastPage": "Last page",
+			"nextPage": "Next page",
+			"ofLabel": "of",
+			"previousPage": "Previous page"
+		}
+	},
+	"tooltip": {
+		"other": "other",
+		"others": "others"
+	}
 }

src/assets/i18n/fr.json

@@ -61,8 +61,31 @@
     },
     "edit": "Modifier",
     "file": {
+      "detail": {
+        "data": {
+          "available": "Disponible",
+          "category": "Catégorie",
+          "checksums": "Checksums",
+          "complianceLevel": "Compliance level",
+          "createDate": "Date de création",
+          "fileFormat": "Format de fichier",
+          "fileSize": "Taille du fichier",
+          "initialPath": "Chemin initial",
+          "smartSize": "Smart size",
+          "status": "Statut",
+          "statusMessage": "Message du statut",
+          "type": "Type",
+          "virusCheck": "Vérification virus"
+        }
+      },
+      "details": {
+        "close": "Fermer",
+        "title": "Détails du fichier \"{{name}}\""
+      },
       "search": "Choisir fichier",
       "tree": {
+        "details": "Détails",
+        "error": "Le fichier est en état d'erreur",
         "label": "Liste des fichiers :"
       },
       "uploadButton": "Téléverser"

src/environments/environment.ts

@@ -8,7 +8,7 @@ import {defaultEnvironment} from "./environment.defaults";
 
 export const environment = {
   ...defaultEnvironment,
-  theme: ThemeEnum.yareta,
+  theme: ThemeEnum.dlcm,
   oauthTokenEndpoint: "http://localhost/dlcm-authorization/oauth/token",
   oauthDummyClientSecret: "123abc",
   oauthClientId: "local-dev-angular",

src/sass/abstracts/_variables.scss

 $primary-color: var(--primary-color);
 $primary-color-lighter: var(--primary-color-lighter);
+$primary-color-darker: var(--primary-color-darker);
 $accent-color: var(--accent-color);
 $red: #f44336;
 $background-grey: #f5f5f5;

src/sass/main.scss

@@ -20,9 +20,34 @@
 a {
   cursor: pointer;
   text-decoration: none;
+  color: $primary-color;
+  position: relative;
+  -webkit-transition: all 0.2s ease-in-out 0s;
+  transition: all 0.2s ease-in-out 0s;
 
   &:hover {
-    color: $primary-color;
+    color: $primary-color-darker;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background-color: $primary-color-darker;
+    visibility: hidden;
+    -webkit-transform: scaleX(0);
+    transform: scaleX(0);
+    -webkit-transition: all 0.2s ease-in-out 0s;
+    transition: all 0.2s ease-in-out 0s;
+  }
+
+  &:hover:before {
+    visibility: visible;
+    -webkit-transform: scaleX(1);
+    transform: scaleX(1);
   }
 }
 

src/sass/themes/dlcm-theme.scss

@@ -20,4 +20,5 @@ $dlcm-theme: mat-light-theme(
   //--primary-color: mat-color($primary-palette, default, 1.0);
   --primary-color: #03A9F4; // Should be equal to $mat-yareta-primary : 500
   --primary-color-lighter: #7dc9f4;
+  --primary-color-darker: #0381c9;
 }