From b25e42c456a2f161dc7489bb78b001f1f32e96f8 Mon Sep 17 00:00:00 2001 From: Qstick Date: Sun, 2 Aug 2020 00:43:42 -0400 Subject: [PATCH] New: Redo Notification Triggers UI (From Lidarr) --- .../EditNotificationModalContent.js | 99 +------------- .../Notifications/NotificationEventItems.css | 4 + .../Notifications/NotificationEventItems.js | 121 ++++++++++++++++++ 3 files changed, 130 insertions(+), 94 deletions(-) create mode 100644 frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css create mode 100644 frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js index b36360b91..943967465 100644 --- a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js +++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.js @@ -15,6 +15,7 @@ import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; import { inputTypes, kinds } from 'Helpers/Props'; import translate from 'Utilities/String/translate'; +import NotificationEventItems from './NotificationEventItems'; import styles from './EditNotificationModalContent.css'; function EditNotificationModalContent(props) { @@ -39,17 +40,6 @@ function EditNotificationModalContent(props) { id, implementationName, name, - onGrab, - onDownload, - onUpgrade, - onRename, - onHealthIssue, - supportsOnGrab, - supportsOnDownload, - supportsOnUpgrade, - supportsOnRename, - supportsOnHealthIssue, - includeHealthWarnings, tags, fields, message @@ -96,89 +86,10 @@ function EditNotificationModalContent(props) { /> - - On Grab - - - - - - On Import - - - - - { - onDownload.value && - - On Upgrade - - - - } - - - On Rename - - - - - - On Health Issue - - - - - { - onHealthIssue.value && - - Include Health Warnings - - - - } + Tags diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css new file mode 100644 index 000000000..b3f6aa717 --- /dev/null +++ b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css @@ -0,0 +1,4 @@ +.events { + margin-top: 10px; + user-select: none; +} diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js new file mode 100644 index 000000000..2ea41c9c5 --- /dev/null +++ b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js @@ -0,0 +1,121 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import FormGroup from 'Components/Form/FormGroup'; +import FormInputGroup from 'Components/Form/FormInputGroup'; +import FormInputHelpText from 'Components/Form/FormInputHelpText'; +import FormLabel from 'Components/Form/FormLabel'; +import { inputTypes } from 'Helpers/Props'; +import styles from './NotificationEventItems.css'; + +function NotificationEventItems(props) { + const { + item, + onInputChange + } = props; + + const { + onGrab, + onDownload, + onUpgrade, + onRename, + onHealthIssue, + supportsOnGrab, + supportsOnDownload, + supportsOnUpgrade, + supportsOnRename, + supportsOnHealthIssue, + includeHealthWarnings + } = item; + + return ( + + Notification Triggers +
+ +
+
+ +
+ +
+ +
+ + { + onDownload.value && +
+ +
+ } + +
+ +
+ +
+ +
+ + { + onHealthIssue.value && +
+ +
+ } +
+
+
+ ); +} + +NotificationEventItems.propTypes = { + item: PropTypes.object.isRequired, + onInputChange: PropTypes.func.isRequired +}; + +export default NotificationEventItems;