Merge pull request #381 from sharetribe/open-carousel-from-image

Open listing image carousel also from the image

src/containers/ListingPage/ListingPage.css

@@ -29,6 +29,9 @@
   padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
   background-color: var(--matterColorNegative); /* Loading BG color */
 
+  /* Image carousel can be opened from the image, therefore we should show a pointer */
+  cursor: pointer;
+
   @media (--viewportMedium) {
     padding-bottom: 0; /* No fixed aspect on desktop layouts */
   }
@@ -45,6 +48,10 @@
   background-color: var(--matterColor);
   z-index: 1; /* bring on top of mobile image */
 
+  /* Action bar prevents the image click events going to the parent and
+   should not show a pointer */
+  cursor: initial;
+
   border-radius: 2px 2px 0 0;
 }
 

src/containers/ListingPage/ListingPage.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { compose } from 'redux';
@@ -179,7 +180,10 @@ export class ListingPageComponent extends Component {
     const hasImages = currentListing.images && currentListing.images.length > 0;
     const firstImage = hasImages ? currentListing.images[0] : null;
 
-    const handleViewPhotosClick = () => {
+    const handleViewPhotosClick = e => {
+      // Stop event from bubbling up to prevent image click handler
+      // trying to open the carousel as well.
+      e.stopPropagation();
       this.setState({
         imageCarouselOpen: true,
       });
@@ -262,6 +266,18 @@ export class ListingPageComponent extends Component {
       }
     };
 
+    // Action bar is wrapped with a div that prevents the click events
+    // to the parent that would otherwise open the image carousel
+    const actionBar = currentListing.id
+      ? <div onClick={e => e.stopPropagation()}>
+          <ActionBar
+            isOwnListing={isOwnListing}
+            isClosed={!currentListing.attributes.open}
+            editParams={editParams}
+          />
+        </div>
+      : null;
+
     return (
       <PageLayout
         authInfoError={authInfoError}
@@ -282,14 +298,8 @@ export class ListingPageComponent extends Component {
         />
         <div className={listingClasses}>
           <div className={css.threeToTwoWrapper}>
-            <div className={css.aspectWrapper}>
-              {currentListing.id
-                ? <ActionBar
-                    isOwnListing={isOwnListing}
-                    isClosed={!currentListing.attributes.open}
-                    editParams={editParams}
-                  />
-                : null}
+            <div className={css.aspectWrapper} onClick={handleViewPhotosClick}>
+              {actionBar}
               <ResponsiveImage
                 rootClassName={css.rootForImage}
                 alt={title}

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -42,18 +42,22 @@ exports[`ListingPage matches snapshot 1`] = `
   <div
     className="">
     <div>
-      <div>
-        <ActionBar
-          editParams={
-            Object {
-              "id": "listing1",
-              "slug": "listing1-title",
-              "tab": "description",
-              "type": "edit",
+      <div
+        onClick={[Function]}>
+        <div
+          onClick={[Function]}>
+          <ActionBar
+            editParams={
+              Object {
+                "id": "listing1",
+                "slug": "listing1-title",
+                "tab": "description",
+                "type": "edit",
+              }
             }
-          }
-          isClosed={false}
-          isOwnListing={false} />
+            isClosed={false}
+            isOwnListing={false} />
+        </div>
         <ResponsiveImage
           alt="listing1 title"
           className={null}