Skip to content

Commit 9f8a7d8

Browse files
rayzhou-bitrayzhou-bit
authored
view options (#48)
1 parent fcd9f1f commit 9f8a7d8

File tree

12 files changed

+247
-51
lines changed

12 files changed

+247
-51
lines changed

Diff for: ‎src/assets/icons/condense-disabled.svg

+18
Loading

Diff for: ‎src/assets/icons/condense-enabled.svg

+18
Loading

Diff for: ‎src/assets/icons/expand-disabled.svg

+18
Loading

Diff for: ‎src/assets/icons/expand-enabled.svg

+18
Loading

Diff for: ‎src/components-shared/Dropdowns/ActionDropdown.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import useOutsideClick from '../../utils/useOutsideClick';
66
/*
77
Each item in the items array should be similar to the following object:
88
{
9-
title: 'Move to unsorted',
9+
title: 'Move to library',
1010
type: ACTION_TYPE.danger,
1111
callback: () => dispatch(actions.project.unlinkCardFromView({ id: cardId })),
1212
icon: LibraryIcon,

Diff for: ‎src/components/Card/LibraryCard.jsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import LibraryContent from './LibraryContent';
77

88
import './LibraryCard.scss';
99

10-
const LibraryCard = ({ cardId }) => {
10+
const LibraryCard = ({
11+
cardId,
12+
isExpanded,
13+
}) => {
1114
const {
1215
libraryCardRef,
1316
isActive,
@@ -20,7 +23,7 @@ const LibraryCard = ({ cardId }) => {
2023
onAnimationEnd,
2124
onClick,
2225
} = useLibraryCardHooks({
23-
cardId
26+
cardId,
2427
});
2528

2629
return (
@@ -42,6 +45,7 @@ const LibraryCard = ({ cardId }) => {
4245
<LibraryContent
4346
cardId={cardId}
4447
setEditingCard={setIsEditing}
48+
isExpanded={isExpanded}
4549
isSelected={isSelected}
4650
/>
4751
{/* </div> */}

Diff for: ‎src/components/Card/LibraryContent.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import './LibraryCard.scss';
66

