tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: general ReactSelect and Relationship styles

Browse Source
This commit is contained in:
Jacob Fletcher
2022-12-08 14:14:23 -05:00
parent 00b3b768eb
commit 17fac6e6a0
14 changed files with 150 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/admin/components/elements/ReactSelect/MultiValue/index.scss
View File

@@ -12,14 +12,4 @@
cursor: grab;
}
}
.rs__multi-value__remove {
padding: 0 base(.125);
cursor: pointer;
&:hover {
color: var(--theme-elevation-800);
background: var(--theme-error-150);
}
}
}

17
src/admin/components/elements/ReactSelect/MultiValueLabel/index.scss
View File

@@ -1,16 +1,15 @@
@import '../../../../scss/styles.scss';
.multi-value-label {
@extend %small;
display: flex;
align-items: center;
padding: 0 base(.125) 0 base(.25);
max-width: 150px;
color: currentColor;
&__label {
padding: 0 base(.125) 0 base(.25);
max-width: 150px;
color: currentColor;
> * {
text-overflow: ellipsis;
overflow: hidden;
}
&__text {
text-overflow: ellipsis;
overflow: hidden;
}
}

15
src/admin/components/elements/ReactSelect/MultiValueLabel/index.tsx
View File

@@ -14,14 +14,13 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
return (
<div className={baseClass}>
<div className={`${baseClass}__label`}>
<SelectComponents.MultiValueLabel
{...props}
innerProps={{
...draggableProps || {},
}}
/>
</div>
<SelectComponents.MultiValueLabel
{...props}
innerProps={{
className: `${baseClass}__text`,
...draggableProps || {},
}}
/>
</div>
);
};

24
src/admin/components/elements/ReactSelect/MultiValueRemove/index.scss Normal file
View File

@@ -0,0 +1,24 @@
@import '../../../../scss/styles.scss';
.multi-value-remove {
cursor: pointer;
width: base(.75);
height: base(.75);
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: transparent;
border: none;
padding: 0;
&:hover {
color: var(--theme-elevation-800);
background: var(--theme-error-150);
}
&__icon {
width: 100%;
height: 100%;
}
}

40
src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
import X from '../../../icons/X';
import Tooltip from '../../Tooltip';
import { Option as OptionType } from '../types';
import './index.scss';
const baseClass = 'multi-value-remove';
export const MultiValueRemove: React.FC<MultiValueRemoveProps<OptionType>> = (props) => {
const {
innerProps,
} = props;
const [showTooltip, setShowTooltip] = React.useState(false);
const { t } = useTranslation('general');
return (
<button
{...innerProps}
type="button"
className={baseClass}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onClick={(e) => {
setShowTooltip(false);
innerProps.onClick(e);
}}
>
<Tooltip
className={`${baseClass}__tooltip`}
show={showTooltip}
delay={350}
>
{t('remove')}
</Tooltip>
<X className={`${baseClass}__icon`} />
</button>
);
};

9
src/admin/components/elements/ReactSelect/ValueContainer/index.scss
View File

