Skip to content

Commit 3ae5d95

Browse files
jacobsfletchjacobsfletch
authored
Merge pull request #1558 from jacobsfletch/feat/inline-relationships
roadmap: inline relationships
2 parents 934b443 + 92d2c4d commit 3ae5d95

File tree

48 files changed

+3730
-2857
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3730
-2857
lines changed

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@
9191
"@babel/preset-typescript": "^7.12.1",
9292
"@babel/register": "^7.11.5",
9393
"@date-io/date-fns": "^2.10.6",
94+
"@dnd-kit/core": "^6.0.5",
95+
"@dnd-kit/sortable": "^7.0.1",
9496
"@faceless-ui/modal": "^2.0.1",
9597
"@faceless-ui/scroll-info": "^1.2.3",
9698
"@faceless-ui/window-info": "^2.0.2",
@@ -155,7 +157,7 @@
155157
"passport-local-mongoose": "^7.0.0",
156158
"path-browserify": "^1.0.1",
157159
"pino": "^6.4.1",
158-
"pino-pretty": "^4.3.0",
160+
"pino-pretty": "^9.1.1",
159161
"pluralize": "^8.0.0",
160162
"postcss": "^8.4.6",
161163
"postcss-loader": "^6.2.1",
@@ -177,7 +179,6 @@
177179
"react-router-navigation-prompt": "^1.9.6",
178180
"react-select": "^3.0.8",
179181
"react-simple-code-editor": "^0.11.0",
180-
"react-sortable-hoc": "^2.0.0",
181182
"react-toastify": "^8.2.0",
182183
"sanitize-filename": "^1.6.3",
183184
"sass": "^1.55.0",

‎src/admin/components/elements/Button/index.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,6 @@
2222

2323
&--has-tooltip {
2424
position: relative;
25-
26-
}
27-
28-
.btn__tooltip {
29-
opacity: 0;
30-
visibility: hidden;
31-
transform: translate(-50%, -10px);
32-
}
33-
34-
.btn__content {
35-
&:hover {
36-
.btn__tooltip {
37-
opacity: 1;
38-
visibility: visible;
39-
}
40-
}
4125
}
4226

