diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
index 1835a993023755e55fe3c8ffad82cdb6c616e6fd..73261f0b278e4d72e1fac705d83dda5e705e4d0b 100644
--- a/frontend/src/components/atoms/FileCard/index.tsx
+++ b/frontend/src/components/atoms/FileCard/index.tsx
@@ -15,6 +15,7 @@ export interface FileCardProps {
tags: string[];
icon: IconDefinition;
onIconClick: (event: React.MouseEvent) => void;
+ onClick: (event: React.MouseEvent) => void;
}
const FileCard: React.FC<FileCardProps> = ({
@@ -23,9 +24,10 @@ const FileCard: React.FC<FileCardProps> = ({
tags,
icon,
onIconClick,
+ onClick,
}: FileCardProps) => {
return (
- <Card className={styles.quickViewCard}>
+ <Card className={styles.quickViewCard} onClick={onClick}>
<Card.Img variant="top" src={graphIllustration} />
<Card.Body>
<Card.Title>{title}</Card.Title>
diff --git a/frontend/src/components/atoms/FileCard/style.module.scss b/frontend/src/components/atoms/FileCard/style.module.scss
index dc20d13cf3881b056b9a7e37afe2435525f39d9a..4c3395e6c843edd5b13f65899a3b9c1a02b525f7 100644
--- a/frontend/src/components/atoms/FileCard/style.module.scss
+++ b/frontend/src/components/atoms/FileCard/style.module.scss
@@ -8,9 +8,9 @@
margin-bottom: 10px;
}
-// .quickViewCard:hover {
-// transform: scale(1.03);
-// }
+.quickViewCard:hover {
+ transform: scale(1.03);
+}
.quickViewCard :global(.card-body) {
padding: 0.5rem;
diff --git a/frontend/src/components/atoms/FolderCard/index.tsx b/frontend/src/components/atoms/FolderCard/index.tsx
index 2063603a3383ee6e2fe7a5781713d3cf2ec96b15..bd24d5c28a9b72fbfa985f8dd532034ed462aaec 100644
--- a/frontend/src/components/atoms/FolderCard/index.tsx
+++ b/frontend/src/components/atoms/FolderCard/index.tsx
@@ -8,12 +8,12 @@ export interface FolderCardProps{
title: string;
icon: IconDefinition;
onIconClick: (event: React.MouseEvent) => void;
+ onClick: (event: React.MouseEvent) => void;
}
-
-const FolderCard: React.FC<FolderCardProps> = ({title, icon, onIconClick}: FolderCardProps) => {
+const FolderCard: React.FC<FolderCardProps> = ({title, icon, onIconClick, onClick}: FolderCardProps) => {
return (
- <Card className={styles.folderCard}>
+ <Card className={styles.folderCard} onClick={onClick}>
<Card.Body style={{ padding: ".6rem" }}>
<Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
<FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={icon} onClick={onIconClick}/>
diff --git a/frontend/src/components/atoms/FolderCard/style.module.scss b/frontend/src/components/atoms/FolderCard/style.module.scss
index eb6316295a16699e9168ee8e022af5992a69e391..7b3d0722401f5b249cff1203cddf59920fc385a6 100644
--- a/frontend/src/components/atoms/FolderCard/style.module.scss
+++ b/frontend/src/components/atoms/FolderCard/style.module.scss
@@ -6,9 +6,9 @@
margin-top: 0.67rem;
}
-// .folderCard:hover {
-// transform: scale(1.03);
-// }
+.folderCard:hover {
+ transform: scale(1.03);
+}
.folderCard :global(.card-body) {
display: flex;
diff --git a/frontend/src/components/molecules/QuickAccess/index.tsx b/frontend/src/components/molecules/QuickAccess/index.tsx
index 23900dba56d482bf4f8eecfc02635f686c75b5ac..7baf078a331ee2835bf5559f90cef9a915b16c00 100644
--- a/frontend/src/components/molecules/QuickAccess/index.tsx
+++ b/frontend/src/components/molecules/QuickAccess/index.tsx
@@ -20,22 +20,25 @@ export interface QuickAccessProps {
type idBooleanMap = { [key: number]: boolean };
interface MyState {
- isSelected: idBooleanMap;
+ isSelected: idBooleanMap;
+ isHoveringOver: idBooleanMap;
+ isHoveringTitle: Boolean;
}
class QuickAccess extends React.Component<QuickAccessProps, MyState> {
constructor(props: QuickAccessProps) {
super(props);
- let isSelected: idBooleanMap = [];
- this.state = { isSelected };
+ this.state = { isSelected : [], isHoveringOver: [], isHoveringTitle: false};
}
componentDidMount() {
- let isSelected: idBooleanMap = [];
+ let isSelected: idBooleanMap = [];
+ let isHoveringOver: idBooleanMap = [];
this.props.quickAccessItems.forEach(({ id }: { id: number }) => {
- isSelected[id] = false;
+ isSelected[id] = false;
+ isHoveringOver[id] = false;
});
- this.setState({ isSelected });
+ this.setState({ isSelected, isHoveringOver });
}
isAnySelected(): boolean {
@@ -74,14 +77,37 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
isSelected[items[item].id] = setValue;
}
this.setState({ isSelected });
- }
+ }
+
+ handleCardClick(id: number) {
+ if (this.isAnySelected()) {
+ let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+ isSelected[id] = !isSelected[id];
+ this.setState({ isSelected });
+ }
+ }
+
+ handleMouseOver(id: number){
+ let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+ isHoveringOver[id] = true;
+ this.setState({ isHoveringOver });
+ }
+
+ handleMouseOut(id: number){
+ let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+ isHoveringOver[id] = false;
+ this.setState({ isHoveringOver });
+ }
render() {
return (
<>
<ResourceSectionHeader
heading="Quick Access"
+ onMouseOver={() => {this.setState({isHoveringTitle: true})}}
+ onMouseOut={() => {this.setState({isHoveringTitle: false})}}
showDownload={this.isAnySelected()}
+ showSelectAll={this.state.isHoveringTitle || this.isAnySelected()}
onSelectAllClick={() => this.handleSelectAllClick()}
selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
/>
@@ -102,19 +128,22 @@ class QuickAccess extends React.Component<QuickAccessProps, MyState> {
lg={4}
xl={3}
key={id}
- style={{ marginBottom: ".5rem" }}
+ style={{ marginBottom: ".5rem" }}
+ onMouseOver={() => this.handleMouseOver(id)}
+ onMouseOut={() => this.handleMouseOut(id)}
>
<FileCard
title={title}
type={type}
tags={tags}
icon={
- this.isAnySelected()
+ this.isAnySelected() || this.state.isHoveringOver[id]
? this.state.isSelected[id]
? faCheckSquare
: faSquare
: faFile
- }
+ }
+ onClick={() => this.handleCardClick(id)}
onIconClick={() => {
this.handleIconClick(id);
}}
diff --git a/frontend/src/components/molecules/ResourceFolders/index.tsx b/frontend/src/components/molecules/ResourceFolders/index.tsx
index 28de847f11415d68a7fe625a3d2ea6c71c318608..3c3e0af6e53debb63dbbebb5647ae7628cb5ea78 100644
--- a/frontend/src/components/molecules/ResourceFolders/index.tsx
+++ b/frontend/src/components/molecules/ResourceFolders/index.tsx
@@ -14,14 +14,15 @@ export interface ResourceFoldersProps {
type idBooleanMap = { [key: number]: boolean };
interface MyState {
- isSelected: idBooleanMap;
+ isSelected: idBooleanMap;
+ isHoveringOver: idBooleanMap;
+ isHoveringTitle: Boolean;
}
class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
constructor(props: ResourceFoldersProps) {
super(props);
- let isSelected: idBooleanMap = [];
- this.state = { isSelected };
+ this.state = { isSelected: [], isHoveringOver: [] , isHoveringTitle: false};
}
componentDidMount() {
@@ -70,29 +71,60 @@ class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
this.setState({ isSelected });
}
+ handleCardClick(id: number) {
+ if (this.isAnySelected()) {
+ let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+ isSelected[id] = !isSelected[id];
+ this.setState({ isSelected });
+ }
+ }
+
+ handleMouseOver(id: number){
+ let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+ isHoveringOver[id] = true;
+ this.setState({ isHoveringOver });
+ }
+
+ handleMouseOut(id: number){
+ let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+ isHoveringOver[id] = false;
+ this.setState({ isHoveringOver });
+ }
+
render() {
return (
<>
<ResourceSectionHeader
heading="Folders"
+ onMouseOver={() => {this.setState({isHoveringTitle: true})}}
+ onMouseOut={() => {this.setState({isHoveringTitle: false})}}
showDownload={this.isAnySelected()}
+ showSelectAll={this.isAnySelected() || this.state.isHoveringTitle}
onSelectAllClick={() => this.handleSelectAllClick()}
selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
/>
<Row style={{ marginTop: "10px" }}>
{this.props.folderItems.map(({ title, id }) => (
- <Col xs={6} sm={6} md={3} key={id}>
+ <Col
+ xs={6}
+ sm={6}
+ md={3}
+ key={id}
+ onMouseOver={() => this.handleMouseOver(id)}
+ onMouseOut={() => this.handleMouseOut(id)}
+ >
<FolderCard
title={title}
icon={
- this.isAnySelected()
+ this.isAnySelected() || this.state.isHoveringOver[id]
? this.state.isSelected[id]
? faCheckSquare
: faSquare
: faFolder
}
- onIconClick={() => this.handleIconClick(id)}
+ onIconClick={() => this.handleIconClick(id)}
+ onClick={() => this.handleCardClick(id)}
/>
</Col>
))}
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
index e0a0774f264d88deaacfd6d18ba6d8edd51d77b2..a9399a068c5d7b229043bd79fde99d7409696417 100644
--- a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
+++ b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
@@ -8,32 +8,44 @@ import { faDownload, IconDefinition } from "@fortawesome/free-solid-svg-icons";
export interface SectionHeaderProps {
heading: string;
selectAllIcon: IconDefinition;
- showDownload: boolean;
+ showDownload: Boolean;
+ showSelectAll: Boolean;
onSelectAllClick: (event: React.MouseEvent) => void;
+ onMouseOver: (event: React.MouseEvent) => void;
+ onMouseOut: (event: React.MouseEvent) => void;
}
const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
heading,
- onSelectAllClick,
showDownload,
selectAllIcon,
+ showSelectAll,
+ onSelectAllClick,
+ onMouseOver,
+ onMouseOut,
}: SectionHeaderProps) => {
return (
<>
- <div className={styles.sectionHeaderContainer}>
- <span className={styles.sectionHeader} onClick={onSelectAllClick}>
+ <div
+ className={styles.sectionHeaderContainer}
+ onMouseOut={onMouseOut}
+ onMouseOver={onMouseOver}
+ onClick={onSelectAllClick}
+ >
+ <span className={styles.sectionHeader} >
{heading}
</span>
<div className={styles.sectionHeaderButtonGroup}>
- {showDownload ? (
- <Button className={styles.sectionHeaderButton}>
- <FontAwesomeIcon
- className={styles.buttonIcon}
- icon={faDownload}
- />
- </Button>
- ) : null}
<Button
+ className={styles.sectionHeaderButton}
+ onClick= {() => {}}
+ style={{ visibility: showDownload ? "visible" : "hidden" }}
+ >
+ <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
+ </Button>
+
+ <Button
+ style={{ visibility: showSelectAll ? "visible" : "hidden" }}
className={styles.sectionHeaderButton}
onClick={onSelectAllClick}
>