diff --git a/components/AboutProject.js b/components/AboutProject.js new file mode 100644 index 000000000..da27f7ff3 --- /dev/null +++ b/components/AboutProject.js @@ -0,0 +1,68 @@ +import { useTranslation } from 'next-i18next' + +import Feedback from './StartPage/Feedback' + +const paragraphs = [ + { + p: 'P1', + }, + { + p: 'P2', + }, + { + p: 'P3', + }, + { + p: 'P4', + }, + { + p: 'P5', + }, + { + p: 'Ul1', + ul: ['Li1', 'Li2', 'Li3'], + }, + { + p: 'P6', + }, + { + p: 'Ul2', + ul: ['Li1', 'Li2'], + }, + { + p: 'P7', + }, + { + p: 'P8', + }, +] + +function AboutProject() { + const { t } = useTranslation(['start-page', 'about', 'common']) + + return ( + <> +
+

{t('common:About')}

+
+ {paragraphs.map((item) => { + if (!item.ul) { + return

{t(`about:${item.p}`)}

+ } + + return ( + + ) + })} +
+
+ + + ) +} + +export default AboutProject diff --git a/components/AboutVersion.js b/components/AboutVersion.js index 4ee62b4a7..d37c2fd89 100644 --- a/components/AboutVersion.js +++ b/components/AboutVersion.js @@ -16,7 +16,7 @@ import updatesES from '../public/updateVersionInfo/updates_es.md' import Close from 'public/close.svg' -function AboutVersion({ isStartPage = false }) { +function AboutVersion({ isStartPage = false, collapsed, onClose }) { const aboutVersion = { en: updatesEN, ru: updatesRU, @@ -83,37 +83,44 @@ function AboutVersion({ isStartPage = false }) { return ( <> -
+
{t('Version')} {packageJson.version}
{modalsSidebarState.aboutVersion && (
e.stopPropagation()} > -
-

- {t('Version')} {packageJson.version} +

+

+ {t('Version')}

- + {showAllUpdates ? fullAboutVersion : currentAboutVersion} -
+
diff --git a/components/Account.js b/components/Account.js index aa49d867f..6a628d81b 100644 --- a/components/Account.js +++ b/components/Account.js @@ -8,12 +8,9 @@ import { Menu, Tab } from '@headlessui/react' import ProjectCreate from './ProjectCreate' import Projects from './Projects' -import MobileMenu from './Panel/UI/MobileMenu' import { useCurrentUser } from 'lib/UserContext' -import Plus from 'public/plus.svg' - const sizeTabs = { 1: 'w-1/6', 2: 'w-full lg:w-3/6', @@ -24,9 +21,9 @@ const sizeTabs = { } function Account() { + const [selectedTab, setSelectedTab] = useState(0) const { user, loading } = useCurrentUser() const router = useRouter() - const [openInternalMenu, setOpenInternalMenu] = useState(false) const { t } = useTranslation(['users', 'project-edit']) @@ -35,13 +32,30 @@ function Account() { router.push('/') } }, [router, user, loading]) + + useEffect(() => { + if (router.query?.tab) { + setSelectedTab(parseInt(router.query?.tab)) + } + }, [router]) + + useEffect(() => { + router.push(`?tab=${selectedTab}`, undefined, { shallow: true }) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedTab]) + const tabs = ['Account', 'projects:Projects', 'projects:CreateProject'] return ( <>
{user?.id && ( <> - + {tabs .filter((el) => el !== 'projects:CreateProject') @@ -70,7 +84,12 @@ function Account() { - + )}
- {user?.is_admin && ( - setOpenInternalMenu(false)} - hideCloseButton={openInternalMenu} - btnPositionHeight="bottom-[15vh]" - mainHeight="h-[15vh]" - > - - - - -
setOpenInternalMenu(true)} - > - {t('project-edit:CreateNewProject')} -
- - - - - - )} - - {openInternalMenu && ( -
-
- -
- -
- )} ) } diff --git a/components/AppBar.js b/components/AppBar.js index fba69edf9..2cd0229bb 100644 --- a/components/AppBar.js +++ b/components/AppBar.js @@ -25,9 +25,11 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { const supabase = useSupabaseClient() const { user } = useCurrentUser() const router = useRouter() + useEffect(() => { setIsStepPage(router.pathname === '/translate/[project]/[book]/[chapter]/[step]') }, [router.pathname]) + useEffect(() => { const hasAccess = async () => { try { @@ -44,17 +46,30 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) { }, [supabase, user]) const logoLink = useMemo(() => { - return !user?.id ? '/' : access ? '/account' : '/agreements' + return !user?.id ? '/' : access ? '/account?tab=0' : '/agreements' }, [access, user]) + return ( -
+
isOpenSideBar && setIsOpenSideBar(false)}>
- + {![ + '/user-agreement', + '/confession-steps', + '/agreements', + '/404', + '/privacy-policy', + ].includes(router.pathname) && ( + + )}
diff --git a/components/Layout.js b/components/Layout.js index f0ec40ba6..428285832 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -40,7 +40,7 @@ function Layout({ backgroundColor, children }) { enter="transition-opacity duration-200" leave="transition-opacity duration-200" > -
+
{loadingPage && ( )} @@ -48,7 +48,9 @@ function Layout({ backgroundColor, children }) {
-
{children}
+
+ {children} +
diff --git a/components/Modal.js b/components/Modal.js index 268adaf67..810f6fd27 100644 --- a/components/Modal.js +++ b/components/Modal.js @@ -30,7 +30,7 @@ function Modal({ className={classNames.main} onClose={() => !handleCloseDisabled && closeHandle()} > -
+
-
- {t('personalNotes')} +
+ {buttonTitle}
{isOpen && (
e.stopPropagation()} > -
-
-
{children}
+
+ {children} +
)} diff --git a/components/ProjectCreate.js b/components/ProjectCreate.js index 63c436b83..9070cb9cb 100644 --- a/components/ProjectCreate.js +++ b/components/ProjectCreate.js @@ -198,9 +198,9 @@ function ProjectCreate() { resourcesUrl={resourcesUrl} setResourcesUrl={setResourcesUrl} /> -
+
{ setModalsSidebarState((prevModals) => ({ aboutVersion: modalType === 'aboutVersion' ? !prevModals.aboutVersion : false, @@ -50,6 +72,25 @@ function SideBar({ setIsOpenSideBar, access }) { }) } + useEffect(() => { + const checkScreenSize = () => { + setIsLargeScreen(window.innerWidth > 1024) + } + + checkScreenSize() + window.addEventListener('resize', checkScreenSize) + + return () => window.removeEventListener('resize', checkScreenSize) + }, []) + + useEffect(() => { + if (!isOpenSideBar) { + setCollapsed(true) + closeModal() + setShowAbout(false) + } + }, [isOpenSideBar]) + return ( {({ open, close }) => ( @@ -59,136 +100,449 @@ function SideBar({ setIsOpenSideBar, access }) { closeModal() setIsOpenSideBar((prev) => !prev) }} - className="z-30" + className="z-20" > {access && (!open ? ( - + ) : ( - + ))} { + setShowAbout(false) + + setShowCreate(false) + }} as={Fragment} - appear={true} - show={open} + appear={open} + show={isLargeScreen || open} enter="transition-opacity duration-200" leave="transition-opacity duration-200" > e.stopPropagation()} + onMouseEnter={() => { + setCollapsed(false) + + setIsOpenSideBar(true) + }} + onMouseLeave={() => { + if ( + modalsSidebarState.notepad || + modalsSidebarState.aboutVersion || + modalsSidebarState.avatarSelector || + showAbout + ) { + return + } + setCollapsed(true) + closeModal() + close() + setIsOpenSideBar(false) + setShowAbout(false) + }} > -
-
+
+
openModal('avatarSelector')} > -
- +
+
+ +
-
{user?.login}
-
{user?.email}
+
+ {user?.login} +
+
{user?.email}
-
-
- -
-
- -
- {t('Language')} -
- - - - -
openModal('aboutVersion')} +
+
+
+ -
- -
- -
- - -
openModal('notepad')} + + { + closeModal() + setIsOpenSideBar(false) + close() + setShowAbout(false) + }} + > +
+ +
+ + {t('Account')} + + + + + + -
- -
- - setModalsSidebarState((prev) => ({ ...prev, notepad: value })) - } - > - - -
- - {user?.is_admin && ( - - + { closeModal() setIsOpenSideBar(false) close() + setShowAbout(false) }} > - - -
- -
{ - setModalsSidebarState((prev) => ({ - ...prev, - aboutVersion: false, - })) - setIsOpenSideBar((prev) => !prev) - close() - }} - > - + + {user?.is_admin && ( + + )} + + {user?.is_admin && ( + +
{ + setShowCreate((prev) => !prev) + openModal() + }} + > +
+ +
+ + + +
+ + )} + + +
{ + openModal('notepad') + setShowAbout(false) + }} + > +
+ +
+ { + setModalsSidebarState((prev) => ({ + ...prev, + notepad: value, + })) + setCollapsed(!value) + setIsOpenSideBar(value) + }} + modalTitle={t('personalNotes')} + buttonTitle={t('personalNotes')} + collapsed={collapsed} + > + + +
+ + + {user?.is_admin && ( + + + { + closeModal() + setIsOpenSideBar(false) + close() + setShowAbout(false) + }} + > +
+ +
+
+ + {t('users:UserManagement')} + +
+ + + + )} +
+
+ +
+
+
+
+ +
+
+ +
+ + {t('Language')} + +
+ + + + +
{ + setShowAbout((prev) => !prev) + openModal() + }} + > +
+ +
+ { + setShowAbout(value) + setCollapsed(!value) + setIsOpenSideBar(value) + }} + isOpen={showAbout} + buttonTitle={t('About')} + modalTitle={'LEVEL'} + collapsed={collapsed} + > + + +
+ + + +
{ + openModal('aboutVersion') + setShowAbout(false) + }} + > +
+ +
+ { + setCollapsed(!value) + setIsOpenSideBar(value) + }} + collapsed={collapsed} + /> +
+ + + + +
+
diff --git a/components/SignOut.js b/components/SignOut.js index 090ff3ecf..ec86f7a44 100644 --- a/components/SignOut.js +++ b/components/SignOut.js @@ -4,11 +4,11 @@ import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' -import ButtonLoading from './ButtonLoading' - import useSupabaseClient from 'utils/supabaseClient' -export default function SignOut() { +import LogOut from 'public/logout.svg' + +export default function SignOut({ collapsed }) { const supabaseClient = useSupabaseClient() const [loading, setLoading] = useState(false) const { t } = useTranslation('users') @@ -28,12 +28,26 @@ export default function SignOut() { } return ( - - {t('users:SignOut')} - + + +

+ {t('users:SignOut')} +

+ ) } diff --git a/components/StartPage/Feedback.js b/components/StartPage/Feedback.js index 1526ab1ae..4acd6fe08 100644 --- a/components/StartPage/Feedback.js +++ b/components/StartPage/Feedback.js @@ -1,5 +1,7 @@ import { useState } from 'react' +import { useRouter } from 'next/router' + import { toast, Toaster } from 'react-hot-toast' import axios from 'axios' @@ -11,6 +13,8 @@ function Feedback({ t, onClose }) { const [isError, setIsError] = useState(false) const [isSaving, setIsSaving] = useState(false) const [isSent, setIsSent] = useState(false) + const router = useRouter() + const isStartPage = router.asPath === '/' const handleChange = (e) => { setFeedback({ ...feedback, [e.target.name]: e.target.value }) @@ -44,7 +48,19 @@ function Feedback({ t, onClose }) { return (
-

{t('ConnectWithUs')}

+ {isStartPage ? ( +

{t('ConnectWithUs')}

+ ) : ( + !isSent && ( +

+ {t('ConnectWithUs')} +

+ ) + )}
e.stopPropagation()}> {!isSent ? ( @@ -84,7 +100,9 @@ function Feedback({ t, onClose }) { {t('users:Send')} @@ -96,7 +114,9 @@ function Feedback({ t, onClose }) {

{t('users:YourMessageSentThankYou')}