diff --git a/server/src/pages/shot/share-buttons.js b/server/src/pages/shot/share-buttons.js
index ff9feb9cf8..42e879fec2 100644
--- a/server/src/pages/shot/share-buttons.js
+++ b/server/src/pages/shot/share-buttons.js
@@ -1,10 +1,58 @@
const React = require("react");
const sendEvent = require("../../browser-send-event.js");
-exports.ShareButtons = class ShareButtons extends React.Component {
+exports.ShareButton = class ShareButton extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ display: false
+ };
+
+ }
+
+ render() {
+ let panel = null;
+ if (this.state.display) {
+ panel = ;
+ }
+ return
+
+ {panel}
+
;
+ }
+
+ onClick() {
+ let show = ! this.state.display;
+ this.setState({display: show});
+ if (show) {
+ sendEvent(
+ this.props.isOwner ? "start-share-owner" : "start-share-non-owner",
+ "navbar");
+ } else {
+ sendEvent("cancel-share");
+ }
+ }
+
+ onPanelClose() {
+ this.setState({display: false});
+ }
+
+};
+
+class ShareButtonPanel extends React.Component {
constructor(props) {
super(props);
this.state = {copyText: "Copy"};
+ this.clickMaybeClose = this.clickMaybeClose.bind(this);
+ this.keyMaybeClose = this.keyMaybeClose.bind(this);
}
onClickShareButton(whichButton) {
@@ -29,12 +77,12 @@ exports.ShareButtons = class ShareButtons extends React.Component {
sendEvent("share", "focus-url");
}
- onChange(e) {
- // Do nothing -- we simply need this event handler to placate React
- }
-
render() {
- return
+ let className = "share-panel default-color-scheme";
+ if (this.props.renderExtensionNotification) {
+ className += " share-panel-with-notification";
+ }
+ return
;
}
-};
+
+ componentDidMount() {
+ document.addEventListener("click", this.clickMaybeClose, false);
+ document.addEventListener("keyup", this.keyMaybeClose, false);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener("click", this.clickMaybeClose, false);
+ document.removeEventListener("keyup", this.keyMaybeClose, false);
+ }
+
+ clickMaybeClose(event) {
+ if (! this.isPanel(event.target)) {
+ this.props.closePanel();
+ }
+ }
+
+ keyMaybeClose(event) {
+ if ((event.key || event.code) == "Escape") {
+ this.props.closePanel();
+ }
+ }
+
+ /* Returns true if the element is part of the share panel */
+ isPanel(el) {
+ while (el) {
+ if (el.id == "share-buttons-panel") {
+ return true;
+ }
+ el = el.parentNode;
+ }
+ return false;
+ }
+
+}
diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
index b931171449..8650278c3b 100644
--- a/server/src/pages/shot/view.js
+++ b/server/src/pages/shot/view.js
@@ -2,7 +2,7 @@ const React = require("react");
const ReactDOM = require("react-dom");
const { Footer } = require("../../footer-view");
const sendEvent = require("../../browser-send-event.js");
-const { ShareButtons } = require("./share-buttons");
+const { ShareButton } = require("./share-buttons");
const { TimeDiff, intervalDescription } = require("./time-diff");
const reactruntime = require("../../reactruntime");
@@ -147,12 +147,8 @@ class Body extends React.Component {
super(props);
this.state = {
hidden: false,
- sharePanelDisplay: false,
closePageshotBanner: false
};
- // Need to bind this so we can add/remove the event listener
- this.unsharePanelHandler = this.unsharePanelHandler.bind(this);
- this.sharePanelKeypress = this.sharePanelKeypress.bind(this);
}
closeGetPageshotBanner() {
@@ -163,18 +159,6 @@ class Body extends React.Component {
//this.props.controller.requestSavedShot();
}
- onClickShareButton(e) {
- let show = ! this.state.sharePanelDisplay;
- this.setState({sharePanelDisplay: show});
- if (show) {
- sendEvent(
- this.props.isOwner ? "start-share-owner" : "start-share-non-owner",
- "navbar");
- } else {
- sendEvent("cancel-share");
- }
- }
-
onClickClose() {
this.setState({hidden: true});
}
@@ -183,24 +167,6 @@ class Body extends React.Component {
this.setState({hidden: false});
}
- unsharePanelHandler(e) {
- let el = e.target;
- while (el) {
- if (el.id === "share-buttons-panel" || el.id === "toggle-share") {
- // A click in the share panel itself
- return;
- }
- el = el.parentNode;
- }
- this.onClickShareButton();
- }
-
- sharePanelKeypress(e) {
- if ((e.key || e.code) == "Escape") {
- this.onClickShareButton();
- }
- }
-
onClickDelete(e) {
sendEvent("start-delete", "navbar", {useBeacon: true});
if (window.confirm("Are you sure you want to delete this shot permanently?")) {
@@ -264,7 +230,6 @@ class Body extends React.Component {
let shotDomain = this.props.shot.url; // FIXME: calculate
let clips = [];
- let shareButtons = [];
let clipNames = shot.clipNames();
if (clipNames.length && ! this.state.hidden) {
let clipId = clipNames[0];
@@ -326,21 +291,6 @@ class Body extends React.Component {
myShotsHref = "/";
}
- let isPublic = null;
- if (this.props.isOwner && !this.state.closePrivacyNotice && Date.now() - shot.createdDate < 30000) {
- if (shot.isPublic) {
- isPublic =
- This shot is only visible to you until you share the link.
-
;
- } else {
- isPublic =
- You've saved a personal version of this shot. This shot is only visible to you until you share the link.
-
;
- }
- }
-
let clipUrl = null;
if (clipNames.length) {
let clipId = clipNames[0];
@@ -353,14 +303,6 @@ class Body extends React.Component {
filenameTitle = filenameTitle.replace(/\s+/g, " ");
let clipFilename = `Page-Shot-${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${filenameTitle}`;
- if (this.state.sharePanelDisplay) {
- shareButtons =
;
- }
-
/*
{this.props.hasSavedShot ?