nickzuber/meteorite
1
1
Fork 0
mirror of https://github.com/nickzuber/meteorite.git synced 2024-11-28 23:03:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

Empty state for dropdown

Browse Source
This commit is contained in:
Nicholas Zuber 2020-11-02 19:04:26 -05:00
parent 693084125c
commit ac1a28a05f
3 changed files with 88 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/pages/NotificationsRedesign/redesign/FilterSearch.js
View File

@ -289,13 +289,14 @@ export function FilterSearch({
value={searchInput}
placeholder="Search for notifications"
onEnter={() => onSearch(searchInput)}
css={css`
${activeFilter &&
`
padding-left: 42px;
width: 298px;
`};
`}
css={
activeFilter
? css`
padding-left: 42px;
width: 298px;
`
: undefined
}
/>
<DropdownSection
forwardRef={downdownRef}
@ -337,73 +338,83 @@ function DropdownSection({
return null;
}
const items = filterFromQuery({
query: searchInput,
items: notifications,
compare: (item, query) => {
switch (activeFilter) {
case SearchFilters.TITLE: {
const words = query.split(' ');
const itemString = item.name.toLowerCase();
return words.every(word => itemString.includes(word));
}
case SearchFilters.REPO: {
const words = query.split(' ');
const itemString = item.repository.toLowerCase();
return words.every(word => itemString.includes(word));
}
default:
const words = query.split(' ');
const itemString = `${item.name} ${item.repository}`.toLowerCase();
return words.every(word => itemString.includes(word));
}
}
});
return (
<Dropdown innerRef={forwardRef}>
{searchInput !== '' ? (
// Previews
<React.Fragment>
{filterFromQuery({
query: searchInput,
items: notifications,
compare: (item, query) => {
switch (activeFilter) {
case SearchFilters.TITLE: {
const words = query.split(' ');
const itemString = item.name.toLowerCase();
return words.every(word => itemString.includes(word));
}
case SearchFilters.REPO: {
const words = query.split(' ');
const itemString = item.repository.toLowerCase();
return words.every(word => itemString.includes(word));
}
default:
const words = query.split(' ');
const itemString = `${item.name} ${
item.repository
}`.toLowerCase();
return words.every(word => itemString.includes(word));
}
}
})
.sort((a, b) => moment(b.updated_at).diff(a.updated_at))
.slice(0, 10)
.map(notification => {
const {title, tags} = extractJiraTags(notification.name);
return (
<Suggestion
onClick={() => {
switch (activeFilter) {
case SearchFilters.TITLE:
return onSuggestionSelect(notification.name);
case SearchFilters.REPO:
return onSuggestionSelect(notification.repository);
default:
return onSuggestionSelect(notification.name);
}
}}
>
<SuggestionTitle>
{tags.map(tag => (
<JiraTag
key={tag}
css={css`
padding: 0px 4px;
vertical-align: text-bottom;
`}
color={colorOfTag(tag)}
>
{tag}
</JiraTag>
))}
{title}
</SuggestionTitle>
<SuggestionRepo>{`@${
notification.repository
}`}</SuggestionRepo>
</Suggestion>
);
})}
{items.length === 0 ? (
<h5
css={css`
border-top: 0px solid transparent !important;
`}
>
{"Couldn't find any notifications with this query."}
</h5>
) : (
items
.sort((a, b) => moment(b.updated_at).diff(a.updated_at))
.slice(0, 10)
.map(notification => {
const {title, tags} = extractJiraTags(notification.name);
return (
<Suggestion
onClick={() => {
switch (activeFilter) {
case SearchFilters.TITLE:
return onSuggestionSelect(notification.name);
case SearchFilters.REPO:
return onSuggestionSelect(notification.repository);
default:
return onSuggestionSelect(notification.name);
}
}}
>
<SuggestionTitle>
{tags.map(tag => (
<JiraTag
key={tag}
css={css`
padding: 0px 4px;
vertical-align: text-bottom;
`}
color={colorOfTag(tag)}
>
{tag}
</JiraTag>
))}
{title}
</SuggestionTitle>
<SuggestionRepo>{`@${
notification.repository
}`}</SuggestionRepo>
</Suggestion>
);
})
)}
</React.Fragment>
) : (
// Filter Suggestion Menu
@ -431,17 +442,6 @@ function DropdownSection({
/>
<p>{'Search for specific repositories'}</p>
</FilterItem>
{/* <FilterItem onClick={() => setSearchInput('[score] ')}>
<FilterTag type={SearchFilters.SCORE} />
<TypedSpan
source={exampleNotifications}
toString={n => {
const comparator = ['>', '='][Math.floor(Math.random() * 2)];
return `${comparator} ${n.score}`;
}}
/>
<p>{'Search for specific score ranges'}</p>
</FilterItem> */}
<h5>
{'Not including a filter will search everything across all fields'}
</h5>

7
src/pages/NotificationsRedesign/redesign/Scene.js
View File

@ -1230,6 +1230,13 @@ function Scene({
font-weight: 500;
vertical-align: text-top;
margin-right: 8px;
background: ${darkMode
? DarkTheme.Secondary
: '#fffefc'};
padding: 8px 0 8px 8px;
border-radius: 8px;
transition: all 200ms ease;
span {
font-size: 13px;
color: ${darkMode ? WHITE : '#37352f'};

2
src/pages/NotificationsRedesign/redesign/ui/ui.js
View File

@ -424,7 +424,7 @@ export const Dropdown = enhance(
@media (max-width: ${WIDTH_FOR_SMALL_SCREENS}) {
width: 288px;
}
min-height: 40px;
min-height: 20px;
position: absolute;
top: calc(100% - 1px);
left: -1px;