From 116cce0262f331eedc95930d56c2ec9e570f68ab Mon Sep 17 00:00:00 2001 From: vargajoe Date: Mon, 9 Oct 2023 16:33:14 +0200 Subject: [PATCH 01/14] finding the spot --- apps/sensenet/src/components/content/Explore.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index da596f37b..5ec9498b9 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -95,7 +95,7 @@ export function Explore({ const contentTypeName = useQuery().get('content-type') const pathFromUrl = useQuery().get('path') const snRoute = useSnRoute() - const activeAction = snRoute.match!.params.action + let activeAction = snRoute.match!.params.action const onActivateItemOverride = async (activeItem: GenericContent) => { const expandedItem = await repository.load({ @@ -113,6 +113,11 @@ export function Explore({ const onTreeLoadingChange = useCallback((isLoading) => setIsTreeLoading(isLoading), []) + console.log('!!!', snRoute, activeContent) + if (activeContent.endsWith('png') || activeContent.endsWith('jpg') || activeContent.endsWith('jpeg')) { + activeAction = 'image' + } + const renderContent = () => { switch (activeAction) { case 'browse': @@ -152,6 +157,8 @@ export function Explore({ return case 'setpermissions': return + case 'image': + return case 'preview': return case 'edit-binary': From ebe47062459a2fb05f848bb243dac6a557826c47 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Mon, 9 Oct 2023 16:52:04 +0200 Subject: [PATCH 02/14] add image view component --- .../src/components/content/Explore.tsx | 4 ++-- .../components/view-controls/image-view.tsx | 18 ++++++++++++++++++ .../src/components/view-controls/index.ts | 1 + 3 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 apps/sensenet/src/components/view-controls/image-view.tsx diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index 5ec9498b9..d624a5031 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/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) => { @@ -158,7 +158,7 @@ export function Explore({ case 'setpermissions': return case 'image': - return + return case 'preview': return case 'edit-binary': diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx new file mode 100644 index 000000000..9476f5a8f --- /dev/null +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -0,0 +1,18 @@ +/** + * @module ViewControls + */ +import { useRepository } from '@sensenet/hooks-react' +import React, { ReactElement } from 'react' + +export interface ImageViewProps { + renderIcon?: (name: string) => ReactElement + handleCancel?: () => void + contentPath: string +} + +export const ImageView: React.FC = (props) => { + const { contentPath } = props + const repository = useRepository() + + return +} diff --git a/apps/sensenet/src/components/view-controls/index.ts b/apps/sensenet/src/components/view-controls/index.ts index 9735bd083..f2311af8c 100644 --- a/apps/sensenet/src/components/view-controls/index.ts +++ b/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' From b94999e81ebbb529d0ce51a66d3a8c6910138e4f Mon Sep 17 00:00:00 2001 From: vargajoe Date: Thu, 12 Oct 2023 16:21:56 +0200 Subject: [PATCH 03/14] remove workaround --- apps/sensenet/src/components/content/Explore.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index d624a5031..5573afdbe 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -113,11 +113,6 @@ export function Explore({ const onTreeLoadingChange = useCallback((isLoading) => setIsTreeLoading(isLoading), []) - console.log('!!!', snRoute, activeContent) - if (activeContent.endsWith('png') || activeContent.endsWith('jpg') || activeContent.endsWith('jpeg')) { - activeAction = 'image' - } - const renderContent = () => { switch (activeAction) { case 'browse': From 850796d9373a047cf211b94da8e05e37d65253f1 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Thu, 12 Oct 2023 16:23:46 +0200 Subject: [PATCH 04/14] revert workaround variable declaration --- apps/sensenet/src/components/content/Explore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx index 5573afdbe..78dd8f518 100644 --- a/apps/sensenet/src/components/content/Explore.tsx +++ b/apps/sensenet/src/components/content/Explore.tsx @@ -95,7 +95,7 @@ export function Explore({ const contentTypeName = useQuery().get('content-type') const pathFromUrl = useQuery().get('path') const snRoute = useSnRoute() - let activeAction = snRoute.match!.params.action + const activeAction = snRoute.match!.params.action const onActivateItemOverride = async (activeItem: GenericContent) => { const expandedItem = await repository.load({ From 00770c7484267da2281d1b1a5d6c1f1526977a04 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Thu, 12 Oct 2023 16:27:10 +0200 Subject: [PATCH 05/14] context service image condition --- apps/sensenet/src/services/content-context-service.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/sensenet/src/services/content-context-service.ts b/apps/sensenet/src/services/content-context-service.ts index 7971483f0..bd02de10c 100644 --- a/apps/sensenet/src/services/content-context-service.ts +++ b/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') { + return getUrlForContent({ content, uiSettings, location, action: 'image', snRoute, removePath }) + } + if ( (content as any).Binary && (content as any).Binary.__mediaresource.content_type !== 'application/x-javascript' && From a0f462a6b6305c8dc2eee360dcf00f3faf0e1394 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Thu, 12 Oct 2023 16:44:47 +0200 Subject: [PATCH 06/14] show image if content is descendant of image --- apps/sensenet/src/services/content-context-service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/services/content-context-service.ts b/apps/sensenet/src/services/content-context-service.ts index bd02de10c..733966e4e 100644 --- a/apps/sensenet/src/services/content-context-service.ts +++ b/apps/sensenet/src/services/content-context-service.ts @@ -181,7 +181,7 @@ export function getPrimaryActionUrl({ return getUrlForContent({ content, uiSettings, location, action: 'edit-binary', snRoute, removePath }) } - if (content.Type === 'Image') { + if (content.Type === 'Image' || repository.schemas.isContentFromType(content, 'Image')) { return getUrlForContent({ content, uiSettings, location, action: 'image', snRoute, removePath }) } From 3cfe92a5d0f3595e3e780090ec9c9e7ad6065691 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Thu, 12 Oct 2023 16:53:21 +0200 Subject: [PATCH 07/14] minimal style adjustment --- apps/sensenet/src/components/view-controls/image-view.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 9476f5a8f..e5f59e589 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -1,6 +1,7 @@ /** * @module ViewControls */ +import { Style } from '@material-ui/icons' import { useRepository } from '@sensenet/hooks-react' import React, { ReactElement } from 'react' @@ -14,5 +15,9 @@ export const ImageView: React.FC = (props) => { const { contentPath } = props const repository = useRepository() - return + return ( +
+ +
+ ) } From e9c9cab23d9b189ada2ecfa187c28d71d574d906 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Thu, 12 Oct 2023 16:56:14 +0200 Subject: [PATCH 08/14] minimal style adjustment --- apps/sensenet/src/components/view-controls/image-view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index e5f59e589..331c2c6ba 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -16,7 +16,7 @@ export const ImageView: React.FC = (props) => { const repository = useRepository() return ( -
+
) From 4ba17e0cfb5e2e0fbf8c53921dfb4d20270093f8 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 13 Oct 2023 12:04:42 +0200 Subject: [PATCH 09/14] add title and close button with style --- .../components/view-controls/image-view.tsx | 98 ++++++++++++++++++- 1 file changed, 93 insertions(+), 5 deletions(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 331c2c6ba..794e33ebc 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -1,9 +1,59 @@ /** * @module ViewControls */ -import { Style } from '@material-ui/icons' +import { Button, createStyles, makeStyles, Theme } from '@material-ui/core' +import { GenericContent } from '@sensenet/default-content-types' import { useRepository } from '@sensenet/hooks-react' -import React, { ReactElement } from '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: '100%', + overflow: 'auto', + // overflowY: '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: '100%', + }, + image: { + width: '95%', + }, + closeButton: { + marginRight: '20px', + }, + buttonWrapper: { + width: '100%', + display: 'inline-flex', + whiteSpace: 'nowrap', + justifyContent: 'flex-end', + padding: '20px', + height: '80px', + }, + }) +}) export interface ImageViewProps { renderIcon?: (name: string) => ReactElement @@ -12,12 +62,50 @@ export interface ImageViewProps { } export const ImageView: React.FC = (props) => { - const { contentPath } = props const repository = useRepository() + const formLocalization = useLocalization().forms + const globalClasses = useGlobalStyles() + const classes = useStyles() + const { contentPath } = props + const [currentContent, setCurrentContent] = useState() + 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 ( -
- +
+
+
+ + {currentContent?.DisplayName} + +
+
+
+ +
+
+ +
) } From c4dfcbcf8780915b0d90c0e01b546e70d53c9dde Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 13 Oct 2023 12:05:49 +0200 Subject: [PATCH 10/14] remove comment --- apps/sensenet/src/components/view-controls/image-view.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 794e33ebc..5b5cfe84d 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -15,7 +15,6 @@ const useStyles = makeStyles(() => { imageViewContainer: { width: '100%', overflow: 'auto', - // overflowY: 'auto', margin: '0 24px', }, titleContainer: { From 36692ad2c1ef4fa71b21d554633625d15412c338 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 13 Oct 2023 13:12:21 +0200 Subject: [PATCH 11/14] remove unused component --- apps/sensenet/src/components/view-controls/image-view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 5b5cfe84d..91b9149ec 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -1,7 +1,7 @@ /** * @module ViewControls */ -import { Button, createStyles, makeStyles, Theme } from '@material-ui/core' +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' From 5c75e8bc49984e086abf2fff6b749d2c88b162b9 Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 13 Oct 2023 14:21:43 +0200 Subject: [PATCH 12/14] minor style --- .../components/view-controls/image-view.tsx | 27 +++++++++---------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 91b9149ec..8dc016d89 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -13,7 +13,7 @@ import { navigateToAction } from '../../services' const useStyles = makeStyles(() => { return createStyles({ imageViewContainer: { - width: '100%', + width: 'auto', overflow: 'auto', margin: '0 24px', }, @@ -35,21 +35,19 @@ const useStyles = makeStyles(() => { fontWeight: 500, }, imageContainer: { - width: '100%', - }, - image: { - width: '95%', - }, - closeButton: { - marginRight: '20px', + width: '90%', + display: 'flex', + flexDirection: 'column', + flexWrap: 'nowrap', + alignItems: 'flex-start', }, buttonWrapper: { - width: '100%', - display: 'inline-flex', - whiteSpace: 'nowrap', - justifyContent: 'flex-end', - padding: '20px', - height: '80px', + padding: '20px 0', + width: '90%', + display: 'flex', + flexDirection: 'column', + flexWrap: 'nowrap', + alignItems: 'flex-end', }, }) }) @@ -97,7 +95,6 @@ export const ImageView: React.FC = (props) => { aria-label={formLocalization.close} color="default" className={globalClasses.cancelButton} - style={{ marginRight: '20px' }} onClick={() => { navigateToAction({ history, routeMatch }) props.handleCancel?.() From 9d207a61043d901704e08f55a7fab0f4d291bccb Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 13 Oct 2023 14:34:43 +0200 Subject: [PATCH 13/14] image class placeholder --- apps/sensenet/src/components/view-controls/image-view.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 8dc016d89..5acde2237 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -41,6 +41,7 @@ const useStyles = makeStyles(() => { flexWrap: 'nowrap', alignItems: 'flex-start', }, + image: {}, buttonWrapper: { padding: '20px 0', width: '90%', From f54a1f4b4344bd8d09964c4ff9ce29f1fe8bc82c Mon Sep 17 00:00:00 2001 From: vargajoe Date: Fri, 13 Oct 2023 14:47:56 +0200 Subject: [PATCH 14/14] set image max width --- apps/sensenet/src/components/view-controls/image-view.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/sensenet/src/components/view-controls/image-view.tsx b/apps/sensenet/src/components/view-controls/image-view.tsx index 5acde2237..513c6a04e 100644 --- a/apps/sensenet/src/components/view-controls/image-view.tsx +++ b/apps/sensenet/src/components/view-controls/image-view.tsx @@ -41,7 +41,9 @@ const useStyles = makeStyles(() => { flexWrap: 'nowrap', alignItems: 'flex-start', }, - image: {}, + image: { + maxWidth: '100%', + }, buttonWrapper: { padding: '20px 0', width: '90%',