-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
40b7044
commit c2131b4
Showing
23 changed files
with
590 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| import Tippy from '@tippyjs/react' | ||
| import React, { useContext, useEffect, useRef, useState } from 'react' | ||
| import { browser } from 'webextension-polyfill-ts' | ||
| import { ContextProvider } from '../../context/context' | ||
| import { Shortcut } from '../../reducers/types' | ||
| import AddCustomShortcut from '../AddCustomShortcut' | ||
| import styles from './styles.module.scss' | ||
|
|
||
| interface IProps { | ||
| title: string | ||
| content: string | ||
|
|
||
| index: number | ||
| } | ||
|
|
||
| const Accordion: React.FC<IProps> = (props) => { | ||
| const [active, setActive] = useState(props?.index == 0 ? true : false) | ||
| const { state, dispatch } = useContext(ContextProvider) | ||
| const content: any = useRef(null) | ||
| const [height, setHeight] = useState('0px') | ||
| const [isAddShortcutVisible, setIsAddShortcutVisible] = useState(false) | ||
| const [isEditShortcutVisible, setIsEditShortcutVisible] = useState(false) | ||
| const [selectedShortcut, setSelectedShortcut] = useState<Shortcut | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| setHeight(active ? `${content.current?.scrollHeight}px` : '0px') | ||
| }, []) | ||
|
|
||
| function toggleAccordion() { | ||
| setActive(!active) | ||
| setHeight(active ? '0px' : `${content.current?.scrollHeight}px`) | ||
| } | ||
| const changeCategoryTitle = (oldName: string, newName: string) => { | ||
| let shortcutList = state.shortcutList.map((item) => { | ||
| if (item.category == oldName) { | ||
| item.category = newName | ||
| } | ||
| return item | ||
| }) | ||
|
|
||
| let categoryList = state.shortcutCategoryList.map((item) => { | ||
| if (item == oldName) { | ||
| item = newName | ||
| } | ||
| return item | ||
| }) | ||
|
|
||
| dispatch({ type: 'SET_SHORTCUT_LIST', payload: shortcutList }) | ||
| dispatch({ type: 'SET_SHORTCUT_CATEGORY_LIST', payload: categoryList }) | ||
| browser.storage.local.set({ | ||
| shortcutCategoryList: categoryList, | ||
| shortcutList: shortcutList, | ||
| }) | ||
| } | ||
| const handleEditShortcut = (shortcut: Shortcut) => { | ||
| console.log(shortcut, 'clicked shortcut') | ||
| setSelectedShortcut(shortcut) | ||
| setIsEditShortcutVisible(true) | ||
| } | ||
| return ( | ||
| <> | ||
| {isAddShortcutVisible && ( | ||
| <AddCustomShortcut setIsAddShortcutVisible={setIsAddShortcutVisible} /> | ||
| )} | ||
| {selectedShortcut !== null && isEditShortcutVisible && ( | ||
| <AddCustomShortcut | ||
| setIsAddShortcutVisible={setIsEditShortcutVisible} | ||
| shortcutData={selectedShortcut} | ||
| /> | ||
| )} | ||
|
|
||
| <div className={styles.accordionSection}> | ||
| <div className={`${styles.accordion} ${active ? styles.active : ''}`}> | ||
| <div className={styles.icon} onClick={toggleAccordion}> | ||
| <span className={styles.accordionIcon}>{active ? '-' : '+'}</span> | ||
| </div> | ||
|
|
||
| <div className={styles.titleHeader}> | ||
| <Tippy | ||
| content={ | ||
| <span className={styles.tooltip}> | ||
| Double click to Edit {props.title} | ||
| </span> | ||
| } | ||
| placement='bottom-start' | ||
| arrow={false} | ||
| > | ||
| <input | ||
| type='text' | ||
| className={styles.accordionTitle} | ||
| defaultValue={props.title} | ||
| readOnly | ||
| onDoubleClick={(e) => { | ||
| e.currentTarget.readOnly = false | ||
| e.currentTarget.classList.add(styles.selectedInput) | ||
| }} | ||
| onBlur={(e) => { | ||
| e.currentTarget.readOnly = true | ||
| e.currentTarget.classList.remove(styles.selectedInput) | ||
| changeCategoryTitle(props.title, e.target.value) | ||
| }} | ||
| /> | ||
| </Tippy> | ||
| </div> | ||
| </div> | ||
| <div | ||
| ref={content} | ||
| style={{ maxHeight: `${height}` }} | ||
| className={styles.accordionContent} | ||
| > | ||
| <div className={styles.accordionText}> | ||
| {state.shortcutList.map((shortcut, index) => { | ||
| if (shortcut.category == props.title) { | ||
| return ( | ||
| <div key={index}> | ||
| <Tippy | ||
| content={ | ||
| <span className={styles.tooltip}>Edit {shortcut.title}</span> | ||
| } | ||
| placement='right-end' | ||
| arrow={false} | ||
| > | ||
| <div | ||
| className={styles.shortcutItem} | ||
| onClick={() => { | ||
| handleEditShortcut(shortcut) | ||
| }} | ||
| > | ||
| <img src={shortcut.icon} /> | ||
| <p>{shortcut.title}</p> | ||
| </div> | ||
| </Tippy> | ||
| </div> | ||
| ) | ||
| } | ||
| return null | ||
| })} | ||
|
|
||
| <div | ||
| className={styles.shortcutItem} | ||
| onClick={() => { | ||
| setIsAddShortcutVisible(true) | ||
| }} | ||
| > | ||
| <p>+</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Accordion |
141 changes: 141 additions & 0 deletions
141
source/Dashboard/components/Accordion/styles.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| @import '../../../styles/fonts'; | ||
| @import '../../../styles/variables'; | ||
| @import '../../../styles/reset'; | ||
|
|
||
| .accordionSection { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| margin: 1rem 0; | ||
|
|
||
| .accordion { | ||
| display: grid; | ||
| grid-template-columns: 1fr 25fr; | ||
| align-items: flex-start; | ||
| border: none; | ||
| outline: none; | ||
| transition: background-color 0.3s ease-in-out; | ||
| cursor: pointer; | ||
|
|
||
| .icon { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 24px; | ||
| height: 24px; | ||
| background-color: #133551; | ||
| color: #fff; | ||
| border-radius: 50%; | ||
| margin-top: 6px; | ||
|
|
||
| .accordionIcon { | ||
| font-size: 1.5rem; | ||
| font-weight: 500; | ||
| } | ||
| } | ||
| .titleHeader { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| .accordionTitle { | ||
| font-family: 'Poppins'; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| font-size: 1.2rem; | ||
| line-height: 30px; | ||
| margin-left: 0.5rem; | ||
| padding-left: 0; | ||
| text-align: left; | ||
| background-color: transparent; | ||
| color: $primary-heading; | ||
| width: 80%; | ||
| padding-inline: 0.5rem; | ||
| border-radius: 8px; | ||
| margin-bottom: 0.5rem; | ||
| user-select: none; | ||
| &:hover { | ||
| background-color: rgba(128, 128, 128, 0.181); | ||
| } | ||
| } | ||
| .selectedInput { | ||
| border: 1px solid $primary-border; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .accordionContent { | ||
| width: 100%; | ||
| height: auto; | ||
| overflow: hidden; | ||
| transition: max-height 0.3s ease-in-out; | ||
| padding-inline: 2rem; | ||
|
|
||
| .accordionText { | ||
| max-width: 1000px; | ||
| font-family: 'Poppins'; | ||
| font-style: normal; | ||
| font-weight: 300; | ||
| font-size: 1.2rem; | ||
| line-height: 32px; | ||
| margin-left: 5px; | ||
| color: $primary-text; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| .shortcutItem { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: fit-content; | ||
| padding: 0.2rem 0.5rem; | ||
| border: 0.5px solid $primary-border; | ||
| border-radius: 8px; | ||
| margin-inline: 0.4rem; | ||
| margin-block: 0.4rem; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| background-color: rgba(128, 128, 128, 0.263); | ||
| } | ||
| p { | ||
| margin: 0 0.4rem; | ||
| } | ||
| } | ||
| } | ||
| span { | ||
| color: #fff; | ||
| font-size: 20px; | ||
| font-weight: 800; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 600px) { | ||
| .accordionSection { | ||
| padding-inline: 2rem; | ||
| margin: 1rem 0; | ||
|
|
||
| .accordion { | ||
| width: 100%; | ||
| gap: 1rem; | ||
|
|
||
| .icon { | ||
| width: 20px; | ||
| height: 20px; | ||
| .accordionIcon { | ||
| padding: 4px; | ||
| } | ||
| } | ||
| .accordionTitle { | ||
| font-size: 1rem; | ||
| } | ||
| } | ||
| .accordionContent { | ||
| padding-inline: 0rem; | ||
| .accordionText { | ||
| font-size: 1rem; | ||
| text-align: start; | ||
| line-height: 25px; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.