import {GristDoc} from 'app/client/components/GristDoc'; import {allCommands} from 'app/client/components/commands'; import {makeT} from 'app/client/lib/localization'; import {reportError} from 'app/client/models/AppModel'; import {DocModel, ViewSectionRec} from 'app/client/models/DocModel'; import {FilterConfig} from 'app/client/ui/FilterConfig'; import {cssLabel, cssSaveButtonsRow} from 'app/client/ui/RightPanelStyles'; import {hoverTooltip} from 'app/client/ui/tooltips'; import {SortConfig} from 'app/client/ui/SortConfig'; import {makeViewLayoutMenu} from 'app/client/ui/ViewLayoutMenu'; import {basicButton, primaryButton} from 'app/client/ui2018/buttons'; import {isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars'; import {icon} from 'app/client/ui2018/icons'; import {menu} from 'app/client/ui2018/menus'; import {Computed, dom, IDisposableOwner, makeTestId, styled} from 'grainjs'; import {defaultMenuOptions} from 'popweasel'; const testId = makeTestId('test-section-menu-'); const t = makeT('ViewSectionMenu'); // Handler for [Save] button. async function doSave(docModel: DocModel, viewSection: ViewSectionRec): Promise { await docModel.docData.bundleActions(t("Update Sort&Filter settings"), () => Promise.all([ viewSection.activeSortJson.save(), // Save sort viewSection.saveFilters(), // Save filter viewSection.activeCustomOptions.save(), // Save widget options ])); } // Handler for [Revert] button. function doRevert(viewSection: ViewSectionRec) { viewSection.activeSortJson.revert(); // Revert sort viewSection.revertFilters(); // Revert filter viewSection.activeCustomOptions.revert(); // Revert widget options } // [Filter Icon] - Filter toggle and all the components in the menu. export function viewSectionMenu( owner: IDisposableOwner, gristDoc: GristDoc, viewSection: ViewSectionRec, ) { const {docModel, isReadonly} = gristDoc; // If there is any filter (should [Filter Icon] background be filled). const anyFilter = Computed.create(owner, (use) => Boolean(use(viewSection.activeFilters).length)); // Should we show [Save] [Revert] buttons. const displaySaveObs: Computed = Computed.create(owner, (use) => ( use(viewSection.filterSpecChanged) || !use(viewSection.activeSortJson.isSaved) || !use(viewSection.activeCustomOptions.isSaved) )); const save = () => { doSave(docModel, viewSection).catch(reportError); }; const revert = () => doRevert(viewSection); // Should we show expand icon. const showExpandIcon = Computed.create(owner, (use) => { return !use(isNarrowScreenObs()) // not on narrow screens && use(gristDoc.maximizedSectionId) !== use(viewSection.id) // not in when we are maximized && use(gristDoc.externalSectionId) !== use(viewSection.id) // not in when we are external && !use(viewSection.isRaw); // not in raw mode }); return [ cssFilterMenuWrapper( cssFilterMenuWrapper.cls('-unsaved', displaySaveObs), testId('wrapper'), cssMenu( testId('sortAndFilter'), // [Filter icon] cssFilterIconWrapper( testId('filter-icon'), // Fill background when there are some filters. Ignore sort options. cssFilterIconWrapper.cls('-any', anyFilter), cssFilterIcon('Filter'), hoverTooltip('Sort and filter', {key: 'sortFilterBtnTooltip'}), ), ), // [Save] [Revert] buttons when there are unsaved options. dom.maybe(displaySaveObs, () => cssSectionSaveButtonsWrapper( cssSaveTextButton( t("Save"), cssSaveTextButton.cls('-accent'), dom.on('click', save), hoverTooltip('Save sort & filter settings', {key: 'sortFilterBtnTooltip'}), testId('small-btn-save'), dom.hide(isReadonly), ), cssRevertIconButton( cssRevertIcon('Revert', cssRevertIcon.cls('-normal')), dom.on('click', revert), hoverTooltip('Revert sort & filter settings', {key: 'sortFilterBtnTooltip'}), testId('small-btn-revert'), ), )), menu(ctl => [ // Sort section. makeSortPanel(viewSection, gristDoc), // Filter section. makeFilterPanel(viewSection), // Widget options dom.maybe(use => use(viewSection.parentKey) === 'custom', () => makeCustomOptions(viewSection) ), // [Save] [Revert] buttons dom.domComputed(displaySaveObs, displaySave => [ displaySave ? cssSaveButtonsRow( cssSaveButton(t("Save"), testId('btn-save'), dom.on('click', () => { ctl.close(); save(); }), dom.boolAttr('disabled', isReadonly)), basicButton(t("Revert"), testId('btn-revert'), dom.on('click', () => { ctl.close(); revert(); })) ) : null, ]), // Updates to active sort or filters can cause menu contents to grow, while // leaving the position of the popup unchanged. This can sometimes lead to // the menu growing beyond the boundaries of the viewport. To mitigate this, // we subscribe to changes to the sort/filters and manually update the popup's // position, which will re-position the popup if necessary so that it's fully // visible. dom.autoDispose(viewSection.activeFilters.addListener(() => ctl.update())), dom.autoDispose(viewSection.activeSortJson.subscribe(() => ctl.update())), ], {...defaultMenuOptions, placement: 'bottom-end', trigger: [ // Toggle the menu whenever the filter icon button is clicked. (el, ctl) => dom.onMatchElem(el, '.test-section-menu-sortAndFilter', 'click', () => { ctl.toggle(); }), // Close the menu whenever the save or revert button is clicked. (el, ctl) => dom.onMatchElem(el, '.test-section-menu-small-btn-save', 'click', () => { ctl.close(); }), (el, ctl) => dom.onMatchElem(el, '.test-section-menu-small-btn-revert', 'click', () => { ctl.close(); }), ]}), ), cssMenu( testId('viewLayout'), cssDotsIconWrapper(cssIcon('Dots')), menu(_ctl => makeViewLayoutMenu(viewSection, isReadonly.get()), { ...defaultMenuOptions, placement: 'bottom-end', }) ), dom.maybe(showExpandIcon, () => cssExpandIconWrapper( cssSmallIcon('Grow'), testId('expandSection'), dom.on('click', () => allCommands.maximizeActiveSection.run()), hoverTooltip('Expand section', {key: 'expandSection'}), ), ) ]; } function makeSortPanel(section: ViewSectionRec, gristDoc: GristDoc) { return [ cssLabel(t("SORT"), testId('heading-sort')), dom.create(SortConfig, section, gristDoc, { // Attach content to triggerElem's parent, which is needed to prevent view // section menu to close when clicking an item in the advanced sort menu. menuOptions: {attach: null}, }), ]; } function makeFilterPanel(section: ViewSectionRec) { return [ cssLabel(t("FILTER"), testId('heading-filter')), dom.create(FilterConfig, section, { // Attach content to triggerElem's parent, which is needed to prevent view // section menu to close when clicking an item of the add filter menu. menuOptions: {attach: null}, }), ]; } // Custom Options // (empty)|(customized)|(modified) [Remove Icon] function makeCustomOptions(section: ViewSectionRec) { const color = Computed.create(null, use => use(section.activeCustomOptions.isSaved) ? "-normal" : "-accent"); const text = Computed.create(null, use => { if (use(section.activeCustomOptions)) { return use(section.activeCustomOptions.isSaved) ? t("(customized)") : t("(modified)"); } else { return t("(empty)"); } }); return [ cssMenuInfoHeader(t("Custom options"), testId('heading-widget-options')), cssMenuText( dom.autoDispose(text), dom.autoDispose(color), dom.text(text), cssMenuText.cls(color), cssSpacer(), dom.maybe(use => Boolean(use(section.activeCustomOptions)), () => cssMenuIconWrapper( cssIcon('Remove', testId('btn-remove-options'), dom.on('click', () => section.activeCustomOptions(null) )) ), ), testId("custom-options") ) ]; } const clsOldUI = styled('div', ``); export const cssMenu = styled('div', ` display: flex; cursor: pointer; border-radius: 3px; &.${clsOldUI.className} { margin-top: 0px; border-radius: 0px; } &:hover, &.weasel-popup-open { background-color: ${theme.hover}; } `); const cssIconWrapper = styled('div', ` padding: 3px; border-radius: 3px; cursor: pointer; user-select: none; `); const cssMenuIconWrapper = styled(cssIconWrapper, ` display: flex; margin: -3px 0; width: 22px; height: 22px; &:hover, &.weasel-popup-open { background-color: ${theme.hover}; } &-changed { background-color: ${theme.accentIcon}; } &-changed:hover, &-changed:hover.weasel-popup-open { background-color: ${theme.controlHoverFg}; } `); const cssFilterMenuWrapper = styled('div', ` display: flex; border-radius: 3px; align-items: center; &-unsaved { border: 1px solid ${theme.accentBorder}; } & .${cssMenu.className} { border: none; } `); const cssIcon = styled(icon, ` flex: none; cursor: pointer; background-color: ${theme.lightText}; .${cssMenuIconWrapper.className}-changed & { background-color: ${theme.controlPrimaryFg}; } .${clsOldUI.className} & { background-color: ${theme.controlPrimaryFg}; } &-accent { background-color: ${theme.accentIcon}; } `); export const cssDotsIconWrapper = styled(cssIconWrapper, ` border-radius: 0px 2px 2px 0px; display: flex; .${clsOldUI.className} & { border-radius: 0px; } `); const cssExpandIconWrapper = styled('div', ` display: flex; border-radius: 3px; align-items: center; padding: 4px; cursor: pointer; &:hover, &.weasel-popup-open { background-color: ${theme.hover}; } `); const cssSmallIcon = styled(cssIcon, ` height: 13px; width: 13px; `); const cssFilterIconWrapper = styled(cssIconWrapper, ` border-radius: 2px 0px 0px 2px; display: flex; &-any { border-radius: 2px; background-color: ${theme.controlSecondaryFg}; } .${cssFilterMenuWrapper.className}-unsaved & { background-color: ${theme.controlPrimaryBg}; } `); const cssFilterIcon = styled(cssIcon, ` .${cssFilterIconWrapper.className}-any & { background-color: ${theme.controlPrimaryFg}; } .${cssFilterMenuWrapper.className}-unsaved & { background-color: ${theme.controlPrimaryFg}; } `); const cssMenuInfoHeader = styled('div', ` color: ${theme.menuSubheaderFg}; font-weight: ${vars.bigControlTextWeight}; padding: 8px 24px 8px 24px; cursor: default; `); const cssMenuText = styled('div', ` display: flex; align-items: center; padding: 0px 24px 8px 24px; cursor: default; white-space: nowrap; &-accent { color: ${theme.accentText}; } &-normal { color: ${theme.lightText}; } `); const cssSaveButton = styled(primaryButton, ` margin-right: 8px; `); const cssSaveTextButton = styled('div', ` display: flex; align-items: center; cursor: pointer; font-size: ${vars.mediumFontSize}; padding: 0px 5px; border-right: 1px solid ${theme.accentBorder}; &-accent { color: ${theme.accentText}; } `); const cssRevertIconButton = styled('div', ` display: flex; justify-content: center; align-items: center; cursor: pointer; `); const cssRevertIcon = styled(icon, ` --icon-color: ${theme.accentIcon}; margin: 0 5px 0 5px; `); const cssSectionSaveButtonsWrapper = styled('div', ` padding: 0 1px 0 1px; display: flex; justify-content: space-between; align-self: normal; `); const cssSpacer = styled('div', ` margin: 0 auto; `);