From 77c8777b7f66bddd374d68decd507547d356d602 Mon Sep 17 00:00:00 2001
From: Marcin Aman <maman@virtuslab.com>
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 ++--------------------
 .../src/main/components/search/search.scss         | 14 +++++++
 .../frontend/src/main/components/search/search.tsx | 16 +++++++-
 4 files changed, 39 insertions(+), 44 deletions(-)
 create mode 100644 plugins/base/frontend/src/main/components/search/search.scss

(limited to 'plugins/base/frontend/src')

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 <div ref={ref} className="search-content">
-        {isComponentVisible && (<WithFuzzySearchFilter/>)}
-        {!isComponentVisible && (
-            <span onClick={() => setIsComponentVisible(true)}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg>
-          </span>)}
+    return <div className="search-content">
+        <WithFuzzySearchFilter/>
     </div>
 }
 
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
new file mode 100644
index 00000000..a891283e
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -0,0 +1,14 @@
+.search {
+  button {
+    border: none;
+    fill: #637282;
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.popup-wrapper {
+  min-width: calc(100% - 360px) !important;
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
index f0df0c98..b0fdd96a 100644
--- a/plugins/base/frontend/src/main/components/search/search.tsx
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -1,7 +1,8 @@
 import React, {useCallback, useState} from 'react';
 import {Select} from '@jetbrains/ring-ui';
 import '@jetbrains/ring-ui/components/input-size/input-size.scss';
-import {IWindow, Option, Props, State} from "./types";
+import './search.scss';
+import {IWindow, Option, Props} from "./types";
 
 const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
     const [selected, onSelected] = useState<Option>(data[0]);
@@ -12,6 +13,7 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
         },
         [data]
     );
+
     return (
         <div className="search-container">
             <div className="search">
@@ -19,10 +21,22 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
                     selectedLabel="Search"
                     label="Please type page name"
                     filter={{fuzzy: true}}
+                    type={Select.Type.CUSTOM}
                     clear
                     selected={selected}
                     data={data}
+                    popupClassName={"popup-wrapper"}
                     onSelect={onChangeSelected}
+                    customAnchor={({wrapperProps, buttonProps, popup}) => (
+                        <span {...wrapperProps}>
+                            <button type="button" {...buttonProps}>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                                    <path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/>
+                                </svg>
+                            </button>
+                            {popup}
+                        </span>
+                    )}
                 />
         </div>
       </div>
-- 
cgit