From 2cbdf77c512106943c2ab75aeb8eadc2772df5ca Mon Sep 17 00:00:00 2001 From: preetamm Date: Sun, 8 Aug 2021 18:36:07 +0530 Subject: [PATCH] added sidebar toggle feature and confirmation prompt before deleting any list-item --- src/components/builder/left/LeftSidebar.js | 24 ++++++++++++-------- src/components/builder/lists/ListItem.js | 20 +++++++++++++--- src/components/builder/right/RightNavbar.js | 21 +++++++++++++---- src/components/builder/right/RightSidebar.js | 24 ++++++++++++-------- src/contexts/SettingsContext.js | 8 ++++++- src/pages/app/builder.js | 6 +++-- src/pages/app/builder.module.css | 7 ++++-- src/styles/global.css | 16 +++++++++++++ 8 files changed, 94 insertions(+), 32 deletions(-) diff --git a/src/components/builder/left/LeftSidebar.js b/src/components/builder/left/LeftSidebar.js index e7e1625a1..ee21de014 100644 --- a/src/components/builder/left/LeftSidebar.js +++ b/src/components/builder/left/LeftSidebar.js @@ -1,5 +1,5 @@ import { Element } from 'react-scroll'; -import React, { Fragment, memo } from 'react'; +import React, { Fragment, memo, useContext } from 'react'; import * as styles from './LeftSidebar.module.css'; import Awards from './sections/Awards'; import Certifications from './sections/Certifications'; @@ -15,6 +15,7 @@ import Skills from './sections/Skills'; import Social from './sections/Social'; import Work from './sections/Work'; import sections from '../../../data/leftSections'; +import SettingsContext from '../../../contexts/SettingsContext'; const getComponent = (id) => { switch (id) { @@ -60,14 +61,17 @@ const SidebarSection = ({ id, event }) => { ); }; -const LeftSidebar = () => ( -
- - - -); - + ); +}; export default memo(LeftSidebar); diff --git a/src/components/builder/lists/ListItem.js b/src/components/builder/lists/ListItem.js index 56496c0db..42bbc612f 100644 --- a/src/components/builder/lists/ListItem.js +++ b/src/components/builder/lists/ListItem.js @@ -24,6 +24,7 @@ const ListItem = ({ const dispatch = useDispatch(); const { t } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); + const [deleteClickCount, setDeleteClickCount] = useState(0); const handleClick = (event) => setAnchorEl(event.currentTarget); const toggleSwitchState = 'isVisible' in data ? data.isVisible : true; @@ -81,6 +82,14 @@ const ListItem = ({ }); }; + const checkConfirmationAndDelte = () => { + if (deleteClickCount === 1) { + handleDelete(); + } else if (deleteClickCount < 1) { + setDeleteClickCount(deleteClickCount + 1); + } + }; + return ( {(dragProvided) => ( @@ -126,7 +135,10 @@ const ListItem = ({ { + setDeleteClickCount(0); + handleClose(); + }} open={Boolean(anchorEl)} >
@@ -140,9 +152,11 @@ const ListItem = ({ {t('shared.buttons.edit')} - + - {t('shared.buttons.delete')} + {deleteClickCount + ? t('shared.buttons.confirmation') + : t('shared.buttons.delete')}
diff --git a/src/components/builder/right/RightNavbar.js b/src/components/builder/right/RightNavbar.js index 896834531..56df03072 100644 --- a/src/components/builder/right/RightNavbar.js +++ b/src/components/builder/right/RightNavbar.js @@ -1,9 +1,23 @@ -import React, { memo } from 'react'; +import React, { memo, useContext } from 'react'; +import { BsBoxArrowRight, BsBoxArrowLeft } from 'react-icons/bs'; import * as styles from './RightNavbar.module.css'; import SectionIcon from '../../shared/SectionIcon'; import SyncIndicator from './SyncIndicator'; import sections from '../../../data/rightSections'; +import SettingsContext from '../../../contexts/SettingsContext'; +const SideBarToggleIcon = ({ className }) => { + const { isSideBarOpen, setSideBarToggle } = useContext(SettingsContext); + const ToggleIcon = isSideBarOpen ? BsBoxArrowRight : BsBoxArrowLeft; + return ( + + ); +}; const RightNavbar = () => (
@@ -16,9 +30,8 @@ const RightNavbar = () => ( /> ))}
- -
- + +
); diff --git a/src/components/builder/right/RightSidebar.js b/src/components/builder/right/RightSidebar.js index d3c99df31..eb37c0b86 100644 --- a/src/components/builder/right/RightSidebar.js +++ b/src/components/builder/right/RightSidebar.js @@ -1,5 +1,5 @@ import { Element } from 'react-scroll'; -import React, { Fragment, memo } from 'react'; +import React, { Fragment, memo, useContext } from 'react'; import * as styles from './RightSidebar.module.css'; import About from './sections/About'; import Actions from './sections/Actions'; @@ -11,6 +11,7 @@ import RightNavbar from './RightNavbar'; import Settings from './sections/Settings'; import Templates from './sections/Templates'; import sections from '../../../data/rightSections'; +import SettingsContext from '../../../contexts/SettingsContext'; const getComponent = (id) => { switch (id) { @@ -37,7 +38,6 @@ const getComponent = (id) => { const SidebarSection = ({ id, event }) => { const Component = getComponent(id); - return ( @@ -48,14 +48,18 @@ const SidebarSection = ({ id, event }) => { ); }; -const RightSidebar = () => ( -
- -); + ); +}; export default memo(RightSidebar); diff --git a/src/contexts/SettingsContext.js b/src/contexts/SettingsContext.js index 62efd1b17..740bedadb 100644 --- a/src/contexts/SettingsContext.js +++ b/src/contexts/SettingsContext.js @@ -9,6 +9,8 @@ const defaultState = { setTheme: () => {}, language: 'en', setLanguage: () => {}, + isSideBarOpen: true, + setSideBarToggle: () => {}, }; const SettingsContext = createContext(defaultState); @@ -16,7 +18,9 @@ const SettingsContext = createContext(defaultState); const SettingsProvider = ({ children }) => { const [theme, setTheme] = useState(defaultState.theme); const [language, setLanguage] = useState(defaultState.theme); - + const [isSideBarOpen, setSideBarToggle] = useState( + defaultState.isSideBarOpen, + ); useEffect(() => { const prefTheme = localStorage.getItem('theme') || defaultState.theme; const prefLanguage = @@ -45,6 +49,8 @@ const SettingsProvider = ({ children }) => { setTheme, language, setLanguage, + isSideBarOpen, + setSideBarToggle, }} > {children} diff --git a/src/pages/app/builder.js b/src/pages/app/builder.js index afd3ea32d..c3fa344ac 100644 --- a/src/pages/app/builder.js +++ b/src/pages/app/builder.js @@ -10,12 +10,14 @@ import DatabaseContext from '../../contexts/DatabaseContext'; import LeftSidebar from '../../components/builder/left/LeftSidebar'; import LoadingScreen from '../../components/router/LoadingScreen'; import RightSidebar from '../../components/builder/right/RightSidebar'; +import SettingsContext from '../../contexts/SettingsContext'; const Builder = ({ id }) => { const dispatch = useDispatch(); const { t } = useTranslation(); const [loading, setLoading] = useState(true); const { getResume } = useContext(DatabaseContext); + const { isSideBarOpen } = useContext(SettingsContext); const handleLoadDemoData = () => { dispatch({ type: 'load_demo_data' }); @@ -58,7 +60,7 @@ const Builder = ({ id }) => {
-
+
@@ -66,7 +68,7 @@ const Builder = ({ id }) => {
); - }, [loading]); + }, [loading, isSideBarOpen]); }; export default memo(Builder); diff --git a/src/pages/app/builder.module.css b/src/pages/app/builder.module.css index 46b973631..a10aeb38e 100644 --- a/src/pages/app/builder.module.css +++ b/src/pages/app/builder.module.css @@ -3,21 +3,24 @@ } .left { - width: calc(100vw / 4); box-shadow: var(--left-shadow); + max-width: calc(100vw / 4); + flex-shrink: 1; @apply bg-primary-50 absolute top-0 bottom-0 left-0 z-10; } .center { + flex-shrink: 1; width: calc(100vw / 2); @apply relative z-0 h-screen overflow-scroll flex flex-col justify-items-center; } .right { - width: calc(100vw / 4); + max-width: calc(100vw / 4); box-shadow: var(--right-shadow); + flex-shrink: 1; @apply bg-primary-50 absolute top-0 bottom-0 right-0 z-10; } diff --git a/src/styles/global.css b/src/styles/global.css index f18504f9d..16895bbe1 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -7,6 +7,22 @@ body { @apply transition-colors duration-200 ease-in-out; } +*::-webkit-scrollbar { + width: 8px; + height: 8px; + background-color: white; +} + +*::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px grey; +} + +*::-webkit-scrollbar-thumb { + background-color: darkgrey; + border-radius: 20px; + outline: 1px solid slategrey; +} + a { @apply font-semibold; }