@@ -6,6 +6,7 @@
.rs__value-container {
padding: base(.25) 0;
min-height: base(1.5);
overflow: visible;
> * {
margin: 0;
@@ -15,11 +16,17 @@
&--is-multi {
margin-left: - base(0.25);
width: calc(100% + base(0.5));
padding-top: base(0.25);
padding-bottom: base(0.25);
padding-left: base(0.25);
.rs__multi-value {
margin: base(.125);
margin: calc(#{base(.125)} - #{$style-stroke-width-s * 2});
}
&.rs__value-container--has-value {
padding-left: 0;
}
}
}

4
src/admin/components/elements/ReactSelect/index.scss
View File

@@ -1,7 +1,7 @@
@import '../../../scss/styles';
div.react-select {
div.rs__control {
.react-select {
.rs__control {
@include formInput;
height: auto;
padding-top: base(.25);

2
src/admin/components/elements/ReactSelect/index.tsx
View File

@@ -24,6 +24,7 @@ import { MultiValue } from './MultiValue';
import { SingleValue } from '../../forms/field-types/Relationship/select-components/SingleValue';
import { ValueContainer } from './ValueContainer';
import { ClearIndicator } from './ClearIndicator';
import { MultiValueRemove } from './MultiValueRemove';
import { Control } from './Control';
import './index.scss';
@@ -79,6 +80,7 @@ const SelectAdapter: React.FC<Props> = (props) => {
SingleValue,
MultiValue,
MultiValueLabel,
MultiValueRemove,
DropdownIndicator: Chevron,
ClearIndicator,
Control,

12
src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
View File

@@ -106,11 +106,13 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
>
{showTooltip && (
<Tooltip className={`${baseClass}__tooltip`}>
{t('addNewLabel', { label: relatedCollections[0].labels.singular })}
</Tooltip>
)}
<Tooltip
className={`${baseClass}__tooltip`}
show={showTooltip}
delay={350}
>
{t('addNewLabel', { label: relatedCollections[0].labels.singular })}
</Tooltip>
<Plus />
</DocumentDrawerToggler>
<DocumentDrawer onSave={onSave} />

28
src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
View File

@@ -1,9 +1,24 @@
@import '../../../../../../scss/styles.scss';
.multi-value-label {
.relationship--multi-value-label {
display: flex;
&__content {
@extend %small;
padding: 0 base(.125) 0 base(.25);
max-width: 150px;
color: currentColor;
display: flex;
align-items: center;
}
&__text {
text-overflow: ellipsis;
overflow: hidden;
}
&__drawer-toggler {
position: relative;
background: none;
border: none;
cursor: pointer;
@@ -22,15 +37,4 @@
background-color: var(--theme-elevation-100);
}
}
&__label {
padding: 0 base(.125) 0 base(.25);
max-width: 150px;
color: currentColor;
> * {
text-overflow: ellipsis;
overflow: hidden;
}
}
}

21
src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
View File

@@ -1,12 +1,14 @@
import React, { Fragment, useEffect } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { components, MultiValueProps } from 'react-select';
import { useDocumentDrawer } from '../../../../../elements/DocumentDrawer';
import Tooltip from '../../../../../elements/Tooltip';
import Edit from '../../../../../icons/Edit';
import { useAuth } from '../../../../../utilities/Auth';
import { Option } from '../../types';
import './index.scss';
const baseClass = 'multi-value-label';
const baseClass = 'relationship--multi-value-label';
export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
const {
@@ -22,6 +24,8 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
} = props;
const { permissions } = useAuth();
const [showTooltip, setShowTooltip] = useState(false);
const { t } = useTranslation('general');
const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read?.permission);
const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen }] = useDocumentDrawer({
@@ -35,10 +39,11 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
return (
<div className={baseClass}>
<div className={`${baseClass}__label`}>
<div className={`${baseClass}__content`}>
<components.MultiValueLabel
{...props}
innerProps={{
className: `${baseClass}__text`,
...draggableProps || {},
}}
/>
@@ -48,7 +53,17 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
<DocumentDrawerToggler
className={`${baseClass}__drawer-toggler`}
aria-label={`Edit ${label}`}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onClick={() => setShowTooltip(false)}
>
<Tooltip
className={`${baseClass}__tooltip`}
show={showTooltip}
delay={350}
>
{t('editLabel', { label: '' })}
</Tooltip>
<Edit />
</DocumentDrawerToggler>
<DocumentDrawer />

2
src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
View File

@@ -9,9 +9,11 @@
max-width: unset;
display: flex;
align-items: center;
overflow: visible;
}
&__drawer-toggler {
position: relative;
background: none;
border: none;
cursor: pointer;

16
src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
View File

@@ -1,6 +1,8 @@
import React, { Fragment, useEffect } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { components as SelectComponents, SingleValueProps } from 'react-select';
import { useDocumentDrawer } from '../../../../../elements/DocumentDrawer';
import Tooltip from '../../../../../elements/Tooltip';
import Edit from '../../../../../icons/Edit';
import { useAuth } from '../../../../../utilities/Auth';
import { Option } from '../../types';
@@ -23,6 +25,8 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
},
} = props;
const [showTooltip, setShowTooltip] = useState(false);
const { t } = useTranslation('general');
const { permissions } = useAuth();
const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read?.permission);
@@ -46,7 +50,17 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
className={`${baseClass}__drawer-toggler`}
aria-label={`Edit ${label}`}
onMouseDown={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
onClick={() => setShowTooltip(false)}
>
<Tooltip
className={`${baseClass}__tooltip`}
show={showTooltip}
delay={350}
>
{t('editLabel', { label: '' })}
</Tooltip>
<Edit />
</DocumentDrawerToggler>
</Fragment>

2
src/admin/scss/type.scss
View File

@@ -79,7 +79,7 @@
%small {
margin: 0;
font-size: base(.4);
font-size: 11px;
line-height: 1.5;
}