From 77c8777b7f66bddd374d68decd507547d356d602 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Sun, 31 May 2020 21:02:46 +0200 Subject: Improve CSS, pages navigation tree and create anchors on page --- .../frontend/src/main/components/app/index.scss | 8 +++- .../frontend/src/main/components/app/index.tsx | 45 ++-------------------- 2 files changed, 10 insertions(+), 43 deletions(-) (limited to 'plugins/base/frontend/src/main/components/app') diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss index c267bc6e..da5042b1 100644 --- a/plugins/base/frontend/src/main/components/app/index.scss +++ b/plugins/base/frontend/src/main/components/app/index.scss @@ -17,5 +17,11 @@ html, } .search-content { - padding: 24px 41px; + padding-top: 24px; + margin: 0 41px; + position: absolute; + top: 0; + right: 0; + z-index: 8; + background-color: #f4f4f4 } diff --git a/plugins/base/frontend/src/main/components/app/index.tsx b/plugins/base/frontend/src/main/components/app/index.tsx index 1a51e699..4081dec4 100644 --- a/plugins/base/frontend/src/main/components/app/index.tsx +++ b/plugins/base/frontend/src/main/components/app/index.tsx @@ -1,49 +1,10 @@ -import React, {useEffect, useRef, useState} from 'react'; +import React from 'react'; import {WithFuzzySearchFilter} from '../search/search'; import './index.scss'; -function useComponentVisible(initialIsVisible: boolean) { - const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible); - const ref = useRef(null); - - const handleHideDropdown = (event: KeyboardEvent) => { - if (event.key === "Escape") { - setIsComponentVisible(false); - } - }; - - const handleClickOutside = (event : MouseEvent)=> { - // @ts-ignore - if (ref.current && !ref.current.contains(event.target)) { - setIsComponentVisible(false); - } - }; - - useEffect(() => { - document.addEventListener("keydown", handleHideDropdown, false); - document.addEventListener("click", handleClickOutside, false); - return () => { - document.removeEventListener("keydown", handleHideDropdown, false); - document.removeEventListener("click", handleClickOutside, false); - }; - }); - - return { ref, isComponentVisible, setIsComponentVisible }; -} - const App: React.FC = () => { - const { - ref, - isComponentVisible, - setIsComponentVisible - } = useComponentVisible(false); - - return
- {isComponentVisible && ()} - {!isComponentVisible && ( - setIsComponentVisible(true)}> - - )} + return
+
} -- cgit