77
const LibraryContent = ({
88
cardId,
9+
isExpanded,
910
isSelected,
1011
setEditingCard,
1112
}) => {
@@ -36,10 +37,10 @@ const LibraryContent = ({
3637
return (
3738
<div
3839
className='library-card-content-container'
39-
style={isSelected ? expandedStyle : condensedStyle}
40+
style={(isSelected || isExpanded) ? expandedStyle : condensedStyle}
4041
>
4142
<textarea
42-
className={`library-card-textarea ${isSelected ? "selected" : ""}`}
43+
className={`library-card-textarea ${(isSelected || isExpanded) ? "selected" : ""}`}
4344
onBlur={endContentEdit}
4445
onChange={(e) => changeContentValue(e.target.value)}
4546
onClick={beginContentEdit}

Diff for: ‎src/components/Library/FilterBar.jsx

+21-15
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import '../../styles/colors.scss';
66
import { CARD_COLOR_KEYS } from '../../styles/colors';
77

88
const FilterBar = ({
9-
filterOption,
10-
setFilterOption,
11-
filterColor,
12-
setFilterColor,
9+
isColorFiltered,
10+
setIsColorFiltered,
11+
filterColorOption,
12+
setFilterColorOption,
13+
filterTabOption,
14+
setFilterTabOption,
1315
}) => {
1416
const {
1517
colorDropdownBtnRef,
@@ -26,37 +28,41 @@ const FilterBar = ({
2628
<div className='selections'>
2729
<div className='color-selection'>
2830
<button
29-
className={`option ${filterOption === FILTER_OPTIONS.color ? 'selected' : null}`}
30-
onClick={() => setFilterOption(FILTER_OPTIONS.color)}
31+
className={`option ${isColorFiltered ? 'selected' : null}`}
32+
onClick={() => setIsColorFiltered(!isColorFiltered)}
3133
>
3234
<span>Color</span>
33-
<button className={`color-display ${CARD_COLOR_KEYS[filterColor] ?? '#F4F4F4'}`} onClick={() => openColorDropdown()} ref={colorDropdownBtnRef} />
35+
<button
36+
className={`color-display ${CARD_COLOR_KEYS[filterColorOption] ?? '#F4F4F4'}`}
37+
onClick={(event) => openColorDropdown(event)}
38+
ref={colorDropdownBtnRef}
39+
/>
3440
</button>
3541
<ColorDropdown
3642
btnRef={colorDropdownBtnRef}
3743
isOpen={isColorDropdownOpen}
3844
message="Filter by card color"
3945
onClose={closeColorDropdown}
40-
onUpdateColor={setFilterColor}
41-
selectedColor={filterColor}
46+
onUpdateColor={setFilterColorOption}
47+
selectedColor={filterColorOption}
4248
/>
4349
</div>
4450
<div className='divider' />
4551
<button
46-
className={`option ${filterOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
47-
onClick={() => setFilterOption(FILTER_OPTIONS.thisTab)}
52+
className={`option ${filterTabOption === FILTER_OPTIONS.thisTab ? 'selected' : null}`}
53+
onClick={() => setFilterTabOption(FILTER_OPTIONS.thisTab)}
4854
>
4955
<span>In this tab</span>
5056
</button>
5157
<button
52-
className={`option ${filterOption === FILTER_OPTIONS.all ? 'selected' : null}`}
53-
onClick={() => setFilterOption(FILTER_OPTIONS.all)}
58+
className={`option ${filterTabOption === FILTER_OPTIONS.allTab ? 'selected' : null}`}
59+
onClick={() => setFilterTabOption(FILTER_OPTIONS.allTab)}
5460
>
5561
<span>In all tabs</span>
5662
</button>
5763
<button
58-
className={`option ${filterOption === FILTER_OPTIONS.unsorted ? 'selected' : null}`}
59-
onClick={() => setFilterOption(FILTER_OPTIONS.unsorted)}
64+
className={`option ${filterTabOption === FILTER_OPTIONS.noTab ? 'selected' : null}`}
65+
onClick={() => setFilterTabOption(FILTER_OPTIONS.noTab)}
6066
>
6167
<span>In no tabs</span>
6268
</button>

Diff for: ‎src/components/Library/ViewBar.jsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import { VIEW_OPTIONS } from './hooks';
3+
4+
import './index.scss';
5+
import EnabledCondenseIcon from '../../assets/icons/condense-enabled.svg';
6+
import DisabledCondenseIcon from '../../assets/icons/condense-disabled.svg';
7+
import EnabledExpandIcon from '../../assets/icons/expand-enabled.svg';
8+
import DisabledExpandIcon from '../../assets/icons/expand-disabled.svg';
9+
10+
const ViewBar = ({
11+
viewOption,
12+
setViewOption,
13+
}) => {
14+
15+
return (
16+
<div className='option-row'>
17+
<div className='horizontal-bar' />
18+
<button
19+
className='option'
20+
onClick={() => setViewOption(VIEW_OPTIONS.condensed)}
21+
>
22+
<img src={viewOption === VIEW_OPTIONS.condensed ? DisabledCondenseIcon : EnabledCondenseIcon} />
23+
</button>
24+
<button
25+
className='option'
26+
onClick={() => setViewOption(VIEW_OPTIONS.expanded)}
27+
>
28+
<img src={viewOption === VIEW_OPTIONS.expanded ? DisabledExpandIcon : EnabledExpandIcon} />
29+
</button>
30+
{/* <div className='selections'>
31+
<button
32+
className={`option ${sortOption === SORT_OPTIONS.abc ? 'selected' : null}`}
33+
onClick={() => setSortOption(SORT_OPTIONS.abc)}
34+
>
35+
<span>ABC</span>
36+
</button>
37+
<button
38+
className={`option ${sortOption === SORT_OPTIONS.zxy ? 'selected' : null}`}
39+
onClick={() => setSortOption(SORT_OPTIONS.zxy)}
40+
>
41+
<span>ZXY</span>
42+
</button>
43+
<button
44+
className={`option ${sortOption === SORT_OPTIONS.newest ? 'selected' : null}`}
45+
onClick={() => setSortOption(SORT_OPTIONS.newest)}
46+
>
47+
<span>Newest</span>
48+
</button>
49+
<button
50+
className={`option ${sortOption === SORT_OPTIONS.oldest ? 'selected' : null}`}
51+
onClick={() => setSortOption(SORT_OPTIONS.oldest)}
52+
>
53+
<span>Oldest</span>
54+
</button>
55+
</div> */}
56+
</div>
57+
);
58+
};
59+
60+
export default ViewBar;

Diff for: ‎src/components/Library/hooks.js

+29-16
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import { useSelector } from 'react-redux';
33
import { CARD_COLOR_KEYS } from '../../styles/colors';
44

55
export const FILTER_OPTIONS = {
6-
all: 'all',
7-
color: 'color',
6+
allTab: 'allTab',
7+
noTab: 'noTab',
88
thisTab: 'thisTab',
9-
unsorted: 'unsorted',
109
};
1110

1211
export const SORT_OPTIONS = {
@@ -33,15 +32,20 @@ const hasSearch = (card, search) => {
3332
return false;
3433
};
3534

36-
const hasFilter = (card, filter, color, tab, allTabs) => {
35+
const hasColor = (card, isFiltered, color) => {
36+
if (isFiltered) {
37+
return CARD_COLOR_KEYS[color] === card?.color;
38+
}
39+
return true;
40+
};
41+
42+
const hasTab = (card, filter, tab, allTabs) => {
3743
switch(filter) {
3844
case FILTER_OPTIONS.thisTab:
3945
return !!card?.views?.[tab];
40-
case FILTER_OPTIONS.all:
46+
case FILTER_OPTIONS.allTab:
4147
return true;
42-
case FILTER_OPTIONS.color:
43-
return CARD_COLOR_KEYS[color] === card?.color;
44-
case FILTER_OPTIONS.unsorted:
48+
case FILTER_OPTIONS.noTab:
4549
const cardTabs = Object.keys(card?.views);
4650
const intersection = allTabs.filter(tab => cardTabs.includes(tab));
4751
return intersection.length === 0;
@@ -86,15 +90,19 @@ export const useLibraryHooks = () => {
8690

8791
const [ isOpen, setIsOpen ] = useState(false);
8892
const [ searchString, setSearchString ] = useState('');
89-
const [ filterOption, setFilterOption ] = useState(FILTER_OPTIONS.all);
90-
const [ filterColor, setFilterColor ] = useState('');
93+
const [ isColorFiltered, setIsColorFiltered ] = useState(false);
94+
const [ filterColorOption, setFilterColorOption ] = useState(CARD_COLOR_KEYS.gray);
95+
const [ filterTabOption, setFilterTabOption ] = useState(FILTER_OPTIONS.allTab);
9196
const [ sortOption, setSortOption ] = useState(SORT_OPTIONS.abc);
9297
const [ viewOption, setViewOption ] = useState(VIEW_OPTIONS.condensed);
9398

9499
let libraryCards = [];
95100
for (let id in cardCollection) {
96101
const card = cardCollection[id];
97-
if (hasSearch(card, searchString) && hasFilter(card, filterOption, filterColor, activeTab, tabOrder)) {
102+
if (hasSearch(card, searchString)
103+
&& hasColor(card, isColorFiltered, filterColorOption)
104+
&& hasTab(card, filterTabOption, activeTab, tabOrder)
105+
) {
98106
libraryCards = [ ...libraryCards, id ];
99107
}
100108
}
@@ -104,10 +112,12 @@ export const useLibraryHooks = () => {
104112
isOpen,
105113
toggleLibrary: () => setIsOpen(!isOpen),
106114
setSearchString,
107-
filterOption,
108-
setFilterOption,
109-
filterColor,
110-
setFilterColor,
115+
isColorFiltered,
116+
setIsColorFiltered,
117+
filterColorOption,
118+
setFilterColorOption,
119+
filterTabOption,
120+
setFilterTabOption,
111121
sortOption,
112122
setSortOption,
113123
viewOption,
@@ -123,7 +133,10 @@ export const useColorDropdownHooks = () => {
123133
return {
124134
colorDropdownBtnRef,
125135
isColorDropdownOpen,
126-
openColorDropdown: () => setIsColorDropdownOpen(!isColorDropdownOpen),
136+
openColorDropdown: (event) => {
137+
event.stopPropagation();
138+
setIsColorDropdownOpen(!isColorDropdownOpen);
139+
},
127140
closeColorDropdown: () => setIsColorDropdownOpen(false),
128141
};
129142
};

0 commit comments

Comments
 (0)