From c759bb501dc6fc9e2c8d9e083cdab1c44a295412 Mon Sep 17 00:00:00 2001
From: Sudarshan Sreeram <sudarshan.sreeram19@imperial.ac.uk>
Date: Thu, 13 Aug 2020 09:29:11 +0530
Subject: [PATCH] Update styling of module resources view
Note: Minor aesthetic changes were made.
---
frontend/package.json | 1 +
.../src/components/atoms/FileCard/index.tsx | 2 +-
.../atoms/FileCard/style.module.scss | 9 ++--
.../atoms/FolderCard/style.module.scss | 4 +-
.../CurrentDirectoryView/style.module.scss | 6 ++-
.../QuickAccessView/style.module.scss | 3 +-
.../molecules/ResourceSectionHeader/index.tsx | 33 ++++++++-----
.../ResourceSectionHeader/style.module.scss | 48 +++++++++++--------
.../pages/ModuleResources/index.tsx | 2 +-
.../pages/ModuleResources/style.module.scss | 1 +
10 files changed, 69 insertions(+), 40 deletions(-)
diff --git a/frontend/package.json b/frontend/package.json
index 6f3b99844..b9865e394 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
"react-router-breadcrumbs-hoc": "^3.3.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
+ "react-transition-group": "^4.4.1",
"types": "^0.1.1",
"typescript": "~3.7.2"
},
diff --git a/frontend/src/components/atoms/FileCard/index.tsx b/frontend/src/components/atoms/FileCard/index.tsx
index b109ad3d3..6eb223381 100644
--- a/frontend/src/components/atoms/FileCard/index.tsx
+++ b/frontend/src/components/atoms/FileCard/index.tsx
@@ -41,7 +41,7 @@ const FileCard: React.FC<FileCardProps> = ({
<Card.Body>
<Card.Title style={{ wordWrap: "break-word" }}>{title}</Card.Title>
<FontAwesomeIcon
- style={{ fontSize: "1.125rem" }}
+ style={{ marginLeft: "8px", fontSize: "1.125rem" }}
icon={icon}
onClick={onIconClick}
/>
diff --git a/frontend/src/components/atoms/FileCard/style.module.scss b/frontend/src/components/atoms/FileCard/style.module.scss
index 74865272f..91fd89840 100644
--- a/frontend/src/components/atoms/FileCard/style.module.scss
+++ b/frontend/src/components/atoms/FileCard/style.module.scss
@@ -3,7 +3,9 @@
.quickViewCard {
border-radius: 0.5rem;
border-color: $gray-300;
+ border-width: 0px;
transition: transform 0.2s;
+ background-color: $gray-100;
height: 96%;
}
@@ -16,12 +18,11 @@
display: flex;
justify-content: space-between;
align-items: center;
- border-top: 1px solid $gray-300;
}
.quickViewCard :global(.card-footer) {
border-radius: 0.5rem !important;
- background: #fff;
+ background: $gray-100;
border-width: 0rem;
padding: 0.5rem;
display: flex;
@@ -42,6 +43,8 @@
}
.quickViewCard :global(.card-img-top) {
+ border: 1px solid $gray-100;
+ padding: 1px;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
@@ -72,4 +75,4 @@ $teal-tag-background: transparentize($teal-100, 0.5);
scrollbar-color: $white $white;
margin-top: 10px;
// margin-left: 0; // leave space before card
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/atoms/FolderCard/style.module.scss b/frontend/src/components/atoms/FolderCard/style.module.scss
index 7b3d07224..825b07a63 100644
--- a/frontend/src/components/atoms/FolderCard/style.module.scss
+++ b/frontend/src/components/atoms/FolderCard/style.module.scss
@@ -2,7 +2,9 @@
.folderCard {
border-radius: 0.5rem;
+ border-width: 0px;
transition: transform 0.2s;
+ background-color: $gray-100;
margin-top: 0.67rem;
}
@@ -14,4 +16,4 @@
display: flex;
justify-content: space-between;
align-items: center;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/molecules/CurrentDirectoryView/style.module.scss b/frontend/src/components/molecules/CurrentDirectoryView/style.module.scss
index 90ea856af..471dfec95 100644
--- a/frontend/src/components/molecules/CurrentDirectoryView/style.module.scss
+++ b/frontend/src/components/molecules/CurrentDirectoryView/style.module.scss
@@ -1 +1,5 @@
-@import "assets/scss/custom";
\ No newline at end of file
+@import "assets/scss/custom";
+
+.quickAccessRow {
+ height: fit-content;
+}
diff --git a/frontend/src/components/molecules/QuickAccessView/style.module.scss b/frontend/src/components/molecules/QuickAccessView/style.module.scss
index a43504ce7..68fb63fb8 100644
--- a/frontend/src/components/molecules/QuickAccessView/style.module.scss
+++ b/frontend/src/components/molecules/QuickAccessView/style.module.scss
@@ -6,7 +6,6 @@
margin-top: 10px;
overflow-y: visible;
overflow-x: auto;
- height: fit-content;
// margin-left: 0; // leave space before card
}
@@ -30,4 +29,4 @@
.quickAccessRow:hover::-webkit-scrollbar-thumb {
background-color: $gray-400;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
index cfcb4c2e0..b92ad11c3 100644
--- a/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
+++ b/frontend/src/components/molecules/ResourceSectionHeader/index.tsx
@@ -2,6 +2,8 @@ import React from "react";
import styles from "./style.module.scss";
import Button from "react-bootstrap/Button";
+import Fade from "react-bootstrap/Fade";
+import { CSSTransition } from "react-transition-group";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDownload, IconDefinition } from "@fortawesome/free-solid-svg-icons";
@@ -22,31 +24,40 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
showSelectAll,
onSelectAllClick,
onMouseOver,
- onMouseOut,
+ onMouseOut
}: SectionHeaderProps) => {
+ let show = showDownload.valueOf();
return (
<>
<div
className={styles.sectionHeaderContainer}
onMouseOut={onMouseOut}
- onMouseOver={onMouseOver}
+ onMouseOver={onMouseOver}
>
<span className={styles.sectionHeader} onClick={onSelectAllClick}>
{heading}
</span>
<div className={styles.sectionHeaderButtonGroup}>
+ <Fade in={show} timeout={500}>
+ <span id="download-button">
+ <Button
+ className={styles.sectionHeaderButton}
+ onClick={() => {}}
+ style={{ color: showDownload ? "#495057" : "#acb5bd" }}
+ >
+ <FontAwesomeIcon
+ className={styles.buttonIcon}
+ icon={faDownload}
+ />
+ </Button>
+ </span>
+ </Fade>
<Button
- className={styles.sectionHeaderButton}
- onClick= {() => {}}
- style={{ visibility: showDownload ? "visible" : "hidden" }}
- >
- <FontAwesomeIcon className={styles.buttonIcon} icon={faDownload} />
- </Button>
-
- <Button
- style={{ visibility: showSelectAll ? "visible" : "hidden" }}
+ style={{ color: showDownload ? "#495057" : "#acb5bd" }}
className={styles.sectionHeaderButton}
onClick={onSelectAllClick}
+ aria-controls="download-button"
+ aria-expanded={show}
>
<FontAwesomeIcon
className={styles.buttonIcon}
diff --git a/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss b/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
index 8ffeafbce..ca3515c4c 100644
--- a/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
+++ b/frontend/src/components/molecules/ResourceSectionHeader/style.module.scss
@@ -10,9 +10,6 @@
.sectionHeader {
font-weight: 500;
font-size: 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
}
.sectionHeaderButtonGroup {
@@ -20,16 +17,16 @@
}
.sectionHeaderButton {
- background: $white;
- color: #000;
+ background-color: $white;
+ color: $gray-500;
border-width: 0px;
border-radius: 8px;
margin-left: 20px;
justify-content: space-between;
height: 2.25rem;
- transition: 0.2s background;
- -webkit-transition: 0.2s background;
- -moz-transition: 0.2s background;
+ transition: 0.2s background-color;
+ -webkit-transition: 0.2s background-color;
+ -moz-transition: 0.2s background-color;
font-size: 1.05rem;
}
@@ -38,18 +35,12 @@
}
.buttonCheckbox :global(.form-check-input) {
- margin: 0px;
-}
-
-.sectionHeaderButton:active:hover,
-.sectionHeaderButton:global(.active):hover {
- background-color: $gray-900 !important;
+ margin: 0px;
}
.sectionHeaderButton:global(.active),
.sectionHeaderButton:active {
- color: #fff;
- background: #000 !important;
+ background: $gray-400 !important;
font-weight: 500;
text-align: left;
border-width: 0rem;
@@ -58,7 +49,24 @@
}
.sectionHeaderButton:hover {
- background: #e5e5e5;
- border-color: #fff;
- color: #000;
-}
\ No newline at end of file
+ background-color: $gray-200;
+ color: $gray-700 !important;
+}
+
+.alert-enter {
+ opacity: 0;
+ transform: scale(0.9);
+}
+.alert-enter-active {
+ opacity: 1;
+ transform: translateX(0);
+ transition: opacity 300ms, transform 300ms;
+}
+.alert-exit {
+ opacity: 1;
+}
+.alert-exit-active {
+ opacity: 0;
+ transform: scale(0.9);
+ transition: opacity 300ms, transform 300ms;
+}
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index cc7e5dda1..1214bef8f 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -88,7 +88,7 @@ let folderItems = [
id: 1,
},
{
- title: "Pandor Lab",
+ title: "Pandora Lab",
id: 2,
},
{
diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index c0e45a840..a852a8f30 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -52,3 +52,4 @@
color: $white !important;
border-color: $black;
}
+
--
GitLab