fix(www): Fix "Starters" share button alignment, allow closing of sha…

…re menu by clicking outside of it (#9620)
gatsbyjs · Nov 13, 2018 · 16e516e · 16e516e
1 parent e81dd09
commit 16e516e
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 32 deletions.
diff --git a/www/src/components/share-menu.js b/www/src/components/share-menu.js
@@ -23,6 +23,36 @@ class ShareMenu extends React.Component {
       open: false,
     }
     this.shareMenu = this.shareMenu.bind(this)
+    this.clickOutsideShareMenu = this.clickOutsideShareMenu.bind(this)
+    this.setShareBtnRef = this.setShareBtnRef.bind(this)
+    this.setShareMenuRef = this.setShareMenuRef.bind(this)
+  }
+
+  componentDidMount() {
+    document.addEventListener(`mousedown`, this.clickOutsideShareMenu)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(`mousedown`, this.clickOutsideShareMenu)
+  }
+
+  setShareBtnRef(node) {
+    this.shareBtnref = node
+  }
+
+  setShareMenuRef(node) {
+    this.shareMenuRef = node
+  }
+
+  clickOutsideShareMenu(event) {
+    const { open } = this.state
+    if (
+      open &&
+      !this.shareBtnref.contains(event.target) &&
+      !this.shareMenuRef.contains(event.target)
+    ) {
+      this.shareMenu()
+    }
   }
 
   shareMenu() {
@@ -46,6 +76,7 @@ class ShareMenu extends React.Component {
             color: styles[theme].textColor,
             cursor: `pointer`,
           }}
+          ref={this.setShareBtnRef}
         >
           <MdShare />
         </button>
@@ -57,6 +88,7 @@ class ShareMenu extends React.Component {
               left: `auto`,
               right: 0,
             }}
+            ref={this.setShareMenuRef}
           >
             <a
               {...linkAttrs}

diff --git a/www/src/views/starter/meta.js b/www/src/views/starter/meta.js
@@ -77,7 +77,6 @@ const Meta = ({ starter, repoName, imageSharp, demo }) => (
         display: `flex`,
         flexWrap: `nowrap`,
         flexGrow: 1,
-        justifyContent: `space-between`,
         borderBottom: `1px solid ${colors.ui.light}`,
         paddingBottom: rhythm(2 / 4),
         [presets.Phablet]: {
@@ -122,42 +121,53 @@ const Meta = ({ starter, repoName, imageSharp, demo }) => (
           zIndex: 1,
         }}
       >
-        <a
-          href={demo}
+        <div
           css={{
-            border: 0,
-            borderRadius: presets.radius,
-            color: colors.accent,
-            fontFamily: options.headerFontFamily.join(`,`),
-            fontWeight: `bold`,
-            marginRight: rhythm(1.5 / 4),
-            padding: `${rhythm(1 / 6)} ${rhythm(2 / 3)}`, // @todo same as site showcase but wrong for some reason
-            textDecoration: `none`,
-            WebkitFontSmoothing: `antialiased`,
-            "&&": {
-              backgroundColor: colors.accent,
-              borderBottom: `none`,
-              boxShadow: `none`,
-              color: colors.gatsby,
-              "&:hover": {
-                backgroundColor: colors.accent,
-              },
-            },
+            position: `absolute`,
+            right: rhythm(3 / 4),
+            top: rhythm(0 / 8),
+            left: `auto`,
+            zIndex: 1,
+            display: `flex`,
           }}
         >
-          <MdLaunch
-            style={{
-              verticalAlign: `sub`,
+          <a
+            href={demo}
+            css={{
+              border: 0,
+              borderRadius: presets.radius,
+              color: colors.accent,
+              fontFamily: options.headerFontFamily.join(`,`),
+              fontWeight: `bold`,
+              marginRight: rhythm(1.5 / 4),
+              padding: `${rhythm(1 / 6)} ${rhythm(2 / 3)}`, // @todo same as site showcase but wrong for some reason
+              textDecoration: `none`,
+              WebkitFontSmoothing: `antialiased`,
+              "&&": {
+                backgroundColor: colors.accent,
+                borderBottom: `none`,
+                boxShadow: `none`,
+                color: colors.gatsby,
+                "&:hover": {
+                  backgroundColor: colors.accent,
+                },
+              },
             }}
+          >
+            <MdLaunch
+              style={{
+                verticalAlign: `sub`,
+              }}
+            />
+            {` Visit demo `}
+          </a>
+          <ShareMenu
+            url={`https://github.com/${starter.githubFullName}`}
+            title={`Check out ${repoName} on the @Gatsby Starter Showcase!`}
+            image={imageSharp.childImageSharp.resize.src}
+            theme={`accent`}
           />
-          {` Visit demo `}
-        </a>
-        <ShareMenu
-          url={`https://github.com/${starter.githubFullName}`}
-          title={`Check out ${repoName} on the @Gatsby Starter Showcase!`}
-          image={imageSharp.childImageSharp.resize.src}
-          theme={`accent`}
-        />
+        </div>
       </div>
     </div>
   </div>