share panels reposition and remain open

mozilla-services · Jun 2, 2017 · db25663 · db25663
1 parent 2bb3bc8
commit db25663
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -160,6 +160,10 @@ class Body extends React.Component {
 }
 
 class Card extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {panelOpen: "panel-closed"};
+  }
 
   render() {
     let shot = this.props.shot;
@@ -182,7 +186,7 @@ class Card extends React.Component {
     }
 
     return (
-      <div className={`shot ${this.getClipType(clip._image.dimensions)}`} key={shot.id}>
+      <div className={`shot ${this.getClipType(clip._image.dimensions)} ${this.state.panelOpen}`} key={shot.id}>
         <a href={shot.viewUrl} onClick={this.onOpen.bind(this, shot.viewUrl)}>
           <div className="shot-image-container" style={{
             backgroundImage: `url(${imageUrl})`
@@ -203,7 +207,7 @@ class Card extends React.Component {
         <div className="alt-actions-container">
           <a className="button transparent download" href={ downloadUrl } onClick={ this.onClickDownload.bind(this) }
             title="Download the shot image" />
-          <ShareButton abTests={this.props.abTests} clipUrl={shot.urlDisplay} shot={shot} isOwner={this.props.isOwner} staticLink={this.props.staticLink} isExtInstalled={this.props.isExtInstalled} />
+          <ShareButton setPanelState={this.setPanelState.bind(this)} abTests={this.props.abTests} clipUrl={shot.urlDisplay} shot={shot} isOwner={this.props.isOwner} staticLink={this.props.staticLink} isExtInstalled={this.props.isExtInstalled} />
           <button className="button transparent trash" title="Delete this shot permanently" onClick={ this.onClickDelete.bind(this, shot) } />
         </div>
       </div>
@@ -222,6 +226,10 @@ class Card extends React.Component {
     return "square";
   }
 
+  setPanelState(state) {
+    this.setState({panelOpen: state});
+  }
+
   onOpen(url, event) {
     if (event.ctrlKey || event.metaKey || event.button === 1) {
       // Don't override what might be an open-in-another-tab click

diff --git a/server/src/share-buttons.js b/server/src/share-buttons.js
@@ -31,6 +31,7 @@ exports.ShareButton = class ShareButton extends React.Component {
     let show = !this.state.display;
     this.setState({display: show});
     if (show) {
+      this.props.setPanelState("panel-open");
       sendEvent(
         this.props.isOwner ? "start-share-owner" : "start-share-non-owner",
         "navbar");
@@ -41,8 +42,8 @@ exports.ShareButton = class ShareButton extends React.Component {
 
   onPanelClose() {
     this.setState({display: false});
+    this.props.setPanelState("panel-closed");
   }
-
 };
 
 class ShareButtonPanel extends React.Component {
@@ -81,7 +82,7 @@ class ShareButtonPanel extends React.Component {
     if (this.props.renderExtensionNotification) {
       className += " share-panel-with-notification";
     }
-    return <div id="share-buttons-panel" className={className}>
+    return <div id="share-buttons-panel" className={className} ref="share" style={{top: this.state.top, left: this.state.left}}>
       <div className="wrapper row-wrap share-buttons">
         <a title="Share to Facebook wall or message" onClick={ this.onClickShareButton.bind(this, "facebook") } target="_blank" href={ "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(this.props.shot.viewUrl) }>
           <img src={ this.props.staticLink("/static/img/btn-fb.svg") } />
@@ -116,7 +117,21 @@ class ShareButtonPanel extends React.Component {
     </div>;
   }
 
+  changePanelPosition() {
+    let el = this.refs.share;
+    let rect = el.getBoundingClientRect();
+    if (!(rect.right <= (window.innerWidth || document.documentElement.clientWidth)) && !(rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))) {
+      this.setState({left: -140, top: -385});
+    }
+    if (!(rect.right <= (window.innerWidth || document.documentElement.clientWidth))) {
+      this.setState({left: -140});
+    } else if (!(rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))) {
+      this.setState({top: -385});
+    }
+  }
+
   componentDidMount() {
+    this.changePanelPosition();
     document.addEventListener("click", this.clickMaybeClose);
     document.addEventListener("keyup", this.keyMaybeClose);
   }

diff --git a/static/css/shot-index.scss b/static/css/shot-index.scss
@@ -149,7 +149,8 @@ h1 {
     opacity: 0;
   }
 
-  &:hover {
+  &:hover,
+  &.panel-open {
     box-shadow: 0 0 0 5px $light-border;
 
     .alt-actions-container {