Help component update (#1207)

Signed-off-by: Yuting Nie <yvettemisaki@outlook.com>
apache · Aug 27, 2023 · 7b22043 · 7b22043
1 parent b081e39
commit 7b22043
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.html b/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.html
@@ -17,9 +17,7 @@
       </div>
     </div>
     <div class="handover_button">
-      <button class="handover_button_content" id="handover_button_self" (click)="handleButtonClick()">{{
-        isCollapsed ? '展开' : '收起'
-      }}</button>
+      <button class="handover_button_content" id="handover_button_self" (click)="handleButtonClick()">{{ collapse_expand | i18n }}</button>
       <i nz-icon="" nztype="home" class="anticon anticon-home">
         <svg viewBox="64 64 896 896" focusable="false" fill="#000000" width="1.12em" height="1.12em" data-icon="alert" aria-hidden="true">
           <path

diff --git a/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.ts b/web-app/src/app/shared/components/help-massage-show/help-massage-show.component.ts
@@ -36,13 +36,16 @@ export class HelpMassageShowComponent implements OnInit {
   ) {}
   isCollapsed: boolean = false;
   targetHeight: number = 140;
+  collapse_expand: string = 'collapse';
   @ViewChild('collapsed_content') collapsed_content: any;
   handleButtonClick(): void {
     this.isCollapsed = !this.isCollapsed;
     localStorage.setItem('collapse_status', JSON.stringify(this.isCollapsed));
     this.targetHeight = localStorage.getItem('collapse_status') === 'true' ? 28.8 : 140;
     localStorage.setItem('collapse_height', JSON.stringify(this.targetHeight));
     this.rd2.setStyle(this.collapsed_content.nativeElement, 'height', `${this.targetHeight}px`);
+    this.collapse_expand = this.isCollapsed ? 'expand' : 'collapse';
+    localStorage.setItem('collapse_button', JSON.stringify(this.collapse_expand));
   }
 
   app!: string | undefined;
@@ -57,6 +60,7 @@ export class HelpMassageShowComponent implements OnInit {
   ngOnInit(): void {
     this.isCollapsed = localStorage.getItem('collapse_status') === 'true' ? true : false;
     this.el.nativeElement.querySelector('.help_massage_div').style.height = `${localStorage.getItem('collapse_height')}px`;
+    this.collapse_expand = this.isCollapsed ? 'expand' : 'collapse';
     this.route.queryParamMap.subscribe(paramMap => {
       let appStr = paramMap.get('app');
       let tagStr = paramMap.get('tag');

diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
@@ -576,5 +576,7 @@
   "validation.title.required": "Please enter a title",
   "validation.date.required": "Please select the start and end date",
   "validation.goal.required": "Please enter a description of the goal",
-  "validation.standard.required": "Please enter a metric"
+  "validation.standard.required": "Please enter a metric",
+  "expand": "expand",
+  "collapse": "collapse"
 }
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
@@ -576,5 +576,7 @@
   "validation.date.required": "请选择起止日期",
   "validation.goal.required": "请输入目标描述",
   "validation.standard.required": "请输入衡量标准",
-  "validation.required": "请填充必填项! "
+  "validation.required": "请填充必填项! ",
+  "expand": "展开",
+  "collapse": "收起"
 }