Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Wrap buttons in filter bar

Browse Source 
Summary:
Filter bar buttons used to overflow, which required horizontal scrolling. Buttons
now wrap instead.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3901
This commit is contained in:
George Gevoian 2023-05-20 21:00:31 -04:00
parent 90e902c10f
commit 0d082c9cfc
1 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/client/ui/FilterBar.ts
View File

@ -38,9 +38,9 @@ function makeFilterField(filterInfo: FilterInfo, popupControls: WeakMap<ColumnRe
const {fieldOrColumn, filter, pinned, isPinned} = filterInfo; const {fieldOrColumn, filter, pinned, isPinned} = filterInfo;
return cssFilterBarItem( return cssFilterBarItem(
testId('filter-field'), testId('filter-field'),
primaryButton( cssFilterBarItemButton(
testId('btn'), testId('btn'),
cssIcon('FilterSimple'), cssFilterBarItemIcon('FilterSimple'),
cssMenuTextLabel(dom.text(fieldOrColumn.origCol().label)), cssMenuTextLabel(dom.text(fieldOrColumn.origCol().label)),
cssBtn.cls('-grayed', use => use(filter.isSaved) && use(pinned.isSaved)), cssBtn.cls('-grayed', use => use(filter.isSaved) && use(pinned.isSaved)),
attachColumnFilterMenu(filterInfo, { attachColumnFilterMenu(filterInfo, {
@ -114,7 +114,7 @@ function makePlusButton(viewSectionRec: ViewSectionRec, popupControls: WeakMap<C
const filters = use(viewSectionRec.filters); const filters = use(viewSectionRec.filters);
return cssPlusButton( return cssPlusButton(
cssBtn.cls('-grayed'), cssBtn.cls('-grayed'),
cssIcon('Plus'), cssPlusIcon('Plus'),
addFilterMenu(filters, popupControls, { addFilterMenu(filters, popupControls, {
allowedColumns: 'unpinned-or-unfiltered', allowedColumns: 'unpinned-or-unfiltered',
}), }),
@ -126,35 +126,40 @@ function makePlusButton(viewSectionRec: ViewSectionRec, popupControls: WeakMap<C
const cssFilterBar = styled('div.filter_bar', ` const cssFilterBar = styled('div.filter_bar', `
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 8px; flex-wrap: wrap;
margin-left: -4px; row-gap: 8px;
overflow-x: scroll; margin: 8px 0px 8px -4px;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
&-hidden { &-hidden {
display: none; display: none;
} }
`); `);
const cssFilterBarItem = styled('div', ` const cssFilterBarItem = styled('div', `
flex: 1 1 80px;
min-width: 0px;
max-width: max-content;
border-radius: ${vars.controlBorderRadius}; border-radius: ${vars.controlBorderRadius};
flex-shrink: 0;
margin: 0 4px; margin: 0 4px;
&-unpinned { &-unpinned {
display: none; display: none;
} }
`); `);
const cssFilterBarItemIcon = styled(icon, `
flex-shrink: 0;
`);
const cssMenuTextLabel = styled('span', ` const cssMenuTextLabel = styled('span', `
flex-grow: 1; flex-grow: 1;
padding: 0 4px;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
`); `);
const cssIcon = styled(icon, ` const cssPlusIcon = styled(icon, `
margin-top: -3px; margin-top: -3px;
`); `);
const cssBtn = styled('div', ` const cssBtn = styled('div', `
display: flex;
align-items: center;
column-gap: 4px;
height: 24px; height: 24px;
padding: 3px 8px; padding: 3px 8px;
.${cssFilterBar.className} > & { .${cssFilterBar.className} > & {
@ -171,10 +176,10 @@ const cssBtn = styled('div', `
border-color: ${theme.filterBarButtonSavedHoverBg}; border-color: ${theme.filterBarButtonSavedHoverBg};
} }
`); `);
const primaryButton = (...args: IDomArgs<HTMLDivElement>) => ( const cssFilterBarItemButton = (...args: IDomArgs<HTMLDivElement>) => (
dom('div', cssButton.cls(''), cssButton.cls('-primary'), dom('div', cssButton.cls(''), cssButton.cls('-primary'),
cssBtn.cls(''), ...args) cssBtn.cls(''), ...args)
); );
const cssPlusButton = styled(primaryButton, ` const cssPlusButton = styled(cssFilterBarItemButton, `
padding: 3px 3px padding: 3px 3px
`); `);