!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

@@ -1,146 +1,197 @@
 @darkBgColor: #444444;
-@darkHeaderColor:#394b59;
-@darkFontColor:#CCCCCC;
+@darkHeaderColor: #394b59;
+@darkFontColor: #CCCCCC;
 // 输入框高度
-@inputHeight:1.5rem;
-@noteInputHeight:2.5rem;
-@selectWidth:10rem;
-@inputWidth:5rem;
-@nameInput:12rem;
-@infoSelectWidth:9rem;
-
-.bp3-portal{
+@inputHeight: 1.5rem;
+@noteInputHeight: 2.5rem;
+@selectWidth: 10rem;
+@inputWidth: 5rem;
+@nameInput: 12rem;
+@infoSelectWidth: 9rem;
+
+.bp3-portal {
     z-index: 37;
 }
 
-#modal{
+#modal {
     position: fixed;
     outline: none;
     font-size: 8px;
+
     // overflow: hidden; //影响到DisplayConfigPanel 的ColorPick
-    select{
+    select {
         font-size: 8px;
     }
 }
-#modal .bp3-dialog{
+
+#modal .bp3-dialog {
     margin: 0;
     width: 100%;
 }
 
-#modal .dark-body{
+#modal .dark-body {
     background: @darkBgColor;
     color: @darkFontColor;
-    h4,h5,h6{
+
+    h4,
+    h5,
+    h6 {
         color: @darkFontColor;
     }
 }
-#modal input{
+
+#modal input {
     font-size: 8px;
-    padding: 0 5px; 
+    padding: 0 5px;
 }
-#modal h5{
+
+#modal h5 {
     font-size: 10px;
     font-weight: bold;
 }
-#modal .bp3-dialog>.behind-board>div{
-    margin:10px 0;
+
+#modal .bp3-dialog>.behind-board>div {
+    margin: 10px 0;
     text-align: right;
 }
-#modal .bp3-control-indicator{
+
+#modal .bp3-control-indicator {
     overflow: hidden;
 }
+
 /* 板件input样式调整 */
-#modal .bp3-dialog-body .bp3-label{
+#modal .bp3-dialog-body .bp3-label {
     line-height: @inputHeight;
     margin-bottom: 0.5rem;
 }
-#modal .bp3-dialog-body .bp3-label>span{
+
+#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{
-    height:@inputHeight;
+
+#modal .bp3-dialog-body .bp3-input,
+#modal .bp3-dialog-body .bp3-html-select>select {
+    height: @inputHeight;
 }
 
-#modal .boardRadio{
+#modal .boardRadio {
     display: flex;
     justify-content: flex-start;
 }
-#modal .boardRadio>label{
+
+#modal .boardRadio>label {
     margin-right: 10px;
 }
-#modal .flexWrap{
+
+#modal .flexWrap {
     width: 200px;
 }
-#modal .board-config .flexWrap{
+
+#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{
-    padding:0 0 0 5px;
-    width: @inputWidth; 
+
+#modal .flexWrap>div .bp3-input,
+#modal .small-input input {
+    padding: 0 0 0 5px;
+    width: @inputWidth;
 }
-#modal .br-set{
+
+#modal .br-set {
     margin-bottom: 10px;
     white-space: nowrap;
 }
 
-#modal  .br-set>span:first-child{
+#modal .br-set>span:first-child {
     display: inline-block;
     width: 3.5rem;
     white-space: nowrap;
 }
 
-#modal .bp3-dialog{
-   padding: 0;
+#modal .bp3-dialog {
+    padding: 0;
 }
 
 // 配置信息
 
-#modal .bp3-dialog-footer{
+#modal .bp3-dialog-footer {
     margin: 0;
-    padding:10px 20px;
-    border-radius:0 0 6px 6px;
+    padding: 10px 20px;
+    border-radius: 0 0 6px 6px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
-#modal .bp3-dialog-footer .bp3-label{
+
+#modal .bp3-dialog-footer .bp3-label {
     margin: 0;
 }
-#modal .bp3-dialog-footer .bp3-input{
+
+#modal .bp3-dialog-footer .bp3-input {
     width: @selectWidth;
 }
-#modal .bp3-dialog-footer .cf-select{
+
+#modal .bp3-dialog-footer .cf-select {
     vertical-align: bottom;
     display: inline-block;
 }
-#modal .input-select{
+
+#modal .input-select {
     display: inline-block;
     width: @selectWidth;
     vertical-align: bottom;
 }
 
 //select高度改变,调整切换符号位置
-#modal .bp3-html-select .bp3-icon{
+#modal .bp3-html-select .bp3-icon {
     right: 1px;
-    top:2.5px;
+    top: 2.5px;
 }
 
-.input-select{
+.input-select {
     width: 40%;
 }
+
 #modal .newDir>label {
     display: flex;
     align-items: center;
 
     input {
         width: 100px;
-        height: 30px !important; 
+        height: 30px !important;
+    }
+}
+
+#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%;
+            }
+        }
     }
 }
 
@@ -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)
@@ -138,9 +147,9 @@ export class ModalManage
                 <Component {...props} />
             </Rnd>
             , this.m_ModalContainer, () =>
-            {
-                this.MoveModal();
-            });
+        {
+            this.MoveModal();
+        });
 
         //设置初始位置
         if (pos === ModalPosition.Right)
@@ -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;