Merge pull request #564 from TomoyukiAota/feature/update-how-to-show-…

…details Update how to show details in DirTreeViewSortShootingTimeInfoComponent.
TomoyukiAota · Oct 19, 2024 · bf2aa6f · bf2aa6f
2 parents 157cf72 + 8adb5e7
commit bf2aa6f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 19 deletions.
diff --git a/...ir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/...ir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
@@ -11,18 +11,12 @@
     Note that folders are sorted by their names since there is no concept of "Shooting Time" of folders.
   </div>
 
-  <button mat-stroked-button class="details-button" (click)="detailsOpenState.set(!detailsOpenState())">
+  <button mat-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 fontIcon="chevron_right"
+                [ngClass]="{'details-opened-icon': detailsOpenState()}">
       </mat-icon>
+      <span>More details for reference</span>
     </div>
   </button>
 

diff --git a/...ir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/...ir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -21,10 +21,10 @@
 
 .dialog-body {
   overflow: auto;
-  padding: 24px;
+  padding: 25px 10px;
 
   .message-main {
-    margin-bottom: 30px;
+    padding: 0 0 20px 15px;
 
     li {
       margin-bottom: 10px;
@@ -36,27 +36,25 @@
   }
 
   .message-details {
-    margin-top: 20px;
+    margin-left: 20px;
+    padding: 5px 20px;
+    border-left: black 1px solid;
 
     p {
       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);
+.details-opened-icon {
+  transform: rotate(90deg);
 }
 
 .dialog-footer {