Skip to content

Commit f1e18cf

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add sub switches
1 parent 15405f4 commit f1e18cf

15 files changed

Lines changed: 23963 additions & 31032 deletions

File tree

‎src/public/dist/bundle.js‎

Lines changed: 23836 additions & 31006 deletions
Large diffs are not rendered by default.

‎src/public/dist/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/dist/resources/js-file-purple.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎src/public/js/App.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
flex-direction: column;
66
}
77

8+
.App-header {
9+
height: 37px;
10+
position: relative;
11+
border-bottom: 1px solid #ebedf0;
12+
}
13+
814
.App-body {
915
position: relative;
1016
height: 100%;

‎src/public/js/components/controls/ViewSwitches/ViewSwitchesContainer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
33
import { toggleSwitch } from './store/actions';
44

55
const mapStateToProps = state => {
6-
const { defaultChecked, switches } = state.viewSwitches;
7-
return { defaultChecked, switches };
6+
const { defaultChecked, switches, checkedState } = state.viewSwitches;
7+
return { defaultChecked, switches, checkedState };
88
};
99

1010
const mapDispatchToProps = {

‎src/public/js/components/controls/ViewSwitches/component/ViewSwitchList.css‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
11
.ViewSwitchList-container {
2+
z-index: 3;
3+
position: absolute;
4+
width: 100%;
5+
display: flex;
6+
flex-direction: row;
7+
}
8+
9+
.ViewSwitchList-group {
10+
margin-right: 16px;
11+
padding: 8px 0;
12+
display: flex;
13+
flex-direction: column;
14+
}
15+
16+
.ViewSwitchList-big-item {
17+
padding: 0 8px;
18+
}
19+
20+
.ViewSwitchList-small-group {
21+
background-color: white;
22+
display: flex;
23+
align-items: center;
224
border-bottom: 1px solid #ebedf0;
3-
}
25+
border-right: 1px solid #ebedf0;
26+
border-left: 1px solid #ebedf0;
27+
padding: 8px 8px 8px 8px;
28+
}
29+
30+
.ViewSwitchList-small-item {
31+
margin-right: 10px;
32+
}

‎src/public/js/components/controls/ViewSwitches/component/ViewsSwitchList.js‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from 'react';
2-
import { Switch, Form, Icon } from 'antd';
3-
const FormItem = Form.Item;
2+
import { Switch, Checkbox, Icon } from 'antd';
43
import './ViewSwitchList.css';
54

6-
const ViewsSwitchList = ({ switches, toggleSwitch, defaultChecked }) => {
5+
const ViewsSwitchList = ({
6+
switches,
7+
toggleSwitch,
8+
defaultChecked,
9+
checkedState
10+
}) => {
711
return (
812
<div className="ViewSwitchList-container">
9-
<Form layout="inline">
10-
{switches.map(item => (
11-
<FormItem key={item.key}>
13+
{switches.map((item, i) => (
14+
<div className="ViewSwitchList-group" key={item.key}>
15+
<div className="ViewSwitchList-big-item">
1216
<span>{item.name + ' '}</span>
1317
<Switch
1418
size="small"
@@ -17,9 +21,33 @@ const ViewsSwitchList = ({ switches, toggleSwitch, defaultChecked }) => {
1721
toggleSwitch(item.key, checked)
1822
}
1923
/>
20-
</FormItem>
21-
))}
22-
</Form>
24+
</div>
25+
26+
{(checkedState[item.key] &&
27+
item.checkBoxes.length && (
28+
<div className="ViewSwitchList-small-group">
29+
{item.checkBoxes.map((item, i) => (
30+
<div
31+
key={item.key}
32+
className="ViewSwitchList-small-item"
33+
>
34+
<Checkbox
35+
onChange={e =>
36+
toggleSwitch(
37+
item.key,
38+
e.target.checked
39+
)
40+
}
41+
>
42+
{item.name}
43+
</Checkbox>
44+
</div>
45+
))}
46+
</div>
47+
)) ||
48+
null}
49+
</div>
50+
))}
2351
</div>
2452
);
2553
};

‎src/public/js/components/controls/ViewSwitches/store/constants.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@ export const ACTIONS = {
55
export const SWITCH_KEYS = {
66
SOURCE: 'source',
77
DEPENDENCIES: 'dependencies',
8-
CODE_CRUMBS: 'codeCrumbs'
8+
CODE_CRUMBS: 'codeCrumbs',
9+
CODE_CRUMBS_MINIMIZE: 'codeCrumbsMinimize',
910
};

‎src/public/js/components/controls/ViewSwitches/store/reducer.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,21 @@ import { ACTIONS, SWITCH_KEYS } from './constants';
33
const DefaultState = {
44
defaultChecked: SWITCH_KEYS.SOURCE,
55
switches: [
6-
{ name: 'Source', key: SWITCH_KEYS.SOURCE },
7-
{ name: 'Dependencies', key: SWITCH_KEYS.DEPENDENCIES },
8-
{ name: 'CodeCrumbs', key: SWITCH_KEYS.CODE_CRUMBS }
6+
{ name: 'Source', key: SWITCH_KEYS.SOURCE, checkBoxes: [] },
7+
{ name: 'Dependencies', key: SWITCH_KEYS.DEPENDENCIES, checkBoxes: [] },
8+
{
9+
name: 'CodeCrumbs',
10+
key: SWITCH_KEYS.CODE_CRUMBS,
11+
checkBoxes: [
12+
{ name: 'minimize', key: SWITCH_KEYS.CODE_CRUMBS_MINIMIZE }
13+
]
14+
}
915
],
1016
checkedState: {
1117
[SWITCH_KEYS.SOURCE]: true,
1218
[SWITCH_KEYS.DEPENDENCIES]: false,
13-
[SWITCH_KEYS.CODE_CRUMBS]: false
19+
[SWITCH_KEYS.CODE_CRUMBS]: false,
20+
[SWITCH_KEYS.CODE_CRUMBS_MINIMIZE]: false
1421
}
1522
};
1623

‎src/public/js/components/side-bar/component/SideBar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
top: 0px;
55
height: 100%;
66
width: 500px;
7-
z-index: 2;
7+
z-index: 4;
88
background-color: white;
99
border-left: 1px solid #ebedf0;
1010
padding: 8px 16px;

0 commit comments

Comments
 (0)