-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.jsx
131 lines (128 loc) · 5.56 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import React from 'react'
import { Component } from 'react'
import { DropdownButton, MenuItem, ProgressBar,
Nav, NavItem, Well } from 'react-bootstrap'
import { Icon } from '../../components'
import Button from 'antd/lib/button'
/**
* Root component for Sidebar
*/
class Sidebar extends Component {
constructor (props) {
super(props)
this.state = {
display: false,
arrow: false,
sideshow: false
}
}
toggleDisplay () {
this.setState(prevState => ({display: !prevState.display}))
this.setState(prevState => ({arrow: !prevState.arrow}))
}
/* eslint-disable react/jsx-no-bind, no-return-assign */
render () {
const displayAccordion = this.state.display ? 'accordion-section-content' +
' open' : 'accordion-section-content'
const toggleArrow = this.state.arrow ? 'hide-desktop up' : 'hide-desktop' +
' down'
return (
<div id='pvSidebar' className='bstrapReact'>
<div className='sidebar accordion'>
<div className='sidebar-wrapper'>
<div className='sidebar-container'>
<div className='sidebar-content'>
<a className='accordion-section-title'
onClick={this.toggleDisplay.bind(this)}>
<Icon name='project' className='s2'
parentClassName='iconProject' />
<span className='projtitle'>Zanata Server</span>
<svg className={toggleArrow}>
<use xlinkHref='#Icon-chevron-down'></use></svg>
</a>
<div id='accordion-1' className={displayAccordion}>
<Nav bsStyle='pills' stacked activeKey={1}>
<NavItem eventKey={1} href=''>
<Icon name='users' className='s1'
parentClassName='iconSidebar' />
People</NavItem>
<NavItem eventKey={2} href=''>
<Icon name='glossary' className='s1'
parentClassName='iconSidebar' />
Glossary</NavItem>
<NavItem eventKey={3} href=''>
<Icon name='info' className='s1'
parentClassName='iconSidebar' />
About</NavItem>
<NavItem eventKey={4} href=''>
<Icon name='settings' className='s1'
parentClassName='iconSidebar' />
Settings </NavItem>
</Nav>
<DropdownButton title='Options' id='optionsDropdown'
className='btn-sm btn-default'>
<MenuItem eventKey='1'>Copy translations</MenuItem>
<MenuItem eventKey='2'>Merge translations</MenuItem>
<MenuItem eventKey='3'>Copy to new version</MenuItem>
<MenuItem eventKey='4'>Download config file</MenuItem>
<MenuItem eventKey='5'>Export project to TMX</MenuItem>
</DropdownButton>
<Well className="processing">
<p className='task-title'>Task title</p>
<p><span>Processing document
<span className='count'>1 of 10</span>
<span className='count-pc'>12.50%</span></span></p>
<ProgressBar className='progress-striped'
now={12.5} key={4} />
<Button className='btn-danger btn-sm'>Stop</Button>
</Well>
<div id='sidebarVersion'>
<div className='sidebarVersion-inline'>
<span className='sidebarVersion-title'>
<Icon name='version' className='s2' />
<span className='versionHeading'>VERSION</span>
</span>
<DropdownButton id='version-dropdown'
className='btn-sm btn-default'
title='master'>
<MenuItem eventKey='1'>release</MenuItem>
<MenuItem eventKey='2'>test-1</MenuItem>
</DropdownButton>
</div>
<p className='sidebarVersion-settings'>
<a href=''>Version settings</a>
</p>
<div className='sidebarVersion-percent'>
<p><span className='percent'>10%</span> translated</p>
</div>
<ProgressBar>
<ProgressBar className='progress-bar-success'
now={10} key={1} />
<ProgressBar className='progress-bar-warning'
now={7} key={2} />
<ProgressBar className='progress-bar-danger'
now={3} key={3} />
<ProgressBar className='progress-bar-info'
now={10} key={4} />
</ProgressBar>
<Nav className='v-links'
bsStyle='pills' stacked>
<NavItem eventKey={1} href=''>
Languages</NavItem>
<NavItem eventKey={2} href=''>
Documents</NavItem>
<NavItem eventKey={3} href=''>
Groups </NavItem>
</Nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
/* eslint-enable react/jsx-no-bind, no-return-assign */
}
}
export default Sidebar