mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
react-tippy: removed from the codebase
This commit is contained in:
jimmylee
parent
91f52e7ada
commit
153079a393
@ -2,144 +2,6 @@ import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
/* prettier-ignore */
|
||||
export const injectTooltipStyles = () =>
|
||||
css`
|
||||
.tippy-touch {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.tippy-notransition {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.tippy-popper {
|
||||
z-index: ${Constants.zindex.tooltip};
|
||||
max-width: 400px;
|
||||
perspective: 800px;
|
||||
outline: 0;
|
||||
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tippy-popper.html-template {
|
||||
max-width: 96%;
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="top"] [x-arrow] {
|
||||
border-top: 7px solid ${Constants.system.white};
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
bottom: -7px;
|
||||
margin: 0 9px;
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="top"] [data-animation="fade"].enter {
|
||||
opacity: 1;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="top"] [data-animation="fade"].leave {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="bottom"] [x-arrow] {
|
||||
border-bottom: 7px solid ${Constants.system.white};
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
top: -7px;
|
||||
margin: 0 9px;
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="bottom"] [data-animation="fade"].enter {
|
||||
opacity: 1;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="bottom"] [data-animation="fade"].leave {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="left"] [x-arrow] {
|
||||
border-left: 7px solid ${Constants.system.white};
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
right: -7px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="left"] [data-animation="fade"].enter {
|
||||
opacity: 1;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="left"] [data-animation="fade"].leave {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="right"] [x-arrow] {
|
||||
border-right: 7px solid ${Constants.system.white};
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
left: -7px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="right"] [data-animation="fade"].enter {
|
||||
opacity: 1;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.tippy-popper[x-placement^="right"] [data-animation="fade"].leave {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.tippy-tooltip {
|
||||
font-family: ${Constants.font.code};
|
||||
color: ${Constants.system.white};
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
will-change: transform;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.tippy-tooltip[data-animatefill] {
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.tippy-tooltip[data-interactive] {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.tippy-tooltip[data-inertia] {
|
||||
transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85);
|
||||
}
|
||||
|
||||
.tippy-tooltip [x-arrow] {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.tippy-popper {
|
||||
max-width: 96%;
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/* prettier-ignore */
|
||||
export const injectGlobalStyles = () => css`
|
||||
@font-face {
|
||||
|
||||
@ -3,7 +3,6 @@ import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Tooltip } from "react-tippy";
|
||||
|
||||
const STYLES_ICON_ELEMENT = css`
|
||||
height: 40px;
|
||||
@ -34,11 +33,7 @@ const STYLES_APPLICATION_HEADER = css`
|
||||
height: 104px;
|
||||
padding: 12px 48px 0 36px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 1) 30%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 12px 24px 0 12px;
|
||||
@ -69,54 +64,32 @@ const STYLES_RIGHT = css`
|
||||
|
||||
export default class ApplicationHeader extends React.Component {
|
||||
render() {
|
||||
const isBackDisabled =
|
||||
this.props.currentIndex === 0 || this.props.history.length < 2;
|
||||
const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2;
|
||||
|
||||
const isForwardDisabled =
|
||||
this.props.currentIndex === this.props.history.length - 1 ||
|
||||
this.props.history.length < 2;
|
||||
this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2;
|
||||
|
||||
return (
|
||||
<header css={STYLES_APPLICATION_HEADER}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<span
|
||||
css={STYLES_ICON_ELEMENT}
|
||||
style={
|
||||
isBackDisabled
|
||||
? { cursor: "not-allowed", color: Constants.system.border }
|
||||
: null
|
||||
}
|
||||
onClick={isBackDisabled ? () => {} : this.props.onBack}
|
||||
>
|
||||
<Tooltip animation="fade" animateFill={false} title="Go back">
|
||||
<SVG.NavigationArrow
|
||||
height="16px"
|
||||
style={{ transform: `rotate(180deg)` }}
|
||||
/>
|
||||
</Tooltip>
|
||||
style={isBackDisabled ? { cursor: "not-allowed", color: Constants.system.border } : null}
|
||||
onClick={isBackDisabled ? () => {} : this.props.onBack}>
|
||||
<SVG.NavigationArrow height="16px" style={{ transform: `rotate(180deg)` }} />
|
||||
</span>
|
||||
<span
|
||||
css={STYLES_ICON_ELEMENT}
|
||||
style={
|
||||
isForwardDisabled
|
||||
? { cursor: "not-allowed", color: Constants.system.border }
|
||||
: null
|
||||
}
|
||||
onClick={isForwardDisabled ? () => {} : this.props.onForward}
|
||||
>
|
||||
<Tooltip animation="fade" animateFill={false} title="Go forward">
|
||||
<SVG.NavigationArrow height="16px" />
|
||||
</Tooltip>
|
||||
style={isForwardDisabled ? { cursor: "not-allowed", color: Constants.system.border } : null}
|
||||
onClick={isForwardDisabled ? () => {} : this.props.onForward}>
|
||||
<SVG.NavigationArrow height="16px" />
|
||||
</span>
|
||||
|
||||
<span
|
||||
css={STYLES_ICON_ELEMENT}
|
||||
style={{ marginLeft: 24 }}
|
||||
onClick={() => window.alert("TODO: SPOTLIGHT SEARCH")}
|
||||
>
|
||||
<Tooltip animation="fade" animateFill={false} title="Coming Soon">
|
||||
<SVG.Search height="20px" />
|
||||
</Tooltip>
|
||||
onClick={() => window.alert("TODO: SPOTLIGHT SEARCH")}>
|
||||
<SVG.Search height="20px" />
|
||||
</span>
|
||||
</div>
|
||||
<div css={STYLES_MIDDLE} />
|
||||
|
||||
@ -36,19 +36,11 @@ export const DescriptionGroup = (props) => {
|
||||
{!Strings.isEmpty(props.label) ? (
|
||||
<div css={STYLES_DESCRIPTION_GROUP_LABEL}>
|
||||
{props.label}{" "}
|
||||
{props.tooltip ? (
|
||||
<TooltipAnchor
|
||||
tooltip={props.tooltip}
|
||||
height="14px"
|
||||
style={{ paddingTop: 0 }}
|
||||
/>
|
||||
) : null}
|
||||
{props.tooltip ? <TooltipAnchor tooltip={props.tooltip} height="14px" style={{ paddingTop: 0 }} /> : null}
|
||||
</div>
|
||||
) : null}
|
||||
{!Strings.isEmpty(props.description) ? (
|
||||
<div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>
|
||||
{props.description}
|
||||
</div>
|
||||
<div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>{props.description}</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,7 +7,6 @@ import * as Strings from "~/common/strings";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
import { CodeText } from "~/components/system/components/fragments/CodeText";
|
||||
import { css } from "@emotion/react";
|
||||
import { Tooltip } from "react-tippy";
|
||||
|
||||
import Avatar from "~/components/core/Avatar";
|
||||
|
||||
@ -154,11 +153,9 @@ const Link = (props) => {
|
||||
|
||||
export const TableColumn = (props) => {
|
||||
const tooltipElement = props.tooltip ? (
|
||||
<Tooltip animation="fade" animateFill={false} title={props.tooltip}>
|
||||
<span css={STYLES_CONTENT_BUTTON}>
|
||||
<SVG.Information height="14px" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<span css={STYLES_CONTENT_BUTTON}>
|
||||
<SVG.Information height="14px" />
|
||||
</span>
|
||||
) : null;
|
||||
|
||||
const copyableElement = props.copyable ? (
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Tooltip } from "react-tippy";
|
||||
|
||||
const STYLES_TOOLTIP_ANCHOR = css`
|
||||
box-sizing: border-box;
|
||||
@ -18,17 +16,13 @@ const STYLES_TOOLTIP_ANCHOR = css`
|
||||
export class TooltipAnchor extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Tooltip animation="fade" animateFill={false} title={this.props.tooltip}>
|
||||
<span css={STYLES_TOOLTIP_ANCHOR} style={this.props.style}>
|
||||
{this.props.children ? (
|
||||
this.props.children
|
||||
) : (
|
||||
<SVG.Information
|
||||
height={this.props.height ? this.props.height : "24px"}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
<span css={STYLES_TOOLTIP_ANCHOR} style={this.props.style}>
|
||||
{this.props.children ? (
|
||||
this.props.children
|
||||
) : (
|
||||
<SVG.Information height={this.props.height ? this.props.height : "24px"} />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,6 @@
|
||||
"react-dom": "^16.12.0",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-focus-lock": "^2.4.1",
|
||||
"react-tippy": "^1.3.4",
|
||||
"regenerator-runtime": "^0.13.5",
|
||||
"three": "^0.108.0",
|
||||
"universal-cookie": "^4.0.3",
|
||||
|
||||
@ -4,11 +4,7 @@ import { CacheProvider, Global } from "@emotion/react";
|
||||
import { cache } from "@emotion/css";
|
||||
|
||||
import App from "next/app";
|
||||
import {
|
||||
injectGlobalStyles,
|
||||
injectTooltipStyles,
|
||||
injectCodeBlockStyles,
|
||||
} from "~/common/styles/global";
|
||||
import { injectGlobalStyles, injectCodeBlockStyles } from "~/common/styles/global";
|
||||
|
||||
// NOTE(wwwjim):
|
||||
// https://nextjs.org/docs/advanced-features/custom-app
|
||||
@ -16,7 +12,6 @@ function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<CacheProvider value={cache}>
|
||||
<Global styles={injectGlobalStyles()} />
|
||||
<Global styles={injectTooltipStyles()} />
|
||||
<Global styles={injectCodeBlockStyles()} />
|
||||
<Component {...pageProps} />
|
||||
</CacheProvider>
|
||||
|
||||
@ -38,7 +38,6 @@ const generateOutput = (outputPath) => {
|
||||
"PureComponent",
|
||||
],
|
||||
"node_modules/react-dom/index.js": ["render", "hydrate"],
|
||||
"node_modules/react-tippy/dist/react-tippy.js": ["Tooltip"],
|
||||
},
|
||||
}),
|
||||
terser(),
|
||||
@ -46,7 +45,4 @@ const generateOutput = (outputPath) => {
|
||||
};
|
||||
};
|
||||
|
||||
export default [
|
||||
generateOutput("dist/index.js"),
|
||||
generateOutput("../slate-react-system/src/index.js"),
|
||||
];
|
||||
export default [generateOutput("dist/index.js"), generateOutput("../slate-react-system/src/index.js")];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user