4327
&--icon-style-without-border {

‎src/admin/components/elements/Button/index.tsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { isValidElement } from 'react';
1+
import React, { Fragment, isValidElement } from 'react';
22
import { Link } from 'react-router-dom';
33
import { Props } from './types';
44

@@ -21,30 +21,31 @@ const icons = {
2121

2222
const baseClass = 'btn';
2323

24-
const ButtonContents = ({ children, icon, tooltip }) => {
24+
const ButtonContents = ({ children, icon, tooltip, showTooltip }) => {
2525
const BuiltInIcon = icons[icon];
2626

2727
return (
28-
<span
29-
className={`${baseClass}__content`}
30-
>
31-
{tooltip && (
32-
<Tooltip className={`${baseClass}__tooltip`}>
33-
{tooltip}
34-
</Tooltip>
35-
)}
36-
{children && (
37-
<span className={`${baseClass}__label`}>
38-
{children}
39-
</span>
40-
)}
41-
{icon && (
42-
<span className={`${baseClass}__icon`}>
43-
{isValidElement(icon) && icon}
44-
{BuiltInIcon && <BuiltInIcon />}
45-
</span>
46-
)}
47-
</span>
28+
<Fragment>
29+
<Tooltip
30+
className={`${baseClass}__tooltip`}
31+
show={showTooltip}
32+
>
33+
{tooltip}
34+
</Tooltip>
35+
<span className={`${baseClass}__content`}>
36+
{children && (
37+
<span className={`${baseClass}__label`}>
38+
{children}
39+
</span>
40+
)}
41+
{icon && (
42+
<span className={`${baseClass}__icon`}>
43+
{isValidElement(icon) && icon}
44+
{BuiltInIcon && <BuiltInIcon />}
45+
</span>
46+
)}
47+
</span>
48+
</Fragment>
4849
);
4950
};
5051

@@ -53,7 +54,7 @@ const Button: React.FC<Props> = (props) => {
5354
className,
5455
id,
5556
type = 'button',
56-
el,
57+
el = 'button',
5758
to,
5859
url,
5960
children,
@@ -69,6 +70,8 @@ const Button: React.FC<Props> = (props) => {
6970
tooltip,
7071
} = props;
7172

73+
const [showTooltip, setShowTooltip] = React.useState(false);
74+
7275
const classes = [
7376
baseClass,
7477
className && className,
@@ -84,6 +87,7 @@ const Button: React.FC<Props> = (props) => {
8487
].filter(Boolean).join(' ');
8588

8689
function handleClick(event) {
90+
setShowTooltip(false);
8791
if (type !== 'submit' && onClick) event.preventDefault();
8892
if (onClick) onClick(event);
8993
}
@@ -93,6 +97,8 @@ const Button: React.FC<Props> = (props) => {
9397
type,
9498
className: classes,
9599
disabled,
100+
onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,
101+
onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,
96102
onClick: !disabled ? handleClick : undefined,
97103
rel: newTab ? 'noopener noreferrer' : undefined,
98104
target: newTab ? '_blank' : undefined,
@@ -108,6 +114,7 @@ const Button: React.FC<Props> = (props) => {
108114
<ButtonContents
109115
icon={icon}
110116
tooltip={tooltip}
117+
showTooltip={showTooltip}
111118
>
112119
{children}
113120
</ButtonContents>
@@ -123,25 +130,29 @@ const Button: React.FC<Props> = (props) => {
123130
<ButtonContents
124131
icon={icon}
125132
tooltip={tooltip}
133+
showTooltip={showTooltip}
126134
>
127135
{children}
128136
</ButtonContents>
129137
</a>
130138
);
131139

132140
default:
141+
const Tag = el; // eslint-disable-line no-case-declarations
142+
133143
return (
134-
<button
144+
<Tag
135145
type="submit"
136146
{...buttonProps}
137147
>
138148
<ButtonContents
139149
icon={icon}
140150
tooltip={tooltip}
151+
showTooltip={showTooltip}
141152
>
142153
{children}
143154
</ButtonContents>
144-
</button>
155+
</Tag>
145156
);
146157
}
147158
};

‎src/admin/components/elements/Button/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { MouseEvent } from 'react';
1+
import React, { ElementType, MouseEvent } from 'react';
22

33
export type Props = {
44
className?: string,
55
id?: string,
66
type?: 'submit' | 'button',
7-
el?: 'link' | 'anchor' | undefined,
7+
el?: 'link' | 'anchor' | ElementType,
88
to?: string,
99
url?: string,
1010
children?: React.ReactNode,

‎src/admin/components/elements/CopyToClipboard/index.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,8 @@
1414
width: 0px;
1515
}
1616

17-
.tooltip {
18-
pointer-events: none;
19-
opacity: 0;
20-
visibility: hidden;
21-
}
22-
2317
&:focus,
2418
&:active {
2519
outline: none;
2620
}
27-
28-
&:hover {
29-
.tooltip {
30-
opacity: 1;
31-
visibility: visible;
32-
33-
}
34-
}
3521
}

‎src/admin/components/elements/CopyToClipboard/index.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState, useRef } from 'react';
1+
import React, { useState, useRef } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import Copy from '../../icons/Copy';
44
import Tooltip from '../Tooltip';
@@ -18,14 +18,6 @@ const CopyToClipboard: React.FC<Props> = ({
1818
const [hovered, setHovered] = useState(false);
1919
const { t } = useTranslation('general');
2020

21-
useEffect(() => {
22-
if (copied && !hovered) {
23-
setTimeout(() => {
24-
setCopied(false);
25-
}, 1500);
26-
}
27-
}, [copied, hovered]);
28-
2921
if (value) {
3022
return (
3123
<button
@@ -44,13 +36,15 @@ const CopyToClipboard: React.FC<Props> = ({
4436
ref.current.select();
4537
ref.current.setSelectionRange(0, value.length + 1);
4638
document.execCommand('copy');
47-
4839
setCopied(true);
4940
}
5041
}}
5142
>
5243
<Copy />
53-
<Tooltip>
44+
<Tooltip
45+
show={hovered || copied}
46+
delay={copied ? 0 : undefined}
47+
>
5448
{copied && (successMessage ?? t('copied'))}
5549
{!copied && (defaultMessage ?? t('copy'))}
5650
</Tooltip>

‎src/admin/components/elements/DocumentDrawer/index.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import '../../../scss/styles.scss';
2+
3+
.doc-drawer {
4+
&__header {
5+
margin-bottom: base(1);
6+
}
7+
8+
&__header-content {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: flex-start;
12+
margin-top: base(2.5);
13+
}
14+
15+
&__header-close {
16+
svg {
17+
width: base(2.5);
18+
height: base(2.5);
19+
position: relative;
20+
top: base(-.5);
21+
right: base(-.75);
22+
23+
.stroke {
24+
stroke-width: .5px;
25+
}
26+
}
27+
}
28+
29+
@include mid-break {
30+
&__header-close {
31+
svg {
32+
top: base(-.75);
33+
}
34+
}
35+
}
36+
}

0 commit comments

Comments
 (0)