diff --git a/app/javascript/flavours/glitch/features/notifications/requests.jsx b/app/javascript/flavours/glitch/features/notifications/requests.jsx index 6db16a42d1..970ce3b40c 100644 --- a/app/javascript/flavours/glitch/features/notifications/requests.jsx +++ b/app/javascript/flavours/glitch/features/notifications/requests.jsx @@ -7,6 +7,7 @@ import { Helmet } from 'react-helmet'; import { useSelector, useDispatch } from 'react-redux'; +import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react'; import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; import { openModal } from 'flavours/glitch/actions/modal'; @@ -15,6 +16,7 @@ import { changeSetting } from 'flavours/glitch/actions/settings'; import { CheckBox } from 'flavours/glitch/components/check_box'; import Column from 'flavours/glitch/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; +import { Icon } from 'flavours/glitch/components/icon'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container'; @@ -26,16 +28,14 @@ const messages = defineMessages({ title: { id: 'notification_requests.title', defaultMessage: 'Filtered notifications' }, maximize: { id: 'notification_requests.maximize', defaultMessage: 'Maximize' }, more: { id: 'status.more', defaultMessage: 'More' }, - acceptAll: { id: 'notification_requests.accept_all', defaultMessage: 'Accept all' }, - dismissAll: { id: 'notification_requests.dismiss_all', defaultMessage: 'Dismiss all' }, - acceptMultiple: { id: 'notification_requests.accept_multiple', defaultMessage: '{count, plural, one {Accept # request} other {Accept # requests}}' }, - dismissMultiple: { id: 'notification_requests.dismiss_multiple', defaultMessage: '{count, plural, one {Dismiss # request} other {Dismiss # requests}}' }, - confirmAcceptAllTitle: { id: 'notification_requests.confirm_accept_all.title', defaultMessage: 'Accept notification requests?' }, - confirmAcceptAllMessage: { id: 'notification_requests.confirm_accept_all.message', defaultMessage: 'You are about to accept {count, plural, one {one notification request} other {# notification requests}}. Are you sure you want to proceed?' }, - confirmAcceptAllButton: { id: 'notification_requests.confirm_accept_all.button', defaultMessage: 'Accept all' }, - confirmDismissAllTitle: { id: 'notification_requests.confirm_dismiss_all.title', defaultMessage: 'Dismiss notification requests?' }, - confirmDismissAllMessage: { id: 'notification_requests.confirm_dismiss_all.message', defaultMessage: "You are about to dismiss {count, plural, one {one notification request} other {# notification requests}}. You won't be able to easily access {count, plural, one {it} other {them}} again. Are you sure you want to proceed?" }, - confirmDismissAllButton: { id: 'notification_requests.confirm_dismiss_all.button', defaultMessage: 'Dismiss all' }, + acceptMultiple: { id: 'notification_requests.accept_multiple', defaultMessage: '{count, plural, one {Accept # request…} other {Accept # requests…}}' }, + dismissMultiple: { id: 'notification_requests.dismiss_multiple', defaultMessage: '{count, plural, one {Dismiss # request…} other {Dismiss # requests…}}' }, + confirmAcceptMultipleTitle: { id: 'notification_requests.confirm_accept_multiple.title', defaultMessage: 'Accept notification requests?' }, + confirmAcceptMultipleMessage: { id: 'notification_requests.confirm_accept_multiple.message', defaultMessage: 'You are about to accept {count, plural, one {one notification request} other {# notification requests}}. Are you sure you want to proceed?' }, + confirmAcceptMultipleButton: { id: 'notification_requests.confirm_accept_multiple.button', defaultMessage: '{count, plural, one {Accept request} other {Accept requests}}' }, + confirmDismissMultipleTitle: { id: 'notification_requests.confirm_dismiss_multiple.title', defaultMessage: 'Dismiss notification requests?' }, + confirmDismissMultipleMessage: { id: 'notification_requests.confirm_dismiss_multiple.message', defaultMessage: "You are about to dismiss {count, plural, one {one notification request} other {# notification requests}}. You won't be able to easily access {count, plural, one {it} other {them}} again. Are you sure you want to proceed?" }, + confirmDismissMultipleButton: { id: 'notification_requests.confirm_dismiss_multiple.button', defaultMessage: '{count, plural, one {Dismiss request} other {Dismiss requests}}' }, }); const ColumnSettings = () => { @@ -74,45 +74,15 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM const intl = useIntl(); const dispatch = useDispatch(); - const notificationRequests = useSelector(state => state.getIn(['notificationRequests', 'items'])); - const selectedCount = selectedItems.length; - const handleAcceptAll = useCallback(() => { - const items = notificationRequests.map(request => request.get('id')).toArray(); - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - title: intl.formatMessage(messages.confirmAcceptAllTitle), - message: intl.formatMessage(messages.confirmAcceptAllMessage, { count: items.length }), - confirm: intl.formatMessage(messages.confirmAcceptAllButton), - onConfirm: () => - dispatch(acceptNotificationRequests(items)), - }, - })); - }, [dispatch, intl, notificationRequests]); - - const handleDismissAll = useCallback(() => { - const items = notificationRequests.map(request => request.get('id')).toArray(); - dispatch(openModal({ - modalType: 'CONFIRM', - modalProps: { - title: intl.formatMessage(messages.confirmDismissAllTitle), - message: intl.formatMessage(messages.confirmDismissAllMessage, { count: items.length }), - confirm: intl.formatMessage(messages.confirmDismissAllButton), - onConfirm: () => - dispatch(dismissNotificationRequests(items)), - }, - })); - }, [dispatch, intl, notificationRequests]); - const handleAcceptMultiple = useCallback(() => { dispatch(openModal({ modalType: 'CONFIRM', modalProps: { - title: intl.formatMessage(messages.confirmAcceptAllTitle), - message: intl.formatMessage(messages.confirmAcceptAllMessage, { count: selectedItems.length }), - confirm: intl.formatMessage(messages.confirmAcceptAllButton), + title: intl.formatMessage(messages.confirmAcceptMultipleTitle), + message: intl.formatMessage(messages.confirmAcceptMultipleMessage, { count: selectedItems.length }), + confirm: intl.formatMessage(messages.confirmAcceptMultipleButton, { count: selectedItems.length}), onConfirm: () => dispatch(acceptNotificationRequests(selectedItems)), }, @@ -123,9 +93,9 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM dispatch(openModal({ modalType: 'CONFIRM', modalProps: { - title: intl.formatMessage(messages.confirmDismissAllTitle), - message: intl.formatMessage(messages.confirmDismissAllMessage, { count: selectedItems.length }), - confirm: intl.formatMessage(messages.confirmDismissAllButton), + title: intl.formatMessage(messages.confirmDismissMultipleTitle), + message: intl.formatMessage(messages.confirmDismissMultipleMessage, { count: selectedItems.length }), + confirm: intl.formatMessage(messages.confirmDismissMultipleButton, { count: selectedItems.length}), onConfirm: () => dispatch(dismissNotificationRequests(selectedItems)), }, @@ -136,46 +106,45 @@ const SelectRow = ({selectAllChecked, toggleSelectAll, selectedItems, selectionM setSelectionMode((mode) => !mode); }, [setSelectionMode]); - const menu = selectedCount === 0 ? - [ - { text: intl.formatMessage(messages.acceptAll), action: handleAcceptAll }, - { text: intl.formatMessage(messages.dismissAll), action: handleDismissAll }, - ] : [ - { text: intl.formatMessage(messages.acceptMultiple, { count: selectedCount }), action: handleAcceptMultiple }, - { text: intl.formatMessage(messages.dismissMultiple, { count: selectedCount }), action: handleDismissMultiple }, - ]; + const menu = [ + { text: intl.formatMessage(messages.acceptMultiple, { count: selectedCount }), action: handleAcceptMultiple }, + { text: intl.formatMessage(messages.dismissMultiple, { count: selectedCount }), action: handleDismissMultiple }, + ]; + + const handleSelectAll = useCallback(() => { + setSelectionMode(true); + toggleSelectAll(); + }, [setSelectionMode, toggleSelectAll]); return (
- {selectionMode && ( -
- 0 && !selectAllChecked} onChange={toggleSelectAll} /> -
- )} -
+
+ 0 && !selectAllChecked} onChange={handleSelectAll} /> +
+ + + +
- {selectedCount > 0 && -
- {selectedCount} selected -
- } -
- -
); }; diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index ed5e1b319d..ae8bc9f781 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -4422,7 +4422,7 @@ a.status-card { text-decoration: none; &:hover { - background: lighten($ui-base-color, 2%); + background: var(--on-surface-color); } } @@ -4551,19 +4551,18 @@ a.status-card { display: flex; } - &__selection-mode { - flex-grow: 1; - - .text-btn:hover { - text-decoration: underline; - } + &__select-menu:disabled { + visibility: hidden; } - &__actions { - .icon-button { - border-radius: 4px; - border: 1px solid var(--background-border-color); - padding: 5px; + &__mode-button { + margin-left: auto; + color: $highlight-text-color; + font-weight: bold; + font-size: 14px; + + &:hover { + color: lighten($highlight-text-color, 6%); } } } @@ -4916,6 +4915,7 @@ a.status-card { padding: 0; font-family: inherit; font-size: inherit; + font-weight: inherit; color: inherit; border: 0; background: transparent; @@ -10923,7 +10923,7 @@ noscript { cursor: pointer; &:hover { - background: lighten($ui-base-color, 1%); + background: var(--on-surface-color); } .notification-request__checkbox { diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss index 9d4fd60945..39809b437f 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss @@ -65,4 +65,5 @@ body { --background-color: #fff; --background-color-tint: rgba(255, 255, 255, 80%); --background-filter: blur(10px); + --on-surface-color: #{transparentize($ui-base-color, 0.65)}; } diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 9405335336..faf515508f 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -115,5 +115,6 @@ $dismiss-overlay-width: 4rem; --surface-background-color: #{darken($ui-base-color, 4%)}; --surface-variant-background-color: #{$ui-base-color}; --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)}; + --on-surface-color: #{transparentize($ui-base-color, 0.5)}; --avatar-border-radius: 8px; }