Skip to content

Commit 0bcfc56

Browse files
priyajeetpriyajeet
authored
Update: UI changes for preview sidebar (#76)
1 parent 41692ca commit 0bcfc56

25 files changed

Lines changed: 309 additions & 109 deletions

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@ node_modules
66
.DS_Store
77
npm-debug.log
88
yarn-debug.log
9+
npm-error.log
10+
yarn-error.log
911
reports
1012
dist
1113
src/i18n/json
14+
test/dev.html
1215
lib
1316
*~~bak
17+

‎src/components/ContentPreview/ContentPreview.js‎

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ type DefaultProps = {|
3434
locale: string,
3535
version: string,
3636
hasSidebar: boolean,
37-
showSidebar: boolean,
3837
hasHeader: boolean,
3938
className: string,
4039
onLoad: Function,
@@ -47,7 +46,6 @@ type Props = {
4746
locale: string,
4847
version: string,
4948
hasSidebar: boolean,
50-
showSidebar: boolean,
5149
hasHeader: boolean,
5250
apiHost: string,
5351
appHost: string,
@@ -68,8 +66,7 @@ type Props = {
6866
};
6967

7068
type State = {
71-
file?: BoxItem,
72-
showSidebar: boolean
69+
file?: BoxItem
7370
};
7471

7572
class ContentPreview extends PureComponent<DefaultProps, Props, State> {
@@ -88,7 +85,6 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
8885
locale: DEFAULT_PREVIEW_LOCALE,
8986
version: DEFAULT_PREVIEW_VERSION,
9087
hasSidebar: false,
91-
showSidebar: true,
9288
hasHeader: false,
9389
onLoad: noop,
9490
onNavigate: noop
@@ -102,9 +98,9 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
10298
*/
10399
constructor(props: Props) {
104100
super(props);
105-
const { file, cache, token, showSidebar, sharedLink, sharedLinkPassword, apiHost } = props;
101+
const { file, cache, token, sharedLink, sharedLinkPassword, apiHost } = props;
106102

107-
this.state = { file, showSidebar };
103+
this.state = { file };
108104
this.id = uniqueid('bcpr_');
109105
this.api = new API({
110106
cache,
@@ -138,19 +134,13 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
138134
*/
139135
componentWillReceiveProps(nextProps: Props): void {
140136
const { file, fileId, token }: Props = this.props;
141-
const { showSidebar }: State = this.state;
142137

143138
const hasTokenChanged = nextProps.token !== token;
144139
const hasFileIdChanged = nextProps.fileId !== fileId;
145140
const hasFileChanged = nextProps.file !== file;
146-
const hasSidebarVisibilityChanged = nextProps.showSidebar !== showSidebar;
147141

148142
const newState = {};
149143

150-
if (hasSidebarVisibilityChanged) {
151-
newState.showSidebar = nextProps.showSidebar;
152-
}
153-
154144
if (hasTokenChanged || hasFileChanged || hasFileIdChanged) {
155145
if (hasFileChanged) {
156146
newState.file = nextProps.file;
@@ -312,18 +302,6 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
312302
this.fetchFile(id);
313303
}
314304

315-
/**
316-
* Handles showing or hiding of hasSidebar
317-
*
318-
* @private
319-
* @return {void}
320-
*/
321-
toggleSidebar = (): void => {
322-
this.setState((prevState) => ({
323-
showSidebar: !prevState.showSidebar
324-
}));
325-
};
326-
327305
/**
328306
* Tells the preview to resize
329307
*
@@ -401,29 +379,26 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
401379
*/
402380
render() {
403381
const { className, hasSidebar, hasHeader, onClose, getLocalizedMessage }: Props = this.props;
404-
const { file, showSidebar }: State = this.state;
382+
const { file }: State = this.state;
405383
return (
406384
<div id={this.id} className={`buik bcpr ${className}`}>
407385
{hasHeader &&
408386
<Header
409387
file={file}
410-
showSidebar={showSidebar}
411388
showSidebarButton={hasSidebar}
412-
toggleSidebar={this.toggleSidebar}
413389
onClose={onClose}
414390
getLocalizedMessage={getLocalizedMessage}
415391
/>}
416392
<div className='bcpr-body'>
417-
<Measure bounds onResize={this.onResize}>
418-
{({ measureRef }) => <div ref={measureRef} className='bcpr-content' />}
419-
</Measure>
420393
{hasSidebar &&
421-
showSidebar &&
422394
<Sidebar
423395
file={file}
424396
getPreviewer={this.getPreviewer}
425397
getLocalizedMessage={getLocalizedMessage}
426398
/>}
399+
<Measure bounds onResize={this.onResize}>
400+
{({ measureRef }) => <div ref={measureRef} className='bcpr-content' />}
401+
</Measure>
427402
</div>
428403
</div>
429404
);

‎src/components/ContentPreview/Header.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,20 @@
66

77
import React from 'react';
88
import { PlainButton } from '../Button';
9-
import { BOX_BLUE } from '../../constants';
109
import IconCross from '../icons/IconCross';
11-
import IconSidebar from '../icons/IconSidebar';
1210
import { getIcon } from '../Item/iconCellRenderer';
1311
import type { BoxItem } from '../../flowTypes';
1412
import './Header.scss';
1513

1614
type Props = {
1715
file?: BoxItem,
1816
getLocalizedMessage: Function,
19-
showSidebarButton: boolean,
20-
showSidebar: boolean,
21-
toggleSidebar: Function,
2217
onClose?: Function
2318
};
2419

25-
const Header = ({ file, showSidebar, onClose, getLocalizedMessage, showSidebarButton, toggleSidebar }: Props) => {
20+
const Header = ({ file, onClose, getLocalizedMessage }: Props) => {
2621
const name = file ? file.name : '';
2722
const close = getLocalizedMessage('buik.modal.dialog.share.button.close');
28-
const sidebar = showSidebar
29-
? getLocalizedMessage('buik.modal.preview.dialog.button.sidebar.hide.title')
30-
: getLocalizedMessage('buik.modal.preview.dialog.button.sidebar.show.title');
31-
3223
return (
3324
<div className='bcpr-header'>
3425
<div className='bcpr-name'>
@@ -38,10 +29,6 @@ const Header = ({ file, showSidebar, onClose, getLocalizedMessage, showSidebarBu
3829
</span>
3930
</div>
4031
<div className='bcpr-btns'>
41-
{showSidebarButton &&
42-
<PlainButton className='bcpr-btn' onClick={toggleSidebar} title={sidebar} aria-label={sidebar}>
43-
<IconSidebar color={showSidebar ? BOX_BLUE : '#777'} width={16} height={16} />
44-
</PlainButton>}
4532
{onClose &&
4633
<PlainButton className='bcpr-btn' onClick={onClose} title={close} aria-label={close}>
4734
<IconCross color='#777' width={14} height={14} />

‎src/components/ContentPreview/Sidebar.js‎

Lines changed: 95 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,16 @@
44
* @author Box
55
*/
66

7-
import React from 'react';
7+
import React, { PureComponent } from 'react';
8+
import classNames from 'classnames';
89
import DetailsSidebar from './DetailsSidebar';
10+
import IconComments from '../icons/IconComments';
11+
import IconTasks from '../icons/IconTasks';
12+
import IconVersions from '../icons/IconVersions';
13+
import IconApps from '../icons/IconApps';
14+
import IconDetails from '../icons/IconDetails';
15+
import { PlainButton } from '../Button';
16+
import { BOX_BLUE } from '../../constants';
917
import type { BoxItem } from '../../flowTypes';
1018
import './Sidebar.scss';
1119

@@ -15,9 +23,91 @@ type Props = {
1523
getLocalizedMessage: Function
1624
};
1725

18-
const Sidebar = ({ file, getPreviewer, getLocalizedMessage }: Props) =>
19-
<div className='bcpr-sidebar'>
20-
{!!file && <DetailsSidebar file={file} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />}
21-
</div>;
26+
type State = {
27+
showSidebar: boolean
28+
};
29+
30+
class Sidebar extends PureComponent<void, Props, State> {
31+
props: Props;
32+
state: State;
33+
34+
/**
35+
* [constructor]
36+
*
37+
* @private
38+
* @return {Sidebar}
39+
*/
40+
constructor(props: Props) {
41+
super(props);
42+
this.state = {
43+
showSidebar: true
44+
};
45+
}
46+
47+
/**
48+
* Handles showing or hiding of hasSidebar
49+
*
50+
* @private
51+
* @return {void}
52+
*/
53+
toggleSidebar = (): void => {
54+
this.setState((prevState) => ({
55+
showSidebar: !prevState.showSidebar
56+
}));
57+
};
58+
59+
/**
60+
* Renders the sidebar
61+
*
62+
* @inheritdoc
63+
*/
64+
render() {
65+
const { file, getPreviewer, getLocalizedMessage }: Props = this.props;
66+
const { showSidebar }: State = this.state;
67+
const sidebarTitle = getLocalizedMessage('buik.preview.sidebar.details.title');
68+
69+
const sidebarClassName = classNames('bcpr-sidebar', {
70+
'bcpr-sidebar-visible': showSidebar
71+
});
72+
73+
const sidebarBtnClassName = classNames({
74+
'bcpr-sidebar-btn-selected': showSidebar
75+
});
76+
77+
return (
78+
<div className={sidebarClassName}>
79+
<div className='bcpr-sidebar-btns'>
80+
<PlainButton>
81+
<IconComments />
82+
</PlainButton>
83+
<PlainButton>
84+
<IconTasks />
85+
</PlainButton>
86+
<PlainButton>
87+
<IconApps />
88+
</PlainButton>
89+
<PlainButton>
90+
<IconVersions />
91+
</PlainButton>
92+
<PlainButton
93+
onClick={this.toggleSidebar}
94+
title={sidebarTitle}
95+
aria-label={sidebarTitle}
96+
className={sidebarBtnClassName}
97+
>
98+
<IconDetails color={showSidebar ? BOX_BLUE : '#aaa'} />
99+
</PlainButton>
100+
</div>
101+
{!!file &&
102+
showSidebar &&
103+
<DetailsSidebar
104+
file={file}
105+
getPreviewer={getPreviewer}
106+
getLocalizedMessage={getLocalizedMessage}
107+
/>}
108+
</div>
109+
);
110+
}
111+
}
22112

23113
export default Sidebar;

‎src/components/ContentPreview/Sidebar.scss‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,31 @@
11
@import '../variables';
22

33
.bcpr-sidebar {
4-
border-left: 1px solid $efive;
4+
background-color: $almost-white;
55
display: flex;
6-
flex: 0 0 340px;
6+
flex: 0 0 60px;
7+
8+
&.bcpr-sidebar-visible {
9+
border-right: 1px solid $off-white;
10+
flex: 0 0 420px;
11+
}
12+
13+
.bcpr-sidebar-btns {
14+
background-color: $white;
15+
border-right: 1px solid $off-white;
16+
display: flex;
17+
flex-direction: column;
18+
padding-top: 3px;
19+
20+
.buik-btn.buik-btn-plain {
21+
border-left: 2px solid transparent;
22+
border-radius: 0;
23+
height: 60px;
24+
width: 57px;
25+
26+
&.bcpr-sidebar-btn-selected {
27+
border-left-color: $blue;
28+
}
29+
}
30+
}
731
}

‎src/components/ContentPreview/SidebarContent.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
.bcpr-sidebar-title {
88
// border-bottom: 1px solid $off-white;
9+
font-size: 16px;
10+
font-weight: 200;
911
line-height: 30px;
1012
margin: 15px 20px;
1113
}
@@ -16,10 +18,11 @@
1618
overflow: auto;
1719
position: absolute; // Prevents non-sidebar parts from re-painting
1820
right: 0;
19-
top: 61px;
21+
top: 50px;
2022

2123
.bcpr-sidebar-scroll-content {
22-
width: 330px;
24+
padding: 15px 0 0;
25+
width: 354px;
2326
}
2427
}
2528
}

‎src/components/ContentPreview/SidebarSection.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
import React, { PureComponent } from 'react';
88
import classNames from 'classnames';
99
import { PlainButton } from '../Button';
10-
import IconAddCircle from '../icons/IconAddCircle';
11-
import IconSubtractCircle from '../icons/IconSubtractCircle';
1210
import './SidebarSection.scss';
1311

1412
type Props = {
@@ -84,10 +82,9 @@ class SidebarSection extends PureComponent<DefaultProps, Props, State> {
8482
return (
8583
<div className={sectionClassName}>
8684
<PlainButton onClick={this.toggleVisibility} className='bcpr-sidebar-section-title'>
87-
<span className='bcpr-sidebar-section-title-text'>
85+
<h4 className='bcpr-sidebar-section-title-text'>
8886
{title}
89-
</span>
90-
{isOpen ? <IconSubtractCircle width={14} height={14} /> : <IconAddCircle width={14} height={14} />}
87+
</h4>
9188
</PlainButton>
9289
{isOpen &&
9390
<div className='bcpr-sidebar-section-content'>

‎src/components/ContentPreview/SidebarSection.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
@import '../variables';
22

33
.bcpr-sidebar-section {
4+
background-color: $white;
5+
border: 1px solid $efive;
6+
border-radius: 5px;
7+
box-shadow: 0 0 20px 0 $lightest-black;
48
margin: 0 20px 20px;
9+
padding: 15px 20px;
510
}
611

712
.buik-btn.buik-btn-plain.bcpr-sidebar-section-title {
@@ -10,14 +15,16 @@
1015

1116
.buik-btn-content {
1217
align-items: center;
13-
border-bottom: 1px solid $off-white;
1418
cursor: pointer;
1519
display: flex;
1620
justify-content: space-between;
17-
line-height: 30px;
18-
margin: 0 0 15px;
21+
22+
.bcpr-sidebar-section-open & {
23+
margin: 0 0 15px;
24+
}
1925

2026
.bcpr-sidebar-section-title-text {
27+
margin: 0;
2128
max-width: 250px;
2229
overflow: hidden;
2330
text-overflow: ellipsis;

0 commit comments

Comments
 (0)