mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(core) Wrap buttons in filter bar
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:
parent
90e902c10f
commit
0d082c9cfc
@ -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
|
||||||
`);
|
`);
|
||||||
|
Loading…
Reference in New Issue
Block a user