Update: UI changes for transcript cards (#167)

Also adds error cards Style changes for preview sidebar Package updates
box · Feb 3, 2018 · ba0e485 · ba0e485
1 parent 4b52d1a
commit ba0e485
Show file tree

Hide file tree

Showing 28 changed files with 848 additions and 516 deletions.
diff --git a/i18n/en-US.properties b/i18n/en-US.properties
@@ -142,6 +142,8 @@ be.sidebarShow = Show Sidebar
 be.sizeASC = Size: Smallest → Largest
 # Size descending option shown in the share access drop down select.
 be.sizeDESC = Size: Largest → Smallest
+# Default error message when skills fail to run
+be.skillUnknownError = Something went wrong while running this skill or fetching its data.
 # Label for timelines skill section in the preview sidebar
 be.timelineSkill = Timelines
 # Shown instead of todays date.

diff --git a/package.json b/package.json
@@ -100,14 +100,14 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.4",
+    "autoprefixer": "^7.2.5",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^8.2.1",
-    "babel-jest": "^22.0.4",
+    "babel-jest": "^22.1.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-istanbul": "^4.1.4",
-    "babel-plugin-react-intl": "^2.3.1",
+    "babel-plugin-react-intl": "^2.4.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
@@ -123,45 +123,45 @@
     "babel-preset-react": "^6.24.1",
     "babel-template": "^6.25.0",
     "babel-types": "^6.25.0",
-    "box-react-ui": "^21.4.0",
-    "circular-dependency-plugin": "^4.3.0",
+    "box-react-ui": "^21.8.0",
+    "circular-dependency-plugin": "^4.4.0",
     "classnames": "^2.2.5",
     "color": "^2.0.1",
-    "conventional-changelog": "^1.1.7",
-    "conventional-changelog-cli": "^1.3.5",
+    "conventional-changelog": "^1.1.10",
+    "conventional-changelog-cli": "^1.3.8",
     "conventional-changelog-lint": "^2.1.1",
     "conventional-github-releaser": "^2.0.0",
     "core-js": "^2.5.3",
     "cpx": "^1.5.0",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.9",
     "cssnano": "^3.10.0",
     "deepmerge": "^2.0.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.15.0",
+    "eslint": "^4.16.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-import-resolver-webpack": "^0.8.4",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-flowtype": "^2.41.0",
+    "eslint-plugin-flowtype": "^2.42.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-react": "^7.6.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "fetch-mock-forwarder": "^1.0.0",
-    "flow-bin": "^0.63.1",
+    "flow-bin": "^0.64.0",
     "husky": "^0.14.3",
     "intl": "^1.2.5",
-    "jest": "^22.0.5",
+    "jest": "^22.1.4",
     "jsuri": "^1.3.1",
-    "leche": "^2.2.2",
-    "lint-staged": "^6.0.0",
+    "leche": "^2.2.3",
+    "lint-staged": "^6.1.0",
     "lodash": "^4.17.4",
-    "mocha": "^4.1.0",
+    "mocha": "^5.0.0",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "postcss-loader": "^2.0.10",
-    "prettier": "^1.10.1",
+    "prettier": "^1.10.2",
     "prettier-eslint-cli": "^4.7.0",
     "prop-types": "^15.6.0",
     "properties-parser": "^0.3.1",
@@ -170,34 +170,34 @@
     "react-dom": "^16.2.0",
     "react-intl": "^2.3.0",
     "react-measure": "^2.0.2",
-    "react-modal": "^3.1.10",
-    "react-tether": "^0.6.0",
-    "react-virtualized": "^9.16.1",
+    "react-modal": "^3.1.11",
+    "react-tether": "^0.6.1",
+    "react-virtualized": "^9.18.5",
     "regenerator-runtime": "^0.11.1",
     "sass-lint": "^1.12.1",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.1",
+    "style-loader": "^0.20.1",
     "stylelint": "^8.4.0",
     "stylelint-config-standard": "^18.0.0",
     "stylelint-order": "^0.8.0",
-    "uglifyjs-webpack-plugin": "^1.1.6",
+    "uglifyjs-webpack-plugin": "^1.1.8",
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.2",
-    "webpack-dev-server": "^2.10.1",
+    "webpack-dev-server": "^2.11.1",
     "worker-farm": "^1.5.2"
   },
   "peerDependencies": {
-    "box-react-ui": "^21.4.0",
+    "box-react-ui": "^21.8.0",
     "classnames": "^2.2.5",
     "jsuri": "^1.3.1",
     "lodash": "^4.17.4",
     "react": "^15.6.0 || ^16.0.0",
     "react-dom": "^15.6.0 || ^16.0.0",
     "react-intl": "^2.3.0",
     "react-measure": "^2.0.2",
-    "react-modal": "^3.1.8",
-    "react-tether": "^0.5.7",
-    "react-virtualized": "^9.9.0",
-    "regenerator-runtime": "^0.11.0"
+    "react-modal": "^3.1.11",
+    "react-tether": "^0.6.1",
+    "react-virtualized": "^9.13.0",
+    "regenerator-runtime": "^0.11.1"
   }
 }
