From a2e57b09f2e89aa64a413eb496d5aeb565d4fc6e Mon Sep 17 00:00:00 2001 From: James Mikrut Date: Sun, 16 May 2021 13:04:29 -0400 Subject: [PATCH] fix: misc responsive improvements, date clipping in sidebar (#165), express-fileupload schema validation (#180) * fix: misc responsive improvements * fix: date clipping in sidebar * fix: revises popup * fix: admin _verified field not displaying proper field value * fix: properly typed express-fileupload config options --- demo/collections/AllFields.ts | 38 +++--- .../elements/DatePicker/DatePicker.tsx | 13 +- .../components/elements/DatePicker/index.scss | 30 ++--- .../components/elements/Localizer/index.tsx | 2 +- .../components/elements/Popup/index.scss | 3 +- src/admin/components/elements/Popup/index.tsx | 2 - src/admin/components/elements/Popup/types.ts | 1 - .../DraggableSection/ActionPanel/index.tsx | 4 +- src/admin/components/forms/Error/index.scss | 4 +- src/admin/components/forms/Error/index.tsx | 4 +- .../forms/field-types/Array/Array.tsx | 6 +- .../forms/field-types/Array/index.scss | 9 ++ .../forms/field-types/Blocks/Blocks.tsx | 8 +- .../forms/field-types/Blocks/index.scss | 9 ++ .../forms/field-types/Checkbox/index.scss | 5 + .../forms/field-types/Checkbox/index.tsx | 10 +- .../forms/field-types/Code/index.scss | 1 + .../field-types/ConfirmPassword/index.scss | 1 + .../forms/field-types/DateTime/index.scss | 2 + .../forms/field-types/Email/index.scss | 2 +- .../forms/field-types/Number/index.scss | 1 + .../forms/field-types/Password/index.scss | 1 + .../forms/field-types/RadioGroup/index.scss | 6 + .../forms/field-types/RadioGroup/index.tsx | 10 +- .../forms/field-types/Relationship/index.scss | 1 + .../forms/field-types/RichText/index.scss | 1 + .../forms/field-types/Row/index.scss | 1 + .../forms/field-types/Select/index.scss | 1 + .../forms/field-types/Text/index.scss | 1 + .../forms/field-types/Textarea/index.scss | 1 + .../forms/field-types/Upload/index.scss | 8 +- .../components/forms/useFieldType/index.scss | 33 ----- .../components/forms/useFieldType/index.tsx | 2 - .../components/views/Account/Default.tsx | 112 ++++++++-------- src/admin/components/views/Account/index.scss | 51 ++++--- src/admin/components/views/Global/Default.tsx | 36 ++--- src/admin/components/views/Global/index.scss | 56 ++++---- .../views/collections/Edit/Auth/APIKey.tsx | 1 - .../views/collections/Edit/Auth/index.scss | 2 + .../views/collections/Edit/Default.tsx | 124 +++++++++--------- .../views/collections/Edit/index.scss | 55 ++++---- src/config/schema.ts | 8 +- src/config/types.ts | 7 +- .../baseFields/baseVerificationFields.ts | 4 +- 44 files changed, 356 insertions(+), 321 deletions(-) delete mode 100644 src/admin/components/forms/useFieldType/index.scss diff --git a/demo/collections/AllFields.ts b/demo/collections/AllFields.ts index 4569bb991d..92a1f7348d 100644 --- a/demo/collections/AllFields.ts +++ b/demo/collections/AllFields.ts @@ -245,25 +245,6 @@ const AllFields: PayloadCollectionConfig = { label: 'Textarea', name: 'textarea', }, - { - name: 'slug', - type: 'text', - label: 'Slug', - admin: { - position: 'sidebar', - }, - localized: true, - unique: true, - required: true, - }, - { - name: 'checkbox', - type: 'checkbox', - label: 'Checkbox', - admin: { - position: 'sidebar', - }, - }, { name: 'richText', type: 'richText', @@ -290,6 +271,25 @@ const AllFields: PayloadCollectionConfig = { ], }, }, + { + name: 'slug', + type: 'text', + label: 'Slug', + admin: { + position: 'sidebar', + }, + localized: true, + unique: true, + required: true, + }, + { + name: 'checkbox', + type: 'checkbox', + label: 'Checkbox', + admin: { + position: 'sidebar', + }, + }, { name: 'dateFieldExample', label: 'Day and Time', diff --git a/src/admin/components/elements/DatePicker/DatePicker.tsx b/src/admin/components/elements/DatePicker/DatePicker.tsx index 64701431ec..abd0293ac0 100644 --- a/src/admin/components/elements/DatePicker/DatePicker.tsx +++ b/src/admin/components/elements/DatePicker/DatePicker.tsx @@ -58,10 +58,19 @@ const DateTime: React.FC = (props) => { return (
-
- +
+
+ +
); }; diff --git a/src/admin/components/elements/DatePicker/index.scss b/src/admin/components/elements/DatePicker/index.scss index b1b364a5dc..9547dfc817 100644 --- a/src/admin/components/elements/DatePicker/index.scss +++ b/src/admin/components/elements/DatePicker/index.scss @@ -8,6 +8,21 @@ $cal-icon-width: 18px; width: 120px; } + &__icon-wrap { + position: relative; + z-index: 2; + + .icon { + pointer-events: none; + position: absolute; + right: base(.75); + top: base(.625); + width: $cal-icon-width; + height: auto; + @include color-svg($color-dark-gray); + } + } + &__appearance--timeOnly { .react-datepicker { width: 100%; @@ -35,21 +50,6 @@ $cal-icon-width: 18px; } } - &__input-wrapper { - position: relative; - - .icon { - pointer-events: none; - position: absolute; - right: base(.75); - top: 50%; - transform: translateY(-50%); - width: $cal-icon-width; - height: auto; - @include color-svg($color-dark-gray); - } - } - .react-datepicker-wrapper { display: block; } diff --git a/src/admin/components/elements/Localizer/index.tsx b/src/admin/components/elements/Localizer/index.tsx index 557a89fce3..ed6bb4323c 100644 --- a/src/admin/components/elements/Localizer/index.tsx +++ b/src/admin/components/elements/Localizer/index.tsx @@ -22,7 +22,7 @@ const Localizer: React.FC = () => { return (
(
diff --git a/src/admin/components/elements/Popup/index.scss b/src/admin/components/elements/Popup/index.scss index a97e6f84be..61f398cf7f 100644 --- a/src/admin/components/elements/Popup/index.scss +++ b/src/admin/components/elements/Popup/index.scss @@ -46,7 +46,7 @@ @include shadow-sm; } - &.popup--align-left { + &.popup--h-align-left { .popup__content { left: - base(.5); @@ -175,6 +175,7 @@ top: unset; bottom: calc(100% - 1px); border-top-color: transparent !important; + border-bottom-color: white; } } diff --git a/src/admin/components/elements/Popup/index.tsx b/src/admin/components/elements/Popup/index.tsx index 3c69e69aea..49b0fe01e6 100644 --- a/src/admin/components/elements/Popup/index.tsx +++ b/src/admin/components/elements/Popup/index.tsx @@ -13,7 +13,6 @@ const baseClass = 'popup'; const Popup: React.FC = (props) => { const { render, - align = 'center', size = 'small', color = 'light', button, @@ -88,7 +87,6 @@ const Popup: React.FC = (props) => { const classes = [ baseClass, - `${baseClass}--align-${align}`, `${baseClass}--size-${size}`, `${baseClass}--color-${color}`, `${baseClass}--v-align-${verticalAlign}`, diff --git a/src/admin/components/elements/Popup/types.ts b/src/admin/components/elements/Popup/types.ts index 84d6a26776..1d03935f35 100644 --- a/src/admin/components/elements/Popup/types.ts +++ b/src/admin/components/elements/Popup/types.ts @@ -1,7 +1,6 @@ export type Props = { render?: (any) => void, children?: React.ReactNode, - align?: 'left' | 'center' | 'right', horizontalAlign?: 'left' | 'center' | 'right', size?: 'small' | 'large' | 'wide', color?: 'light' | 'dark', diff --git a/src/admin/components/forms/DraggableSection/ActionPanel/index.tsx b/src/admin/components/forms/DraggableSection/ActionPanel/index.tsx index 06135a15b0..a62b6e9f4d 100644 --- a/src/admin/components/forms/DraggableSection/ActionPanel/index.tsx +++ b/src/admin/components/forms/DraggableSection/ActionPanel/index.tsx @@ -31,7 +31,7 @@ const ActionPanel: React.FC = (props) => { showOnHover size="wide" color="dark" - horizontalAlign="center" + horizontalAlign="right" buttonType="custom" button={(
diff --git a/src/admin/components/views/Account/index.scss b/src/admin/components/views/Account/index.scss index 6852408359..34d28b368d 100644 --- a/src/admin/components/views/Account/index.scss +++ b/src/admin/components/views/Account/index.scss @@ -4,20 +4,14 @@ width: 100%; &__form { - display: flex; - align-items: stretch; - } - - &__main, - &__sidebar { - width: auto; - min-width: 0; + height: 100%; } &__main { - flex-grow: 1; + width: calc(100% - #{base(15)}); display: flex; flex-direction: column; + min-height: 100%; } &__header { @@ -44,24 +38,34 @@ padding: base(5) base(6) base(6); margin-bottom: base(1.5); flex-grow: 1; + overflow-x: scroll; + } + + &__sidebar-wrap { + position: fixed; + width: base(15); + height: 100%; + top: 0; + right: 0; + overflow: visible; } &__sidebar { - padding-bottom: base(1); - width: base(15); + width: 100%; + height: 100%; + overflow-y: auto; + } + + &__sidebar-sticky-wrap { display: flex; flex-direction: column; - overflow: auto; - height: 100vh; - flex-grow: 0; - flex-shrink: 0; + min-height: 100%; } &__collection-actions, &__document-actions, &__meta, - &__sidebar-fields, - &__api-url { + &__sidebar-fields { padding-left: base(1.5); } @@ -109,7 +113,7 @@ } &__meta { - margin: auto 0 0; + margin: auto 0 $baseline; padding-top: $baseline; list-style: none; @@ -142,6 +146,17 @@ } @include mid-break { + &__main { + width: 100%; + min-height: initial; + } + + &__sidebar-wrap { + position: static; + width: 100%; + height: initial; + } + &__form { display: block; } diff --git a/src/admin/components/views/Global/Default.tsx b/src/admin/components/views/Global/Default.tsx index d72614ce11..7cc0de9a41 100644 --- a/src/admin/components/views/Global/Default.tsx +++ b/src/admin/components/views/Global/Default.tsx @@ -66,8 +66,8 @@ const DefaultGlobalView: React.FC = (props) => { /> -
-
+
+
= (props) => { Save )}
- {data && ( -
- - API URL - {' '} - - - - {apiURL} - -
- )}
= (props) => {
{data && (
    + {data && ( +
  • + + API URL + {' '} + + + + {apiURL} + +
    • + )} {data.updatedAt && (
  • Last Modified
    diff --git a/src/admin/components/views/Global/index.scss b/src/admin/components/views/Global/index.scss index e10af100fa..836f72b67e 100644 --- a/src/admin/components/views/Global/index.scss +++ b/src/admin/components/views/Global/index.scss @@ -4,20 +4,14 @@ width: 100%; &__form { - display: flex; - align-items: stretch; - } - - &__main, - &__sidebar { - width: auto; - min-width: 0; + height: 100%; } &__main { + width: calc(100% - #{base(15)}); display: flex; flex-direction: column; - flex-grow: 1; + min-height: 100%; } &__header { @@ -44,34 +38,34 @@ padding: base(5) base(6) base(6); margin-bottom: base(1.5); flex-grow: 1; + overflow-x: scroll; + } + + &__sidebar-wrap { + position: fixed; + width: base(15); + height: 100%; + top: 0; + right: 0; + overflow: visible; } &__sidebar { - width: base(15); - flex-grow: 0; - flex-shrink: 0; - } - - &__sidebar-sticky { - position: sticky; - top: 0; - height: 100vh; - overflow: auto; + width: 100%; + height: 100%; + overflow-y: auto; } &__sidebar-sticky-wrap { display: flex; flex-direction: column; min-height: 100%; - padding-top: base(3); - padding-bottom: base(1); } &__collection-actions, &__document-actions, &__meta, - &__sidebar-fields, - &__api-url { + &__sidebar-fields { padding-left: base(1.5); } @@ -119,7 +113,7 @@ } &__meta { - margin: auto 0 0; + margin: auto 0 $baseline; padding-top: $baseline; list-style: none; @@ -158,8 +152,15 @@ } @include mid-break { - &__sidebar { - width: unset; + &__main { + width: 100%; + min-height: initial; + } + + &__sidebar-wrap { + position: static; + width: 100%; + height: initial; } &__form { @@ -181,8 +182,7 @@ &__document-actions, &__meta, - &__sidebar-fields, - &__api-url { + &__sidebar-fields { padding-left: $baseline; } diff --git a/src/admin/components/views/collections/Edit/Auth/APIKey.tsx b/src/admin/components/views/collections/Edit/Auth/APIKey.tsx index 9cdd099324..bcbfad2bca 100644 --- a/src/admin/components/views/collections/Edit/Auth/APIKey.tsx +++ b/src/admin/components/views/collections/Edit/Auth/APIKey.tsx @@ -6,7 +6,6 @@ import CopyToClipboard from '../../../../elements/CopyToClipboard'; import { text } from '../../../../../../fields/validations'; import { useWatchForm } from '../../../../forms/Form/context'; -import './index.scss'; import GenerateConfirmation from '../../../../elements/GenerateConfirmation'; const path = 'apiKey'; diff --git a/src/admin/components/views/collections/Edit/Auth/index.scss b/src/admin/components/views/collections/Edit/Auth/index.scss index 44cbdb882d..3d5c4bdd72 100644 --- a/src/admin/components/views/collections/Edit/Auth/index.scss +++ b/src/admin/components/views/collections/Edit/Auth/index.scss @@ -16,6 +16,8 @@ } .field-type.api-key { + margin-bottom: $baseline; + input { @include formInput; } diff --git a/src/admin/components/views/collections/Edit/Default.tsx b/src/admin/components/views/collections/Edit/Default.tsx index 0e68805243..1ee00f7c4b 100644 --- a/src/admin/components/views/collections/Edit/Default.tsx +++ b/src/admin/components/views/collections/Edit/Default.tsx @@ -80,63 +80,63 @@ const DefaultEditView: React.FC = (props) => {
    {isLoading && ( - + )} {!isLoading && ( - -
    -

    - -

    -
    - {auth && ( - - )} - {upload && ( - - )} - (!field?.admin?.position || (field?.admin?.position !== 'sidebar'))} - fieldTypes={fieldTypes} - fieldSchema={fields} - /> -     + +
    +

    + +

    +
    + {auth && ( + + )} + {upload && ( + + )} + (!field?.admin?.position || (field?.admin?.position !== 'sidebar'))} + fieldTypes={fieldTypes} + fieldSchema={fields} + /> +     )}
-
-
+
+
{isEditing ? (
    {(permissions?.create?.permission) && ( - -
  • Create New
    • - {!disableDuplicate && ( -
    • - )} -     + +
  • Create New
    • + {!disableDuplicate && ( +
    • + )} +     )} {permissions?.delete?.permission && ( -
  • - -
    • +
  • + +
    • )}
) : undefined} @@ -148,25 +148,9 @@ const DefaultEditView: React.FC = (props) => { /> )} {hasSavePermission && ( - Save + Save )}
- {isEditing && ( -
- - API URL - {' '} - - - - {apiURL} - -
- )} {!isLoading && (
@@ -181,6 +165,20 @@ const DefaultEditView: React.FC = (props) => {
{isEditing && (
    +
  • + + API URL + {' '} + + + + {apiURL} + +
  • ID
    {id}
    diff --git a/src/admin/components/views/collections/Edit/index.scss b/src/admin/components/views/collections/Edit/index.scss index a03a71ff4d..983fc7d81e 100644 --- a/src/admin/components/views/collections/Edit/index.scss +++ b/src/admin/components/views/collections/Edit/index.scss @@ -4,20 +4,14 @@ width: 100%; &__form { - display: flex; - align-items: stretch; - } - - &__main, - &__sidebar { - width: auto; - min-width: 0; + height: 100%; } &__main { + width: calc(100% - #{base(15)}); display: flex; flex-direction: column; - flex-grow: 1; + min-height: 100%; } &__header { @@ -44,20 +38,23 @@ background: white; padding: base(5) base(6) base(6); margin-bottom: base(1.5); + overflow-x: scroll; flex-grow: 1; } - &__sidebar { + &__sidebar-wrap { + position: fixed; width: base(15); - flex-grow: 0; - flex-shrink: 0; + height: 100%; + top: 0; + right: 0; + overflow: visible; } - &__sidebar-sticky { - position: sticky; - top: 0; - height: 100vh; - overflow: auto; + &__sidebar { + width: 100%; + height: 100%; + overflow-y: auto; } &__sidebar-sticky-wrap { @@ -69,8 +66,7 @@ &__collection-actions, &__document-actions, &__meta, - &__sidebar-fields, - &__api-url { + &__sidebar-fields { padding-left: base(1.5); } @@ -79,6 +75,7 @@ padding-right: $baseline; position: sticky; top: 0; + z-index: $z-nav; } &__document-actions--with-preview { @@ -160,13 +157,15 @@ } @include mid-break { - &__sidebar { - width: unset; + &__main { + width: 100%; + min-height: initial; } - &__sidebar-sticky { - height: auto; - overflow: hidden; + &__sidebar-wrap { + position: static; + width: 100%; + height: initial; } &__form { @@ -176,7 +175,6 @@ &__edit { padding: $baseline; margin-bottom: $baseline; - overflow: scroll; } &__document-actions { @@ -190,15 +188,10 @@ &__document-actions, &__meta, - &__sidebar-fields, - &__api-url { + &__sidebar-fields { padding-left: $baseline; } - &__api-url { - margin-bottom: base(.5); - } - &__collection-actions { margin-top: base(.5); padding-left: $baseline; diff --git a/src/config/schema.ts b/src/config/schema.ts index 616bd19e42..96e9c426eb 100644 --- a/src/config/schema.ts +++ b/src/config/schema.ts @@ -83,13 +83,7 @@ export default joi.object({ middleware: joi.array().items(joi.func()), }), local: joi.boolean(), - upload: joi.object() - .keys({ - limits: joi.object() - .keys({ - fileSize: joi.number(), - }), - }), + upload: joi.object(), rateLimit: joi.object() .keys({ window: joi.number(), diff --git a/src/config/types.ts b/src/config/types.ts index f8c42ae45c..10cb7e6925 100644 --- a/src/config/types.ts +++ b/src/config/types.ts @@ -1,6 +1,7 @@ import { Express } from 'express'; import { DeepRequired } from 'ts-essentials'; import { Transporter } from 'nodemailer'; +import { Options } from 'express-fileupload'; import { Configuration } from 'webpack'; import SMTPConnection from 'nodemailer/lib/smtp-connection'; import GraphQL from 'graphql'; @@ -125,11 +126,7 @@ export type PayloadConfig = { trustProxy?: boolean; skip?: (req: PayloadRequest) => boolean; }; - upload?: { - limits?: { - fileSize?: number; - }; - }; + upload?: Options; localization?: { locales: string[] defaultLocale: string diff --git a/src/fields/baseFields/baseVerificationFields.ts b/src/fields/baseFields/baseVerificationFields.ts index d503480e6f..79499a20a9 100644 --- a/src/fields/baseFields/baseVerificationFields.ts +++ b/src/fields/baseFields/baseVerificationFields.ts @@ -25,7 +25,9 @@ export default [ read: ({ req: { user } }) => Boolean(user), }, admin: { - disabled: true, + components: { + Field: () => null, + }, }, }, {