tooltip in body bug

2024-12-23 09:01:56 +03:00 · 2020-09-04 14:37:50 -07:00 · 2020-09-04 14:37:50 -07:00 · 3a8d497112
commit 3a8d497112
parent 663b59dd15
9 changed files with 179 additions and 64 deletions
--- a/common/svg.js
+++ b/common/svg.js
@ -69,7 +69,7 @@ export const Search = (props) => {
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
-      strokeWidth="1.5"
+      strokeWidth="2"
      height={props.height}
      style={props.style}
    >
@ -285,8 +285,8 @@ export const NavigationArrow = (props) => (
      strokeLinejoin="round"
      strokeWidth="2"
    >
-      <path d="m.75 12h22.5" />
-      <path d="m12.75 22.5 10.5-10.5-10.5-10.5" fillRule="evenodd" />
+      <path d="M5 12H19" />
+      <path d="M12 5L19 12L12 19" />
    </g>
  </svg>
 );
@ -1087,3 +1087,19 @@ export const LocationPin = (props) => {
    </svg>
  );
 };
+export const MoreHorizontal = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" />
+    <path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" />
+    <path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" />
+  </svg>
+);
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@ -97,7 +97,7 @@ export default class ApplicationHeader extends React.Component {
            onClick={isBackDisabled ? () => {} : this.props.onBack}
          >
            <SVG.NavigationArrow
-              height="16px"
+              height="24px"
              style={{ transform: `rotate(180deg)` }}
            />
          </span>
@ -110,7 +110,7 @@ export default class ApplicationHeader extends React.Component {
            }
            onClick={isForwardDisabled ? () => {} : this.props.onForward}
          >
-            <SVG.NavigationArrow height="16px" />
+            <SVG.NavigationArrow height="24px" />
          </span>

          <span
@ -118,7 +118,7 @@ export default class ApplicationHeader extends React.Component {
            style={{ marginLeft: 24 }}
            onClick={this.props.onRehydrate}
          >
-            <SVG.Refresh height="16px" />
+            <SVG.Refresh height="20px" />
          </span>

          <span
@ -126,7 +126,7 @@ export default class ApplicationHeader extends React.Component {
            style={{ marginLeft: 24 }}
            onClick={this._handleCreateSearch}
          >
-            <SVG.Search height="19px" />
+            <SVG.Search height="20px" />
          </span>
        </div>
        <div css={STYLES_MIDDLE} />
--- a/components/core/ApplicationNavigation.js
+++ b/components/core/ApplicationNavigation.js
@ -37,6 +37,7 @@ const STYLES_NAVIGATION_ITEM = css`
  color: ${Constants.system.black};
  user-select: none;
  padding-right: 24px;
+  font-family: ${Constants.font.medium};

  :hover {
    padding-right: 0px;
@ -64,7 +65,7 @@ const STYLES_CHILDREN = css`
  height: 100%;
  overflow-wrap: break-word;
  padding: 11px 0px 14px 8px;
-  font-family: ${Constants.font.text};
+  font-family: ${Constants.font.medium};
  font-weight: 400;
  font-size: 14px;
  line-height: 1.225;
--- a/components/core/ApplicationUserControls.js
+++ b/components/core/ApplicationUserControls.js
@ -9,7 +9,7 @@ import {
 } from "~/components/system";
 import { css } from "@emotion/react";

-import Dismissible from "~/components/core/Dismissible";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 import CircleButtonLight from "~/components/core/CircleButtonLight";

 const APPLICATION_CONTROL_MENU_ID = "application-control-menu";
@ -131,7 +131,7 @@ export default class ApplicationUserControls extends React.Component {
          horizontal="right"
          vertical="below"
          content={
-            <Dismissible
+            <Boundary
              captureResize={true}
              captureScroll={false}
              enabled
@ -142,20 +142,20 @@ export default class ApplicationUserControls extends React.Component {
                style={{
                  left: "0px",
                  top: "16px",
-                  cursor: "pointer",
                }}
-                onNavigateTo={this._handleNavigateTo}
-                onAction={this._handleAction}
-                onSignOut={this._handleSignOut}
                navigation={[
                  {
-                    text: "Profile & account settings",
-                    value: "V1_NAVIGATION_PROFILE_EDIT",
+                    text: "Account settings",
+                    onClick: () =>
+                      this.props.onAction({
+                        type: "NAVIGATE",
+                        value: "V1_NAVIGATION_PROFILE_EDIT",
+                      }),
                  },
-                  { text: "Sign Out", value: null, action: "SIGN_OUT" },
+                  { text: "Sign out", onClick: this._handleSignOut },
                ]}
              />
-            </Dismissible>
+            </Boundary>
          }
        >
          <div css={STYLES_FLEX_ROW}>
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@ -94,7 +94,7 @@ export default class Profile extends React.Component {
              const url = `/${data.username}/${slate.slatename}`;
              return (
                <a key={url} href={url} css={STYLES_LINK}>
-                  <SlatePreviewBlock slate={slate} />
+                  <SlatePreviewBlock external slate={slate} />
                </a>
              );
            })}
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@ -4,6 +4,10 @@ import * as SVG from "~/common/svg";

 import { css } from "@emotion/react";
 import { ProcessedText } from "~/components/system/components/Typography";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
+import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
+import { TooltipWrapper } from "~/components/system/components/fragments/GlobalTooltip";
+import { dispatchCustomEvent } from "~/common/custom-events";

 import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";

@ -74,7 +78,7 @@ export function SlatePreviewRow(props) {
    >
      {objects.map((each) => (
        <div
-          key={each.url}
+          key={each.id}
          css={props.small ? STYLES_ITEM_BOX_SMALL : STYLES_ITEM_BOX}
          style={props.style}
        >
@ -154,28 +158,123 @@ const STYLES_CREATE_NEW = css`
  height: 160px;
 `;

+const STYLES_ICON_BOX = css`
+  height: 24px;
+  width: 24px;
+  display: block;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default class SlatePreviewBlock extends React.Component {
  _ref;
+  _test;

  state = {
-    copyable: "",
+    isMenuOpen: false,
+    copyValue: "",
+  };
+
+  _componentDidMount = () => {
+    console.log(this._test.getBoundingClientRect());
  };

  _handleCopy = (e, value) => {
    e.stopPropagation();
-    console.log("copy");
-    this.setState({ copyable: value }, () => {
+    this.setState({ copyValue: value }, () => {
      this._ref.select();
      document.execCommand("copy");
    });
  };

+  _handleClick = (e) => {
+    e.stopPropagation();
+    console.log("show tooltip");
+    dispatchCustomEvent({
+      name: "show-tooltip",
+      detail: {
+        id: `slate-tooltip-${this.props.slate.id}`,
+      },
+    });
+  };
+
+  _handleHide = (e) => {
+    console.log("hide tooltip");
+    dispatchCustomEvent({
+      name: "hide-tooltip",
+      detail: {
+        id: `slate-tooltip-${this.props.slate.id}`,
+      },
+    });
+  };
+
  render() {
    if (!this.props.editing && !this.props.slate.data.objects.length) {
      return null;
    }
+    let contextMenu = (
+      <React.Fragment>
+        <Boundary
+          captureResize={true}
+          captureScroll={false}
+          enabled
+          onOutsideRectEvent={this._handleHide}
+          style={this.props.style}
+        >
+          <PopoverNavigation
+            style={{
+              left: "0px",
+              top: "16px",
+            }}
+            navigation={
+              this.props.editing
+                ? [
+                    {
+                      text: "Copy URL",
+                      onClick: (e) =>
+                        this._handleCopy(
+                          e,
+                          `https://slate.host/${this.props.slate.owner.username}/${this.props.slate.slatename}`
+                        ),
+                    },
+                    {
+                      text: "Copy slate ID",
+                      onClick: (e) => this._handleCopy(e, this.props.slate.id),
+                    },
+                  ]
+                : [
+                    {
+                      text: "Copy URL",
+                      onClick: (e) =>
+                        this._handleCopy(
+                          e,
+                          `https://slate.host/${this.props.slate.owner.username}/${this.props.slate.slatename}`
+                        ),
+                    },
+                  ]
+            }
+          />
+        </Boundary>
+        <input
+          readOnly
+          ref={(c) => {
+            this._ref = c;
+          }}
+          value={this.state.copyValue}
+          css={STYLES_COPY_INPUT}
+        />
+      </React.Fragment>
+    );
+
    return (
-      <div css={STYLES_BLOCK}>
+      <div
+        css={STYLES_BLOCK}
+        style={
+          this.props.external
+            ? { backgroundColor: Constants.system.white, border: "none" }
+            : {}
+        }
+      >
        <div css={STYLES_TITLE_LINE}>
          <div
            style={{
@ -208,16 +307,26 @@ export default class SlatePreviewBlock extends React.Component {
              </div>
            )
          ) : null}
-          {this.props.editing ? (
-            <div style={{ justifySelf: "end" }}>
-              <div
-                css={STYLES_BUTTON}
-                onClick={(e) => this._handleCopy(e, this.props.slate.id)}
+          {this.props.external ? null : (
+            <div
+              style={{ justifySelf: "flex-end" }}
+              ref={(c) => {
+                this._test = c;
+              }}
+            >
+              <TooltipWrapper
+                id={`slate-tooltip-${this.props.slate.id}`}
+                type="body"
+                content={contextMenu}
+                horizontal="left"
+                vertical="below"
              >
-                Copy ID
-              </div>
+                <div css={STYLES_ICON_BOX} onClick={this._handleClick}>
+                  <SVG.MoreHorizontal height="16px" />
+                </div>
+              </TooltipWrapper>
            </div>
-          ) : null}
+          )}
        </div>
        {this.props.slate.data.body ? (
          <div css={STYLES_BODY}>
@ -237,14 +346,6 @@ export default class SlatePreviewBlock extends React.Component {
            <div>Add Files</div>
          </div>
        )}
-        <input
-          readOnly
-          ref={(c) => {
-            this._ref = c;
-          }}
-          value={this.state.copyable}
-          css={STYLES_COPY_INPUT}
-        />
      </div>
    );
  }
--- a/components/system/components/GlobalModal.js
+++ b/components/system/components/GlobalModal.js
@ -39,12 +39,20 @@ export class GlobalModal extends React.Component {
    window.addEventListener("create-modal", this._handleCreate);
    window.addEventListener("delete-modal", this._handleDelete);
    window.addEventListener("keydown", this._handleDocumentKeydown);
+    window.addEventListener("scroll", this._handleScroll);
  };

  componentWillUnmount = () => {
    window.removeEventListener("create-modal", this._handleCreate);
    window.removeEventListener("delete-modal", this._handleDelete);
    window.removeEventListener("keydown", this._handleDocumentKeydown);
+    window.removeEventListener("scroll", this._handleScroll);
+  };
+
+  _handleScroll = (e) => {
+    if (this.state.modal) {
+      e.stopPropagation();
+    }
  };

  _handleCreate = (e) => {
--- a/components/system/components/PopoverNavigation.js
+++ b/components/system/components/PopoverNavigation.js
@ -7,13 +7,13 @@ const STYLES_POPOVER = css`
  z-index: ${Constants.zindex.tooltip};
  box-sizing: border-box;
  font-family: ${Constants.font.text};
-  position: absolute;
  width: 204px;
  border-radius: 4px;
  user-select: none;
  background-color: ${Constants.system.white};
  color: ${Constants.system.pitchBlack};
-  box-shadow: inset 0 0 0 1px ${Constants.system.border}, 0 1px 4px rgba(0, 0, 0, 0.07);
+  box-shadow: inset 0 0 0 1px ${Constants.system.border},
+    0 1px 4px rgba(0, 0, 0, 0.07);
 `;

 const STYLES_POPOVER_ITEM = css`
@ -38,30 +38,14 @@ const STYLES_POPOVER_ITEM = css`
 `;

 export class PopoverNavigation extends React.Component {
-  static defaultProps = {
-    onNavigateTo: () => {
-      console.error("requires onNavigateTo");
-    },
-  };
-
  render() {
    return (
      <div css={STYLES_POPOVER} style={this.props.style}>
-        {this.props.navigation.map((each) => {
-          if (each.action === "SIGN_OUT") {
-            return (
-              <div key={each.value} css={STYLES_POPOVER_ITEM} onClick={this.props.onSignOut}>
-                {each.text}
-              </div>
-            );
-          }
-
-          return (
-            <div key={each.value} css={STYLES_POPOVER_ITEM} onClick={() => this.props.onNavigateTo({ id: each.value })}>
-              {each.text}
-            </div>
-          );
-        })}
+        {this.props.navigation.map((each) => (
+          <div key={each.text} css={STYLES_POPOVER_ITEM} onClick={each.onClick}>
+            {each.text}
+          </div>
+        ))}
      </div>
    );
  }
--- a/components/system/components/fragments/GlobalTooltip.js
+++ b/components/system/components/fragments/GlobalTooltip.js
@ -135,6 +135,7 @@ export class GlobalTooltip extends React.Component {
      horizontal: e.detail.horizontal,
    };
    this.setState({ tooltips });
+    console.log(tooltips);
  };

  _handleRemove = (e) => {
@ -152,11 +153,14 @@ export class GlobalTooltip extends React.Component {
    }
  };

-  _handleShow = (e) => {
+  _handleShow = async (e) => {
    if (this.state.tooltips[e.detail.id]) {
      let tooltips = this.state.tooltips;
      if (!tooltips[e.detail.id].style) {
        let rect = tooltips[e.detail.id].root.getBoundingClientRect();
+        console.log(tooltips[e.detail.id]);
+        console.log(tooltips[e.detail.id].root);
+        console.log(rect);
        let style = this.getOrientation(
          rect,
          tooltips[e.detail.id].bubbleRect,
@ -211,6 +215,7 @@ export class TooltipWrapper extends React.Component {

  componentDidMount = async () => {
    let bubbleRect = this._bubble.getBoundingClientRect();
+    console.log(this._bubble);

    dispatchCustomEvent({
      name: "add-tooltip",