Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit c06b3b7

Browse files
author
z
committed
1. many css improvments
2. code base of tree view simplified 3. UI design of tree view complete 4. other minor fixes
1 parent a2c032f commit c06b3b7

File tree

3 files changed

+101
-86
lines changed

3 files changed

+101
-86
lines changed

‎components/learn/syllabus-tree/syllabus-tree-component.js

Lines changed: 49 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,83 @@ import React from 'react';
22
import styled from 'react-emotion';
33

44
export default class TreeView extends React.PureComponent {
5-
state = {
6-
collapsed: this.props.defaultCollapsed,
7-
};
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
collapsed: this.props.collapsed,
9+
};
10+
}
811

9-
handleNodeClick = (...args) => {
12+
unitClick = (...args) => {
1013
this.setState({ collapsed: !this.state.collapsed });
1114
if (this.props.onClick) {
1215
this.props.onClick(...args);
1316
}
1417
};
1518

1619
render() {
17-
const {
18-
collapsed = this.state.collapsed,
19-
className = '',
20-
itemClassName = '',
21-
treeViewClassName = '',
22-
childrenClassName = '',
23-
children,
24-
} = this.props;
25-
2620
const Container = styled.div`
27-
/* the tree node's style */
28-
.tree-view {
29-
overflow-y: hidden;
30-
padding-left: 10px;
31-
padding-right: 10px;
32-
padding-top: 5px;
33-
padding-bottom: 5px;
21+
overflow-y: hidden;
22+
23+
.unit {
24+
display: flex;
25+
flex-wrap: nowrap;
26+
justify-content: center;
27+
align-content: stretch;
28+
align-items: center;
29+
padding: 0.5rem;
30+
border-left: 2px solid #fff;
31+
:hover {
32+
background-color: #f5f5f5;
33+
border-left: 2px solid #374355;
34+
cursor: pointer;
35+
}
3436
}
3537
36-
.tree-view_item {
37-
/* immediate child of .tree-view, for styling convenience */
38+
.unit-active {
39+
background-color: #f5f5f5;
40+
border-left: 2px solid #f5f5f5;
41+
:hover {
42+
}
3843
}
3944
40-
/* style for the children nodes container */
41-
.tree-view_children {
42-
margin-left: 16px;
45+
.chapters {
46+
padding-left: 0.4rem;
4347
}
4448
45-
.tree-view_children-collapsed {
49+
.chapters-collapsed {
4650
height: 0px;
4751
}
4852
49-
.tree-view_arrow {
53+
.pointer {
5054
cursor: pointer;
51-
margin-right: 6px;
52-
display: inline-block;
53-
-webkit-user-select: none;
54-
-moz-user-select: none;
55-
-ms-user-select: none;
5655
user-select: none;
56+
transition: all 0.1s;
57+
order: 2;
58+
flex: 0 1 auto;
59+
align-self: auto;
60+
color: #b9c3d2;
61+
:after {
62+
content: '▾';
63+
}
5764
}
5865
59-
.tree-view_arrow:after {
60-
content: '▾';
61-
}
62-
63-
/* rotate the triangle to close it */
64-
.tree-view_arrow-collapsed {
65-
-webkit-transform: rotate(-90deg);
66-
-moz-transform: rotate(-90deg);
67-
-ms-transform: rotate(-90deg);
66+
.pointer-collapsed {
6867
transform: rotate(-90deg);
68+
color: #374355;
6969
}
7070
`;
7171

72-
let arrowClassName = 'tree-view_arrow';
73-
let containerClassName = 'tree-view_children';
74-
if (collapsed) {
75-
arrowClassName += ' tree-view_arrow-collapsed';
76-
containerClassName += ' tree-view_children-collapsed';
77-
}
78-
79-
const arrow = <div className={`${className} ${arrowClassName}`} onClick={this.handleNodeClick} />;
80-
8172
return (
8273
<Container>
83-
<div className={`tree-view ${treeViewClassName}`}>
84-
<div className={`tree-view_item ${itemClassName}`}>
85-
{arrow}
86-
{this.props.nodeLabel}
87-
</div>
88-
<div className={`${containerClassName} ${childrenClassName}`}>{collapsed ? null : children}</div>
74+
<div
75+
className={this.props.unitTitle === this.props.activeUnit ? 'unit unit-active' : 'unit'}
76+
onClick={this.unitClick}>
77+
{this.props.UnitTitleComponent}
78+
<div className={this.state.collapsed ? 'pointer pointer-collapsed' : 'pointer'} />
79+
</div>
80+
<div className={this.state.collapsed ? 'chapters chapters-collapsed' : 'chapters'}>
81+
{this.state.collapsed ? null : this.props.children}
8982
</div>
9083
</Container>
9184
);

‎components/learn/syllabus-tree/syllabus-tree-container.js

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import TreeView from './syllabus-tree-component';
66
export default class SyllabusTree extends React.Component {
77
state = {
88
nodeStateTracker: this.props.data.map(() => true),
9+
activeUnit: this.props.data[0].unit.name,
10+
activeChapter: this.props.data[0].chapters[0].url,
911
};
1012

1113
handleClick = i => {
@@ -18,51 +20,66 @@ export default class SyllabusTree extends React.Component {
1820
});
1921
};
2022

23+
clickOnChapter(chapterUrl, unitName) {
24+
if (chapterUrl !== this.state.activeChapter) {
25+
this.setState({ activeChapter: chapterUrl, activeUnit: unitName });
26+
this.props.changeChapter(chapterUrl);
27+
}
28+
}
29+
2130
render() {
2231
const Container = styled.div`
23-
& .node {
24-
transition: all 0.5s;
25-
}
26-
27-
& .node:hover,
28-
& .info:hover {
29-
background-color: #f5f5f5;
30-
border-left: 1px solid #374355;
31-
cursor: pointer;
32-
}
33-
34-
& .info,
35-
& .node {
36-
padding: 5px 10px 5px 5px;
37-
font: 14px Helvetica, Arial, sans-serif;
32+
& .chapter {
33+
padding: 5px;
34+
font-size: 0.85rem;
3835
user-select: none;
36+
border-left: 2px solid #fff;
37+
:hover {
38+
background-color: #f5f5f5;
39+
border-left: 2px solid #374355;
40+
cursor: pointer;
41+
}
3942
}
4043
41-
& .tree-view_arrow {
42-
transition: all 0.1s;
44+
& .chapter-active {
45+
color: #374355;
46+
background-color: #f5f5f5;
47+
border-left: 2px solid #374355;
48+
:hover {
49+
cursor: default;
50+
}
4351
}
4452
45-
& .tree-view_arrow-empty {
46-
color: yellow;
53+
& .unit_name {
54+
order: 1;
55+
flex: 1 1 auto;
56+
align-self: auto;
4757
}
4858
`;
4959

5060
return (
5161
<Container>
5262
{this.props.data.map((node, i) => {
53-
const UnitTitle = (
54-
<span className="node" key={node.unit.num} onClick={() => this.handleClick(i)}>
63+
const UnitTitleComponent = (
64+
<div className="unit_name" key={node.unit.name} onClick={() => this.handleClick(i)}>
5565
{node.unit.name}
56-
</span>
66+
</div>
5767
);
5868
return (
5969
<TreeView
6070
key={i}
61-
nodeLabel={UnitTitle}
71+
unitTitle={node.unit.name}
72+
UnitTitleComponent={UnitTitleComponent}
73+
activeUnit={this.state.activeUnit}
6274
collapsed={this.state.nodeStateTracker[i]}
6375
onClick={() => this.handleClick(i)}>
6476
{node.chapters.map(chapter => (
65-
<div className="info" key={chapter.url} onClick={() => this.props.changeChapter(chapter.url)}>
77+
<div
78+
className={`chapter ${
79+
this.state.activeChapter === chapter.url ? 'chapter-active' : 'chapter-inactive'
80+
}`}
81+
key={chapter.url}
82+
onClick={() => this.clickOnChapter(chapter.url, node.unit.name)}>
6683
{chapter.name}
6784
</div>
6885
))}

‎pages/learn/subject.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { space } from 'styled-system';
44
import { Flex, Box } from 'grid-emotion';
55
import styled from 'react-emotion';
66

7-
import { baseContainer } from '../../utils/base.styles';
7+
import { baseContainer, Title } from '../../utils/base.styles';
88
import Layout from '../../components/common/layout';
99
import BannerSection from '../../components/learn/subject-banner';
1010
import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
@@ -14,7 +14,7 @@ import { laravelSyllabus } from '../../utils/mock-data';
1414

1515
const defaultChapter = laravelSyllabus[0].chapters[0].url;
1616

17-
const Container = styled.section`
17+
const CurriculumSection = styled.section`
1818
${baseContainer};
1919
${space};
2020
border: 1px solid #b9b9b9;
@@ -34,6 +34,7 @@ export default class Subject extends React.Component {
3434
super(props);
3535
this.state = {
3636
chapterContent: '',
37+
activeChaper: '',
3738
loading: true,
3839
};
3940
}
@@ -59,25 +60,29 @@ export default class Subject extends React.Component {
5960
}
6061

6162
render() {
62-
return (
63+
return this.props.url.query.id === 'laravel' ? (
6364
<Layout>
6465
<BannerSection
6566
textInverted
6667
title={this.props.url.query.id.toUpperCase()}
6768
subTitle="Web Development"
6869
icon="devicon-laravel-plain colored"
6970
/>
70-
<Container my={[2, 4]}>
71+
<CurriculumSection my={[2, 4]}>
7172
<Flex column={false}>
72-
<Box width={[0.2]}>
73+
<Box width={[0, 0.2]}>
7374
<div className="tableOfContent">Table of content</div>
7475
<SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
7576
</Box>
7677
<Box width={[0.8]} px={2}>
7778
<SubjectMarkdown loading={this.state.loading} markdown={this.state.chapterContent} />
7879
</Box>
7980
</Flex>
80-
</Container>
81+
</CurriculumSection>
82+
</Layout>
83+
) : (
84+
<Layout>
85+
<Title inverted>Curriculum for {this.props.url.query.id} and others Coming soon!!</Title>
8186
</Layout>
8287
);
8388
}

0 commit comments

Comments
 (0)