From c37bbd77e5e298616343a56be8e2db9185929d04 Mon Sep 17 00:00:00 2001 From: Suzanne Aitchison Date: Tue, 17 May 2022 15:25:21 +0100 Subject: [PATCH] Member index phase 2 - mock filters modal (#17578) * mock filters popover * fix for safari * add missing label --- app/assets/images/chevron-down.svg | 3 ++ app/assets/stylesheets/admin.scss | 16 ++++++++ app/assets/stylesheets/components/modals.scss | 1 + app/javascript/crayons/Modal/Modal.jsx | 22 +++++----- .../Modal/__stories__/Modal.stories.jsx | 32 +++++++++++++++ app/javascript/packs/admin/users/controls.js | 28 +++++++++++++ app/javascript/utilities/showModal.jsx | 11 ++--- app/views/admin/users/index.html.erb | 3 ++ .../admin/users/index/_controls.html.erb | 3 ++ .../admin/users/index/_filters_modal.html.erb | 40 +++++++++++++++++++ 10 files changed, 143 insertions(+), 16 deletions(-) create mode 100644 app/assets/images/chevron-down.svg create mode 100644 app/views/admin/users/index/_filters_modal.html.erb diff --git a/app/assets/images/chevron-down.svg b/app/assets/images/chevron-down.svg new file mode 100644 index 000000000..942b8a4ab --- /dev/null +++ b/app/assets/images/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index d80af5237..194b63d6c 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -279,3 +279,19 @@ which may be more easily removed once we no longer wish admin layouts to have a display: none; } } + +.admin-details { + border-bottom: 1px solid var(--base-10); + + summary::marker { + display: none; + } + + summary::-webkit-details-marker { + display: none; + } + + &[open] .summary-icon { + transform: rotate(180deg); + } +} diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss index 0142ed830..507d345e7 100644 --- a/app/assets/stylesheets/components/modals.scss +++ b/app/assets/stylesheets/components/modals.scss @@ -131,6 +131,7 @@ height: 100%; max-height: 100%; border-radius: 0; + grid-template-rows: 1fr; } &.crayons-modal--left { diff --git a/app/javascript/crayons/Modal/Modal.jsx b/app/javascript/crayons/Modal/Modal.jsx index 98e8e8389..b26d710a4 100644 --- a/app/javascript/crayons/Modal/Modal.jsx +++ b/app/javascript/crayons/Modal/Modal.jsx @@ -15,6 +15,7 @@ export const Modal = ({ sheet, centered, noBackdrop, + showHeader = true, sheetAlign = 'center', backdropDismissible = false, onClose = () => {}, @@ -43,15 +44,17 @@ export const Modal = ({ aria-label="modal" className="crayons-modal__box" > -
-

{title}

-
+ {showHeader && ( +
+

{title}

+
+ )}
{children}
{!noBackdrop && ( @@ -80,4 +83,5 @@ Modal.propTypes = { focusTrapSelector: PropTypes.string, sheet: PropTypes.bool, sheetAlign: PropTypes.oneOf(['center', 'left', 'right']), + showHeader: PropTypes.bool, }; diff --git a/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx b/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx index 5302c5c50..c22f4a1f4 100644 --- a/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx +++ b/app/javascript/crayons/Modal/__stories__/Modal.stories.jsx @@ -45,6 +45,13 @@ export default { defaultValue: { summary: true }, }, }, + showHeader: { + description: + 'Whether or not to display the standard header (with title and close button). If `false`, make sure to provide an alternative close button.', + table: { + defaultValue: { summary: true }, + }, + }, backdropDismissible: { description: 'If `backdrop` is visible you can also make it clickable so clicking it would dismiss the Modal', @@ -110,6 +117,11 @@ const Template = (args) => {

)} + {!args.showHeader && ( + + )} )} @@ -125,6 +137,7 @@ Default.args = { prompt: false, centered: false, sheet: false, + showHeader: true, }; export const Prompt = Template.bind({}); @@ -137,6 +150,7 @@ Prompt.args = { prompt: true, centered: false, sheet: false, + showHeader: true, }; export const PromptCentered = Template.bind({}); @@ -149,6 +163,7 @@ PromptCentered.args = { prompt: true, centered: true, sheet: false, + showHeader: true, }; export const Sheet = Template.bind({}); @@ -160,6 +175,7 @@ Sheet.args = { prompt: false, centered: false, sheet: true, + showHeader: true, }; export const SheetLeftAligned = Template.bind({}); @@ -172,6 +188,7 @@ SheetLeftAligned.args = { centered: false, sheet: true, sheetAlign: 'left', + showHeader: true, }; export const SheetRightAligned = Template.bind({}); @@ -184,6 +201,7 @@ SheetRightAligned.args = { centered: false, sheet: true, sheetAlign: 'right', + showHeader: true, }; export const BackdropDismissible = Template.bind({}); @@ -195,6 +213,7 @@ BackdropDismissible.args = { prompt: false, centered: false, sheet: false, + showHeader: true, }; export const NoBackdrop = Template.bind({}); @@ -206,4 +225,17 @@ NoBackdrop.args = { prompt: false, centered: false, sheet: false, + showHeader: true, +}; + +export const NoHeader = Template.bind({}); +NoHeader.args = { + size: undefined, + title: 'Modal title', + noBackdrop: false, + backdropDismissible: false, + prompt: false, + centered: false, + sheet: false, + showHeader: false, }; diff --git a/app/javascript/packs/admin/users/controls.js b/app/javascript/packs/admin/users/controls.js index ecfba05ab..e85d21870 100644 --- a/app/javascript/packs/admin/users/controls.js +++ b/app/javascript/packs/admin/users/controls.js @@ -1,4 +1,9 @@ import { INTERACTIVE_ELEMENTS_QUERY } from '@utilities/dropdownUtils'; +import { + showWindowModal, + closeWindowModal, + WINDOW_MODAL_ID, +} from '@utilities/showModal'; const expandSearchButton = document.getElementById('expand-search-btn'); const expandFilterButton = document.getElementById('expand-filter-btn'); @@ -112,5 +117,28 @@ const toggleIndicator = ({ value, indicator }) => { } }; +/** + * Controls the triggering of the filters popover modal + */ +const initializeFilterPopoverButtons = () => { + document.querySelectorAll('.js-open-filter-modal-btn').forEach((button) => { + button.addEventListener('click', () => { + showWindowModal({ + contentSelector: '.js-filters-modal', + showHeader: false, + sheet: true, + sheetAlign: 'right', + size: 'small', + onOpen: () => { + document + .querySelector(`#${WINDOW_MODAL_ID} .js-filter-modal-cancel-btn`) + .addEventListener('click', closeWindowModal); + }, + }); + }); + }); +}; + initializeExpandingSections(); initializeSectionIndicators(); +initializeFilterPopoverButtons(); diff --git a/app/javascript/utilities/showModal.jsx b/app/javascript/utilities/showModal.jsx index d96433237..f66eb937c 100644 --- a/app/javascript/utilities/showModal.jsx +++ b/app/javascript/utilities/showModal.jsx @@ -21,19 +21,16 @@ const getModalImports = () => { /** * This helper function finds the HTML with the given contentSelector, and presents it inside a Preact modal. - * Only one modal will be presented at any given time. + * Only one modal will be presented at any given time. All additional props will be passed directly to the Modal component. * * @param {Object} args - * @param {string} args.title The title of the modal (presented at the top of the modal dialog) * @param {string} args.contentSelector The CSS query to locate the HTML to be presented in the modal (e.g. '#my-modal-content') - * @param {string} args.size The size prop for the modal ('small', 'medium', or 'large') * @param {Function} args.onOpen A callback function to run when the modal opens. This can be useful, for example, to attach any event listeners to items inside the modal. */ export const showWindowModal = async ({ - title, contentSelector, - size = 'small', onOpen, + ...modalProps }) => { const [{ Modal }, { render, h }] = await getModalImports(); @@ -49,14 +46,14 @@ export const showWindowModal = async ({ render( { render(null, currentModalContainer); }} - size={size} focusTrapSelector={`#${WINDOW_MODAL_ID}`} + {...modalProps} >
+<% if FeatureFlag.enabled?(:member_index_view) %> + <%= render "admin/users/index/filters_modal" %> +<% end %> diff --git a/app/views/admin/users/index/_controls.html.erb b/app/views/admin/users/index/_controls.html.erb index 8a09ef232..c2580f59d 100644 --- a/app/views/admin/users/index/_controls.html.erb +++ b/app/views/admin/users/index/_controls.html.erb @@ -38,6 +38,9 @@
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "medium" %> <%= render "admin/users/controls/export" %> + <% if FeatureFlag.enabled?(:member_index_view) %> + + <% end %>
diff --git a/app/views/admin/users/index/_filters_modal.html.erb b/app/views/admin/users/index/_filters_modal.html.erb new file mode 100644 index 000000000..58e875e18 --- /dev/null +++ b/app/views/admin/users/index/_filters_modal.html.erb @@ -0,0 +1,40 @@ +