Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!146 修复阵列模态框图标及样式

Browse Source 
Merge pull request !146 from 肖诗雅/arrayIcon_repair
pull/146/MERGE
ChenX 6 years ago
parent b4d441409b
commit 2f5bb40d74
3 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File

94
src/UI/Components/Modal/ArrayModal.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, Tab, Tabs } from "@blueprintjs/core";
import { Button, Tab, Tabs, Icon, Classes } from "@blueprintjs/core";
import * as React from 'react';
import { inject, observer } from '../../../../node_modules/mobx-react';
import { ArrayOptioins, ArrayType, CirArrMethod, Pick } from '../../../Add-on/Array';
@ -20,33 +20,49 @@ export class ArrayModal extends React.Component<ArrayModalProps, {}> {
{
const store = this.props.store;
return (
<div id="arrayModal" className="bp3-dialog-container array-modal" >
<div className="bp3-dialog bp3-dark">
<div id="arrayModal" className={Classes.DIALOG_CONTAINER} >
<div className={Classes.DIALOG}>
<div
className="bp3-dialog-header"
className={Classes.DIALOG_HEADER}
data-id="dragArea"
>
<span className="bp3-icon-large bp3-icon-search-around"></span>
<h5 className="bp3-dialog-header-title">阵列</h5>
<button
aria-label="Close" className="bp3-dialog-close-button bp3-icon-small-cross"
<Icon icon="search-around" iconSize={18} />
<h4 className={Classes.HEADING}>阵列</h4>
<Button
icon="cross"
aria-label="Close"
minimal={true}
onClick={() =>
{
app.m_Editor.m_ModalManage.Clear();
app.m_Editor.m_ModalManage.m_PromisRes(ModalState.Cancel);
}}
></button>
/>
</div>
<div className="bp3-dialog-body">
<Tabs id="arrayTabs" className="array-tab" onChange={e => store.type = e as ArrayType} defaultSelectedTabId={store.type}>
<Tab id={ArrayType.Rectangle} title="矩形阵列" panel={<RectanArray {...this.props} />} />
<Tab id={ArrayType.Circle} title="环形阵列" panel={<CirArray {...this.props} />} />
<div className={Classes.DIALOG_BODY}>
<Tabs
id="arrayTabs"
className="array-tab"
onChange={e => store.type = e as ArrayType}
defaultSelectedTabId={store.type}
>
<Tab
id={ArrayType.Rectangle}
title="矩形阵列"
panel={<RectanArray {...this.props} />}
/>
<Tab
id={ArrayType.Circle}
title="环形阵列"
panel={<CirArray {...this.props} />}
/>
</Tabs>
</div>
<div className="bp3-dialog-footer">
<div className="bp3-dialog-footer-actions">
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
className="LeftRightBtn bp3-intent-success"
className="LeftRightBtn"
intent="success"
text="确定"
disabled={!store.isCorrect}
onClick={() =>
@ -55,7 +71,10 @@ export class ArrayModal extends React.Component<ArrayModalProps, {}> {
app.m_Editor.m_ModalManage.Clear();
}}
/>
<Button className="LeftRightBtn bp3-intent-danger" text="取消"
<Button
className="LeftRightBtn"
intent="danger"
text="取消"
onClick={() =>
{
app.m_Editor.m_ModalManage.Clear();
@ -65,7 +84,7 @@ export class ArrayModal extends React.Component<ArrayModalProps, {}> {
</div>
</div>
</div>
</div>
</div >
);
}
}
@ -123,7 +142,7 @@ class RectanArray extends React.Component<ArrayModalProps, {}>
/>
</li>
<li className="twoCol" style={{ width: "50%" }}>
<label htmlFor="" >列:</label>
<label htmlFor="">列:</label>
<input
type="text"
min="1"
@ -141,7 +160,7 @@ class RectanArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="buttonCol">
<div className="twoCol div1">
<label htmlFor="" >行偏移</label>
<label htmlFor="">行偏移</label>
<input
type="text"
name="rowOffset"
@ -155,16 +174,16 @@ class RectanArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="div2">
<Button
className="bp3-button bp3-minimal bp3-icon-select"
text=""
icon="select"
minimal={true}
onClick={() =>
{
app.m_Editor.m_ModalManage.m_PromisRes(Pick.rowOffset);
app.m_Editor.m_ModalManage.Clear();
}}
/>
</div>
</div>
<div className="buttonCol">
<div className="twoCol div1">
@ -182,8 +201,8 @@ class RectanArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="div2">
<Button
className="bp3-button bp3-minimal bp3-icon-select"
text=""
icon="select"
minimal={true}
onClick={() =>
{
app.m_Editor.m_ModalManage.m_PromisRes(Pick.colOffset);
@ -194,7 +213,7 @@ class RectanArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="buttonCol">
<div className="twoCol div1">
<label htmlFor="" >阵列角度</label>
<label htmlFor="">阵列角度</label>
<input
type="text"
name="arrayAngle"
@ -221,8 +240,8 @@ class RectanArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="div2">
<Button
className="bp3-button bp3-minimal bp3-icon-select"
text=""
icon="select"
minimal={true}
onClick={() =>
{
app.m_Editor.m_ModalManage.m_PromisRes(Pick.arrayAngle);
@ -349,7 +368,7 @@ class CirArray extends React.Component<ArrayModalProps, {}>
<label style={{ width: "30%" }}>中心点</label>
<ul style={{ textAlign: "center" }}>
<li className="twoCol" style={{ width: "50%" }}>
<label htmlFor="" >X</label>
<label htmlFor="">X</label>
<input
type="text"
name="x"
@ -363,7 +382,7 @@ class CirArray extends React.Component<ArrayModalProps, {}>
/>
</li>
<li className="twoCol" style={{ width: "50%" }}>
<label htmlFor="" >Y</label>
<label htmlFor="">Y</label>
<input
type="text"
name="y"
@ -380,8 +399,8 @@ class CirArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="div2">
<Button
className="bp3-button bp3-minimal bp3-icon-select"
text=""
icon="select"
minimal={true}
disabled={!store.isCorrect}
onClick={() =>
{
@ -409,7 +428,7 @@ class CirArray extends React.Component<ArrayModalProps, {}>
<div className="arrayMethod-value" style={{ border: "0.5px dotted #ffffff" }}>
<div className="buttonCol">
<div className="twoCol div1">
<label htmlFor="" >项目总数</label>
<label htmlFor="">项目总数</label>
<input
type="text"
name="itemTotal"
@ -459,8 +478,8 @@ class CirArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="div2">
<Button
className="bp3-button bp3-minimal bp3-icon-select"
text=""
icon="select"
minimal={true}
disabled={store.method === CirArrMethod.itemsAndBeAngle || !store.isCorrect}
onClick={() =>
{
@ -502,8 +521,8 @@ class CirArray extends React.Component<ArrayModalProps, {}>
</div>
<div className="div2">
<Button
className="bp3-button bp3-minimal bp3-icon-select"
text=""
icon="select"
minimal={true}
disabled={store.method === CirArrMethod.itemsAndAngle || !store.isCorrect}
onClick={() =>
{
@ -546,4 +565,3 @@ function checkValue(lower: number, upper: number, strData: string): number
return data;
}
}

8
src/UI/Components/Modal/ModalStyle/ArrayModal.less
Unescape View File

@ -9,6 +9,12 @@
#arrayModal .bp3-dialog-header{
background: #394b59
}
#arrayModal .bp3-dialog>.bp3-dialog-body{
margin:2px 10px;
}
#arrayModal .bp3-dialog>.bp3-dialog-footer{
justify-content: flex-end;
}
#arrayModal .bp3-dialog>.bp3-dialog-body>div{
margin:5px 0;
text-align: right;
@ -26,7 +32,7 @@
#arrayModal .bp3-dialog-body .twoCol li>label{
text-align: center;
}
#arrayModal .array-modal .twoCol li>label{
#arrayModal .twoCol li>label{
text-align: center;
}
#arrayModal .bp3-dialog-body .twoCol>input{

2
src/UI/Components/Modal/ModalStyle/Modal.less
Unescape View File

@ -16,7 +16,7 @@
font-size: 8px;
}
#modal .bp3-dialog{
margin: 0;
// margin: 0;
width: 100%;
}

Write Preview
Loading…
Cancel
Save