Merge branch '161-search-by-notation' into dev

cypress/e2e/searchAndFilter.cy.js

@@ -47,50 +47,49 @@ describe("search and filter", () => {
   it("turning on altLabel checkbox returns altLabel matches", () => {
     cy.visit("/w3id.org/index.de.html")
     cy.findByRole("textbox").type("Alternat")
-
     cy.get("p").contains("Nothing found").should("exist")
-
+    cy.get("#settings").click()
     cy.get("#altLabelCheckBox").click()
+    cy.get("#closeModal").click()
     cy.get("span").contains("Konzept 1").should("exist")
   })
 
   it("turning on hiddenLabel checkbox returns hiddenLabel matches", () => {
     cy.visit("/w3id.org/index.de.html")
     cy.findByRole("textbox").type("Verstecktes")
-
     cy.get("p").contains("Nothing found").should("exist")
-
+    cy.get("#settings").click()
     cy.get("#hiddenLabelCheckBox").click()
     cy.get("span").contains("Konzept 1").should("exist")
   })
 
   it("turning on notation checkbox returns notation matches", () => {
     cy.visit("/w3id.org/index.de.html")
     cy.findByRole("textbox").type("Notat")
-
     cy.get("p").contains("Nothing found").should("exist")
-
+    cy.get("#settings").click()
     cy.get("#notationCheckBox").click()
+    cy.get("#closeModal").click()
     cy.get("span").contains("Konzept 1").should("exist")
   })
 
   it("turning on definition checkbox returns definition matches", () => {
     cy.visit("/w3id.org/index.de.html")
     cy.findByRole("textbox").type("Meine Defi")
-
     cy.get("p").contains("Nothing found").should("exist")
-
+    cy.get("#settings").click()
     cy.get("#definitionCheckBox").click()
+    cy.get("#closeModal").click()
     cy.get("span").contains("Konzept 1").should("exist")
   })
 
   it("turning on example checkbox returns example matches", () => {
     cy.visit("/w3id.org/index.de.html")
     cy.findByRole("textbox").type("Beis")
-
     cy.get("p").contains("Nothing found").should("exist")
-
+    cy.get("#settings").click()
     cy.get("#exampleCheckBox").click()
+    cy.get("#closeModal").click()
     cy.get("span").contains("Konzept 1").should("exist")
   })
 })

src/components/LabelFilter.jsx

@@ -1,30 +1,103 @@
 import { css } from "@emotion/react"
