diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-19 19:38:56 +0100 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-19 19:40:08 +0100 |
commit | e4f1862644d5921e2ee77078c10e16efa3e58c7b (patch) | |
tree | ff7f23eb83ee974a9f719ed6f58647ce7f0a1175 /src/features/workspaces/components/WorkspaceDrawerItem.js | |
parent | fix conflicts with latest develop (diff) | |
download | ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.tar.gz ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.tar.zst ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.zip |
add workspace drawer
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawerItem.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js new file mode 100644 index 000000000..00207d323 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -0,0 +1,88 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | const styles = theme => ({ | ||
8 | item: { | ||
9 | height: '67px', | ||
10 | padding: '15px 10px', | ||
11 | borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`, | ||
12 | '&:first-child': { | ||
13 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, | ||
14 | }, | ||
15 | }, | ||
16 | isActiveItem: { | ||
17 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | ||
18 | }, | ||
19 | name: { | ||
20 | marginTop: '4px', | ||
21 | color: theme.workspaceDrawerNameColor, | ||
22 | }, | ||
23 | activeName: { | ||
24 | color: theme.workspaceDrawerNameActiveColor, | ||
25 | }, | ||
26 | services: { | ||
27 | display: 'block', | ||
28 | fontSize: '11px', | ||
29 | marginTop: '5px', | ||
30 | color: theme.workspaceDrawerServicesColor, | ||
31 | whiteSpace: 'nowrap', | ||
32 | textOverflow: 'ellipsis', | ||
33 | overflow: 'hidden', | ||
34 | lineHeight: '15px', | ||
35 | }, | ||
36 | activeServices: { | ||
37 | color: theme.workspaceDrawerServicesActiveColor, | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | @injectSheet(styles) @observer | ||
42 | class WorkspaceDrawerItem extends Component { | ||
43 | static propTypes = { | ||
44 | classes: PropTypes.object.isRequired, | ||
45 | isActive: PropTypes.bool.isRequired, | ||
46 | name: PropTypes.string.isRequired, | ||
47 | onClick: PropTypes.func.isRequired, | ||
48 | services: PropTypes.arrayOf(PropTypes.string).isRequired, | ||
49 | }; | ||
50 | |||
51 | render() { | ||
52 | const { | ||
53 | classes, | ||
54 | isActive, | ||
55 | name, | ||
56 | onClick, | ||
57 | services, | ||
58 | } = this.props; | ||
59 | return ( | ||
60 | <div | ||
61 | className={classnames([ | ||
62 | classes.item, | ||
63 | isActive ? classes.isActiveItem : null, | ||
64 | ])} | ||
65 | onClick={onClick} | ||
66 | > | ||
67 | <span | ||
68 | className={classnames([ | ||
69 | classes.name, | ||
70 | isActive ? classes.activeName : null, | ||
71 | ])} | ||
72 | > | ||
73 | {name} | ||
74 | </span> | ||
75 | <span | ||
76 | className={classnames([ | ||
77 | classes.services, | ||
78 | isActive ? classes.activeServices : null, | ||
79 | ])} | ||
80 | > | ||
81 | {services.join(', ')} | ||
82 | </span> | ||
83 | </div> | ||
84 | ); | ||
85 | } | ||
86 | } | ||
87 | |||
88 | export default WorkspaceDrawerItem; | ||