From b0c14dceeb50da8760166a4f9b1b389f90c6ed36 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 20 Aug 2020 21:08:02 +0100
Subject: [PATCH] Move view toggle to be inline with breadcrumb
---
.../atoms/MyBreadcrumbs/style.module.scss | 1 -
.../molecules/SelectionView/index.tsx | 2 +-
.../components/TopSection/index.tsx | 40 +++++
.../components/TopSection/style.module.scss | 25 ++++
.../pages/ModuleResources/index.tsx | 139 ++++++++----------
5 files changed, 129 insertions(+), 78 deletions(-)
create mode 100644 src/components/pages/ModuleResources/components/TopSection/index.tsx
create mode 100644 src/components/pages/ModuleResources/components/TopSection/style.module.scss
diff --git a/src/components/atoms/MyBreadcrumbs/style.module.scss b/src/components/atoms/MyBreadcrumbs/style.module.scss
index eb64290fb..be2bc0302 100644
--- a/src/components/atoms/MyBreadcrumbs/style.module.scss
+++ b/src/components/atoms/MyBreadcrumbs/style.module.scss
@@ -6,7 +6,6 @@
text-transform: uppercase;
font-weight: 500;
padding: 0rem;
- margin-bottom: 1.875rem;
}
.breadcrumbItem * {
diff --git a/src/components/molecules/SelectionView/index.tsx b/src/components/molecules/SelectionView/index.tsx
index 552a47a5a..ffdda456e 100644
--- a/src/components/molecules/SelectionView/index.tsx
+++ b/src/components/molecules/SelectionView/index.tsx
@@ -141,7 +141,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
showDownload={this.isAnySelected()}
onSelectAllClick={() => this.handleSelectAllClick()}
selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
- checkBoxColur={this.isAnySelected() ? "#495057" : "#dee2e6"}
+ checkBoxColur={this.isAnySelected() ? "#495057" : "#e9ecef"}
/>
{this.props.render(selection)}
diff --git a/src/components/pages/ModuleResources/components/TopSection/index.tsx b/src/components/pages/ModuleResources/components/TopSection/index.tsx
new file mode 100644
index 000000000..35f4526c1
--- /dev/null
+++ b/src/components/pages/ModuleResources/components/TopSection/index.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "react-bootstrap/Button";
+import styles from "./style.module.scss";
+import { faBorderAll, faList } from "@fortawesome/free-solid-svg-icons";
+
+export interface TopSectionProps {
+ onViewButtonClick: (event: React.MouseEvent) => void;
+ currentView: string;
+}
+
+const TopSection: React.FC<TopSectionProps> = ({
+ onViewButtonClick,
+ currentView,
+}) => {
+ return (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "center",
+ marginTop: "-0.375rem"
+ }}
+ >
+ <MyBreadcrumbs />
+ <Button
+ className={styles.viewToggleButton}
+ onClick={onViewButtonClick}
+ variant="secondary"
+ >
+ <FontAwesomeIcon
+ icon={currentView === "folder" ? faBorderAll : faList}
+ />
+ </Button>
+ </div>
+ );
+};
+
+export default TopSection;
diff --git a/src/components/pages/ModuleResources/components/TopSection/style.module.scss b/src/components/pages/ModuleResources/components/TopSection/style.module.scss
new file mode 100644
index 000000000..0ced3aed0
--- /dev/null
+++ b/src/components/pages/ModuleResources/components/TopSection/style.module.scss
@@ -0,0 +1,25 @@
+@import "assets/scss/custom";
+
+.viewToggleButton {
+ background-color: $white !important;
+ // color: $gray-500 !important;
+ color: $gray-700 !important;
+ border-width: 0px !important;
+ justify-content: space-between !important;
+ height: 2.25rem !important;
+ box-shadow: none !important;
+ border-radius: .5rem;
+ margin-bottom: 1rem;
+ font-size: 1.05rem;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+.viewToggleButton:hover{
+ background-color: $gray-100 !important;
+ color: $gray-700 !important;
+}
+
+.buttonIcon {
+ margin-top: 0.22rem;
+}
\ No newline at end of file
diff --git a/src/components/pages/ModuleResources/index.tsx b/src/components/pages/ModuleResources/index.tsx
index 7a1cf5c87..d6a591856 100644
--- a/src/components/pages/ModuleResources/index.tsx
+++ b/src/components/pages/ModuleResources/index.tsx
@@ -1,14 +1,12 @@
import React from "react";
-import Button from "react-bootstrap/Button";
-
import { request, download } from "../../../utils/api";
import { api, methods } from "../../../constants/routes";
-import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
import SearchBox from "components/molecules/SearchBox";
import QuickAccessView from "./components/QuickAccessView";
import CurrentDirectoryView from "./components/CurrentDirectoryView";
import FoldersView from "./components/FoldersView";
import ListView from "./components/ListView";
+import TopSection from "./components/TopSection";
export interface Resource {
title: string;
@@ -85,33 +83,24 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
let filename = this.state.resources.filter(
(document) => document.id === indices[0]
)[0].title;
- download(
- api.MATERIALS_RESOURCES_FILE(indices[0]),
- methods.GET,
- filename
- );
+ download(api.MATERIALS_RESOURCES_FILE(indices[0]), methods.GET, filename);
} else {
// Multiple files to download, call zipped selection endpoint
- download(
- api.MATERIALS_ZIPPED_SELECTION,
- methods.GET,
- "materials.zip",
- {
- ids: indices,
- course: this.moduleCode,
- year: this.props.year
- }
- );
+ download(api.MATERIALS_ZIPPED_SELECTION, methods.GET, "materials.zip", {
+ ids: indices,
+ course: this.moduleCode,
+ year: this.props.year,
+ });
}
}
handleSectionDownload(category: string) {
- download(api.MATERIALS_ZIPPED, methods.GET, category + ".zip", {
- year: this.props.year,
- course: this.moduleCode,
- category: category,
- })
- }
+ download(api.MATERIALS_ZIPPED, methods.GET, category + ".zip", {
+ year: this.props.year,
+ course: this.moduleCode,
+ category: category,
+ });
+ }
handleFileClick(id: number) {
const onSuccess = (data: any) => {
@@ -195,65 +184,63 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
}));
const view = () => {
- switch(this.state.view) {
- case "folder": return (
- <>
- <FoldersView
- folders={folders}
- scope={scope}
- searchText={this.state.searchText}
- />
-
- <CurrentDirectoryView
- resources={this.state.resources}
- scope={scope}
- searchText={this.state.searchText}
- onDownloadClick={(ids) => this.handleFileDownload(ids)}
- onItemClick={(id) => this.handleFileClick(id)}
- includeInSearchResult={this.includeInSearchResult}
- />
-
- <QuickAccessView
- resources={this.state.resources}
- scope={scope}
- searchText={this.state.searchText}
- onDownloadClick={(ids) => this.handleFileDownload(ids)}
- onItemClick={(id) => this.handleFileClick(id)}
- />
- </>
- );
- case "list": return (
- <>
- <ListView
- folders={folders}
- resources={this.state.resources}
- searchText={this.state.searchText}
- onDownloadClick={(ids) => this.handleFileDownload(ids)}
- onSectionDownloadClick={(category) => this.handleSectionDownload(category)}
- onItemClick={(id) => this.handleFileClick(id)}
- includeInSearchResult={this.includeInSearchResult}
- />
- </>
- );
+ switch (this.state.view) {
+ case "folder":
+ return (
+ <>
+ <FoldersView
+ folders={folders}
+ scope={scope}
+ searchText={this.state.searchText}
+ />
+
+ <CurrentDirectoryView
+ resources={this.state.resources}
+ scope={scope}
+ searchText={this.state.searchText}
+ onDownloadClick={(ids) => this.handleFileDownload(ids)}
+ onItemClick={(id) => this.handleFileClick(id)}
+ includeInSearchResult={this.includeInSearchResult}
+ />
+
+ <QuickAccessView
+ resources={this.state.resources}
+ scope={scope}
+ searchText={this.state.searchText}
+ onDownloadClick={(ids) => this.handleFileDownload(ids)}
+ onItemClick={(id) => this.handleFileClick(id)}
+ />
+ </>
+ );
+ case "list":
+ return (
+ <>
+ <ListView
+ folders={folders}
+ resources={this.state.resources}
+ searchText={this.state.searchText}
+ onDownloadClick={(ids) => this.handleFileDownload(ids)}
+ onSectionDownloadClick={(category) =>
+ this.handleSectionDownload(category)
+ }
+ onItemClick={(id) => this.handleFileClick(id)}
+ includeInSearchResult={this.includeInSearchResult}
+ />
+ </>
+ );
}
- }
+ };
return (
<>
- <MyBreadcrumbs />
+ <TopSection
+ onViewButtonClick={() => this.toggleView()}
+ currentView={this.state.view}
+ />
<SearchBox
searchText={this.state.searchText}
onSearchTextChange={(text) => this.setState({ searchText: text })}
/>
- {this.getloadedItems() || (
- <>
- { view() }
- <Button
- variant="secondary"
- className="mt-5"
- onClick={this.state.isLoaded ? () => this.toggleView() : undefined}
- >Toggle view</Button>
- </>
- )}
+ {this.getloadedItems() || view()}
</>
);
}
--
GitLab