From 776bf6a4484dd432e17c9ad99b3f48bbe2710784 Mon Sep 17 00:00:00 2001 From: Johanna Szepanski <johanna.szepanski@softhouse.se> Date: Fri, 22 Mar 2024 11:30:20 +0100 Subject: [PATCH 1/2] Changed preview button background color when selected --- .../common/FileViewer/FileList/FileList.js | 19 ++++++++----------- .../FileListViewer/FileListViewer.js | 8 +------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/common/FileViewer/FileList/FileList.js b/src/components/common/FileViewer/FileList/FileList.js index d94efe87..0a696f70 100644 --- a/src/components/common/FileViewer/FileList/FileList.js +++ b/src/components/common/FileViewer/FileList/FileList.js @@ -17,7 +17,7 @@ import { Tooltip } from "@mui/material"; import { Preview, ErrorOutline } from "@mui/icons-material"; -import { array, func, string } from "prop-types"; +import { array, func } from "prop-types"; import { theme } from "../../../../style/Theme"; const propTypes = { @@ -27,10 +27,6 @@ const propTypes = { selectedFiles: array, /** Callback function getting state from parent */ setSelectedFiles: func, - /** String containing name of file now being - * previewed function getting state from parent - */ - previewedFile: string, /** Callback function getting state from parent */ setPreviewedFile: func, /** Callback function getting file name for validation */ @@ -50,7 +46,6 @@ export function FileList({ fileNames, selectedFiles, setSelectedFiles, - previewedFile, setPreviewedFile, isValid, getErrorMessage @@ -142,11 +137,13 @@ export function FileList({ )} <IconButton color="inherit" - sx={ - file === previewedFile - ? { backgroundColor: "#0000000a" } - : undefined - } + sx={[ + { + "&:focus": { + backgroundColor: "#cccccc" + } + } + ]} edge="end" aria-label="preview" onClick={() => setPreviewedFile(file)} diff --git a/src/components/common/FileViewer/FileListViewer/FileListViewer.js b/src/components/common/FileViewer/FileListViewer/FileListViewer.js index 9c124214..87febcf0 100644 --- a/src/components/common/FileViewer/FileListViewer/FileListViewer.js +++ b/src/components/common/FileViewer/FileListViewer/FileListViewer.js @@ -5,7 +5,7 @@ */ import React from "react"; import { Grid } from "@mui/material"; -import { array, node, arrayOf, oneOfType, func, string } from "prop-types"; +import { array, node, arrayOf, oneOfType, func } from "prop-types"; import { FileList } from "../FileList"; const propTypes = { @@ -22,10 +22,6 @@ const propTypes = { selectedFiles: array, /** Callback function getting state from parent */ setSelectedFiles: func, - /** String containing name of file now being - * previewed function getting state from parent - */ - previewedFile: string, /** Callback function getting state from parent */ setPreviewedFile: func, /** Callback function getting file name for validation */ @@ -38,7 +34,6 @@ export function FileListViewer({ fileNames, selectedFiles, setSelectedFiles, - previewedFile, setPreviewedFile, isValid, getErrorMessage, @@ -57,7 +52,6 @@ export function FileListViewer({ fileNames={fileNames} selectedFiles={selectedFiles} setSelectedFiles={setSelectedFiles} - previewedFile={previewedFile} setPreviewedFile={setPreviewedFile} isValid={isValid} getErrorMessage={getErrorMessage} -- GitLab From a83831f80807d4a1b398ff2fa18e7dfb06b18a64 Mon Sep 17 00:00:00 2001 From: Johanna Szepanski <johanna.szepanski@softhouse.se> Date: Fri, 22 Mar 2024 11:58:33 +0100 Subject: [PATCH 2/2] resinstated the check against previewfile --- .../common/FileViewer/FileList/FileList.js | 19 +++++++++++-------- .../FileListViewer/FileListViewer.js | 8 +++++++- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/common/FileViewer/FileList/FileList.js b/src/components/common/FileViewer/FileList/FileList.js index 0a696f70..f6ac55b5 100644 --- a/src/components/common/FileViewer/FileList/FileList.js +++ b/src/components/common/FileViewer/FileList/FileList.js @@ -17,7 +17,7 @@ import { Tooltip } from "@mui/material"; import { Preview, ErrorOutline } from "@mui/icons-material"; -import { array, func } from "prop-types"; +import { array, func, string } from "prop-types"; import { theme } from "../../../../style/Theme"; const propTypes = { @@ -27,6 +27,10 @@ const propTypes = { selectedFiles: array, /** Callback function getting state from parent */ setSelectedFiles: func, + /** String containing name of file now being + * previewed function getting state from parent + */ + previewedFile: string, /** Callback function getting state from parent */ setPreviewedFile: func, /** Callback function getting file name for validation */ @@ -46,6 +50,7 @@ export function FileList({ fileNames, selectedFiles, setSelectedFiles, + previewedFile, setPreviewedFile, isValid, getErrorMessage @@ -137,13 +142,11 @@ export function FileList({ )} <IconButton color="inherit" - sx={[ - { - "&:focus": { - backgroundColor: "#cccccc" - } - } - ]} + sx={ + file === previewedFile + ? { backgroundColor: "#cccccc" } + : undefined + } edge="end" aria-label="preview" onClick={() => setPreviewedFile(file)} diff --git a/src/components/common/FileViewer/FileListViewer/FileListViewer.js b/src/components/common/FileViewer/FileListViewer/FileListViewer.js index 87febcf0..9c124214 100644 --- a/src/components/common/FileViewer/FileListViewer/FileListViewer.js +++ b/src/components/common/FileViewer/FileListViewer/FileListViewer.js @@ -5,7 +5,7 @@ */ import React from "react"; import { Grid } from "@mui/material"; -import { array, node, arrayOf, oneOfType, func } from "prop-types"; +import { array, node, arrayOf, oneOfType, func, string } from "prop-types"; import { FileList } from "../FileList"; const propTypes = { @@ -22,6 +22,10 @@ const propTypes = { selectedFiles: array, /** Callback function getting state from parent */ setSelectedFiles: func, + /** String containing name of file now being + * previewed function getting state from parent + */ + previewedFile: string, /** Callback function getting state from parent */ setPreviewedFile: func, /** Callback function getting file name for validation */ @@ -34,6 +38,7 @@ export function FileListViewer({ fileNames, selectedFiles, setSelectedFiles, + previewedFile, setPreviewedFile, isValid, getErrorMessage, @@ -52,6 +57,7 @@ export function FileListViewer({ fileNames={fileNames} selectedFiles={selectedFiles} setSelectedFiles={setSelectedFiles} + previewedFile={previewedFile} setPreviewedFile={setPreviewedFile} isValid={isValid} getErrorMessage={getErrorMessage} -- GitLab