From 4d40ddf4687762b561ac1029dac32908dbcb7b06 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Tue, 22 Mar 2022 22:16:11 +0800
Subject: [PATCH] Add popup header

---
 source/Component/Popup/Popup.scss | 47 +++++++++++++++++++++++++++++--
 source/Component/Popup/Popup.tsx  | 21 ++++++++++++--
 source/Context/Popups.ts          | 10 ++++++-
 source/Localization/EN-US.ts      |  1 +
 source/Localization/ZH-CN.ts      |  1 +
 5 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/source/Component/Popup/Popup.scss b/source/Component/Popup/Popup.scss
index 6c217fa..a39b8d6 100644
--- a/source/Component/Popup/Popup.scss
+++ b/source/Component/Popup/Popup.scss
@@ -1,5 +1,7 @@
 @import "../Theme/Theme.scss";
 
+$header-height: 32px;
+
 @keyframes show-scale{
     from {
         transform: scale3d(1.15, 1.15, 1);
@@ -43,8 +45,39 @@ div.popup-layer {
     overflow: hidden;
 
     div.popup-layer-header {
-        min-height: 32px;
-        max-height: 32px;
+        min-height: $header-height;
+        max-height: $header-height;
+        height: $header-height;
+        display: flex;
+        width: 100%;
+
+        div.header-text {
+            width: calc( 100% - 32px );
+            flex-shrink: 1;
+            display: flex;
+            align-items: center;
+            user-select: none;
+            
+            span {
+                padding-left: 8px;
+                display: inline-block;
+                vertical-align: middle;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        div.header-close-icon {
+            width: $header-height;
+            height: $header-height;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            user-select: none;
+            cursor: pointer;
+        }
     }
 }
 
@@ -52,6 +85,11 @@ div.popup-layer.dark {
 
     div.popup-layer-header {
         background-color: $lt-bg-color-lvl3-dark;
+
+        div.header-close-icon:hover {
+            background-color: $lt-bg-color-lvl2-dark;
+            color: $lt-red;
+        }
     }
 }
 
@@ -59,6 +97,11 @@ div.popup-layer.light {
 
     div.popup-layer-header {
         background-color: $lt-bg-color-lvl3-light;
+
+        div.header-close-icon:hover {
+            background-color: $lt-bg-color-lvl2-light;
+            color: $lt-red;
+        }
     }
 }
 
diff --git a/source/Component/Popup/Popup.tsx b/source/Component/Popup/Popup.tsx
index 4737249..2bfaefe 100644
--- a/source/Component/Popup/Popup.tsx
+++ b/source/Component/Popup/Popup.tsx
@@ -2,6 +2,7 @@ import { Component, ReactNode } from "react";
 import { IMixinStatusProps, useStatusWithEvent } from "@Context/Status";
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { Popup as PopupModel } from "@Context/Popups";
+import { Icon } from "@fluentui/react";
 import "./Popup.scss";
 
 interface IPopupProps {}
@@ -59,6 +60,22 @@ class Popup extends Component<IPopupProps & IMixinStatusProps> {
         }
     }
 
+    public renderHeader(popup: PopupModel): ReactNode {
+        return <div className="popup-layer-header">
+            <div className="header-text">
+                {popup.onRenderHeader()}
+            </div>
+            <div
+                className="header-close-icon"
+                onClick={() => {
+                    popup.onClose();
+                }}
+            >
+                <Icon iconName="CalculatorMultiply"/>
+            </div>
+        </div>
+    }
+
     public renderLayer(popup: PopupModel) {
         const pageWidth = document.documentElement.clientWidth;
         const pageHeight = document.documentElement.clientHeight;
@@ -77,9 +94,7 @@ class Popup extends Component<IPopupProps & IMixinStatusProps> {
             backgroundLevel={BackgroundLevel.Level4}
             className="popup-layer show-scale"
         >
-            <div className="popup-layer-header">
-                
-            </div>
+            {this.renderHeader(popup)}
         </Theme>
     }
 
diff --git a/source/Context/Popups.ts b/source/Context/Popups.ts
index 1d66303..0b75ccd 100644
--- a/source/Context/Popups.ts
+++ b/source/Context/Popups.ts
@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
+import { ReactNode, createElement } from "react";
 import { Emitter } from "@Model/Emitter";
+import { Localization } from "@Component/Localization/Localization";
 
 type IPopupConstructor = new (controller: PopupController, id: string) => Popup;
 
@@ -55,6 +56,13 @@ class Popup {
      */
     public reactNode: ReactNode;
 
+    /**
+     * 渲染标题
+     */
+    public onRenderHeader(): ReactNode {
+        return createElement(Localization, {i18nKey: "Popup.Title.Unnamed"});
+    }
+
     /**
      * 渲染函数
      */
diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts
index a7d5b06..8e4ceb1 100644
--- a/source/Localization/EN-US.ts
+++ b/source/Localization/EN-US.ts
@@ -44,6 +44,7 @@ const EN_US = {
     "Panel.Info.Label.Details.View": "Edit view label attributes",
     "Panel.Title.Group.Details.View": "Group",
     "Panel.Info.Group.Details.View": "Edit view group attributes",
+    "Popup.Title.Unnamed": "Popup message",
     "Build.In.Label.Name.All.Group": "All group",
     "Build.In.Label.Name.All.Range": "All range",
     "Common.No.Data": "No Data",
diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts
index 8f2b46a..784e522 100644
--- a/source/Localization/ZH-CN.ts
+++ b/source/Localization/ZH-CN.ts
@@ -44,6 +44,7 @@ const ZH_CN = {
     "Panel.Info.Label.Details.View": "编辑查看标签属性",
     "Panel.Title.Group.Details.View": "群",
     "Panel.Info.Group.Details.View": "编辑查看群属性",
+    "Popup.Title.Unnamed": "弹窗消息",
     "Build.In.Label.Name.All.Group": "全部群",
     "Build.In.Label.Name.All.Range": "全部范围",
     "Common.No.Data": "暂无数据",