From 7d8e0c386468a1e222488e4c3def941a42d29f37 Mon Sep 17 00:00:00 2001 From: Daniel Lautzenheiser Date: Wed, 5 Apr 2023 14:39:23 -0400 Subject: [PATCH] Fix preview, delete, extras menu showing, media header, remove view controls from media library --- packages/core/dev-test/config.yml | 2 -- .../collections/CollectionHeader.tsx | 14 +++++++-- .../src/components/entry-editor/Editor.tsx | 3 -- .../entry-editor/EditorInterface.tsx | 20 +++++++++---- .../components/entry-editor/EditorToolbar.tsx | 14 +++++---- .../media-library/common/MediaLibrary.tsx | 29 +++++++++---------- packages/demo/public/config.yml | 2 -- 7 files changed, 48 insertions(+), 36 deletions(-) diff --git a/packages/core/dev-test/config.yml b/packages/core/dev-test/config.yml index 6c931bda..0c1d8ddf 100644 --- a/packages/core/dev-test/config.yml +++ b/packages/core/dev-test/config.yml @@ -844,8 +844,6 @@ collections: label: Site Settings file: _data/settings.json description: General Site Settings - editor: - preview: true fields: - label: Number of posts on frontpage name: front_limit diff --git a/packages/core/src/components/collections/CollectionHeader.tsx b/packages/core/src/components/collections/CollectionHeader.tsx index 18a528ed..34678df2 100644 --- a/packages/core/src/components/collections/CollectionHeader.tsx +++ b/packages/core/src/components/collections/CollectionHeader.tsx @@ -76,8 +76,18 @@ const CollectionHeader = ({ return ( <>
-

-
{icon}
+

+
{icon}
{pluralLabel}

{newEntryUrl ? ( diff --git a/packages/core/src/components/entry-editor/Editor.tsx b/packages/core/src/components/entry-editor/Editor.tsx index 908644c4..6c1e3632 100644 --- a/packages/core/src/components/entry-editor/Editor.tsx +++ b/packages/core/src/components/entry-editor/Editor.tsx @@ -47,7 +47,6 @@ const Editor: FC> = ({ displayUrl, isModification, draftKey, - showDelete, slug, localBackup, scrollSyncActive, @@ -292,7 +291,6 @@ const Editor: FC> = ({ onPersist={handlePersistEntry} onDelete={handleDeleteEntry} onDuplicate={handleDuplicateEntry} - showDelete={showDelete ?? true} hasChanged={hasChanged} displayUrl={displayUrl} isNewEntry={!slug} @@ -312,7 +310,6 @@ interface CollectionViewOwnProps { name: string; slug?: string; newRecord: boolean; - showDelete?: boolean; } function mapStateToProps(state: RootState, ownProps: CollectionViewOwnProps) { diff --git a/packages/core/src/components/entry-editor/EditorInterface.tsx b/packages/core/src/components/entry-editor/EditorInterface.tsx index a482b16e..1ee36f88 100644 --- a/packages/core/src/components/entry-editor/EditorInterface.tsx +++ b/packages/core/src/components/entry-editor/EditorInterface.tsx @@ -62,7 +62,6 @@ interface EditorInterfaceProps { onPersist: (opts?: EditorPersistOptions) => void; onDelete: () => Promise; onDuplicate: () => void; - showDelete: boolean; hasChanged: boolean; displayUrl: string | undefined; isNewEntry: boolean; @@ -78,7 +77,6 @@ const EditorInterface = ({ entry, fields = [], fieldsErrors, - showDelete, onDelete, onDuplicate, onPersist, @@ -99,6 +97,7 @@ const EditorInterface = ({ const [previewActive, setPreviewActive] = useState( localStorage.getItem(PREVIEW_VISIBLE) !== 'false', ); + const [i18nActive, setI18nActive] = useState( Boolean(localStorage.getItem(I18N_VISIBLE) !== 'false' && locales && locales.length > 0), ); @@ -137,13 +136,16 @@ const EditorInterface = ({ }, []); const [showPreviewToggle, previewInFrame] = useMemo(() => { + console.log('[PREVIEW] collection', collection); let preview = collection.editor?.preview ?? true; + console.log('[PREVIEW] preview', preview); let frame = collection.editor?.frame ?? true; if ('files' in collection) { const file = getFileFromSlug(collection, entry.slug); if (file?.editor?.preview !== undefined) { preview = file.editor.preview; + console.log('[PREVIEW] preview file', preview); } if (file?.editor?.frame !== undefined) { @@ -154,6 +156,11 @@ const EditorInterface = ({ return [preview, frame]; }, [collection, entry.slug]); + const finalPreviewActive = useMemo( + () => showPreviewToggle && previewActive, + [previewActive, showPreviewToggle], + ); + const collectHasI18n = hasI18n(collection); const editor = ( @@ -174,7 +181,7 @@ const EditorInterface = ({ fieldsErrors={fieldsErrors} locale={defaultLocale} submitted={submitted} - hideBorder={!previewActive && !i18nActive} + hideBorder={!finalPreviewActive && !i18nActive} t={t} />
@@ -240,6 +247,8 @@ const EditorInterface = ({ ); const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t }); + console.log('[PREVIEW] showPreviewToggle', showPreviewToggle); + return ( handleOnPersist({ createNew: true })} onPersistAndDuplicate={() => handleOnPersist({ createNew: true, duplicate: true })} onDelete={onDelete} - showDelete={showDelete} onDuplicate={onDuplicate} hasChanged={hasChanged} displayUrl={displayUrl} @@ -261,7 +269,7 @@ const EditorInterface = ({ isNewEntry={isNewEntry} isModification={isModification} showPreviewToggle={showPreviewToggle} - previewActive={previewActive} + previewActive={finalPreviewActive} scrollSyncActive={scrollSyncActive} showI18nToggle={collectHasI18n} i18nActive={i18nActive} @@ -274,7 +282,7 @@ const EditorInterface = ({ Promise; onPersistAndDuplicate: () => Promise; onDelete: () => Promise; - showDelete: boolean; onDuplicate: () => void; hasChanged: boolean; displayUrl: string | undefined; @@ -52,7 +51,6 @@ const EditorToolbar = ({ onPersistAndDuplicate, onPersistAndNew, isNewEntry, - showDelete, onDelete, t, showPreviewToggle, @@ -110,10 +108,17 @@ const EditorToolbar = ({ return items; }, [canCreate, isPublished, onDuplicate, onPersist, onPersistAndDuplicate, onPersistAndNew, t]); + console.log( + '[PREVIEW] showI18nToggle || showPreviewToggle || showDelete', + showI18nToggle, + showPreviewToggle, + canDelete, + ); + return useMemo( () => (
- {showI18nToggle || showPreviewToggle || showDelete ? ( + {showI18nToggle || showPreviewToggle || canDelete ? ( } @@ -154,7 +159,7 @@ const EditorToolbar = ({ )} - {showDelete && canDelete ? ( + {canDelete ? ( {t('editor.editorToolbar.deleteEntry')} @@ -174,7 +179,6 @@ const EditorToolbar = ({ [ showI18nToggle, showPreviewToggle, - showDelete, toggleI18n, i18nActive, t, diff --git a/packages/core/src/components/media-library/common/MediaLibrary.tsx b/packages/core/src/components/media-library/common/MediaLibrary.tsx index d326b60d..27acec49 100644 --- a/packages/core/src/components/media-library/common/MediaLibrary.tsx +++ b/packages/core/src/components/media-library/common/MediaLibrary.tsx @@ -4,7 +4,6 @@ import isEmpty from 'lodash/isEmpty'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { translate } from 'react-polyglot'; -import { changeViewStyle } from '@staticcms/core/actions/entries'; import { closeMediaLibrary, deleteMedia, @@ -16,20 +15,17 @@ import { import useMediaFiles from '@staticcms/core/lib/hooks/useMediaFiles'; import { fileExtension } from '@staticcms/core/lib/util'; import MediaLibraryCloseEvent from '@staticcms/core/lib/util/events/MediaLibraryCloseEvent'; -import { selectViewStyle } from '@staticcms/core/reducers/selectors/entries'; import { selectMediaLibraryState } from '@staticcms/core/reducers/selectors/mediaLibrary'; import { useAppDispatch, useAppSelector } from '@staticcms/core/store/hooks'; import alert from '../../common/alert/Alert'; import Button from '../../common/button/Button'; import confirm from '../../common/confirm/Confirm'; -import ViewStyleControl from '../../common/view-style/ViewStyleControl'; import CurrentMediaDetails from './CurrentMediaDetails'; import EmptyMessage from './EmptyMessage'; import FileUploadButton from './FileUploadButton'; import MediaLibraryCardGrid from './MediaLibraryCardGrid'; import MediaLibrarySearch from './MediaLibrarySearch'; -import type { ViewStyle } from '@staticcms/core/constants/views'; import type { MediaFile, TranslatedProps } from '@staticcms/core/interface'; import type { ChangeEvent, FC, KeyboardEvent } from 'react'; @@ -59,7 +55,6 @@ const MediaLibrary: FC> = ({ canInsert = fals const [query, setQuery] = useState(undefined); const dispatch = useAppDispatch(); - const viewStyle = useAppSelector(selectViewStyle); const { isVisible, displayURLs, @@ -86,13 +81,6 @@ const MediaLibrary: FC> = ({ canInsert = fals const files = useMediaFiles(field); - const handleViewStyleChange = useCallback( - (viewStyle: ViewStyle) => { - dispatch(changeViewStyle(viewStyle)); - }, - [dispatch], - ); - useEffect(() => { if (!prevIsVisible && isVisible) { setSelectedFile(null); @@ -378,10 +366,20 @@ const MediaLibrary: FC> = ({ canInsert = fals />
-

- +

+
- +
{t('app.header.media')}

> = ({ canInsert = fals />

- {canInsert ? (