Merge pull request #563 from TomoyukiAota/feature/click-here-for-deta…

…ils-for-sort-by-shooting-time

Update the content of DirTreeViewSortShootingTimeInfoComponent.

src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts

@@ -148,8 +148,8 @@ export class DirTreeViewSortService {
 
   public showShootingTimeInfoDialog() {
     this.dialog.open(DirTreeViewSortShootingTimeInfoComponent, {
-      width: '600px',
-      height: '490px',
+      width: '800px',
+      height: '360px',
       panelClass: 'custom-dialog-container',
       disableClose: false,
       autoFocus: false,

src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html

@@ -1,4 +1,7 @@
-<div class="message">
+<div class="dialog-header">
+  Sort By Shooting Time
+</div>
+<div class="dialog-body">
   <div class="message-main">
     When "By Shooting Time" is selected, in order to sort files, this application
     <ol>
@@ -7,18 +10,37 @@
     </ol>
     Note that folders are sorted by their names since there is no concept of "Shooting Time" of folders.
   </div>
-  <hr>
-  <div class="message-details">
-    <p>Below are details for reference:</p>
-    <p>DateTimeOriginal in EXIF is the most trustworthy information about the time when the photo was taken.</p>
-    <p>DateTimeOriginal is written in most JPEG/HEIF/TIFF files by most cameras, but sometime it is missing.</p>
-    <p>The modified time always exists for files, and the modified time is often the time when the photo was taken,
-      so the modified time is used when DateTimeOriginal is not available.</p>
-    <p>Also, files other than JPEG/HEIF/TIFF do not have EXIF in the first place, so the modified time is used for such files.</p>
-  </div>
+
+  <button mat-stroked-button class="details-button" (click)="detailsOpenState.set(!detailsOpenState())">
+    <div class="details-button-content">
+      <span>
+        @if (detailsOpenState()) {
+          Hide details for reference
+        } @else {
+          Read details for reference
+        }
+      </span>
+      <mat-icon fontIcon="expand_more"
+                [ngClass]="{'expanded-expand-icon': detailsOpenState()}">
+      </mat-icon>
+    </div>
+  </button>
+
+  @if (detailsOpenState()) {
+    <div class="message-details">
+      <p>Below are details for reference:</p>
+      <p>DateTimeOriginal in EXIF is the most trustworthy information about the time when the photo was taken.</p>
+      <p>DateTimeOriginal is written in most JPEG/HEIF/TIFF files by most cameras, but sometime it is missing.</p>
+      <p>The modified time of the file is often the time when the photo was taken,
+        so the modified time is used as an alternative when DateTimeOriginal is missing.</p>
+      <p>Also, files other than JPEG/HEIF/TIFF do not have EXIF  in the first place, so the modified time is always used for such files.</p>
+    </div>
+  }
+</div>
+<div class="dialog-footer">
+  <button mat-button
+          mat-dialog-close
+          class="close-button">
+    Close
+  </button>
 </div>
-<button mat-stroked-button
-        mat-dialog-close
-        class="close-button">
-  Close
-</button>

src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss

@@ -1,35 +1,74 @@
 :host {
-  padding: 30px 30px 0 30px;
+  height: 100%;
 
   display: grid;
-  grid: "message"      auto
-        "close-button" auto
-        /auto;
-  justify-items: center;
-  .message      { grid-area: message;      }
-  .close-button { grid-area: close-button; }
+  grid: "dialog-header" auto
+        "dialog-body"   1fr
+        "dialog-footer" auto
+        /1fr;
+
+  .dialog-header { grid-area: dialog-header; }
+  .dialog-body   { grid-area: dialog-body;   }
+  .dialog-footer { grid-area: dialog-footer; }
+}
+
+.dialog-header {
+  padding: 10px 20px;
+  border-bottom: 1px solid #7f7f7f;
+  background-color: #eeeeee;
+  font-size: 20px;
 }
 
-.message {
-  margin-bottom: 20px;
+.dialog-body {
+  overflow: auto;
+  padding: 24px;
 
   .message-main {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 
-    ol > li::marker {
-      content:counter(list-item) ")\2003"; // To use brackets for <li>. e.g. 1) 2) 3) instead of 1. 2. 3.
+    li {
+      margin-bottom: 10px;
+
+      &::marker {
+        content:counter(list-item) ")\2003"; // To use brackets for <li>. e.g. 1) 2) 3) instead of 1. 2. 3.
+      }
     }
   }
 
   .message-details {
-    margin-top: 15px;
+    margin-top: 20px;
 
     p {
-      margin: 5px 0;
+      margin: 10px 0;
     }
   }
 }
 
+.details-button {
+  width: 255px;
+}
+
+.details-button-content {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  font-weight: normal; // Restore "font-weight: 500" given by mat-button to the browser's default value
+}
+
+.expanded-expand-icon {
+  transform: rotate(180deg);
+}
+
+.dialog-footer {
+  padding: 10px 20px;
+  border-top: 1px solid #7f7f7f;
+  background-color: #eeeeee;
+  display: flex;
+  justify-content: end;
+}
+
 .close-button {
   width: 80px;
+  background-color: #999999;
+  color: whitesmoke;
 }

src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts

@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 
 @Component({
   selector: 'app-dir-tree-view-sort-shooting-time-info',
   templateUrl: './dir-tree-view-sort-shooting-time-info.component.html',
   styleUrl: './dir-tree-view-sort-shooting-time-info.component.scss'
 })
 export class DirTreeViewSortShootingTimeInfoComponent {
-
+  public readonly detailsOpenState = signal(false);
 }