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