Skip to content

Commit 9d816f9

Browse files
nicolaskruchtennicolaskruchten
committed
various width fixes
1 parent 6c2550e commit 9d816f9

File tree

2 files changed

+93
-98
lines changed

2 files changed

+93
-98
lines changed

‎src/components/fields/RectanglePositioner.js‎

Lines changed: 91 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import ResizableRect from 'react-resizable-rotatable-draggable';
66
import RadioBlocks from '../widgets/RadioBlocks';
77
import DualNumeric from './DualNumeric';
88

9-
const maxWidth = 286;
9+
const maxWidth = 276;
1010
const gridRes = 8;
1111

1212
class UnconnectedRectanglePositioner extends Component {
@@ -77,94 +77,97 @@ class UnconnectedRectanglePositioner extends Component {
7777
}
7878

7979
return (
80-
<Field {...this.props} attr={attr}>
81-
<Field label={_('Snap to Grid')}>
82-
<RadioBlocks
83-
alignment="center"
84-
onOptionChange={snap => this.setState({snap: snap})}
85-
activeOption={this.state.snap}
86-
options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
87-
/>
88-
</Field>
89-
<div
90-
className="rect-container"
91-
style={{
92-
width: fieldWidthPx + 1,
93-
height: fieldHeightPx + 1,
94-
}}
95-
>
96-
{Array(gridRes * gridRes)
97-
.fill(0)
98-
.map((v, i) => (
99-
<div
100-
key={i}
101-
className="rect-grid"
102-
style={{
103-
width: fieldWidthPx / gridRes - 1,
104-
height: fieldHeightPx / gridRes - 1,
105-
borderBottom: i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
106-
borderRight: (i + 1) % gridRes ? '0' : '1px solid',
107-
}}
108-
/>
109-
))}
110-
<ResizableRect
111-
bounds="parent"
112-
width={width}
113-
height={height}
114-
left={left}
115-
top={top}
116-
rotatable={false}
117-
draggable={!this.state.snap}
118-
zoomable={zoomable}
119-
onResize={style => {
120-
this.sendUpdate({
121-
fieldWidthPx,
122-
fieldHeightPx,
123-
width: style.width,
124-
height: style.height,
125-
x: style.left,
126-
y: style.top,
127-
});
128-
}}
129-
onDrag={(deltaX, deltaY) => {
130-
this.sendUpdate({
131-
fieldWidthPx,
132-
fieldHeightPx,
133-
width,
134-
height,
135-
x: left + deltaX,
136-
y: top + deltaY,
137-
});
80+
<div style={{marginRight: 25}}>
81+
<Field {...this.props} attr={attr}>
82+
<Field label={_('Snap to Grid')}>
83+
<RadioBlocks
84+
alignment="center"
85+
onOptionChange={snap => this.setState({snap: snap})}
86+
activeOption={this.state.snap}
87+
options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
88+
/>
89+
</Field>
90+
<div
91+
className="rect-container"
92+
style={{
93+
width: fieldWidthPx + 1,
94+
height: fieldHeightPx + 1,
95+
margin: '0 auto',
13896
}}
139-
/>
140-
</div>
141-
{fullContainer.xaxis && fullContainer.xaxis.overlaying ? (
142-
''
143-
) : (
144-
<DualNumeric
145-
label={_('X')}
146-
attr={this.attr.x[0]}
147-
attr2={this.attr.x[1]}
148-
percentage
149-
step={1}
150-
min={0}
151-
max={100}
152-
/>
153-
)}
154-
{fullContainer.yaxis && fullContainer.yaxis.overlaying ? (
155-
''
156-
) : (
157-
<DualNumeric
158-
label={_('Y')}
159-
attr={this.attr.y[0]}
160-
attr2={this.attr.y[1]}
161-
percentage
162-
step={1}
163-
min={0}
164-
max={100}
165-
/>
166-
)}
167-
</Field>
97+
>
98+
{Array(gridRes * gridRes)
99+
.fill(0)
100+
.map((v, i) => (
101+
<div
102+
key={i}
103+
className="rect-grid"
104+
style={{
105+
width: fieldWidthPx / gridRes - 1,
106+
height: fieldHeightPx / gridRes - 1,
107+
borderBottom: i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
108+
borderRight: (i + 1) % gridRes ? '0' : '1px solid',
109+
}}
110+
/>
111+
))}
112+
<ResizableRect
113+
bounds="parent"
114+
width={width}
115+
height={height}
116+
left={left}
117+
top={top}
118+
rotatable={false}
119+
draggable={!this.state.snap}
120+
zoomable={zoomable}
121+
onResize={style => {
122+
this.sendUpdate({
123+
fieldWidthPx,
124+
fieldHeightPx,
125+
width: style.width,
126+
height: style.height,
127+
x: style.left,
128+
y: style.top,
129+
});
130+
}}
131+
onDrag={(deltaX, deltaY) => {
132+
this.sendUpdate({
133+
fieldWidthPx,
134+
fieldHeightPx,
135+
width,
136+
height,
137+
x: left + deltaX,
138+
y: top + deltaY,
139+
});
140+
}}
141+
/>
142+
</div>
143+
{fullContainer.xaxis && fullContainer.xaxis.overlaying ? (
144+
''
145+
) : (
146+
<DualNumeric
147+
label={_('X')}
148+
attr={this.attr.x[0]}
149+
attr2={this.attr.x[1]}
150+
percentage
151+
step={1}
152+
min={0}
153+
max={100}
154+
/>
155+
)}
156+
{fullContainer.yaxis && fullContainer.yaxis.overlaying ? (
157+
''
158+
) : (
159+
<DualNumeric
160+
label={_('Y')}
161+
attr={this.attr.y[0]}
162+
attr2={this.attr.y[1]}
163+
percentage
164+
step={1}
165+
min={0}
166+
max={100}
167+
/>
168+
)}
169+
</Field>
170+
</div>
168171
);
169172
}
170173
}

‎src/components/widgets/SymbolSelector.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4-
import ModalBox from '../containers/ModalBox';
54
import {CarretDownIcon} from 'plotly-icons';
65

76
export default class SymbolSelector extends Component {
@@ -78,10 +77,7 @@ export default class SymbolSelector extends Component {
7877
<div
7978
className="symbol-selector__item"
8079
key={value}
81-
onClick={() => {
82-
this.props.onChange(value);
83-
this.togglePanel();
84-
}}
80+
onClick={() => this.props.onChange(value)}
8581
>
8682
<svg width="28" height="28" className="symbol-selector__symbol" data-value={value}>
8783
<g transform="translate(14,14)">
@@ -107,11 +103,7 @@ export default class SymbolSelector extends Component {
107103
<CarretDownIcon className="symbol-selector__toggle__caret" />
108104
</span>
109105
</div>
110-
{isOpen ? (
111-
<ModalBox onClose={this.togglePanel} backgroundDark={this.props.backgroundDark}>
112-
{this.renderOptions()}
113-
</ModalBox>
114-
) : null}
106+
{isOpen && this.renderOptions()}
115107
</div>
116108
);
117109
}

0 commit comments

Comments
 (0)