!493 模块购买框支持最大化

src/Add-on/TemplateSearch.tsx

@@ -12,6 +12,8 @@ import { Vector3 } from "three";
 import { MoveMatrix } from "../Geometry/GeUtils";
 import { PromptStatus } from "../Editor/PromptResult";
 import { DuplicateRecordCloning } from "../Common/Status";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 
 export class Command_TemplateSearch implements Command 
 {
@@ -21,9 +23,10 @@ export class Command_TemplateSearch implements Command
     }
 }
 
+@observer
 export class TemplateSearchDialog extends React.Component<{}, {}>{
 
-
+    @observable isMax = false;
     OnMessage = (e: MessageEvent) =>
     {
         if (e.origin !== CURRENT_HOST) return;
@@ -77,17 +80,27 @@ export class TemplateSearchDialog extends React.Component<{}, {}>{
                 <div className={Classes.DIALOG + " board-config"}>
                     <div className={Classes.DIALOG_HEADER} data-id="dragArea">
                         <h4 className="bp3-heading">模块购买</h4>
+                        <Button
+                            minimal
+                            icon={this.isMax ? "minimize" : "maximize"}
+                            onClick={this.changeModalSize}
+                        />
                         <Button
                             aria-label="Close"
                             minimal
                             icon="cross"
                             className={Classes.DIALOG_CLOSE_BUTTON}
+                            onClick={() => app.Editor.ModalManage.Clear()}
                         />
                     </div>
                     <div className={Classes.DIALOG_BODY}>
                         <iframe
-                            width="1000"
-                            height="600"
+                            style={{
+                                width: "100%",
+                                height: "100%",
+                                minWidth: 1000,
+                                minHeight: 600
+                            }}
                             src={TemplateUrls.search}
                         />
                     </div>
@@ -95,4 +108,9 @@ export class TemplateSearchDialog extends React.Component<{}, {}>{
             </div>
         );
     }
+    private changeModalSize = () =>
+    {
+        this.isMax = !this.isMax;
+        app.Editor.ModalManage.ScaleModalSize()
+    }
 }

src/UI/Components/Modal/ModalStyle/Modal.less

@@ -17,11 +17,13 @@
     position: fixed;
     outline: none;
     font-size: 8px;
+
     // overflow: hidden; //影响到DisplayConfigPanel 的ColorPick
     select {
         font-size: 8px;
     }
 }
+
 #modal .bp3-dialog {
     margin: 0;
     width: 100%;
@@ -30,35 +32,46 @@
 #modal .dark-body {
     background: @darkBgColor;
     color: @darkFontColor;
-    h4,h5,h6{
+
+    h4,
+    h5,
+    h6 {
         color: @darkFontColor;
     }
 }
+
 #modal input {
     font-size: 8px;
     padding: 0 5px;
 }
+
 #modal h5 {
     font-size: 10px;
     font-weight: bold;
 }
+
 #modal .bp3-dialog>.behind-board>div {
     margin: 10px 0;
     text-align: right;
 }
+
 #modal .bp3-control-indicator {
     overflow: hidden;
 }
+
 /* 板件input样式调整 */
 #modal .bp3-dialog-body .bp3-label {
     line-height: @inputHeight;
     margin-bottom: 0.5rem;
 }
+
 #modal .bp3-dialog-body .bp3-label>span {
     display: inline-block;
     width: 3.5rem;
 }
-#modal .bp3-dialog-body .bp3-input,#modal .bp3-dialog-body .bp3-html-select>select{
+
+#modal .bp3-dialog-body .bp3-input,
+#modal .bp3-dialog-body .bp3-html-select>select {
     height: @inputHeight;
 }
 
@@ -66,24 +79,32 @@
     display: flex;
     justify-content: flex-start;
 }
+
 #modal .boardRadio>label {
     margin-right: 10px;
 }
+
 #modal .flexWrap {
     width: 200px;
 }
+
 #modal .board-config .flexWrap {
     width: 250px;
 }
-#modal .flexWrap>div,#modal .flexWrap>label{
+
+#modal .flexWrap>div,
+#modal .flexWrap>label {
     width: 50%;
     line-height: 15px;
     display: flex;
 }
-#modal .flexWrap>div .bp3-input,#modal .small-input input{
+
+#modal .flexWrap>div .bp3-input,
+#modal .small-input input {
     padding: 0 0 0 5px;
     width: @inputWidth;
 }
+
 #modal .br-set {
     margin-bottom: 10px;
     white-space: nowrap;
@@ -109,16 +130,20 @@
     justify-content: space-between;
     align-items: center;
 }
+
 #modal .bp3-dialog-footer .bp3-label {
     margin: 0;
 }
+
 #modal .bp3-dialog-footer .bp3-input {
     width: @selectWidth;
 }
+
 #modal .bp3-dialog-footer .cf-select {
     vertical-align: bottom;
     display: inline-block;
 }
+
 #modal .input-select {
     display: inline-block;
     width: @selectWidth;
@@ -134,6 +159,7 @@
 .input-select {
     width: 40%;
 }
+
 #modal .newDir>label {
     display: flex;
     align-items: center;
@@ -144,6 +170,31 @@
     }
 }
 
+#modal.max {
+    height: 100% !important;
+    width: 100% !important;
+    left: 0 !important;
+    top: 0 !important;
+
+    &>div {
+        max-width: unset !important;
+        max-height: unset !important;
+        min-width: unset !important;
+        min-height: unset !important;
+        width: 100% !important;
+        height: 100% !important;
+
+        &>div {
+            min-height: unset;
+            height: 100%;
+
+            &>div {
+                height: 100%;
+            }
+        }
+    }
+}
+
 @import (less) "BoardModal.less";
 @import (less) "ArrayModal.less";
 @import (less) "DrillModal.less";
@@ -160,5 +211,3 @@
 @import (less) "../../Template/Topline.less";
 @import (less) "./LookOverBoardInfos.less";
 @import (less) "../../Template/Template.less";
-
-

src/UI/Components/Modal/ModalsManage.tsx

@@ -99,7 +99,16 @@ export class ModalManage
             this.m_ModalContainer.blur();
         }
     }
-
+    ScaleModalSize()
+    {
+        if (this.m_ModalContainer.children.length > 0)
+        {
+            if (this.m_ModalContainer.className === "max")
+                this.m_ModalContainer.className = ""
+            else
+                this.m_ModalContainer.className = "max";
+        }
+    }
     OnKeyDown(e: KeyboardEvent)
     {
         switch (e.keyCode)
@@ -244,6 +253,7 @@ export class ModalManage
                     left: this.m_ModalContainer.style.left,
                     top: this.m_ModalContainer.style.top
                 }
+                this.m_ModalContainer.className = "";
             }
         }
         document.onmouseup = (e) =>
@@ -266,6 +276,7 @@ export class ModalManage
         this.m_ModalContainer.blur();
         this.m_ModalContainer.style.width = "unset";
         this.m_ModalContainer.style.height = "unset";
+        this.m_ModalContainer.className = "";
         app.Editor.MaskManage.Clear();
         this.events.forEach(f => f());
         this.events.length = 0;