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

!2090 优化:隐藏工具栏在同一个控件上提供一套用于小屏幕的配置

Browse Source
pull/2124/head
黄诗津 2 years ago committed by ChenX
parent 0cd83bbef4
commit cd710c6d02
5 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File

5
src/Add-on/ToggleUI.ts
Unescape View File

@ -5,7 +5,10 @@ export class Command_ToggleUI
async exec()
{
let store = DownPanelStore.GetInstance() as DownPanelStore;
store.isTopToolBarShow = !store.isTopToolBarShow;
if (store.isSmallScreen)
store.isTopToolBarShowMin = !store.isTopToolBarShowMin;
else
store.isTopToolBarShow = !store.isTopToolBarShow;
store.Upload();
}
}

6
src/UI/Components/CameraControlButton/CameraControlBtn.tsx
Unescape View File

@ -266,7 +266,7 @@ export class CameraControlBtn extends React.Component<{}, {}>
>
<MenuItem
text="顶部工具栏"
icon={downStore.isTopToolBarShow ? "tick" : "blank"}
icon={(downStore.isSmallScreen ? downStore.isTopToolBarShowMin : downStore.isTopToolBarShow) ? "tick" : "blank"}
onClick={() =>
{
downStore.toggleTopToolBarShow();
@ -274,7 +274,7 @@ export class CameraControlBtn extends React.Component<{}, {}>
/>
<MenuItem
text="左侧工具栏"
icon={downStore.isLeftToolBarShow ? "tick" : "blank"}
icon={(downStore.isSmallScreen ? downStore.isLeftToolBarShowMin : downStore.isLeftToolBarShow) ? "tick" : "blank"}
onClick={() =>
{
downStore.toggleLeftToolBarShow();
@ -282,7 +282,7 @@ export class CameraControlBtn extends React.Component<{}, {}>
/>
<MenuItem
text="底部工具栏"
icon={downStore.isBottomToolBarShow ? "tick" : "blank"}
icon={(downStore.isSmallScreen ? downStore.isBottomToolBarShowMin : downStore.isBottomToolBarShow) ? "tick" : "blank"}
onClick={() =>
{
downStore.toggleBottomToolBarShow();

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

@ -104,7 +104,7 @@ export class TopPanel extends React.Component<{ store?: TopPanelStore; }, {}>
render()
{
return (
<div style={{ display: this.topStore.isTopToolBarShow ? "block" : "none" }}>
<div style={{ display: (this.topStore.isSmallScreen ? this.topStore.isTopToolBarShowMin : this.topStore.isTopToolBarShow) ? "block" : "none" }}>
<Navbar>
<Navbar.Group align={Alignment.LEFT}>
{/* <InputGroup small={true} leftIcon="search" type="search" placeholder="搜索文件..." dir="auto" /> */}
@ -228,7 +228,7 @@ export class TopPanel extends React.Component<{ store?: TopPanelStore; }, {}>
//底部状态栏
@inject("store")
@observer
export class DownPanel extends React.Component<{ store?: DownPanelStore; }, {}>
export class DownPanel extends React.Component<{ store: DownPanelStore; }, {}>
{
rStore: RightPanelStore = RightPanelStore.GetInstance();
private downStore = DownPanelStore.GetInstance() as DownPanelStore;
@ -376,7 +376,7 @@ export class DownPanel extends React.Component<{ store?: DownPanelStore; }, {}>
};
return (
<div className='DownPanelCoordinateAndRadios'
style={{ display: this.downStore.isBottomToolBarShow ? "flex" : "none", position: "relative" }}
style={{ display: (this.downStore.isSmallScreen ? this.downStore.isBottomToolBarShowMin : this.downStore.isBottomToolBarShow) ? "flex" : "none", position: "relative" }}
>
<div style={{ width: 180 }}>
<span
@ -417,7 +417,7 @@ export class DownPanel extends React.Component<{ store?: DownPanelStore; }, {}>
alignIndicator={Alignment.RIGHT}
/>
<Switch
checked={this.props.store.isLeftToolBarShow}
checked={this.props.store.isSmallScreen ? this.props.store.isLeftToolBarShowMin : this.props.store.isLeftToolBarShow}
label="工具栏"
onChange={(e) =>
{

2
src/UI/Components/TopToolBar/TopToolBar.tsx
Unescape View File

@ -221,7 +221,7 @@ export class TopToolBar extends React.Component<{}, {}>
let topStore = DownPanelStore.GetInstance() as DownPanelStore;
return (
<div style={{ display: topStore.isTopToolBarShow ? "block" : "none" }}>
<div style={{ display: (topStore.isSmallScreen ? topStore.isTopToolBarShowMin : topStore.isTopToolBarShow) ? "block" : "none" }}>
<Tabs
id="TopToolBar"
className="tabs-unstyle"

54
src/UI/Store/DownPanelStore.ts
Unescape View File

@ -68,9 +68,6 @@ export class DownPanelStore
@observable progressName = "";
@observable progress = 1;
@observable isLeftToolBarShow: boolean = true;
@observable isTopToolBarShow: boolean = true;
@observable isBottomToolBarShow: boolean = true;
@observable isF3Checked: boolean = true;//捕捉开启
@observable isF11Checked: boolean = false;
posEl: HTMLSpanElement;
@ -157,9 +154,22 @@ export class DownPanelStore
@observable useAxis: boolean = true;
@observable isSmallScreen: boolean;
@observable isLeftToolBarShow: boolean = true;//
@observable isTopToolBarShow: boolean = true;
@observable isBottomToolBarShow: boolean = true;
//新增另一组配置用来控制在不同屏幕大小设备下的显示隐藏 (小屏模式下用以下配置)
@observable isLeftToolBarShowMin: boolean = false;
@observable isTopToolBarShowMin: boolean = false;//
@observable isBottomToolBarShowMin: boolean = false;
private timeId;
private constructor()
{
//设置刚开始打开时屏幕状态,以这个为基准判断
this.isSmallScreen = Boolean(window.innerWidth < 850);
if (this.isSmallScreen)//只能从小屏变成大屏,不能从大屏变成小屏
window.addEventListener('resize', this.OnWindowsResize);
xaop.begin(app.Editor.MouseCtrl, app.Editor.MouseCtrl.updateWordPoint, () =>
{
this.posEl.innerText = PointToString(app.Editor.MouseCtrl._CurMousePointWCS);
@ -184,6 +194,17 @@ export class DownPanelStore
});
}
private OnWindowsResize = () =>
{
if (this.isSmallScreen && window.innerWidth >= 850)
{
this.isSmallScreen = false;
if (this.isLeftToolBarShowMin !== this.isLeftToolBarShow)
this.showType ^= ToolBarType.lefttoolbar;
window.removeEventListener("resize", this.OnWindowsResize);
}
};
private static _SingleInstance: DownPanelStore;
static GetInstance(): DownPanelStore
{
@ -202,6 +223,9 @@ export class DownPanelStore
isLeftToolBarShow: this.isLeftToolBarShow,
isTopToolBarShow: this.isTopToolBarShow,
isBottomToolBarShow: this.isBottomToolBarShow,
isLeftToolBarShowMin: this.isLeftToolBarShowMin,
isTopToolBarShowMin: this.isTopToolBarShowMin,
isBottomToolBarShowMin: this.isBottomToolBarShowMin,
isF3Checked: this.isF3Checked,
isF11Checked: this.isF11Checked,
snapData: this.snapData.map(d => d.enable),
@ -264,11 +288,13 @@ export class DownPanelStore
this.usePass = config.usePass;
this.useOrtho = config.useOrtho;
let isshow: boolean;
if (window.innerWidth < 850) isshow = false;
this.isLeftToolBarShow = isshow ?? config.isLeftToolBarShow ?? true;
this.isTopToolBarShow = isshow ?? config.isTopToolBarShow ?? true;
this.isBottomToolBarShow = isshow ?? config.isBottomToolBarShow ?? true;
this.isLeftToolBarShow = config.isLeftToolBarShow ?? true;
this.isTopToolBarShow = config.isTopToolBarShow ?? true;
this.isBottomToolBarShow = config.isBottomToolBarShow ?? true;
this.isLeftToolBarShowMin = config.isLeftToolBarShowMin ?? false;
this.isTopToolBarShowMin = config.isTopToolBarShowMin ?? false;
this.isBottomToolBarShowMin = config.isBottomToolBarShowMin ?? false;
this.isF3Checked = config.isF3Checked;
this.isF11Checked = config.isF11Checked;
@ -284,13 +310,16 @@ export class DownPanelStore
this.lightsData[i].enable = config.lightsData[i];
}
this.SetSnapMode();
this.showType = !this.isLeftToolBarShow ? this.showType ^ ToolBarType.lefttoolbar : this.showType | ToolBarType.lefttoolbar;
this.showType = (this.isSmallScreen ? !this.isLeftToolBarShowMin : !this.isLeftToolBarShow) ? this.showType ^ ToolBarType.lefttoolbar : this.showType | ToolBarType.lefttoolbar;
}
toggleLeftToolBarShow()
{
this.showType ^= ToolBarType.lefttoolbar;
this.isLeftToolBarShow = !this.isLeftToolBarShow;
if (this.isSmallScreen)
this.isLeftToolBarShowMin = !this.isLeftToolBarShowMin;
else
this.isLeftToolBarShow = !this.isLeftToolBarShow;
this.Upload();
}
toggleTopToolBarShow()
@ -299,7 +328,10 @@ export class DownPanelStore
}
toggleBottomToolBarShow()
{
this.isBottomToolBarShow = !this.isBottomToolBarShow;
if (this.isSmallScreen)
this.isBottomToolBarShowMin = !this.isBottomToolBarShowMin;
else
this.isBottomToolBarShow = !this.isBottomToolBarShow;
this.Upload();
}

Write Preview
Loading…
Cancel
Save