Add skeleton of FilterModal

2023-03-17 15:21:53 -07:00 · 2023-03-17 15:21:53 -07:00 · ef1f8e83d8
commit ef1f8e83d8
parent 43287a692c
8 changed files with 228 additions and 74 deletions
--- a/components/DialogContent/index.scss
+++ b/components/DialogContent/index.scss
@ -171,6 +171,11 @@
            width: 100%;
          }
        }
+
+        &.Spaced {
+          justify-content: space-between;
+          width: 100%;
+        }
      }
    }

--- a/components/FilterBar/index.scss
+++ b/components/FilterBar/index.scss
@ -38,6 +38,19 @@
      flex-direction: column;
      width: 100%;
    }
+
+    .Button.Filter.Blended {
+      &:hover {
+        background: var(--button-bg);
+      }
+
+      .Accessory svg {
+        fill: none;
+        stroke: var(--button-text);
+        width: 18px;
+        height: 18px;
+      }
+    }
  }

  &.shadow {
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@ -2,11 +2,15 @@ import React, { useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'

+import FilterModal from '~components/FilterModal'
 import RaidDropdown from '~components/RaidDropdown'
-
-import './index.scss'
 import Select from '~components/Select'
 import SelectItem from '~components/SelectItem'
+import Button from '~components/Button'
+
+import FilterIcon from '~public/icons/Filter.svg'
+
+import './index.scss'

 interface Props {
  children: React.ReactNode
@ -32,6 +36,8 @@ const FilterBar = (props: Props) => {
  const [recencyOpen, setRecencyOpen] = useState(false)
  const [elementOpen, setElementOpen] = useState(false)

+  const [filterModalOpen, setFilterModalOpen] = useState(false)
+
  // Set up classes object for showing shadow on scroll
  const classes = classNames({
    FilterBar: true,
@ -66,81 +72,91 @@ const FilterBar = (props: Props) => {
  }

  return (
-    <div className={classes}>
-      {props.children}
-      <div className="Filters">
-        <Select
-          value={`${props.element}`}
-          open={elementOpen}
-          onOpenChange={() => onSelectChange('element')}
-          onValueChange={elementSelectChanged}
-          onClick={openElementSelect}
-        >
-          <SelectItem data-element="all" key={-1} value={-1}>
-            {t('elements.full.all')}
-          </SelectItem>
-          <SelectItem data-element="null" key={0} value={0}>
-            {t('elements.full.null')}
-          </SelectItem>
-          <SelectItem data-element="wind" key={1} value={1}>
-            {t('elements.full.wind')}
-          </SelectItem>
-          <SelectItem data-element="fire" key={2} value={2}>
-            {t('elements.full.fire')}
-          </SelectItem>
-          <SelectItem data-element="water" key={3} value={3}>
-            {t('elements.full.water')}
-          </SelectItem>
-          <SelectItem data-element="earth" key={4} value={4}>
-            {t('elements.full.earth')}
-          </SelectItem>
-          <SelectItem data-element="dark" key={5} value={5}>
-            {t('elements.full.dark')}
-          </SelectItem>
-          <SelectItem data-element="light" key={6} value={6}>
-            {t('elements.full.light')}
-          </SelectItem>
-        </Select>
+    <>
+      <div className={classes}>
+        {props.children}
+        <div className="Filters">
+          <Select
+            value={`${props.element}`}
+            open={elementOpen}
+            onOpenChange={() => onSelectChange('element')}
+            onValueChange={elementSelectChanged}
+            onClick={openElementSelect}
+          >
+            <SelectItem data-element="all" key={-1} value={-1}>
+              {t('elements.full.all')}
+            </SelectItem>
+            <SelectItem data-element="null" key={0} value={0}>
+              {t('elements.full.null')}
+            </SelectItem>
+            <SelectItem data-element="wind" key={1} value={1}>
+              {t('elements.full.wind')}
+            </SelectItem>
+            <SelectItem data-element="fire" key={2} value={2}>
+              {t('elements.full.fire')}
+            </SelectItem>
+            <SelectItem data-element="water" key={3} value={3}>
+              {t('elements.full.water')}
+            </SelectItem>
+            <SelectItem data-element="earth" key={4} value={4}>
+              {t('elements.full.earth')}
+            </SelectItem>
+            <SelectItem data-element="dark" key={5} value={5}>
+              {t('elements.full.dark')}
+            </SelectItem>
+            <SelectItem data-element="light" key={6} value={6}>
+              {t('elements.full.light')}
+            </SelectItem>
+          </Select>

-        <RaidDropdown
-          currentRaid={props.raidSlug}
-          defaultRaid="all"
-          showAllRaidsOption={true}
-          onChange={raidSelectChanged}
-        />
+          <RaidDropdown
+            currentRaid={props.raidSlug}
+            defaultRaid="all"
+            showAllRaidsOption={true}
+            onChange={raidSelectChanged}
+          />

-        <Select
-          value={`${props.recency}`}
-          trigger={'All time'}
-          open={recencyOpen}
-          onOpenChange={() => onSelectChange('recency')}
-          onValueChange={recencySelectChanged}
-          onClick={openRecencySelect}
-        >
-          <SelectItem key={-1} value={-1}>
-            {t('recency.all_time')}
-          </SelectItem>
-          <SelectItem key={86400} value={86400}>
-            {t('recency.last_day')}
-          </SelectItem>
-          <SelectItem key={604800} value={604800}>
-            {t('recency.last_week')}
-          </SelectItem>
-          <SelectItem key={2629746} value={2629746}>
-            {t('recency.last_month')}
-          </SelectItem>
-          <SelectItem key={7889238} value={7889238}>
-            {t('recency.last_3_months')}
-          </SelectItem>
-          <SelectItem key={15778476} value={15778476}>
-            {t('recency.last_6_months')}
-          </SelectItem>
-          <SelectItem key={31556952} value={31556952}>
-            {t('recency.last_year')}
-          </SelectItem>
-        </Select>
+          <Select
+            value={`${props.recency}`}
+            trigger={'All time'}
+            open={recencyOpen}
+            onOpenChange={() => onSelectChange('recency')}
+            onValueChange={recencySelectChanged}
+            onClick={openRecencySelect}
+          >
+            <SelectItem key={-1} value={-1}>
+              {t('recency.all_time')}
+            </SelectItem>
+            <SelectItem key={86400} value={86400}>
+              {t('recency.last_day')}
+            </SelectItem>
+            <SelectItem key={604800} value={604800}>
+              {t('recency.last_week')}
+            </SelectItem>
+            <SelectItem key={2629746} value={2629746}>
+              {t('recency.last_month')}
+            </SelectItem>
+            <SelectItem key={7889238} value={7889238}>
+              {t('recency.last_3_months')}
+            </SelectItem>
+            <SelectItem key={15778476} value={15778476}>
+              {t('recency.last_6_months')}
+            </SelectItem>
+            <SelectItem key={31556952} value={31556952}>
+              {t('recency.last_year')}
+            </SelectItem>
+          </Select>
+
+          <Button
+            className="Filter"
+            blended={true}
+            leftAccessoryIcon={<FilterIcon />}
+            onClick={() => setFilterModalOpen(true)}
+          />
+        </div>
      </div>
-    </div>
+      <FilterModal open={filterModalOpen} onOpenChange={setFilterModalOpen} />
+    </>
  )
 }

--- a/components/FilterModal/index.scss
+++ b/components/FilterModal/index.scss
--- a/components/FilterModal/index.tsx
+++ b/components/FilterModal/index.tsx
@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react'
+import { getCookie, setCookie } from 'cookies-next'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'react-i18next'
+
+import {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogTitle,
+} from '~components/Dialog'
+import DialogContent from '~components/DialogContent'
+import Button from '~components/Button'
+
+import type { DialogProps } from '@radix-ui/react-dialog'
+
+import CrossIcon from '~public/icons/Cross.svg'
+import './index.scss'
+
+interface Props extends DialogProps {}
+
+const FilterModal = (props: Props) => {
+  // Set up router
+  const router = useRouter()
+  const locale = router.locale
+
+  // Set up translation
+  const { t } = useTranslation('common')
+
+  // Refs
+  const headerRef = React.createRef<HTMLDivElement>()
+  const footerRef = React.createRef<HTMLDivElement>()
+
+  // States
+  const [filters, setFilters] = useState<{ [key: string]: any }>()
+  const [open, setOpen] = useState(false)
+
+  // Hooks
+  useEffect(() => {
+    if (props.open !== undefined) setOpen(props.open)
+  })
+
+  function sendFilters() {
+    openChange()
+  }
+
+  function openChange() {
+    if (open) {
+      setOpen(false)
+      if (props.onOpenChange) props.onOpenChange(false)
+    } else {
+      setOpen(true)
+      if (props.onOpenChange) props.onOpenChange(true)
+    }
+  }
+
+  function onEscapeKeyDown(event: KeyboardEvent) {
+    event.preventDefault()
+    openChange()
+  }
+
+  function onOpenAutoFocus(event: Event) {
+    event.preventDefault()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={openChange}>
+      <DialogTrigger asChild>{props.children}</DialogTrigger>
+      <DialogContent
+        className="Search"
+        onEscapeKeyDown={onEscapeKeyDown}
+        onOpenAutoFocus={onOpenAutoFocus}
+      >
+        <div className="DialogHeader" ref={headerRef}>
+          <div className="DialogTop">
+            <DialogTitle className="DialogTitle">
+              {t('modals.filters.title')}
+            </DialogTitle>
+          </div>
+          <DialogClose className="DialogClose" asChild>
+            <span>
+              <CrossIcon />
+            </span>
+          </DialogClose>
+        </div>
+        <form>
+          <div className="Fields"></div>
+          <div className="DialogFooter" ref={footerRef}>
+            <div className="Buttons Spaced">
+              <Button blended={true} text={t('modals.filters.buttons.clear')} />
+              <Button
+                contained={true}
+                text={t('modals.filters.buttons.confirm')}
+              />
+            </div>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default FilterModal
--- a/public/icons/Filter.svg
+++ b/public/icons/Filter.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 1.5H12C12.2761 1.5 12.5 1.72386 12.5 2V3.46482C12.5 3.63199 12.4164 3.78811 12.2774 3.88084L12.5547 4.29687L12.2773 3.88084L8.66795 6.28711C8.25065 6.56531 8 7.03365 8 7.53518V10.4648C8 10.632 7.91645 10.7881 7.77735 10.8808L6 12.0657V7.53518C6 7.03365 5.74935 6.56531 5.33205 6.28711L1.72265 3.88084C1.58355 3.78811 1.5 3.63199 1.5 3.46482V2C1.5 1.72386 1.72386 1.5 2 1.5Z" />
+</svg>
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -206,6 +206,13 @@
        "cancel": "Nevermind"
      }
    },
+    "filters": {
+      "title": "Advanced filters",
+      "buttons": {
+        "confirm": "Save filters",
+        "clear": "Clear filters"
+      }
+    },
    "login": {
      "title": "Log in",
      "buttons": {
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@ -206,6 +206,13 @@
        "cancel": "キャンセル"
      }
    },
+    "filters": {
+      "title": "フィルター設定",
+      "buttons": {
+        "confirm": "フィルターを保存する",
+        "clear": "保存したフィルターをクリア"
+      }
+    },
    "login": {
      "title": "ログイン",
      "buttons": {