+import { getConfigAndConceptSchemes } from "../hooks/configAndConceptSchemes"
 
 function UnderlinedText(props) {
   return <span style={{ textDecoration: "underline" }}>{props.children}</span>
 }
 
 const LabelFilter = ({ labels, toggleClick }) => {
+  const { config } = getConfigAndConceptSchemes()
   const style = css`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2px 30px;
     padding: 2px;
+
+    .slider-wrapper {
+      display: flex;
+      align-items: center;
+    }
+    /* The switch - the box around the slider */
+    .switch {
+      position: relative;
+      display: block;
+      width: 2.5rem;
+      height: 1.5rem;
+      margin: 0 0.5rem 0 0;
+    }
+
+    /* Hide default HTML checkbox */
+    .switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    /* The slider */
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 1rem;
+      width: 1rem;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+    }
+
+    input:checked + .slider {
+      background-color: ${config.colors.skoHubMiddleColor};
+    }
+
+    input:focus + .slider {
+      box-shadow: 0 0 1px ${config.colors.skoHubMiddleColor};
+    }
+
+    input:checked + .slider:before {
+      -webkit-transform: translateX(1rem);
+      -ms-transform: translateX(1rem);
+      transform: translateX(1rem);
+    }
+
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 1.5rem;
+    }
+
+    .slider.round:before {
+      border-radius: 50%;
+    }
   `
   const handleClick = (e) => {
     toggleClick(e)
   }
   const labelBoxes = Object.entries(labels).map((label) => (
-    <label className="item" key={label[0]}>
-      <input
-        type="checkbox"
-        id={label[0] + "CheckBox"}
-        checked={label[1]}
-        onChange={() => handleClick(label[0])}
-      />
+    <div className="slider-wrapper" key={label[0]}>
+      <label className="switch">
+        <input
+          type="checkbox"
+          id={label[0] + "CheckBox"}
+          checked={label[1]}
+          onChange={() => handleClick(label[0])}
+        />
+        <span className="slider round"></span>
+      </label>
       <UnderlinedText>{label[0][0]}</UnderlinedText>
       {label[0].slice(1)}
-    </label>
+    </div>
   ))
 
   return <div css={style}>{labelBoxes}</div>

src/components/Modal.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react"
+import { css } from "@emotion/react"
+
+function Modal({ openModal, closeModal, children }) {
+  const style = css`
+    dialog {
+      border: none;
+      border-radius: 10px;
+  `
+
+  const ref = useRef()
+
+  useEffect(() => {
+    if (openModal) {
+      ref.current?.showModal()
+    } else {
+      ref.current?.close()
+    }
+  }, [openModal])
+
+  return (
+    <div css={style}>
+      <dialog ref={ref} onCancel={closeModal}>
+        {children}
+        <br />
+        <button id="closeModal" className="close" onClick={closeModal}>
+          Close
+        </button>
+      </dialog>
+    </div>
+  )
+}
+
+export default Modal

src/components/Search.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react"
+import { css } from "@emotion/react"
+import GearIcon from "../icons/Gear"
+import Modal from "./Modal"
+import LabelFilter from "../components/LabelFilter"
+
+const Search = ({ handleQueryInput, labels, onLabelClick }) => {
+  const style = css`
+    .search {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+
+      input[type="text"] {
+        width: 100%;
+        padding: 10px;
+        margin-right: 10px;
+      }
+      button {
+        border: none;
+        background: transparent;
+        cursor: pointer;
+      }
+      dialog {
+        button.close {
+          background: lightgrey;
+          border-width: 2px;
+          border-radius: 10px;
+          padding: 5px 15px;
+          margin: 5px;
+        }
+      }
+    }
+  `
+  const [modal, setModal] = useState(false)
+
+  return (
+    <div css={style}>
+      <div className="search">
+        <input
+          id="searchInput"
+          type="text"
+          className="inputStyle"
+          onChange={handleQueryInput}
+          placeholder="Search"
+          autoFocus
+        />
+        <button id="settings" onClick={() => setModal(true)}>
+          <GearIcon />
+        </button>
+        <Modal openModal={modal} closeModal={() => setModal(false)}>
+          <p>Which labels do you want to include in the search?</p>
+          <LabelFilter labels={labels} toggleClick={onLabelClick} />
+        </Modal>
+      </div>
+    </div>
+  )
+}
+
+export default Search

src/icons/Gear.jsx

@@ -0,0 +1,15 @@
+const GearIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-gear"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
+    <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
+  </svg>
+)
+
+export default GearIcon

src/styles/concepts.css.js

@@ -55,12 +55,6 @@ export const conceptStyle = (colors) => css`
     flex-direction: column;
     overflow: auto;
 
-    input[type="text"] {
-      margin-bottom: 10px;
-      width: 100%;
-      padding: 10px;
-    }
-
     & > ul {
       overflow: auto;
       margin: 0;

src/templates/App.jsx

@@ -5,7 +5,7 @@ import NestedList from "../components/nestedList"
 import TreeControls from "../components/TreeControls"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import LabelFilter from "../components/LabelFilter"
+import Search from "../components/Search"
 
 import { conceptStyle } from "../styles/concepts.css.js"
 import { getConfigAndConceptSchemes } from "../hooks/configAndConceptSchemes"
@@ -87,16 +87,11 @@ const App = ({ pageContext, children }) => {
       />
       <div className="Concept" css={style}>
         <nav className="block nav-block">
-          <input
-            id="searchInput"
-            type="text"
-            className="inputStyle"
-            onChange={(e) => setQuery(e.target.value || null)}
-            placeholder="Search (Ctrl-k)"
-            autoFocus
+          <Search
+            handleQueryInput={(e) => setQuery(e.target.value || null)}
+            labels={labels}
+            onLabelClick={(e) => toggleClick(e)}
           />
-          {/* filter labels to search */}
-          <LabelFilter labels={labels} toggleClick={(e) => toggleClick(e)} />
           {showTreeControls && <TreeControls />}
           <div className="concepts">
             {tree && (