setFilterOption(FILTER_OPTIONS.thisTab)}
+ className={`option ${filterTabOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
+ onClick={() => setFilterTabOption(FILTER_OPTIONS.thisTab)}
>
In this tab
setFilterOption(FILTER_OPTIONS.all)}
+ className={`option ${filterTabOption === FILTER_OPTIONS.allTab ? 'selected' : null}`}
+ onClick={() => setFilterTabOption(FILTER_OPTIONS.allTab)}
>
In all tabs
setFilterOption(FILTER_OPTIONS.unsorted)}
+ className={`option ${filterTabOption === FILTER_OPTIONS.noTab ? 'selected' : null}`}
+ onClick={() => setFilterTabOption(FILTER_OPTIONS.noTab)}
>
In no tabs
diff --git a/src/components/Library/ViewBar.jsx b/src/components/Library/ViewBar.jsx
new file mode 100644
index 0000000..43e6fcd
--- /dev/null
+++ b/src/components/Library/ViewBar.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { VIEW_OPTIONS } from './hooks';
+
+import './index.scss';
+import EnabledCondenseIcon from '../../assets/icons/condense-enabled.svg';
+import DisabledCondenseIcon from '../../assets/icons/condense-disabled.svg';
+import EnabledExpandIcon from '../../assets/icons/expand-enabled.svg';
+import DisabledExpandIcon from '../../assets/icons/expand-disabled.svg';
+
+const ViewBar = ({
+ viewOption,
+ setViewOption,
+}) => {
+
+ return (
+
+
+
setViewOption(VIEW_OPTIONS.condensed)}
+ >
+
+
+
setViewOption(VIEW_OPTIONS.expanded)}
+ >
+
+
+ {/*
+ setSortOption(SORT_OPTIONS.abc)}
+ >
+ ABC
+
+ setSortOption(SORT_OPTIONS.zxy)}
+ >
+ ZXY
+
+ setSortOption(SORT_OPTIONS.newest)}
+ >
+ Newest
+
+ setSortOption(SORT_OPTIONS.oldest)}
+ >
+ Oldest
+
+
*/}
+
+ );
+};
+
+export default ViewBar;
\ No newline at end of file
diff --git a/src/components/Library/hooks.js b/src/components/Library/hooks.js
index f7c7432..95b0c43 100644
--- a/src/components/Library/hooks.js
+++ b/src/components/Library/hooks.js
@@ -3,10 +3,9 @@ import { useSelector } from 'react-redux';
import { CARD_COLOR_KEYS } from '../../styles/colors';
export const FILTER_OPTIONS = {
- all: 'all',
- color: 'color',
+ allTab: 'allTab',
+ noTab: 'noTab',
thisTab: 'thisTab',
- unsorted: 'unsorted',
};
export const SORT_OPTIONS = {
@@ -33,15 +32,20 @@ const hasSearch = (card, search) => {
return false;
};
-const hasFilter = (card, filter, color, tab, allTabs) => {
+const hasColor = (card, isFiltered, color) => {
+ if (isFiltered) {
+ return CARD_COLOR_KEYS[color] === card?.color;
+ }
+ return true;
+};
+
+const hasTab = (card, filter, tab, allTabs) => {
switch(filter) {
case FILTER_OPTIONS.thisTab:
return !!card?.views?.[tab];
- case FILTER_OPTIONS.all:
+ case FILTER_OPTIONS.allTab:
return true;
- case FILTER_OPTIONS.color:
- return CARD_COLOR_KEYS[color] === card?.color;
- case FILTER_OPTIONS.unsorted:
+ case FILTER_OPTIONS.noTab:
const cardTabs = Object.keys(card?.views);
const intersection = allTabs.filter(tab => cardTabs.includes(tab));
return intersection.length === 0;
@@ -86,15 +90,19 @@ export const useLibraryHooks = () => {
const [ isOpen, setIsOpen ] = useState(false);
const [ searchString, setSearchString ] = useState('');
- const [ filterOption, setFilterOption ] = useState(FILTER_OPTIONS.all);
- const [ filterColor, setFilterColor ] = useState('');
+ const [ isColorFiltered, setIsColorFiltered ] = useState(false);
+ const [ filterColorOption, setFilterColorOption ] = useState(CARD_COLOR_KEYS.gray);
+ const [ filterTabOption, setFilterTabOption ] = useState(FILTER_OPTIONS.allTab);
const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
let libraryCards = [];
for (let id in cardCollection) {
const card = cardCollection[id];
- if (hasSearch(card, searchString) && hasFilter(card, filterOption, filterColor, activeTab, tabOrder)) {
+ if (hasSearch(card, searchString)
+ && hasColor(card, isColorFiltered, filterColorOption)
+ && hasTab(card, filterTabOption, activeTab, tabOrder)
+ ) {
libraryCards = [ ...libraryCards, id ];
}
}
@@ -104,10 +112,12 @@ export const useLibraryHooks = () => {
isOpen,
toggleLibrary: () => setIsOpen(!isOpen),
setSearchString,
- filterOption,
- setFilterOption,
- filterColor,
- setFilterColor,
+ isColorFiltered,
+ setIsColorFiltered,
+ filterColorOption,
+ setFilterColorOption,
+ filterTabOption,
+ setFilterTabOption,
sortOption,
setSortOption,
viewOption,
@@ -123,7 +133,10 @@ export const useColorDropdownHooks = () => {
return {
colorDropdownBtnRef,
isColorDropdownOpen,
- openColorDropdown: () => setIsColorDropdownOpen(!isColorDropdownOpen),
+ openColorDropdown: (event) => {
+ event.stopPropagation();
+ setIsColorDropdownOpen(!isColorDropdownOpen);
+ },
closeColorDropdown: () => setIsColorDropdownOpen(false),
};
};
diff --git a/src/components/Library/index.jsx b/src/components/Library/index.jsx
index 5623969..9423064 100644
--- a/src/components/Library/index.jsx
+++ b/src/components/Library/index.jsx
@@ -2,10 +2,11 @@ import React from 'react';
import FilterBar from './FilterBar';
import SortBar from './SortBar';
+import ViewBar from './ViewBar';
import LibraryCard from '../Card/LibraryCard';
import LibrarySearch from './LibrarySearch';
-import { useLibraryHooks } from './hooks';
+import { VIEW_OPTIONS, useLibraryHooks } from './hooks';
import './index.scss';
import LibraryIcon from '../../assets/icons/library.svg';
@@ -15,10 +16,12 @@ const Library = () => {
isOpen,
toggleLibrary,
setSearchString,
- filterOption,
- setFilterOption,
- filterColor,
- setFilterColor,
+ isColorFiltered,
+ setIsColorFiltered,
+ filterColorOption,
+ setFilterColorOption,
+ filterTabOption,
+ setFilterTabOption,
sortOption,
setSortOption,
viewOption,
@@ -26,7 +29,9 @@ const Library = () => {
libraryCards,
} = useLibraryHooks();
- const cardComponents = libraryCards.map(id =>
);
+ const cardComponents = libraryCards.map(id =>
+
+ );
return (
@@ -38,11 +43,12 @@ const Library = () => {
*/}
{/*
*/}
- {/*
*/}
+
{cardComponents}
diff --git a/src/components/Library/index.scss b/src/components/Library/index.scss
index 3f81324..21fb051 100644
--- a/src/components/Library/index.scss
+++ b/src/components/Library/index.scss
@@ -24,12 +24,6 @@ $library-width: 35vw;
gap: 13px;
}
-.libary-card-container {
- display: flex;
- flex-flow: column nowrap;
- gap: 20px;
-}
-
.library-btn {
position: absolute;
top: 3%;
@@ -119,8 +113,48 @@ $library-width: 35vw;
}
}
+.option-row {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: right;
+ gap: 2px;
+
+ .horizontal-bar {
+ margin: auto 0;
+ height: 0;
+ border: 1px solid #D7D6D6;
+ flex: 1;
+ }
+
+ .option {
+ background-color: white;
+ border-radius: 8px;
+ padding: 5px;
+ &:hover { background-color: #DBE2EB;}
+ }
+}
+
+$shift-right: 16px;
+$scrollbar-width: 8px;
+$scrollbar-border: calc(($shift-right - $scrollbar-width) / 2);
+$scrollbar-radius: 6px + $scrollbar-border;
+
.library-card-container {
display: flex;
flex-flow: column nowrap;
gap: 20px;
+ overflow-y: scroll;
+ padding: 5px;
+ margin-right: -$shift-right;
+
+ &::-webkit-scrollbar {
+ position: absolute;
+ left: 0;
+ width: $shift-right;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #E5E5E5;
+ border: $scrollbar-border solid white;
+ border-radius: $scrollbar-radius;
+ }
}