yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: tooltip update / remove css loader (#985)

Browse Source 
* fix: Add suspended filter to people management #984

* chore: removing css loader

* pui-react-tooltip -> tippy
closes #980

* remove extract-text-plugin
This commit is contained in:
Tom Moor
2019-07-09 21:17:25 -07:00
committed by GitHub
parent 7db0be0a6a
commit 3d805d5fe7
17 changed files with 292 additions and 1107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
app/components/Editor/Editor.js
View File

@@ -4,7 +4,7 @@ import { Redirect } from 'react-router-dom';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { lighten } from 'polished';
import styled, { withTheme } from 'styled-components';
import styled, { withTheme, createGlobalStyle } from 'styled-components';
import RichMarkdownEditor from 'rich-markdown-editor';
import Placeholder from 'rich-markdown-editor/lib/components/Placeholder';
import { uploadFile } from 'utils/uploadFile';
@@ -81,15 +81,18 @@ class Editor extends React.Component<Props> {
if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
return (
<StyledEditor
ref={this.props.forwardedRef}
uploadImage={this.onUploadImage}
onClickLink={this.onClickLink}
onShowToast={this.onShowToast}
getLinkComponent={this.getLinkComponent}
tooltip={EditorTooltip}
{...this.props}
/>
<React.Fragment>
<PrismStyles />
<StyledEditor
ref={this.props.forwardedRef}
uploadImage={this.onUploadImage}
onClickLink={this.onClickLink}
onShowToast={this.onShowToast}
getLinkComponent={this.getLinkComponent}
tooltip={EditorTooltip}
{...this.props}
/>
</React.Fragment>
);
}
}
@@ -126,7 +129,151 @@ const StyledEditor = styled(RichMarkdownEditor)`
}
`;
const EditorTooltip = props => <Tooltip offset={8} {...props} />;
/*
Based on Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/
const PrismStyles = createGlobalStyle`
code[class*="language-"],
pre[class*="language-"] {
-webkit-font-smoothing: initial;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 13px;
line-height: 1.375;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: #24292e;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #6a737d;
}
.token.punctuation {
color: #5e6687;
}
.token.namespace {
opacity: .7;
}
.token.operator,
.token.boolean,
.token.number {
color: #d73a49;
}
.token.property {
color: #c08b30;
}
.token.tag {
color: #3d8fd1;
}
.token.string {
color: #032f62;
}
.token.selector {
color: #6679cc;
}
.token.attr-name {
color: #c76b29;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #22a2c9;
}
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit {
color: #d73a49;
}
.token.function {
color: #6f42c1;
}
.token.statement,
.token.regex,
.token.atrule {
color: #22a2c9;
}
.token.placeholder,
.token.variable {
color: #3d8fd1;
}
.token.deleted {
text-decoration: line-through;
}
.token.inserted {
border-bottom: 1px dotted #202746;
text-decoration: none;
}
.token.italic {
font-style: italic;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.important {
color: #c94922;
}
.token.entity {
cursor: help;
}
pre > code.highlight {
outline: 0.4em solid #c94922;
outline-offset: .4em;
}
`;
const EditorTooltip = props => (
<Tooltip offset="0, 16" delay={150} {...props} />
);
export default withTheme(
// $FlowIssue - https://github.com/facebook/flow/issues/6103

225
app/components/Tooltip.js
View File

@@ -1,204 +1,13 @@
// @flow
import * as React from 'react';
import { TooltipTrigger } from 'pui-react-tooltip';
import { createGlobalStyle } from 'styled-components';
const GlobalStyles = createGlobalStyle`
.tooltip:hover .tooltip-container:not(.tooltip-container-hidden){
visibility:visible;
opacity:1
}
.tooltip-container{
visibility:hidden;
-webkit-transition:opacity ease-out 0.2s;
transition:opacity ease-out 0.2s;
z-index:10;
position:absolute;
bottom:100%;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
margin:0 0 ${props => props.offset + 8}px 0;
text-align:left
}
.tooltip-container.tooltip-container-visible{
visibility:visible
}
.tooltip-container.tooltip-hoverable:after{
content:"";
position:absolute;
width:calc(100% + 16px);
height:calc(100% + 16px);
top:50%;
left:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
.tooltip-container .tooltip-content{
white-space:nowrap;
padding:4px 8px;
font-size:12px;
line-height:16px;
font-weight:400;
letter-spacing:0;
text-transform:none;
background-color:${props => props.theme.tooltipBackground};
color: ${props => props.theme.tooltipText};
border-radius:2px;
border:1px solid ${props => props.theme.tooltipBackground};
box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1)
}
.tooltip-container .tooltip-content:before{
content:"";
z-index:1;
position:absolute;
bottom:-4px;
left:50%;
-webkit-transform:translateX(-50%) rotateZ(45deg);
transform:translateX(-50%) rotateZ(45deg);
background-color:${props => props.theme.tooltipBackground};
border-bottom:1px solid ${props => props.theme.tooltipBackground};
border-right:1px solid ${props => props.theme.tooltipBackground};
width:8px;
height:8px
}
.tooltip-container .tooltip-content:after{
content:"";
box-sizing:content-box;
z-index:-1;
position:absolute;
bottom: -4px;
left:50%;
-webkit-transform:translateX(-50%) rotateZ(45deg);
transform:translateX(-50%) rotateZ(45deg);
background-color:${props => props.theme.tooltipBackground};
box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1);
width:8px;
height:8px
}
.tooltip{
position:relative;
display:inline-block
}
.tooltip.tooltip-bottom .tooltip-container{
top:100%;
bottom:auto;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
margin:8px 0 0 0
}
.tooltip.tooltip-bottom .tooltip-container .tooltip-content:before{
bottom:auto;
top: -4px;
border-top:1px solid ${props => props.theme.tooltipBackground};
border-right:none;
border-bottom:none;
border-left:1px solid ${props => props.theme.tooltipBackground}
}
.tooltip.tooltip-bottom .tooltip-container .tooltip-content:after{
bottom:auto;
top: -4px;
}
.tooltip.tooltip-right .tooltip-container{
top:50%;
bottom:auto;
left:100%;
-webkit-transform:translatey(-50%);
transform:translatey(-50%);
margin:0 0 0 8px
}
.tooltip.tooltip-right .tooltip-container .tooltip-content:before{
bottom:auto;
left: -4px;
top:50%;
-webkit-transform:translatey(-50%) rotateZ(45deg);
transform:translatey(-50%) rotateZ(45deg);
border-top:none;
border-right:none;
border-bottom:1px solid ${props => props.theme.tooltipBackground};
border-left:1px solid ${props => props.theme.tooltipBackground}
}
.tooltip.tooltip-right .tooltip-container .tooltip-content:after{
bottom:auto;
left: -4px;
top:50%;
-webkit-transform:translatey(-50%) rotateZ(45deg);
transform:translatey(-50%) rotateZ(45deg)
}
.tooltip.tooltip-left .tooltip-container{
top:50%;
bottom:auto;
right:100%;
left:auto;
-webkit-transform:translatey(-50%);
transform:translatey(-50%);
margin:0 8px 0 0
}
.tooltip.tooltip-left .tooltip-container .tooltip-content:before{
bottom:auto;
right: -4px;
left:auto;
top:50%;
-webkit-transform:translatey(-50%) rotateZ(45deg);
transform:translatey(-50%) rotateZ(45deg);
border-top:1px solid ${props => props.theme.tooltipBackground};
border-right:1px solid ${props => props.theme.tooltipBackground};
border-bottom:none;
border-left:none
}
.tooltip.tooltip-left .tooltip-container .tooltip-content:after{
bottom:auto;
right:-4px;
left:auto;
top:50%;
-webkit-transform:translatey(-50%) rotateZ(45deg);
transform:translatey(-50%) rotateZ(45deg)
}
.tooltip-sm.tooltip-container{
width:120px
}
.tooltip-sm.tooltip-container .tooltip-content{
white-space:normal
}
.tooltip-md.tooltip-container{
width:240px
}
.tooltip-md.tooltip-container .tooltip-content{
white-space:normal
}
.tooltip-lg.tooltip-container{
width:360px
}
.tooltip-lg.tooltip-container .tooltip-content{
white-space:normal
}
.tether-element{
z-index:99
}
.overlay-trigger{
color:#1B78B3;
-webkit-transition:all 300ms ease-out;
transition:all 300ms ease-out;
-webkit-transition-property:background-color, color, opacity;
transition-property:background-color, color, opacity
}
.overlay-trigger:hover,.overlay-trigger:focus{
color:#1f8ace;
cursor:pointer;
outline:none;
text-decoration:none
}
.overlay-trigger:active,.overlay-trigger.active{
color:#176698
}
`;
import styled from 'styled-components';
import Tippy from '@tippy.js/react';
type Props = {
tooltip: React.Node,
placement?: 'top' | 'bottom' | 'left' | 'right',
children: React.Node,
offset?: number,
delay?: number,
};
class Tooltip extends React.Component<Props> {
@@ -207,15 +16,33 @@ class Tooltip extends React.Component<Props> {
}
render() {
const { offset = 0, ...rest } = this.props;
const { tooltip, delay = 50, children, ...rest } = this.props;
return (
<React.Fragment>
<GlobalStyles offset={offset} />
<TooltipTrigger {...rest} />
</React.Fragment>
<StyledTippy
arrow
arrowType="round"
animation="shift-away"
content={tooltip}
delay={delay}
duration={[200, 150]}
inertia
{...rest}
>
<span>{children}</span>
</StyledTippy>
);
}
}
const StyledTippy = styled(Tippy)`
font-size: 13px;
background-color: ${props => props.theme.tooltipBackground};
color: ${props => props.theme.tooltipText};
svg {
fill: ${props => props.theme.tooltipBackground};
}
`;
export default Tooltip;