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

!1797 优化:左侧图标自适应宽度

Browse Source
pull/1798/head
ChenX 3 years ago
parent 67519def21
commit c2d468662f
5 changed files with 233 additions and 232 deletions
Show Stats Download Patch File Download Diff File

7
src/Common/CoolDownTime.ts
Unescape View File

@ -23,6 +23,13 @@ export class CoolDownTime
}, time);
}
//防抖
Debounce(f: Function, time: number)
{
this.ExecFunc = f;
this.CoolDown(time);
}
//清除所有的状态
Clear()
{

2
src/Common/ErrorMonitoring.ts
Unescape View File

@ -26,7 +26,7 @@ export class ErrorMonitoring
{
window.addEventListener('error', e =>
{
ReportError(e.error.stack);
ReportError(e.error?.stack ?? e.message);
});
window.addEventListener("unhandledrejection", e =>
{

77
src/UI/Components/ToolBar/ResourceLibrary/ResourceLibrary.less
Unescape View File

@ -9,6 +9,7 @@
}
.bp3-card {
padding : 5px;
padding-top : 0px;
height : 100%;
display : flex;
flex-direction: column;
@ -47,50 +48,42 @@
span{
font-weight: 700 !important;
}
ul{
display : block !important;
list-style: none;
padding : 0;
position : relative;
}
.bp3-spinner{
position : absolute;
top : 50%;
margin-top : -20px;
left : 50%;
margin-left: -20px;
}
li:hover{
background-color: #F1F2F4 !important;
cursor : default !important;
}
li{
background-color: #F1F2F4;
width : 100% !important;
clear : both !important;
margin-bottom : 10px !important;
box-sizing : border-box;
padding-bottom : 20px !important;
img{
height: 100px !important;
width : 80px !important;
}
.categoryTag{
width : 30%;
height : 100%;
display: inline;
>span{
cursor: pointer;
&:hover{
color:#1890ff;
}
position : absolute;
top : 50%;
margin-top : -20px;
left : 50%;
margin-left: -20px;
}
ul{
width : max-content;
padding : 0;
flex-direction: column;
overflow : auto !important;
flex-wrap : nowrap !important;
gap: 5px;
li
{
width : auto !important;
height : auto !important;
list-style : none;
display : flex;
flex-direction : row;
justify-content : flex-start;
background-color: #F1F2F4;
gap: 5px;
&:hover{
cursor : default !important;
background-color: #F1F2F4 !important;
}
}
.categoryOptions{
float: right;
width: 70%;
.bp3-button-text{
font-weight: 500 !important;
img
{
width : 80px !important;
height: 100px !important;
}
.categoryOptions
{
padding-top: 10px;
}
}
}

95
src/UI/Components/ToolBar/ToolBar.tsx
Unescape View File

@ -1,11 +1,9 @@
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { CoolDownTime } from '../../../Common/CoolDownTime';
import { commandMachine } from '../../../Editor/CommandMachine';
import { userConfig } from '../../../Editor/UserConfig';
import { ICON_CDN } from '../../IconEnum';
import { ToolsBlockStore } from '../TopToolBar/ToolsBlockStore';
import { ICommandIconInfo, TopToolBarBlockData } from '../TopToolBar/TopToolBarInterface';
import { ICommandIconInfo } from '../TopToolBar/TopToolBarInterface';
import './PropertiesPanel.less';
export interface ToolBarProps
@ -15,57 +13,66 @@ export interface ToolBarProps
@observer
export class ToolBar extends React.Component<ToolBarProps, {}>
{
@observable actualWidth: string;
@observable windowHeigth = window.innerHeight;
@observable windowWidth = window.innerWidth;
componentDidMount()
ulRef = React.createRef<HTMLUListElement>();
observer: ResizeObserver;
time = new CoolDownTime;
componentDidMount(): void
{
window.addEventListener('resize', this.calToolbarWidth, false);
this.observer = new ResizeObserver((entries: ResizeObserverEntry[]) =>
{
this.UpdateWidth();
});
this.observer.observe(this.ulRef.current);
}
@action
calToolbarWidth = () =>
componentWillUnmount(): void
{
const { iconList } = this.props;
this.windowHeigth = window.innerHeight;
this.windowWidth = window.innerWidth;
let iconNum = iconList.length;
let blocksData = ToolsBlockStore.GetInstance().blocksData as TopToolBarBlockData;
let drawIconNum = blocksData.draw.IconNum;
let headHeight = 0;
drawIconNum * 40 <= this.windowWidth ? headHeight = 108 : headHeight = 153;
if (this.windowHeigth > iconNum * 58 + (userConfig.smalliconmode ? (headHeight + 16) : 124))
this.actualWidth = "40px";
else if (this.windowHeigth < (iconNum % 2 == 1 ? iconNum + 1 : iconNum) * 58 / 2 + (userConfig.smalliconmode ? (headHeight + 17) : 125))
this.actualWidth = "130px";
else
this.actualWidth = "80px";
};
this.observer.disconnect();
}
componentDidUpdate(prevProps: Readonly<ToolBarProps>, prevState: Readonly<{}>, snapshot?: any): void
{
this.UpdateWidth();
}
private UpdateWidth()
{
this.time.Debounce(() =>
{
this.ulRef.current.parentElement.style.width = `${this.ulRef.current.scrollWidth}px`;
}, 50);
}
render()
{
const { iconList } = this.props;
const liStyle: React.CSSProperties = {
textAlign: "center",
writingMode: "horizontal-tb"
};
this.calToolbarWidth();
return (
<ul className="ul-unstyle" style={{ width: this.actualWidth }} >
{
iconList.map((cmd, index) =>
<div style={{ display: "flex" }}>
<ul className='ul-unstyle'
style={{ display: "inline-flex" }}
ref={this.ulRef}
>
{
return (
<li key={cmd.command} title={cmd.command} style={liStyle}
onClick={() =>
{
commandMachine.ExecCommand(cmd.command);
}}
>
<img src={`${ICON_CDN}/${cmd.svg}`} alt={cmd.title} />
<p style={{ height: 15, overflow: "hidden" }}>{cmd.title}</p>
</li>
);
})
}
</ul>
iconList.map((cmd) =>
{
return (
<li key={cmd.command} title={cmd.command} style={liStyle}
onClick={() =>
{
commandMachine.ExecCommand(cmd.command);
}}
>
<img src={`${ICON_CDN}/${cmd.svg}`} alt={cmd.title} />
<p style={{ height: 15, overflow: "hidden" }}>{cmd.title}</p>
</li>
);
})
}
</ul>
</div>
);
}

284
src/UI/Css/style.less
Unescape View File

@ -287,10 +287,10 @@ input[type=radio] {
flex-direction: column;
flex-wrap : wrap;
margin : 0;
width : 80px;
>li {
width : 40px;
height : 60px;
margin : 0;
padding: 0;
@ -302,21 +302,6 @@ input[type=radio] {
}
}
// 媒体查询 ToolBar
// @media screen and (min-height:1562px) {
// #toolbar ul {
// width: 40px;
// }
// }
@media screen and (max-height:810px) {
#toolbar ul {
display : flex;
flex-flow: wrap;
overflow : auto;
}
}
/*----------TopToolBar开始-----------*/
//顶部工具栏样式
#TopToolBar img {
@ -678,8 +663,8 @@ img {
}
}
#MaterialCanvas canvas{
max-width: 65vw;
#MaterialCanvas canvas {
max-width: 65vw;
}
.right {
@ -698,170 +683,174 @@ img {
}
//批量修改文字工具命令TextModifyTool
#TextModifytModal{
width : 520px;
#TextModifytModal {
width: 520px;
.bp3-dialog-body{
.bp3-dialog-body {
margin: auto;
table{
table {
margin-top: 10px;
}
.bp3-input:not([type=search]){
.bp3-input:not([type=search]) {
height: 22px;
}
span{
padding: 2px;
span {
padding : 2px;
vertical-align: middle;
}
}
.bp3-dialog-footer{
.bp3-dialog-footer {
display: block;
}
.changeLength{
.changeLength {
text-align: center;
button{
button {
margin: 10px;
}
}
.foot_left{
.foot_left {
position: absolute;
left : 3%;
.bp3-button.bp3-intent-danger{
.bp3-button.bp3-intent-danger {
margin: 0;
}
}
}
//-----批量修改文字工具结束--------
//视图窗口配置
#ViewporConfigModal{
#ViewporConfigModal {
width : 580px;
height: 450px;
span{
span {
font-size : 14px;
font-family: none;
}
select{
select {
margin-left: 10px;
margin-top : -5px;
}
.bp3-dialog-footer{
.bp3-dialog-footer {
display: block;
}
.foot_left{
.foot_left {
position: absolute;
left : 3%;
.bp3-button.bp3-intent-danger{
.bp3-button.bp3-intent-danger {
margin: 0;
}
}
.viewport{
.viewport {
position: absolute;
float : left;
}
.wireFrame{
.wireFrame {
position: absolute;
float : left;
left : 45%;
}
.viewpor_bottom{
.viewpor_bottom {
width: 100%;
select{
select {
width: 98px;
}
>div>div>div>div{
>div>div>div>div {
margin-left: 3px;
margin-top : 5px;
}
.div1{
.div1 {
width : 180px;
height : 90px;
border : 3px solid rgba(14, 133, 238, 0.589);
border-radius: 5px;
}
.div2{
.div2 {
width : 180px;
height : 90px;
border : 3px solid rgba(14, 133, 238, 0.589);
border-radius: 5px;
}
.div3{
.div3 {
width : 180px;
height : 90px;
border : 3px solid rgba(14, 133, 238, 0.589);
border-radius: 5px;
}
.chuizhi{
.chuizhi {
margin-left: 181px;
margin-top : 9px;
>div{
margin-top: 1px;
}
>div {
margin-top: 1px;
}
}
.shuiping{
.shuiping {
margin-top: 100px;
.div1{
.div1 {
position: absolute;
float : left;
}
.div2{
.div2 {
position : absolute;
float : left;
margin-left: 181px;
}
.div3{
.div3 {
position : absolute;
float : left;
margin-left: 362px;
}
}
.shang{
.shang {
margin-left: 90px;
margin-top : 55px;
.div1{
.div1 {
width: 361px;
>div{
>div {
margin-left: 91px;
}
}
.shang_xia{
.shang_xia {
margin-top: 1px;
.div2{
.div2 {
position: absolute;
float : left;
}
.div3{
.div3 {
position : absolute;
float : left;
margin-left: 181px;
@ -869,76 +858,77 @@ img {
}
}
.xia{
.xia {
margin-left: 90px;
margin-top : 55px;
.xia_shang{
.xia_shang {
margin-top: 1px;
.div1{
.div1 {
position: absolute;
}
.div2{
.div2 {
margin-left: 181px;
}
}
.div3{
.div3 {
width : 361px;
margin-top: 1px;
>div{
>div {
margin-left: 91px;
}
}
}
.zuo{
.zuo {
margin-left: 90px;
margin-top : 55px;
.div1{
.div1 {
height : 181px;
position: absolute;
float : left;
>div{
>div {
margin-top: 60px;
}
}
.zuo_you{
.zuo_you {
position : absolute;
float : left;
margin-left: 181px;
.div3{
.div3 {
margin-top: 1px;
}
}
}
.you{
.you {
margin-left: 90px;
margin-top : 55px;
.div3{
.div3 {
height : 181px;
position : absolute;
float : left;
margin-left: 181px;
>div{
>div {
margin-top: 60px;
}
}
.you_zuo{
position : absolute;
float : left;
.you_zuo {
position: absolute;
float : left;
.div2{
.div2 {
margin-top: 1px;
}
}
@ -946,97 +936,103 @@ img {
}
}
#EditViewportModal{
#EditViewportModal {
width: 250px;
label{
label {
margin: 0;
}
.bp3-dialog-body{
.bp3-dialog-body {
padding: 20px;
}
button{
button {
margin: 5px;
}
.bp3-dialog-footer{
.bp3-dialog-footer {
height: 50px;
.bp3-dialog-footer-actions{
position:absolute;
.bp3-dialog-footer-actions {
position: absolute;
right : 3%;
}
}
}
#EditFrameModal{
select{
#EditFrameModal {
select {
margin-left: 10px;
margin-top : -5px;
}
font-size: 14px;
.bp3-dialog-body{
.bp3-dialog-body {
width : 350px;
height : 240px;
padding: 20px;
}
.bp3-dialog-footer{
.bp3-dialog-footer {
height: 50px;
.bp3-dialog-footer-actions{
position:absolute;
.bp3-dialog-footer-actions {
position: absolute;
right : 3%
}
}
}
//-----视图窗口配置结束--------
//-----文件编辑记录开始--------
#OperLogsModal{
.bp3-running-text table th, table.bp3-html-table th,
.bp3-running-text table td, table.bp3-html-table td{
#OperLogsModal {
.bp3-running-text table th,
table.bp3-html-table th,
.bp3-running-text table td,
table.bp3-html-table td {
vertical-align: middle;
padding : 10px;
height : 35px;
position : relative;
}
position : relative;
}
.button{
right : 10%;
top : 15%;
padding : 0px 5px 0px 5px;
position: absolute;
.button {
right : 10%;
top : 15%;
padding : 0px 5px 0px 5px;
position : absolute;
margin-top: -2px;
}
.bp3-dialog-body{
.bp3-dialog-body {
width: 510px;
}
}
#HistoryFile{
#HistoryFile {
min-height: 100px;
max-height: 300px;
width : 480px;
.bp3-button-group.bp3-minimal{
.bp3-button-group.bp3-minimal {
float: left;
}
.bp3-running-text table th, table.bp3-html-table th,
.bp3-running-text table td, table.bp3-html-table td{
.bp3-running-text table th,
table.bp3-html-table th,
.bp3-running-text table td,
table.bp3-html-table td {
vertical-align: middle;
padding : 10px;
height : 30px;
position : relative;
}
}
.button{
.button {
right : 10%;
top : 15%;
padding : 0px 5px 0px 5px;
@ -1046,22 +1042,23 @@ img {
}
}
.historyToaster{
.historyToaster {
top: 10%;
.bp3-button-group.bp3-minimal{
.bp3-button-group.bp3-minimal {
position: absolute;
right : 0;
}
}
.bp3-toast-container.bp3-toast-container-top.historyToaster{
.bp3-toast-container.bp3-toast-container-top.historyToaster {
top: 10%;
}
//-----文件编辑记录结束--------
#TemplateList{
.imglist{
#TemplateList {
.imglist {
width : 136px;
height : 144px;
display : flex;
@ -1069,7 +1066,7 @@ img {
align-items : center;
background-color: white;
img{
img {
max-width : 100%;
max-height: 98%;
width : auto;
@ -1078,26 +1075,27 @@ img {
}
}
#ExposureUI{
.bp3-label{
width: 60px;
float: left;
#ExposureUI {
.bp3-label {
width : 60px;
float : left;
margin-top: 5px;
}
.bp3-control-group.bp3-numeric-input{
.bp3-control-group.bp3-numeric-input {
input{
input {
width: 35px;
}
}
}
#SpotLightModel{
#SpotLightModel {
width : 300px;
font-size: 13px;
.bp3-dialog-body{
.bp3-dialog-body {
padding: 5px;
.bp3-control.bp3-switch.bp3-align-right {
@ -1105,38 +1103,38 @@ img {
padding-right: 47px;
}
>div{
>div {
height: 32px;
}
input{
input {
width : 100px;
height : 27px;
margin-left: 10px;
}
.bp3-label{
.bp3-label {
float : left;
width : 56px;
margin-top: 5px;
text-align: center;
}
.bp3-form-group{
.bp3-form-group {
margin: 0;
}
.bp3-input-group.bp3-disabled.bp3-small.bp3-inline{
.bp3-input-group.bp3-disabled.bp3-small.bp3-inline {
width: 130px;
}
.bp3-popover-wrapper{
.bp3-icon.bp3-icon-stop{
.bp3-popover-wrapper {
.bp3-icon.bp3-icon-stop {
margin-left: 13px;
margin-top : 4px;
}
.bp3-input{
.bp3-input {
width : 100px;
height : 27px;
margin-left: 10px;
@ -1144,10 +1142,10 @@ img {
}
}
.bp3-control-group.bp3-numeric-input {
.bp3-control-group.bp3-numeric-input {
float: left;
.bp3-input{
.bp3-input {
height : 27px;
width : 50px;
margin-left: 10px;
@ -1155,13 +1153,13 @@ img {
}
}
.lg-pos{
.bp3-button{
.lg-pos {
.bp3-button {
height: 30px;
}
}
.bp3-slider{
.bp3-slider {
min-width : none;
width : 130px;
height : auto;
@ -1169,31 +1167,27 @@ img {
margin-top : 5px;
margin-left: 130px;
.bp3-slider-axis
{
.bp3-slider-axis {
display: none;
}
.bp3-slider-handle
{
.bp3-slider-label
{
.bp3-slider-handle {
.bp3-slider-label {
display: none;
}
}
}
.bp3-list.bp3-list-unstyled{
.pos{
.bp3-list.bp3-list-unstyled {
.pos {
display: flex;
}
}
}
.bp3-dialog-footer
{
padding: 7px 10px 7px 10px;
border-top: 1px solid #dddddd;
.bp3-dialog-footer {
padding : 7px 10px 7px 10px;
border-top : 1px solid #dddddd;
background-color: white;
}
}

Write Preview
Loading…
Cancel
Save