Skip to content

Commit 9168d7c

Browse files
nicolaskruchtennicolaskruchten
committed
CSS for combo component
1 parent 858201b commit 9168d7c

File tree

16 files changed

+94
-141
lines changed

16 files changed

+94
-141
lines changed

‎dev/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ class App extends Component {
6262

6363
render() {
6464
return (
65-
<div className="app__container plotly-editor--theme-provider">
65+
<div className="app">
6666
<PlotlyEditor
6767
data={this.state.data}
6868
layout={this.state.layout}

‎dev/styles.css

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,29 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app__container {
8-
display: flex;
9-
flex-direction: column;
10-
}
11-
127
.app {
13-
display: flex;
14-
/*
15-
We are defining the max height of the app so that the editor knows how big to be
16-
currently the editor will take up whatever space it can if it is not constrained in its parent
17-
*/
18-
flex-grow: 1;
19-
height: calc(100vh - 50px);
20-
max-height: calc(100vh - 50px);
21-
width: 100%;
22-
}
23-
24-
.app__main {
25-
max-width: 100%;
268
height: calc(100vh - 50px);
279
max-height: calc(100vh - 50px);
28-
overflow: auto;
29-
flex-grow: 1;
3010
}
3111

3212
.mock-nav {
3313
height: 50px;
3414
width: 100%;
35-
background-color: var(--color-background-inverse);
15+
background-color: #506784;
3616
display: inline-flex;
3717
color: white;
3818
}
3919

40-
.mock-nav__label{
41-
line-height: 50px;
42-
padding-left: 10px;
20+
.mock-nav__label {
21+
line-height: 50px;
22+
padding-left: 10px;
4323
}
4424

45-
.mock-nav__select{
46-
width: 300px;
47-
margin-left: 20px;
48-
margin-right: 20px;
49-
margin-top: 7px;
25+
.mock-nav__select {
26+
width: 300px;
27+
margin-left: 20px;
28+
margin-right: 20px;
29+
margin-top: 7px;
5030
}
5131

5232
.Select.open-top .Select-menu-outer {

‎examples/custom/src/App.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,22 @@ class App extends Component {
3434

3535
render() {
3636
return (
37-
<PlotlyEditor
38-
data={this.state.data}
39-
layout={this.state.layout}
40-
config={config}
41-
dataSources={dataSources}
42-
dataSourceOptions={dataSourceOptions}
43-
plotly={plotly}
44-
onUpdate={(data, layout) => this.setState({data, layout})}
45-
useResizeHandler
46-
debug
47-
advancedTraceTypeSelector
48-
>
49-
<CustomEditor />
50-
</PlotlyEditor>
37+
<div className="app">
38+
<PlotlyEditor
39+
data={this.state.data}
40+
layout={this.state.layout}
41+
config={config}
42+
dataSources={dataSources}
43+
dataSourceOptions={dataSourceOptions}
44+
plotly={plotly}
45+
onUpdate={(data, layout) => this.setState({data, layout})}
46+
useResizeHandler
47+
debug
48+
advancedTraceTypeSelector
49+
>
50+
<CustomEditor />
51+
</PlotlyEditor>
52+
</div>
5153
);
5254
}
5355
}

‎examples/custom/src/index.css

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,7 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app{
8-
display: flex;
9-
/*
10-
We are defining the max height of the app so that the editor knows how big to be
11-
currently the editor will take up whatever space it can if it is not constrained in its parent
12-
*/
13-
min-height: 100vh;
14-
max-height: 100vh;
15-
width: 100%;
16-
}
17-
.app__main {
18-
max-width: 100%;
19-
max-height: 100vh;
20-
overflow: auto;
21-
flex-grow: 1;
7+
.app {
8+
height: calc(100vh - 50px);
9+
max-height: calc(100vh - 50px);
2210
}

‎examples/demo/src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class App extends Component {
5858

5959
render() {
6060
return (
61-
<div className="app__container plotly-editor--theme-provider">
61+
<div className="app">
6262
<PlotlyEditor
6363
data={this.state.data}
6464
layout={this.state.layout}

‎examples/demo/src/index.css

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,15 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app__container {
8-
display: flex;
9-
flex-direction: column;
10-
}
11-
127
.app {
13-
display: flex;
14-
/*
15-
We are defining the max height of the app so that the editor knows how big to be
16-
currently the editor will take up whatever space it can if it is not constrained in its parent
17-
*/
18-
flex-grow: 1;
19-
height: calc(100vh - 50px);
20-
max-height: calc(100vh - 50px);
21-
width: 100%;
22-
}
23-
24-
.app__main {
25-
max-width: 100%;
268
height: calc(100vh - 50px);
279
max-height: calc(100vh - 50px);
28-
overflow: auto;
29-
flex-grow: 1;
3010
}
3111

3212
.mock-nav {
3313
height: 50px;
3414
width: 100%;
35-
background-color: var(--color-background-inverse);
15+
background-color: #506784;
3616
display: inline-flex;
3717
color: white;
3818
}

‎examples/redux/src/App.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,20 @@ class App extends Component {
3232
const {actions, dataSources, dataSourceOptions, data, layout} = this.props;
3333

3434
return (
35-
<PlotlyEditor
36-
data={data}
37-
layout={layout}
38-
config={config}
39-
dataSources={dataSources}
40-
dataSourceOptions={dataSourceOptions}
41-
plotly={plotly}
42-
onUpdate={actions.editorUpdate}
43-
useResizeHandler
44-
debug
45-
advancedTraceTypeSelector
46-
/>
35+
<div className="app">
36+
<PlotlyEditor
37+
data={data}
38+
layout={layout}
39+
config={config}
40+
dataSources={dataSources}
41+
dataSourceOptions={dataSourceOptions}
42+
plotly={plotly}
43+
onUpdate={actions.editorUpdate}
44+
useResizeHandler
45+
debug
46+
advancedTraceTypeSelector
47+
/>
48+
</div>
4749
);
4850
}
4951
}

‎examples/redux/src/index.css

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,7 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app{
8-
display: flex;
9-
min-height: 100vh;
10-
}
11-
.app__aside{
12-
display: flex;
13-
max-height: 100vh;
14-
}
15-
.app__main{
16-
max-height: 100vh;
17-
width: 100%;
18-
overflow: auto;
7+
.app {
8+
height: calc(100vh - 50px);
9+
max-height: calc(100vh - 50px);
1910
}

‎examples/simple/src/App.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,20 @@ class App extends Component {
2424

2525
render() {
2626
return (
27-
<PlotlyEditor
28-
data={this.state.data}
29-
layout={this.state.layout}
30-
config={config}
31-
dataSources={dataSources}
32-
dataSourceOptions={dataSourceOptions}
33-
plotly={plotly}
34-
onUpdate={(data, layout) => this.setState({data, layout})}
35-
useResizeHandler
36-
debug
37-
advancedTraceTypeSelector
38-
/>
27+
<div className="app">
28+
<PlotlyEditor
29+
data={this.state.data}
30+
layout={this.state.layout}
31+
config={config}
32+
dataSources={dataSources}
33+
dataSourceOptions={dataSourceOptions}
34+
plotly={plotly}
35+
onUpdate={(data, layout) => this.setState({data, layout})}
36+
useResizeHandler
37+
debug
38+
advancedTraceTypeSelector
39+
/>
40+
</div>
3941
);
4042
}
4143
}

‎examples/simple/src/index.css

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,7 @@ body {
55
}
66

77
.app {
8-
display: flex;
9-
/*
10-
We are defining the max height of the app so that the editor knows how big to be
11-
currently the editor will take up whatever space it can if it is not constrained in its parent
12-
*/
13-
min-height: 100vh;
8+
height: 100vh;
149
max-height: 100vh;
1510
width: 100%;
1611
}
17-
.app__main {
18-
max-width: 100%;
19-
max-height: 100vh;
20-
overflow: auto;
21-
flex-grow: 1;
22-
}

‎src/EditorControls.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ class EditorControls extends Component {
215215
return (
216216
<div
217217
className={
218-
bem('plotly-editor') +
218+
bem('editor_controls') +
219219
' plotly-editor--theme-provider' +
220220
`${this.props.className ? ` ${this.props.className}` : ''}`
221221
}

‎src/PlotlyEditor.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class PlotlyEditor extends Component {
1212

1313
render() {
1414
return (
15-
<div className="app">
15+
<div className="plotly_editor">
1616
<EditorControls
1717
graphDiv={this.state.graphDiv}
1818
dataSources={this.props.dataSources}
@@ -26,7 +26,10 @@ class PlotlyEditor extends Component {
2626
>
2727
{this.props.children}
2828
</EditorControls>
29-
<div className="app__main" style={{width: '100%', height: '100%'}}>
29+
<div
30+
className="plotly_editor_plot"
31+
style={{width: '100%', height: '100%'}}
32+
>
3033
<this.PlotComponent
3134
data={this.props.data}
3235
layout={this.props.layout}
@@ -35,11 +38,7 @@ class PlotlyEditor extends Component {
3538
debug={this.props.debug}
3639
onInitialized={graphDiv => this.setState({graphDiv})}
3740
onUpdate={graphDiv => this.setState({graphDiv})}
38-
style={{
39-
width: '100%',
40-
height: '100%',
41-
minHeight: 'calc(100vh - 50px)',
42-
}}
41+
style={{width: '100%', height: '100%'}}
4342
/>
4443
</div>
4544
</div>

‎src/components/PanelMenuWrapper.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ class PanelsWithSidebar extends Component {
7676
const menuOpts = this.computeMenuOptions(this.props);
7777

7878
return (
79-
<div className={bem('plotly-editor', 'wrapper')}>
79+
<div className={bem('editor_controls', 'wrapper')}>
8080
<div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
8181
{React.Children.map(
8282
this.props.children,

‎src/styles/components/containers/_panel.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
width: 100%;
1111
@include scrollbar();
1212

13-
@at-root .plotly-editor__wrapper > .panel {
13+
@at-root .editor_controls__wrapper > .panel {
1414
// These are for the first panel
1515
background-color: var(--panel-background);
1616
border-right: var(--border-default);

‎src/styles/components/widgets/_dropdown.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
color: var(--color-text-base);
6363
}
6464
.Select.is-open .Select-arrow,
65-
.plotly-editor
65+
.editor_controls
6666
.dropdown-container
6767
.Select
6868
.Select-arrow-zone:hover

‎src/styles/main.scss

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
}
1919
}
2020

21-
.plotly-editor {
21+
.editor_controls {
2222
position: relative;
2323
width: var(--editor-width);
2424
flex-shrink: 0;
@@ -32,3 +32,23 @@
3232
flex-grow: 1;
3333
}
3434
}
35+
36+
.plotly_editor {
37+
display: flex;
38+
/*
39+
We are defining the max height of the app so that the editor knows how big to be
40+
currently the editor will take up whatever space it can if it is not constrained in its parent
41+
*/
42+
flex-grow: 1;
43+
height: 100%;
44+
max-height: 100%;
45+
width: 100%;
46+
}
47+
48+
.plotly_editor_plot {
49+
max-width: 100%;
50+
height: 100%;
51+
max-height: 100%;
52+
overflow: auto;
53+
flex-grow: 1;
54+
}

0 commit comments

Comments
 (0)