Fix preview, delete, extras menu showing, media header, remove view controls from media library

2023-04-05 14:39:23 -04:00 · 2023-04-05 14:39:23 -04:00 · 7d8e0c3864
commit 7d8e0c3864
parent 31b5588251
7 changed files with 48 additions and 36 deletions
--- 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
--- a/packages/core/src/components/collections/CollectionHeader.tsx
+++ b/packages/core/src/components/collections/CollectionHeader.tsx
@ -76,8 +76,18 @@ const CollectionHeader = ({
  return (
    <>
      <div className="flex flex-grow gap-4">
-        <h2 className="text-xl font-semibold flex items-center text-gray-800 dark:text-gray-300">
-          <div className="mr-2 flex">{icon}</div>
+        <h2
+          className="
+            text-xl
+            font-semibold
+            flex
+            items-center
+            text-gray-800
+            dark:text-gray-300
+            gap-2
+          "
+        >
+          <div className="flex items-center">{icon}</div>
          {pluralLabel}
        </h2>
        {newEntryUrl ? (
--- 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<TranslatedProps<EditorProps>> = ({
  displayUrl,
  isModification,
  draftKey,
-  showDelete,
  slug,
  localBackup,
  scrollSyncActive,
@ -292,7 +291,6 @@ const Editor: FC<TranslatedProps<EditorProps>> = ({
        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) {
--- 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<void>;
  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}
      />
    </div>
@ -240,6 +247,8 @@ const EditorInterface = ({
  );
  const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t });

+  console.log('[PREVIEW] showPreviewToggle', showPreviewToggle);
+
  return (
    <MainView
      breadcrumbs={breadcrumbs}
@ -253,7 +262,6 @@ const EditorInterface = ({
          onPersistAndNew={() => 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 = ({
      <EditorContent
        key={draftKey}
        i18nActive={i18nActive}
-        previewActive={previewActive && !i18nActive}
+        previewActive={finalPreviewActive && !i18nActive}
        editor={editor}
        editorSideBySideLocale={editorSideBySideLocale}
        editorWithPreview={editorWithPreview}
--- a/packages/core/src/components/entry-editor/EditorToolbar.tsx
+++ b/packages/core/src/components/entry-editor/EditorToolbar.tsx
@ -25,7 +25,6 @@ export interface EditorToolbarProps {
  onPersistAndNew: () => Promise<void>;
  onPersistAndDuplicate: () => Promise<void>;
  onDelete: () => Promise<void>;
-  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(
    () => (
      <div className="flex gap-2">
-        {showI18nToggle || showPreviewToggle || showDelete ? (
+        {showI18nToggle || showPreviewToggle || canDelete ? (
          <Menu
            key="extra-menu"
            label={<MoreVertIcon className="w-5 h-5" />}
@ -154,7 +159,7 @@ const EditorToolbar = ({
                </>
              )}
            </MenuGroup>
-            {showDelete && canDelete ? (
+            {canDelete ? (
              <MenuGroup key="delete-button">
                <MenuItemButton onClick={onDelete} startIcon={TrashIcon} color="error">
                  {t('editor.editorToolbar.deleteEntry')}
@ -174,7 +179,6 @@ const EditorToolbar = ({
    [
      showI18nToggle,
      showPreviewToggle,
-      showDelete,
      toggleI18n,
      i18nActive,
      t,
--- 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<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
  const [query, setQuery] = useState<string | undefined>(undefined);

  const dispatch = useAppDispatch();
-  const viewStyle = useAppSelector(selectViewStyle);
  const {
    isVisible,
    displayURLs,
@ -86,13 +81,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ 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<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
      />
      <div className="flex items-center px-5 pt-4">
        <div className="flex flex-grow gap-4 mr-8">
-          <h2 className="text-xl font-semibold flex items-center text-gray-800 dark:text-gray-300">
-            <span className="mr-2">
+          <h2
+            className="
+              text-xl
+              font-semibold
+              flex
+              items-center
+              gap-2
+              text-gray-800
+              dark:text-gray-300
+            "
+          >
+            <div className="flex items-center">
              <PhotoIcon className="w-5 h-5" />
-            </span>
+            </div>
            {t('app.header.media')}
          </h2>
          <MediaLibrarySearch
@ -393,7 +391,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals
          />
        </div>
        <div className="flex gap-3 items-center relative z-20">
-          <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={handleViewStyleChange} />
          <FileUploadButton imagesOnly={forImage} onChange={handlePersist} />
          {canInsert ? (
            <Button
--- a/packages/demo/public/config.yml
+++ b/packages/demo/public/config.yml
@ -845,8 +845,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