Display image instead of a preview (#1544)

* finding the spot

* add image view component

* remove workaround

* revert workaround variable declaration

* context service image condition

* show image if content is descendant of image

* minimal style adjustment

* minimal style adjustment

* add title and close button with style

* remove comment

* remove unused component

* minor style

* image class placeholder

* set image max width

apps/sensenet/src/components/content/Explore.tsx

@@ -23,7 +23,7 @@ import { DocumentViewer } from '../document-viewer'
 import { EditBinary } from '../edit/edit-binary'
 import { FullScreenLoader } from '../full-screen-loader'
 import TreeWithData from '../tree/tree-with-data'
-import { BrowseView, EditView, NewView, PermissionView, VersionView } from '../view-controls'
+import { BrowseView, EditView, ImageView, NewView, PermissionView, VersionView } from '../view-controls'
 import WopiPage from '../wopi-page'
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -152,6 +152,8 @@ export function Explore({
         return <VersionView key={activeContent} contentPath={`${rootPath}${activeContent}`} />
       case 'setpermissions':
         return <PermissionView key={activeContent} contentPath={`${rootPath}${activeContent}`} />
+      case 'image':
+        return <ImageView key={activeContent} contentPath={`${rootPath}${activeContent}`} />
       case 'preview':
         return <DocumentViewer key={activeContent} contentPath={`${rootPath}${activeContent}`} />
       case 'edit-binary':

apps/sensenet/src/components/view-controls/image-view.tsx

@@ -0,0 +1,110 @@
+/**
+ * @module ViewControls
+ */
+import { Button, createStyles, makeStyles } from '@material-ui/core'
+import { GenericContent } from '@sensenet/default-content-types'
+import { useRepository } from '@sensenet/hooks-react'
+import React, { ReactElement, useEffect, useState } from 'react'
+import { useHistory, useRouteMatch } from 'react-router-dom'
+import { useGlobalStyles } from '../../globalStyles'
+import { useLocalization } from '../../hooks'
+import { navigateToAction } from '../../services'
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    imageViewContainer: {
+      width: 'auto',
+      overflow: 'auto',
+      margin: '0 24px',
+    },
+    titleContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginTop: '30px',
+      marginBottom: '20px',
+      alignItems: 'center',
+    },
+    title: {
+      fontSize: '20px',
+      paddingRight: '10px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    contentName: {
+      fontWeight: 500,
+    },
+    imageContainer: {
+      width: '90%',
+      display: 'flex',
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      alignItems: 'flex-start',
+    },
+    image: {
+      maxWidth: '100%',
+    },
+    buttonWrapper: {
+      padding: '20px 0',
+      width: '90%',
+      display: 'flex',
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      alignItems: 'flex-end',
+    },
+  })
+})
+
+export interface ImageViewProps {
+  renderIcon?: (name: string) => ReactElement
+  handleCancel?: () => void
+  contentPath: string
+}
+
+export const ImageView: React.FC<ImageViewProps> = (props) => {
+  const repository = useRepository()
+  const formLocalization = useLocalization().forms
+  const globalClasses = useGlobalStyles()
+  const classes = useStyles()
+  const { contentPath } = props
+  const [currentContent, setCurrentContent] = useState<GenericContent>()
+  const history = useHistory()
+  const routeMatch = useRouteMatch<{ browseType: string; action?: string }>()
+
+  useEffect(() => {
+    async function getCurrentContent() {
+      const result = await repository.load({
+        idOrPath: props.contentPath,
+      })
+      setCurrentContent(result.d)
+    }
+    getCurrentContent()
+  }, [props.contentPath, repository])
+
+  return (
+    <div className={classes.imageViewContainer}>
+      <div className={classes.titleContainer}>
+        <div className={classes.title}>
+          <span data-test={'image-view-title'} className={classes.contentName}>
+            {currentContent?.DisplayName}
+          </span>
+        </div>
+      </div>
+      <div className={classes.imageContainer}>
+        <img className={classes.image} src={`${repository.configuration.repositoryUrl}${contentPath}`} alt="" />
+      </div>
+      <div className={classes.buttonWrapper}>
+        <Button
+          aria-label={formLocalization.close}
+          color="default"
+          className={globalClasses.cancelButton}
+          onClick={() => {
+            navigateToAction({ history, routeMatch })
+            props.handleCancel?.()
+          }}>
+          {formLocalization.close}
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/sensenet/src/components/view-controls/index.ts

@@ -1,5 +1,6 @@
 export * from './browse-view'
 export * from './edit-view'
+export * from './image-view'
 export * from './new-view'
 export * from './permission-view'
 export * from './version-view'

apps/sensenet/src/services/content-context-service.ts

@@ -181,6 +181,10 @@ export function getPrimaryActionUrl({
     return getUrlForContent({ content, uiSettings, location, action: 'edit-binary', snRoute, removePath })
   }
 
+  if (content.Type === 'Image' || repository.schemas.isContentFromType<ContentType>(content, 'Image')) {
+    return getUrlForContent({ content, uiSettings, location, action: 'image', snRoute, removePath })
+  }
+
   if (
     (content as any).Binary &&
     (content as any).Binary.__mediaresource.content_type !== 'application/x-javascript' &&