Skip to content

Commit 4cd9c65

Browse files
nicolaskruchtennicolaskruchten
authored
Merge pull request #716 from plotly/narrower
narrowing sidebar from 120px to 100px and panel from 345px to 335px
2 parents 32c17d7 + 2a1c2dd commit 4cd9c65

File tree

5 files changed

+98
-104
lines changed

5 files changed

+98
-104
lines changed

‎src/DefaultEditor.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,13 @@ class DefaultEditor extends Component {
7373
{logo ? logo : null}
7474
<GraphCreatePanel group={_('Graph')} name={_('Create')} />
7575
<GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
76-
{this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />}
76+
{this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transform')} />}
7777
<StyleTracesPanel group={_('Style')} name={_('Traces')} />
7878
<StyleLayoutPanel group={_('Style')} name={_('Layout')} />
7979
{this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
8080
<StyleLegendPanel group={_('Style')} name={_('Legend')} />
8181
{this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
82-
<StyleNotesPanel group={_('Style')} name={_('Annotations')} />
82+
<StyleNotesPanel group={_('Style')} name={_('Annotate')} />
8383
<StyleShapesPanel group={_('Style')} name={_('Shapes')} />
8484
<StyleImagesPanel group={_('Style')} name={_('Images')} />
8585
{this.hasSliders() && <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />}

‎src/components/fields/RectanglePositioner.js

+90-88
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,96 @@ 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,
13895
}}
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>
96+
>
97+
{Array(gridRes * gridRes)
98+
.fill(0)
99+
.map((v, i) => (
100+
<div
101+
key={i}
102+
className="rect-grid"
103+
style={{
104+
width: fieldWidthPx / gridRes - 1,
105+
height: fieldHeightPx / gridRes - 1,
106+
borderBottom: i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
107+
borderRight: (i + 1) % gridRes ? '0' : '1px solid',
108+
}}
109+
/>
110+
))}
111+
<ResizableRect
112+
bounds="parent"
113+
width={width}
114+
height={height}
115+
left={left}
116+
top={top}
117+
rotatable={false}
118+
draggable={!this.state.snap}
119+
zoomable={zoomable}
120+
onResize={style => {
121+
this.sendUpdate({
122+
fieldWidthPx,
123+
fieldHeightPx,
124+
width: style.width,
125+
height: style.height,
126+
x: style.left,
127+
y: style.top,
128+
});
129+
}}
130+
onDrag={(deltaX, deltaY) => {
131+
this.sendUpdate({
132+
fieldWidthPx,
133+
fieldHeightPx,
134+
width,
135+
height,
136+
x: left + deltaX,
137+
y: top + deltaY,
138+
});
139+
}}
140+
/>
141+
</div>
142+
{fullContainer.xaxis && fullContainer.xaxis.overlaying ? (
143+
''
144+
) : (
145+
<DualNumeric
146+
label={_('X')}
147+
attr={this.attr.x[0]}
148+
attr2={this.attr.x[1]}
149+
percentage
150+
step={1}
151+
min={0}
152+
max={100}
153+
/>
154+
)}
155+
{fullContainer.yaxis && fullContainer.yaxis.overlaying ? (
156+
''
157+
) : (
158+
<DualNumeric
159+
label={_('Y')}
160+
attr={this.attr.y[0]}
161+
attr2={this.attr.y[1]}
162+
percentage
163+
step={1}
164+
min={0}
165+
max={100}
166+
/>
167+
)}
168+
</Field>
169+
</div>
168170
);
169171
}
170172
}

‎src/components/widgets/SymbolSelector.js

+2-10
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
}

‎src/styles/components/fields/_field.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
align-self: center;
4141
}
4242
&__title {
43-
width: 30%;
43+
width: 80px;
4444
//flex-shrink:0;
4545
padding-left: var(--spacing-half-unit);
4646
display: block;
@@ -89,7 +89,7 @@
8989
border-left: 1px solid;
9090
}
9191
.rect-container {
92-
margin: var(--spacing-eighth-unit) auto var(--spacing-quarter-unit) auto;
92+
margin: 0 auto;
9393
position: relative;
9494
max-width: 294px;
9595
}

‎src/styles/variables/_layout.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
22
* Layout
33
*/
4-
$layout-panel-width: 345px;
5-
$layout-sidebar-width: 120px;
4+
$layout-panel-width: 335px;
5+
$layout-sidebar-width: 100px;

0 commit comments

Comments
 (0)