From 7bf67f1e8e19d2ddd3429ad3edfba261b30f812d Mon Sep 17 00:00:00 2001 From: Simon Krull Date: Fri, 4 Aug 2023 21:41:56 +0200 Subject: [PATCH 1/4] TASK: change button style of AssetAction buttons too neutral --- .../media-module/src/components/Main/AssetActions.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx index 6df4be785..02a5ab43f 100644 --- a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx +++ b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx @@ -68,7 +68,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = title={translate('itemActions.preview', 'Preview asset')} icon="expand-alt" size="regular" - style="transparent" + style="neutral" hoverStyle="brand" onClick={() => setSelectedAssetForPreview({ assetId: asset.id, assetSourceId: asset.assetSource.id })} /> @@ -77,7 +77,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = title={translate('itemActions.import', 'Import asset')} icon="cloud-download-alt" size="regular" - style="transparent" + style="neutral" hoverStyle="brand" onClick={onImportAsset} /> @@ -92,14 +92,14 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = disabled={asset.isInUse} icon="trash" size="regular" - style="transparent" + style="neutral" hoverStyle="error" onClick={() => onDeleteAsset(asset)} /> )} {asset.file?.url && ( - + )} {asset.localId && ( @@ -107,7 +107,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = title={translate('itemActions.copyToClipboard', 'Copy to clipboard')} icon={isInClipboard ? 'clipboard-check' : 'clipboard'} size="regular" - style="transparent" + style="neutral" hoverStyle="brand" className={isInClipboard ? 'button--active' : ''} onClick={toggleClipboardState} From 1b9ae6bc4e25ace8f5dd1033efedbed52bf50fc4 Mon Sep 17 00:00:00 2001 From: Simon Krull Date: Fri, 18 Aug 2023 17:54:44 +0200 Subject: [PATCH 2/4] TASK: adjust button style according to current list mode --- .../src/components/Main/AssetActions.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx index 02a5ab43f..00d8435ef 100644 --- a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx +++ b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx @@ -1,5 +1,5 @@ import React, { useCallback } from 'react'; -import { useSetRecoilState, useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { IconButton } from '@neos-project/react-ui-components'; @@ -7,6 +7,7 @@ import { useIntl, useMediaUi, useNotify } from '@media-ui/core'; import { useDeleteAsset, useImportAsset } from '@media-ui/core/src/hooks'; import { selectedAssetForPreviewState } from '@media-ui/feature-asset-preview'; import { clipboardItemState } from '@media-ui/feature-clipboard'; +import { VIEW_MODES, viewModeState } from '../../state'; interface ItemActionsProps { asset: Asset; @@ -22,6 +23,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = const [isInClipboard, toggleClipboardState] = useRecoilState( clipboardItemState({ assetId: asset.id, assetSourceId: asset.assetSource.id }) ); + const [viewModeSelection, setViewModeSelection] = useRecoilState(viewModeState); // TODO: Optimize rendering this component when hooks change, as it takes quite a bit of time const onImportAsset = useCallback(() => { @@ -68,7 +70,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = title={translate('itemActions.preview', 'Preview asset')} icon="expand-alt" size="regular" - style="neutral" + style={viewModeSelection === VIEW_MODES.List ? 'transparent' : 'neutral'} hoverStyle="brand" onClick={() => setSelectedAssetForPreview({ assetId: asset.id, assetSourceId: asset.assetSource.id })} /> @@ -77,7 +79,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = title={translate('itemActions.import', 'Import asset')} icon="cloud-download-alt" size="regular" - style="neutral" + style={viewModeSelection === VIEW_MODES.List ? 'transparent' : 'neutral'} hoverStyle="brand" onClick={onImportAsset} /> @@ -92,14 +94,21 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = disabled={asset.isInUse} icon="trash" size="regular" - style="neutral" + style={viewModeSelection === VIEW_MODES.List ? 'transparent' : 'neutral'} hoverStyle="error" onClick={() => onDeleteAsset(asset)} /> )} {asset.file?.url && ( - + )} {asset.localId && ( @@ -107,7 +116,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = title={translate('itemActions.copyToClipboard', 'Copy to clipboard')} icon={isInClipboard ? 'clipboard-check' : 'clipboard'} size="regular" - style="neutral" + style={viewModeSelection === VIEW_MODES.List ? 'transparent' : 'neutral'} hoverStyle="brand" className={isInClipboard ? 'button--active' : ''} onClick={toggleClipboardState} From edc5041baac9b4f027943d00036ed540cd367edb Mon Sep 17 00:00:00 2001 From: Simon Krull Date: Fri, 18 Aug 2023 18:01:33 +0200 Subject: [PATCH 3/4] TASK: remove unused setViewModeSelection declaration --- .../media-module/src/components/Main/AssetActions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx index 00d8435ef..5c76cca52 100644 --- a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx +++ b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx @@ -23,7 +23,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) = const [isInClipboard, toggleClipboardState] = useRecoilState( clipboardItemState({ assetId: asset.id, assetSourceId: asset.assetSource.id }) ); - const [viewModeSelection, setViewModeSelection] = useRecoilState(viewModeState); + const [viewModeSelection] = useRecoilState(viewModeState); // TODO: Optimize rendering this component when hooks change, as it takes quite a bit of time const onImportAsset = useCallback(() => { From 83fddaa22cfd34afaf259864a3f9ad0943ce1303 Mon Sep 17 00:00:00 2001 From: Simon Krull Date: Fri, 18 Aug 2023 18:08:09 +0200 Subject: [PATCH 4/4] TASK: use long spelling of ternary operator --- .../media-module/src/components/Main/AssetActions.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx index 5c76cca52..df31b8dd4 100644 --- a/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx +++ b/Resources/Private/JavaScript/media-module/src/components/Main/AssetActions.tsx @@ -104,9 +104,7 @@ const AssetActions: React.FC = ({ asset }: ItemActionsProps) =