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

!1719 修复:底部工具栏样式排版

Browse Source
pull/1718/MERGE
我是一条懒汉 3 years ago committed by ChenX
parent 4f9d6def84
commit e3006337a8
2 changed files with 146 additions and 135 deletions
Show Stats Download Patch File Download Diff File

270
src/UI/Components/Panel.tsx
Unescape View File

@ -17,6 +17,7 @@ import { LightsMenu } from '../../Editor/LightsMenu';
import { SnapMenuFixed } from '../../Editor/SnapMenuFixed'; import { SnapMenuFixed } from '../../Editor/SnapMenuFixed';
import { TempEditor } from '../../Editor/TempEditor'; import { TempEditor } from '../../Editor/TempEditor';
import { userConfig } from '../../Editor/UserConfig'; import { userConfig } from '../../Editor/UserConfig';
import '../Css/PanelStyle.less';
import { DownPanelStore, LightDataModeType } from '../Store/DownPanelStore'; import { DownPanelStore, LightDataModeType } from '../Store/DownPanelStore';
import { RightPanelStore } from '../Store/RightPanelStore/RightPanelStore'; import { RightPanelStore } from '../Store/RightPanelStore/RightPanelStore';
import { TopPanelStore } from '../Store/TopPanelStore'; import { TopPanelStore } from '../Store/TopPanelStore';
@ -317,155 +318,154 @@ export class DownPanel extends React.Component<{ store?: DownPanelStore; }, {}>
float: "right", marginRight: "10px", marginBottom: 0 float: "right", marginRight: "10px", marginBottom: 0
}; };
return ( return (
<div style={{ display: this.downStore.isBottomToolBarShow ? "block" : "none" }}> <div className='DownPanelCoordinateAndRadios'
<span style={{ position: "absolute", color: "black" }} ref={el => this.props.store.posEl = el}>0,0,0</span> style={{ display: this.downStore.isBottomToolBarShow ? "flex" : "none" }}>
<span style={{ position: "absolute", left: 170, display: this.props.store.progress === 1 ? "none" : "block" }}>{this.props.store.progressName}</span> <span style={{ color: "black" }} ref={el => this.props.store.posEl = el}>0,0,0</span>
<span style={{ display: this.props.store.progress === 1 ? "none" : "block" }}>{this.props.store.progressName}</span>
<div style={{ <div style={{
position: "absolute",
float: "right", marginRight: "10px", float: "right", marginRight: "10px",
left: "210px",
width: "150px", width: "150px",
height: 15, marginLeft: '10px',
marginTop: "4px",
zIndex: 5000, zIndex: 5000,
display: this.props.store.progress === 1 ? "none" : "block" display: this.props.store.progress === 1 ? "none" : "block"
}}> }}>
<ProgressBar intent={"primary"} value={this.props.store.progress}></ProgressBar> <ProgressBar intent={"primary"} value={this.props.store.progress}></ProgressBar>
</div> </div>
<Switch <div style={{ marginLeft: "auto", display: "flex", flexDirection: "row-reverse", flexWrap: "wrap" }}>
checked={this.props.store.useDynInput} <Switch
label="动态输入" checked={this.props.store.useDynInput}
data-key="useDynInput" label="动态输入"
onChange={this.handleChange} data-key="useDynInput"
style={switchStyle} onChange={this.handleChange}
alignIndicator={Alignment.RIGHT} style={switchStyle}
/> alignIndicator={Alignment.RIGHT}
<Switch />
checked={this.props.store.isLeftToolBarShow} <Switch
label="工具栏" checked={this.props.store.isLeftToolBarShow}
onChange={(e) => label="工具栏"
{ onChange={(e) =>
this.props.store.toggleLeftToolBarShow();
e.currentTarget.blur();
}}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
/>
<Switch
checked={this.props.store.useDynSnap}
label="动态捕捉(F3)"
data-key="useDynSnap"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
/>
<Switch
checked={this.props.store.usePass}
label="亮显"
data-key="usePass"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
/>
<Switch
checked={this.props.store.useOrtho}
label="正交(F8)"
data-key="useOrtho"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
/>
<div style={switchStyle}>
<label>字体：</label>
<HTMLSelect
onChange={e =>
{ {
this.props.store.fontName = e.target.value; this.props.store.toggleLeftToolBarShow();
this.props.store.Upload(); e.currentTarget.blur();
}} }}
value={this.props.store.fontName} style={switchStyle}
style={{ height: 15, fontSize: "10px", outline: "none", verticalAlign: "bottom" }} alignIndicator={Alignment.RIGHT}
options={[ />
{ label: "宋体", value: "songti" }, { label: "雅黑", value: "yahei" }]} /> <Switch
</div> checked={this.props.store.useDynSnap}
<div label="动态捕捉(F3)"
style={switchStyle}> data-key="useDynSnap"
<SnapMenuFixed /> onChange={this.handleChange}
</div> style={switchStyle}
<Switch alignIndicator={Alignment.RIGHT}
checked={userConfig.openDrillingReactor} />
label="排钻反应器" <Switch
data-key="toggleDrillingReactor" checked={this.props.store.usePass}
onChange={this.handleChange} label="亮显"
style={switchStyle} data-key="usePass"
alignIndicator={Alignment.RIGHT} onChange={this.handleChange}
/> style={switchStyle}
<Switch alignIndicator={Alignment.RIGHT}
checked={this.props.store.isLayout} />
label="切换布局" <Switch
data-key="isLayout" checked={this.props.store.useOrtho}
onChange={this.handleChange} label="正交(F8)"
style={switchStyle} data-key="useOrtho"
alignIndicator={Alignment.RIGHT} onChange={this.handleChange}
/> style={switchStyle}
<Switch alignIndicator={Alignment.RIGHT}
checked={userConfig.dimensions} />
label="显示板件间尺寸" <div style={switchStyle}>
data-key="dimensions" <label>字体：</label>
onChange={this.handleChange} <HTMLSelect
style={switchStyle} onChange={e =>
alignIndicator={Alignment.RIGHT} {
/> this.props.store.fontName = e.target.value;
<Switch this.props.store.Upload();
checked={this.rStore.lightStore.isShowShadow} }}
label="阴影" value={this.props.store.fontName}
style={switchStyle} style={{ height: 15, fontSize: "10px", outline: "none", verticalAlign: "bottom" }}
alignIndicator={Alignment.RIGHT} options={[
onChange={e => { label: "宋体", value: "songti" }, { label: "雅黑", value: "yahei" }]} />
{ </div>
this.rStore.lightStore.isShowShadow = !this.rStore.lightStore.isShowShadow; <div
this.rStore.lightStore.ShowShadowObject(this.rStore.lightStore.isShowShadow); style={switchStyle}>
<SnapMenuFixed />
if (this.rStore.lightStore.isShowShadow) </div>
{ <Switch
AppToaster.show({ checked={userConfig.openDrillingReactor}
message: "成功打开显示阴影,阴影仅在真实视图下可见.(阴影线上可能会影响显示性能!)", label="排钻反应器"
timeout: 5000, data-key="toggleDrillingReactor"
intent: Intent.SUCCESS, onChange={this.handleChange}
}, "shadow"); style={switchStyle}
} alignIndicator={Alignment.RIGHT}
else />
<Switch
checked={this.props.store.isLayout}
label="切换布局"
data-key="isLayout"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
/>
<Switch
checked={userConfig.dimensions}
label="显示板件间尺寸"
data-key="dimensions"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
/>
<Switch
checked={this.rStore.lightStore.isShowShadow}
label="阴影"
style={switchStyle}
alignIndicator={Alignment.RIGHT}
onChange={e =>
{ {
} this.rStore.lightStore.isShowShadow = !this.rStore.lightStore.isShowShadow;
this.rStore.lightStore.ShowShadowObject(this.rStore.lightStore.isShowShadow);
e.currentTarget.blur(); if (this.rStore.lightStore.isShowShadow)
}} {
/> AppToaster.show({
<div style={switchStyle}> message: "成功打开显示阴影,阴影仅在真实视图下可见.(阴影线上可能会影响显示性能!)",
<Tooltip timeout: 5000,
content="仅在透视相机下显示" intent: Intent.SUCCESS,
position={Position.TOP} }, "shadow");
}
else
{
}
e.currentTarget.blur();
}}
/>
<div style={switchStyle}>
<Tooltip
content="仅在透视相机下显示"
position={Position.TOP}
>
<Switch
style={{ marginBottom: '0' }}
checked={userConfig.isShowSkyBox}
label='天空球'
alignIndicator={Alignment.RIGHT}
data-key='isShowSkyBox'
onChange={this.handleChange}
/>
</Tooltip>
</div>
<Switch
checked={userConfig.lightHelper}
data-key="lightHelper"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
> >
<Switch <LightsMenu GetLightType={this.GetLightType} />
style={{ marginBottom: '0' }} </Switch>
checked={userConfig.isShowSkyBox}
label='天空球'
alignIndicator={Alignment.RIGHT}
data-key='isShowSkyBox'
onChange={this.handleChange}
/>
</Tooltip>
</div> </div>
<Switch
checked={userConfig.lightHelper}
data-key="lightHelper"
onChange={this.handleChange}
style={switchStyle}
alignIndicator={Alignment.RIGHT}
>
<LightsMenu GetLightType={this.GetLightType} />
</Switch>
</div > </div >
); );
} }

11
src/UI/Css/PanelStyle.less
Unescape View File

@ -0,0 +1,11 @@
.DownPanelCoordinateAndRadios
{
flex-direction: row;
align-items : center;
}
@media screen and (max-width:300px) {
.DownPanelCoordinateAndRadios
{
flex-direction: column;
}
}
Write Preview
Loading…
Cancel
Save