diff --git a/packages/core/dev-test/config.yml b/packages/core/dev-test/config.yml index 5c1e57a2..4f5a0a85 100644 --- a/packages/core/dev-test/config.yml +++ b/packages/core/dev-test/config.yml @@ -82,6 +82,7 @@ collections: create: true editor: frame: false + size: half fields: - label: Question name: title diff --git a/packages/core/src/backend.ts b/packages/core/src/backend.ts index 14c91b26..928135fc 100644 --- a/packages/core/src/backend.ts +++ b/packages/core/src/backend.ts @@ -18,7 +18,7 @@ import { hasI18n, } from './lib/i18n'; import { getBackend, invokeEvent } from './lib/registry'; -import { sanitizeChar } from './lib/urlHelper'; +import { joinUrlPath, sanitizeChar } from './lib/urlHelper'; import { CURSOR_COMPATIBILITY_SYMBOL, Cursor, @@ -39,7 +39,11 @@ import { selectInferredField, selectMediaFolders, } from './lib/util/collection.util'; -import { selectMediaFilePath, selectMediaFilePublicPath } from './lib/util/media.util'; +import { + DRAFT_MEDIA_FILES, + selectMediaFilePath, + selectMediaFilePublicPath, +} from './lib/util/media.util'; import { selectCustomPath, slugFromCustomPath } from './lib/util/nested.util'; import { set } from './lib/util/object.util'; import { dateParsers, expandPath, extractTemplateVars } from './lib/widgets/stringTemplate'; @@ -84,7 +88,19 @@ function updateAssetProxies( // update media files path based on entry path const oldPath = asset.path; entryDraft.entry.path = path; - const newPath = selectMediaFilePath(config, collection, entryDraft.entry, oldPath, asset.field); + + const folderPath = joinUrlPath( + collection && 'folder' in collection ? collection.folder : '', + DRAFT_MEDIA_FILES, + ); + + const newPath = selectMediaFilePath( + config, + collection, + entryDraft.entry, + oldPath.replace(folderPath, ''), + asset.field, + ); asset.path = newPath; }); } diff --git a/packages/core/src/components/collections/CollectionSearch.tsx b/packages/core/src/components/collections/CollectionSearch.tsx index 907c14b8..55518109 100644 --- a/packages/core/src/components/collections/CollectionSearch.tsx +++ b/packages/core/src/components/collections/CollectionSearch.tsx @@ -146,25 +146,25 @@ const CollectionSearch = ({ type="text" id="first_name" className=" - block - w-full - p-1.5 - pl-10 - text-sm - text-gray-900 - border - border-gray-300 - rounded-lg - bg-gray-50 - focus-visible:outline-none - focus:ring-4 - focus:ring-gray-200 - dark:bg-gray-700 - dark:border-gray-600 - dark:placeholder-gray-400 - dark:text-white - dark:focus:ring-slate-700 - " + block + w-full + p-1.5 + pl-10 + text-sm + text-gray-800 + border + border-gray-300 + rounded-lg + bg-gray-50 + focus-visible:outline-none + focus:ring-4 + focus:ring-gray-200 + dark:bg-gray-700 + dark:border-gray-600 + dark:placeholder-gray-400 + dark:text-white + dark:focus:ring-slate-700 + " placeholder={t('collection.sidebar.searchAll')} onKeyDown={handleKeyDown} onBlur={handleBlur} @@ -185,7 +185,7 @@ const CollectionSearch = ({ rounded-md bg-white text-base - shadow-lg + shadow-md ring-1 ring-black ring-opacity-5 @@ -193,6 +193,7 @@ const CollectionSearch = ({ sm:text-sm z-40 dark:bg-slate-700 + dark:shadow-lg " >
diff --git a/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx b/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx index 4a31a3bb..c2b7847e 100644 --- a/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx +++ b/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx @@ -106,13 +106,6 @@ const EntryListingCardGrid: FC = ({ }, []); const getDefaultHeight = useCallback((data?: CollectionEntryData) => { - console.log( - 'DEFAULT HEIGHT', - data, - isNotNullish(data?.imageFieldName) - ? COLLECTION_CARD_HEIGHT - : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE, - ); return isNotNullish(data?.imageFieldName) ? COLLECTION_CARD_HEIGHT : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE; @@ -187,13 +180,6 @@ const EntryListingCardGrid: FC = ({ if (cardHeights[i] > rowHeight && cardHeights[i]) { rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN; - - console.log( - 'HEIGHT @index', - i, - cardHeights[i], - cardHeights[i] + COLLECTION_CARD_MARGIN, - ); } } @@ -201,8 +187,6 @@ const EntryListingCardGrid: FC = ({ rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN; } - console.log('HEIGHT', index, rowHeight); - return rowHeight; }} width={width} diff --git a/packages/core/src/components/collections/entries/EntryListingTable.tsx b/packages/core/src/components/collections/entries/EntryListingTable.tsx index f827477f..b9ca0969 100644 --- a/packages/core/src/components/collections/entries/EntryListingTable.tsx +++ b/packages/core/src/components/collections/entries/EntryListingTable.tsx @@ -77,7 +77,12 @@ const EntryListingTable: FC = ({ overflow-hidden p-1.5 bg-white + shadow-sm + border + border-gray-100 dark:bg-slate-800 + dark:border-gray-700/40 + dark:shadow-md rounded-xl " > diff --git a/packages/core/src/components/common/autocomplete/Autocomplete.tsx b/packages/core/src/components/common/autocomplete/Autocomplete.tsx index a0843a91..fcc08946 100644 --- a/packages/core/src/components/common/autocomplete/Autocomplete.tsx +++ b/packages/core/src/components/common/autocomplete/Autocomplete.tsx @@ -70,7 +70,7 @@ const Autocomplete = function ( min-h-8 p-0 w-full - text-gray-900 + text-gray-800 dark:text-gray-100 " data-testid="autocomplete-input-wrapper" @@ -99,7 +99,7 @@ const Autocomplete = function ( dark:text-gray-500 ` : ` - text-gray-900 + text-gray-800 dark:text-gray-100 `, )} @@ -144,7 +144,7 @@ const Autocomplete = function ( bg-white py-1 text-base - shadow-lg + shadow-md ring-1 ring-black ring-opacity-5 @@ -152,10 +152,11 @@ const Autocomplete = function ( sm:text-sm z-30 dark:bg-slate-700 + dark:shadow-lg `} > {options.length === 0 ? ( -
+
Nothing found.
) : ( @@ -179,7 +180,7 @@ const Autocomplete = function ( pl-10 pr-4 cursor-pointer - text-gray-900 + text-gray-800 dark:text-gray-100 `, (selected || active) && diff --git a/packages/core/src/components/common/card/Card.tsx b/packages/core/src/components/common/card/Card.tsx index e89682b3..10ac7a39 100644 --- a/packages/core/src/components/common/card/Card.tsx +++ b/packages/core/src/components/common/card/Card.tsx @@ -14,12 +14,14 @@ const Card = ({ children, className }: CardProps) => {
{ - return

{children}

; + return

{children}

; }; export default CardContent; diff --git a/packages/core/src/components/common/card/CardHeader.tsx b/packages/core/src/components/common/card/CardHeader.tsx index e1c77982..57a0fc60 100644 --- a/packages/core/src/components/common/card/CardHeader.tsx +++ b/packages/core/src/components/common/card/CardHeader.tsx @@ -8,7 +8,7 @@ interface CardHeaderProps { const CardHeader = ({ children }: CardHeaderProps) => { return ( -
+
{children}
); diff --git a/packages/core/src/components/common/menu/Menu.tsx b/packages/core/src/components/common/menu/Menu.tsx index b9988a4b..d7fd1259 100644 --- a/packages/core/src/components/common/menu/Menu.tsx +++ b/packages/core/src/components/common/menu/Menu.tsx @@ -97,7 +97,7 @@ const Menu = ({ rounded-md bg-white dark:bg-slate-800 - shadow-lg + shadow-md border border-gray-200 focus:outline-none @@ -105,6 +105,7 @@ const Menu = ({ divide-gray-100 dark:border-gray-700 dark:divide-gray-600 + dark:shadow-lg `, onClick: handleClose, }, diff --git a/packages/core/src/components/common/menu/MenuItemButton.tsx b/packages/core/src/components/common/menu/MenuItemButton.tsx index 18cc1949..0d422212 100644 --- a/packages/core/src/components/common/menu/MenuItemButton.tsx +++ b/packages/core/src/components/common/menu/MenuItemButton.tsx @@ -46,11 +46,11 @@ const MenuItemButton = ({ items-center justify-between cursor-pointer - dark:disabled:text-gray-700 + dark:disabled:text-gray-800 `, color === 'default' && ` - text-gray-700 + text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-600 diff --git a/packages/core/src/components/common/menu/MenuItemLink.tsx b/packages/core/src/components/common/menu/MenuItemLink.tsx index ed1c7f6c..026a3d4b 100644 --- a/packages/core/src/components/common/menu/MenuItemLink.tsx +++ b/packages/core/src/components/common/menu/MenuItemLink.tsx @@ -36,7 +36,7 @@ const MenuItemLink = ({ px-4 py-2 text-sm - text-gray-700 + text-gray-800 dark:text-gray-300 w-full text-left diff --git a/packages/core/src/components/common/pill/Pill.tsx b/packages/core/src/components/common/pill/Pill.tsx index 0cc492d3..dcfeab5c 100644 --- a/packages/core/src/components/common/pill/Pill.tsx +++ b/packages/core/src/components/common/pill/Pill.tsx @@ -45,7 +45,7 @@ const Pill: FC = ({ ` : ` bg-gray-200 - text-gray-900 + text-gray-800 dark:bg-gray-700 dark:text-gray-100 `; diff --git a/packages/core/src/components/common/select/Option.tsx b/packages/core/src/components/common/select/Option.tsx index 7c8da415..67b7719d 100644 --- a/packages/core/src/components/common/select/Option.tsx +++ b/packages/core/src/components/common/select/Option.tsx @@ -40,7 +40,7 @@ const Option = function ({ py-2 px-4 cursor-pointer - text-gray-900 + text-gray-800 hover:bg-blue-500 dark:text-gray-100 `, diff --git a/packages/core/src/components/common/select/Select.tsx b/packages/core/src/components/common/select/Select.tsx index c0bada1d..e9c819d2 100644 --- a/packages/core/src/components/common/select/Select.tsx +++ b/packages/core/src/components/common/select/Select.tsx @@ -136,7 +136,7 @@ const Select = forwardRef( px-4 py-1.5 w-full - text-gray-900 + text-gray-800 dark:text-gray-100 `, disabled && @@ -154,7 +154,7 @@ const Select = forwardRef( bg-white py-1 text-base - shadow-lg + shadow-md ring-1 ring-black ring-opacity-5 @@ -162,6 +162,7 @@ const Select = forwardRef( sm:text-sm z-50 dark:bg-slate-700 + dark:shadow-lg `, style: { width }, disablePortal: false, diff --git a/packages/core/src/components/common/switch/Switch.tsx b/packages/core/src/components/common/switch/Switch.tsx index 1b7c2012..f06ddd33 100644 --- a/packages/core/src/components/common/switch/Switch.tsx +++ b/packages/core/src/components/common/switch/Switch.tsx @@ -86,7 +86,7 @@ const Switch = forwardRef( ml-3 text-sm font-medium - text-gray-900 + text-gray-800 dark:text-gray-300 " > diff --git a/packages/core/src/components/common/table/Table.tsx b/packages/core/src/components/common/table/Table.tsx index 0b8e6bfc..194f3fc8 100644 --- a/packages/core/src/components/common/table/Table.tsx +++ b/packages/core/src/components/common/table/Table.tsx @@ -13,13 +13,12 @@ const TableCell = ({ columns, children }: TableCellProps) => { return (
- + {columns.map((column, index) => ( {column} ))} diff --git a/packages/core/src/components/common/table/TableCell.tsx b/packages/core/src/components/common/table/TableCell.tsx index 2e241b6a..6617ca02 100644 --- a/packages/core/src/components/common/table/TableCell.tsx +++ b/packages/core/src/components/common/table/TableCell.tsx @@ -42,7 +42,7 @@ const TableCell = ({ children, emphasis = false, to, shrink = false }: TableCell text-gray-500 dark:text-gray-300 `, - emphasis && 'font-medium text-gray-900 whitespace-nowrap dark:text-white', + emphasis && 'font-medium text-gray-800 whitespace-nowrap dark:text-white', shrink && 'w-0', )} > diff --git a/packages/core/src/components/common/table/TableHeaderCell.tsx b/packages/core/src/components/common/table/TableHeaderCell.tsx index 22e2d469..18c297af 100644 --- a/packages/core/src/components/common/table/TableHeaderCell.tsx +++ b/packages/core/src/components/common/table/TableHeaderCell.tsx @@ -27,14 +27,13 @@ const TableHeaderCell = ({ children }: TableHeaderCellProps) => { className=" px-4 py-3 - text-gray-900 + text-gray-800 border-gray-100 border-b bg-white dark:text-white dark:border-gray-700 dark:bg-slate-800 - shadow-sm text-[14px] " > diff --git a/packages/core/src/components/common/text-field/TextArea.tsx b/packages/core/src/components/common/text-field/TextArea.tsx index e51b12ed..ba837731 100644 --- a/packages/core/src/components/common/text-field/TextArea.tsx +++ b/packages/core/src/components/common/text-field/TextArea.tsx @@ -75,7 +75,7 @@ const TextArea = forwardRef( outline-none text-sm font-medium - text-gray-900 + text-gray-800 dark:text-gray-100 disabled:text-gray-300 dark:disabled:text-gray-500 diff --git a/packages/core/src/components/common/text-field/TextField.tsx b/packages/core/src/components/common/text-field/TextField.tsx index 190860a7..8d724239 100644 --- a/packages/core/src/components/common/text-field/TextField.tsx +++ b/packages/core/src/components/common/text-field/TextField.tsx @@ -86,7 +86,7 @@ const TextField: FC = ({ bg-transparent outline-none font-medium - text-gray-900 + text-gray-800 disabled:text-gray-300 dark:text-gray-100 dark:disabled:text-gray-500 @@ -96,7 +96,7 @@ const TextField: FC = ({ bg-gray-50 border border-gray-300 - text-gray-900 + text-gray-800 rounded-lg focus:ring-blue-500 focus:border-blue-500 diff --git a/packages/core/src/components/entry-editor/EditorInterface.tsx b/packages/core/src/components/entry-editor/EditorInterface.tsx index 463b7de6..1c5ffd11 100644 --- a/packages/core/src/components/entry-editor/EditorInterface.tsx +++ b/packages/core/src/components/entry-editor/EditorInterface.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { ScrollSyncPane } from 'react-scroll-sync'; +import { EDITOR_SIZE_COMPACT } from '@staticcms/core/constants/views'; import useBreadcrumbs from '@staticcms/core/lib/hooks/useBreadcrumbs'; import { getI18nInfo, getPreviewEntry, hasI18n } from '@staticcms/core/lib/i18n'; import classNames from '@staticcms/core/lib/util/classNames.util'; @@ -138,9 +139,10 @@ const EditorInterface = ({ setSelectedLocale(locale); }, []); - const [showPreviewToggle, previewInFrame] = useMemo(() => { + const [showPreviewToggle, previewInFrame, editorSize] = useMemo(() => { let preview = collection.editor?.preview ?? true; let frame = collection.editor?.frame ?? true; + let size = collection.editor?.size ?? EDITOR_SIZE_COMPACT; if ('files' in collection) { const file = getFileFromSlug(collection, entry.slug); @@ -151,9 +153,13 @@ const EditorInterface = ({ if (file?.editor?.frame !== undefined) { frame = file.editor.frame; } + + if (file?.editor?.size !== undefined) { + size = file.editor.size; + } } - return [preview, frame]; + return [preview, frame, size]; }, [collection, entry.slug]); const finalPreviewActive = useMemo( @@ -226,13 +232,22 @@ const EditorInterface = ({ : entry; const editorWithPreview = ( -
+
{editor}
); diff --git a/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx b/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx index ede5b65f..2e6d75e7 100644 --- a/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx +++ b/packages/core/src/components/entry-editor/editor-preview-pane/EditorPreviewPane.tsx @@ -4,17 +4,20 @@ import Frame from 'react-frame-component'; import { translate } from 'react-polyglot'; import { ScrollSyncPane } from 'react-scroll-sync'; +import { EDITOR_SIZE_COMPACT } from '@staticcms/core/constants/views'; import { getPreviewStyles, getPreviewTemplate } from '@staticcms/core/lib/registry'; +import classNames from '@staticcms/core/lib/util/classNames.util'; import { selectTemplateName } from '@staticcms/core/lib/util/collection.util'; import { selectConfig } from '@staticcms/core/reducers/selectors/config'; import { selectTheme } from '@staticcms/core/reducers/selectors/globalUI'; import { useAppSelector } from '@staticcms/core/store/hooks'; -import useWidgetsFor from '../../common/widget/useWidgetsFor'; import ErrorBoundary from '../../ErrorBoundary'; +import useWidgetsFor from '../../common/widget/useWidgetsFor'; import EditorPreview from './EditorPreview'; import EditorPreviewContent from './EditorPreviewContent'; import PreviewFrameContent from './PreviewFrameContent'; +import type { EditorSize } from '@staticcms/core/constants/views'; import type { Collection, Entry, @@ -51,7 +54,7 @@ const FrameGlobalStyles = ` color: rgb(59 130 246); } - .text-gray-900 { + .text-gray-800 { color: rgb(17 24 39); } @@ -103,10 +106,11 @@ export interface EditorPreviewPaneProps { fields: Field[]; entry: Entry; previewInFrame: boolean; + editorSize: EditorSize; } const PreviewPane = (props: TranslatedProps) => { - const { entry, collection, fields, previewInFrame, t } = props; + const { editorSize, entry, collection, fields, previewInFrame, t } = props; const config = useAppSelector(selectConfig); @@ -168,7 +172,17 @@ const PreviewPane = (props: TranslatedProps) => { } return createPortal( -
+
{!entry || !entry.data ? null : ( {previewInFrame ? ( @@ -191,7 +205,15 @@ const PreviewPane = (props: TranslatedProps) => { ) : ( -
+
{!collection ? ( t('collection.notFound') ) : ( @@ -216,6 +238,7 @@ const PreviewPane = (props: TranslatedProps) => { }, [ collection, config, + editorSize, element, entry, initialFrameContent, diff --git a/packages/core/src/components/entry-editor/editor-preview-pane/PreviewFrameContent.tsx b/packages/core/src/components/entry-editor/editor-preview-pane/PreviewFrameContent.tsx index ff49c8f6..60ead1ad 100644 --- a/packages/core/src/components/entry-editor/editor-preview-pane/PreviewFrameContent.tsx +++ b/packages/core/src/components/entry-editor/editor-preview-pane/PreviewFrameContent.tsx @@ -40,7 +40,7 @@ const PreviewFrameContent: FC = ({ previewComponent, p
diff --git a/packages/core/src/components/entry-editor/widgets/Unknown/UnknownControl.tsx b/packages/core/src/components/entry-editor/widgets/Unknown/UnknownControl.tsx index a0b5a7ad..f7a2f7f8 100644 --- a/packages/core/src/components/entry-editor/widgets/Unknown/UnknownControl.tsx +++ b/packages/core/src/components/entry-editor/widgets/Unknown/UnknownControl.tsx @@ -10,7 +10,7 @@ const UnknownControl = ({ field, t }: TranslatedProps diff --git a/packages/core/src/components/media-library/common/FolderCreationDialog.tsx b/packages/core/src/components/media-library/common/FolderCreationDialog.tsx index f74ccf62..7280bcb5 100644 --- a/packages/core/src/components/media-library/common/FolderCreationDialog.tsx +++ b/packages/core/src/components/media-library/common/FolderCreationDialog.tsx @@ -65,7 +65,7 @@ const FolderCreationDialog: FC> = ({ className=" text-xl font-semibold - text-gray-900 + text-gray-800 dark:text-white " > diff --git a/packages/core/src/components/media-library/common/InlineEditTextField.tsx b/packages/core/src/components/media-library/common/InlineEditTextField.tsx index 71b5aa81..485d014c 100644 --- a/packages/core/src/components/media-library/common/InlineEditTextField.tsx +++ b/packages/core/src/components/media-library/common/InlineEditTextField.tsx @@ -140,7 +140,7 @@ const InlineEditTextField: FC = ({ p-1.5 -ml-1.5 text-sm - text-gray-900 + text-gray-800 border border-gray-300 rounded-md diff --git a/packages/core/src/components/media-library/common/MediaLibrarySearch.tsx b/packages/core/src/components/media-library/common/MediaLibrarySearch.tsx index d10db5fa..759d7a05 100644 --- a/packages/core/src/components/media-library/common/MediaLibrarySearch.tsx +++ b/packages/core/src/components/media-library/common/MediaLibrarySearch.tsx @@ -27,7 +27,7 @@ const MediaLibrarySearch = ({ > @@ -44,7 +44,7 @@ const MediaLibrarySearch = ({ p-1.5 pl-10 text-sm - text-gray-900 + text-gray-800 border border-gray-300 rounded-lg diff --git a/packages/core/src/components/navbar/Navbar.tsx b/packages/core/src/components/navbar/Navbar.tsx index acd90c43..37f991fc 100644 --- a/packages/core/src/components/navbar/Navbar.tsx +++ b/packages/core/src/components/navbar/Navbar.tsx @@ -41,7 +41,16 @@ const Navbar = ({ }, [dispatch]); return ( -