diff --git a/src/components/ContentPreview/ContentPreview.js b/src/components/ContentPreview/ContentPreview.js
@@ -13,6 +13,7 @@ import ContentSidebar from '../ContentSidebar';
 import Header from './Header';
 import API from '../../api';
 import Cache from '../../util/Cache';
+import makeResponsive from '../makeResponsive';
 import Internationalize from '../Internationalize';
 import {
     DEFAULT_HOSTNAME_API,
@@ -32,6 +33,7 @@ type Props = {
     file?: BoxItem,
     fileId?: string,
     version: string,
+    isSmall: boolean,
     showSidebar?: boolean,
     hasSidebar: boolean,
     hasHeader: boolean,
@@ -41,6 +43,7 @@ type Props = {
     staticPath: string,
     token: Token,
     className: string,
+    measureRef: Function,
     onLoad: Function,
     onNavigate: Function,
     onClose?: Function,
@@ -88,9 +91,9 @@ class ContentPreview extends PureComponent<Props, State> {
      */
     constructor(props: Props) {
         super(props);
-        const { file, hasSidebar, cache, token, sharedLink, sharedLinkPassword, apiHost } = props;
+        const { file, hasSidebar, cache, token, sharedLink, sharedLinkPassword, apiHost, isSmall } = props;
 
-        this.state = { file, showSidebar: hasSidebar };
+        this.state = { file, showSidebar: hasSidebar && !isSmall };
         this.id = uniqueid('bcpr_');
         this.api = new API({
             cache,
@@ -123,11 +126,12 @@ class ContentPreview extends PureComponent<Props, State> {
      * @return {void}
      */
     componentWillReceiveProps(nextProps: Props): void {
-        const { file, fileId, token }: Props = this.props;
+        const { file, fileId, token, isSmall, hasSidebar }: Props = this.props;
 
         const hasTokenChanged = nextProps.token !== token;
         const hasFileIdChanged = nextProps.fileId !== fileId;
         const hasFileChanged = nextProps.file !== file;
+        const hasSizeChanged = nextProps.isSmall !== isSmall;
 
         const newState = {};
 
@@ -143,6 +147,10 @@ class ContentPreview extends PureComponent<Props, State> {
             }
         }
 
+        if (hasSizeChanged) {
+            newState.showSidebar = hasSidebar && !nextProps.isSmall;
+        }
+
         // Only update the state if there is something to update
         if (Object.keys(newState).length) {
             this.setState(newState);
@@ -371,9 +379,10 @@ class ContentPreview extends PureComponent<Props, State> {
      * @private
      * @return {void}
      */
-    toggleSidebar = (): void => {
+    toggleSidebar = (show: ?boolean): void => {
+        const { hasSidebar }: Props = this.props;
         this.setState((prevState) => ({
-            showSidebar: !prevState.showSidebar
+            showSidebar: typeof show === 'boolean' ? hasSidebar && show : hasSidebar && !prevState.showSidebar
         }));
     };
 
@@ -386,6 +395,7 @@ class ContentPreview extends PureComponent<Props, State> {
      */
     render() {
         const {
+            isSmall,
             token,
             language,
             messages,
@@ -394,6 +404,7 @@ class ContentPreview extends PureComponent<Props, State> {
             hasSidebar,
             hasHeader,
             onClose,
+            measureRef,
             sharedLink,
             sharedLinkPassword
         }: Props = this.props;
@@ -414,7 +425,7 @@ class ContentPreview extends PureComponent<Props, State> {
 
         return (
             <Internationalize language={language} messages={messages}>
-                <div id={this.id} className={`be bcpr ${className}`}>
+                <div id={this.id} className={`be bcpr ${className}`} ref={measureRef}>
                     {hasHeader && (
                         <Header
                             file={file}
@@ -426,10 +437,11 @@ class ContentPreview extends PureComponent<Props, State> {
                     )}
                     <div className='bcpr-body'>
                         <Measure bounds onResize={this.onResize}>
-                            {({ measureRef }) => <div ref={measureRef} className='bcpr-content' />}
+                            {({ measureRef: previewRef }) => <div ref={previewRef} className='bcpr-content' />}
                         </Measure>
                         {isSidebarVisible && (
                             <ContentSidebar
+                                isSmall={isSmall}
                                 hasProperties
                                 hasSkills
                                 cache={this.api.getCache()}
@@ -447,4 +459,4 @@ class ContentPreview extends PureComponent<Props, State> {
     }
 }
 
-export default ContentPreview;
+export default makeResponsive(ContentPreview);
diff --git a/src/components/ContentPreview/ContentPreview.scss b/src/components/ContentPreview/ContentPreview.scss
@@ -3,13 +3,24 @@
 .bcpr {
     display: flex;
     flex-direction: column;
-}
 
-.bcpr-body {
-    display: flex;
-    flex: 1;
-}
+    .bcpr-body {
+        display: flex;
+        flex: 1;
+    }
+
+    .bcpr-content {
+        flex: 1;
+    }
+
+    &.be-is-small {
+        .bcpr-body {
+            position: relative;
+        }
 
-.bcpr-content {
-    flex: 1;
+        .bcs {
+            position: absolute;
+            right: 0;
+        }
+    }
 }
diff --git a/src/components/ContentSidebar/ContentSidebar.js b/src/components/ContentSidebar/ContentSidebar.js
@@ -17,13 +17,16 @@ import { DEFAULT_HOSTNAME_API, CLIENT_NAME_CONTENT_SIDEBAR } from '../../constan
 import type { Token, BoxItem, StringMap } from '../../flowTypes';
 import '../fonts.scss';
 import '../base.scss';
+import '../modal.scss';
 import './ContentSidebar.scss';
 
 type Props = {
     fileId?: string,
+    isSmall?: boolean,
     clientName: string,
     apiHost: string,
     token: Token,
+    className: string,
     getPreviewer: Function,
     hasTitle: boolean,
     hasSkills: boolean,
@@ -49,9 +52,12 @@ class ContentSidebar extends PureComponent<Props, State> {
     props: Props;
     state: State;
     rootElement: HTMLElement;
+    appElement: HTMLElement;
     api: API;
 
     static defaultProps = {
+        className: '',
+        isSmall: false,
         clientName: CLIENT_NAME_CONTENT_SIDEBAR,
         apiHost: DEFAULT_HOSTNAME_API,
         getPreviewer: noop,
@@ -117,6 +123,8 @@ class ContentSidebar extends PureComponent<Props, State> {
     componentDidMount() {
         const { fileId }: Props = this.props;
         this.rootElement = ((document.getElementById(this.id): any): HTMLElement);
+        // $FlowFixMe: child will exist
+        this.appElement = this.rootElement.firstElementChild;
         if (fileId) {
             this.fetchFile(fileId);
         }
@@ -214,7 +222,8 @@ class ContentSidebar extends PureComponent<Props, State> {
             hasMetadata,
             hasAccessStats,
             hasClassification,
-            sharedLink
+            sharedLink,
+            className
         }: Props = this.props;
         const { file }: State = this.state;
 
@@ -224,24 +233,28 @@ class ContentSidebar extends PureComponent<Props, State> {
 
         return (
             <Internationalize language={language} messages={messages}>
-                <div className='be bcs'>
-                    {file ? (
-                        <DetailsSidebar
-                            file={file}
-                            getPreviewer={getPreviewer}
-                            ensurePrivacy={!!sharedLink}
-                            hasTitle={hasTitle}
-                            hasSkills={hasSkills}
-                            hasProperties={hasProperties}
-                            hasMetadata={hasMetadata}
-                            hasAccessStats={hasAccessStats}
-                            hasClassification={hasClassification}
-                        />
-                    ) : (
-                        <div className='bcs-loading'>
-                            <LoadingIndicator />
-                        </div>
-                    )}
+                <div id={this.id} className={`be bcs ${className}`}>
+                    <div className='be-app-element'>
+                        {file ? (
+                            <DetailsSidebar
+                                file={file}
+                                getPreviewer={getPreviewer}
+                                ensurePrivacy={!!sharedLink}
+                                hasTitle={hasTitle}
+                                hasSkills={hasSkills}
+                                hasProperties={hasProperties}
+                                hasMetadata={hasMetadata}
+                                hasAccessStats={hasAccessStats}
+                                hasClassification={hasClassification}
+                                appElement={this.appElement}
+                                rootElement={this.rootElement}
+                            />
+                        ) : (
+                            <div className='bcs-loading'>
+                                <LoadingIndicator />
+                            </div>
+                        )}
+                    </div>
                 </div>
             </Internationalize>
         );

diff --git a/src/components/ContentSidebar/ContentSidebar.scss b/src/components/ContentSidebar/ContentSidebar.scss
@@ -1,10 +1,13 @@
 @import '../variables';
 
 .be.bcs {
+    background-color: $haze;
     display: flex;
     width: 340px;
 }
 
 .bcs-loading {
+    align-items: center;
+    display: flex;
     flex: 1;
 }