From 8cf9965124cf381aeef99707b32d118dbfae3521 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Wed, 1 Sep 2021 13:14:24 +0530 Subject: [PATCH] More options component integrations --- src/assets/icons/delete.svg | 8 ++--- src/assets/icons/share.svg | 2 +- src/components/calendar/Calendar.tsx | 6 ++-- .../category-details/CategoryDetails.tsx | 14 +++++++++ .../PopoverOptions.module.scss | 12 +++++++- src/components/revise/Revise.tsx | 1 - .../shelf-details/ShelfDetails.module.scss | 7 +---- src/components/shelf-details/ShelfDetails.tsx | 29 +++++++++++++++++-- 8 files changed, 61 insertions(+), 18 deletions(-) diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg index 70cdd16..a538924 100644 --- a/src/assets/icons/delete.svg +++ b/src/assets/icons/delete.svg @@ -1,8 +1,8 @@ - - - - + + + + diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg index 36d3193..6660800 100644 --- a/src/assets/icons/share.svg +++ b/src/assets/icons/share.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx index 4e7a623..0c85d17 100644 --- a/src/components/calendar/Calendar.tsx +++ b/src/components/calendar/Calendar.tsx @@ -163,8 +163,10 @@ export const Calendar: React.FC = () => {
{ schedule.title }

{ schedule.description }

{ schedule.duration_in_min } minutes practice

- - } + ; + } else { + return null; + } }) } }) } diff --git a/src/components/category-details/CategoryDetails.tsx b/src/components/category-details/CategoryDetails.tsx index 882e2a0..ad13488 100644 --- a/src/components/category-details/CategoryDetails.tsx +++ b/src/components/category-details/CategoryDetails.tsx @@ -7,6 +7,8 @@ import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.s import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg'; import { ReactComponent as ComposeIcon } from '../../assets/icons/compose.svg'; import { ReactComponent as ExportLine } from '../../assets/icons/export-line.svg'; +import { ReactComponent as ShareIcon } from '../../assets/icons/share.svg'; +import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg'; import { CircularProgressbar } from "react-circular-progressbar"; import { NavLink } from "react-router-dom"; @@ -61,6 +63,18 @@ export const CategoryDetails: React.FC = () => { icon: , title: 'Edit', function: () => { console.log("Edit Clicked") } + }, { + icon: , + title: 'Move', + function: () => { console.log("Move Clicked") } + }, { + icon: , + title: 'Share', + function: () => { console.log("Share Clicked") } + }, { + icon: , + title: 'Delete', + function: () => { console.log("Delete Clicked") } }]} /> diff --git a/src/components/popover-options/PopoverOptions.module.scss b/src/components/popover-options/PopoverOptions.module.scss index d82b5e4..024ee43 100644 --- a/src/components/popover-options/PopoverOptions.module.scss +++ b/src/components/popover-options/PopoverOptions.module.scss @@ -4,13 +4,23 @@ .backdrop { background-color: black; - opacity: 0.2; width: 100vw; height: 100vh; z-index: 1; position: fixed; left: 0; top: 0; + opacity: 0; + animation: fadeIn 0.3s forwards; + backdrop-filter: blur(5px); + + @keyframes fadeIn { + 0% { + opacity: 0; + } 100% { + opacity: 0.2; + } + } } .moreButton { diff --git a/src/components/revise/Revise.tsx b/src/components/revise/Revise.tsx index ff9a23b..5fa638f 100644 --- a/src/components/revise/Revise.tsx +++ b/src/components/revise/Revise.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import { NavLink } from "react-router-dom"; import styles from './Revise.module.scss'; import { Question } from "./question/Question"; diff --git a/src/components/shelf-details/ShelfDetails.module.scss b/src/components/shelf-details/ShelfDetails.module.scss index 777352b..4b784e8 100644 --- a/src/components/shelf-details/ShelfDetails.module.scss +++ b/src/components/shelf-details/ShelfDetails.module.scss @@ -83,12 +83,7 @@ justify-content: center; background-color: transparent; border: none; - - svg { - fill: white; - width: 1.8rem; - height: 1.8rem; - } + z-index: 1; } .progressHolder { diff --git a/src/components/shelf-details/ShelfDetails.tsx b/src/components/shelf-details/ShelfDetails.tsx index 422fbdc..0c2206e 100644 --- a/src/components/shelf-details/ShelfDetails.tsx +++ b/src/components/shelf-details/ShelfDetails.tsx @@ -10,7 +10,14 @@ import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg'; import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg'; import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg'; import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg'; + +import { ReactComponent as ComposeIcon } from '../../assets/icons/compose.svg'; +import { ReactComponent as ExportLine } from '../../assets/icons/export-line.svg'; +import { ReactComponent as ShareIcon } from '../../assets/icons/share.svg'; +import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg'; + import { IWord } from "../../structure/word"; +import { PopoverOptions } from "../popover-options/PopoverOptions"; export const ShelfDetails: React.FC = () => { const location = useLocation(); @@ -49,9 +56,25 @@ export const ShelfDetails: React.FC = () => {
- +
+ , + title: 'Edit', + function: () => { console.log("Edit Clicked") } + }, { + icon: , + title: 'Move', + function: () => { console.log("Move Clicked") } + }, { + icon: , + title: 'Share', + function: () => { console.log("Share Clicked") } + }, { + icon: , + title: 'Delete', + function: () => { console.log("Delete Clicked") } + }]} /> +

{ shelf.name }

{ shelf.words.length } Words