diff --git a/web/chat/edit-text-message.css b/web/chat/edit-text-message.css new file mode 100644 --- /dev/null +++ b/web/chat/edit-text-message.css @@ -0,0 +1,56 @@ +.editMessage { + padding: 10px; + background-color: var(--shades-black-90); + border-radius: 8px; +} + +.bottomRow { + padding-top: 10px; + display: flex; + align-items: center; +} + +.buttons { + margin-left: auto; + margin-right: 0; +} + +.iconContainer { + color: var(--error); +} + +.iconContainer > svg { + height: 16px; + display: flex; +} + +.failedText { + font-size: 13px; + white-space: nowrap; + flex: 1; + align-items: center; +} + +.errorColor { + color: var(--error); +} + +.whiteColor { + color: var(--fg); + margin-left: 2px; +} + +.failedText > div { + float: left; + margin-right: 2px; +} + +.buttons > button { + padding: 4px; + border-radius: 4px; + float: right; +} + +.saveButton { + margin-left: 8px; +} diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js new file mode 100644 --- /dev/null +++ b/web/chat/edit-text-message.react.js @@ -0,0 +1,88 @@ +// @flow + +import * as React from 'react'; +import { XCircle as XCircleIcon } from 'react-feather'; + +import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; +import { type ThreadInfo } from 'lib/types/thread-types.js'; + +import cssInputBar from './chat-input-bar.css'; +import ChatInputTextArea from './chat-input-text-area.react.js'; +import ComposedMessage from './composed-message.react.js'; +import { useEditModalContext } from './edit-message-provider.js'; +import css from './edit-text-message.css'; +import type { ButtonColor } from '../components/button.react.js'; +import Button from '../components/button.react.js'; + +type Props = { + +item: ChatMessageInfoItem, + +threadInfo: ThreadInfo, + +background: boolean, + +width: ?number, +}; + +function EditTextMessage(props: Props): React.Node { + const { background, threadInfo } = props; + const { editState, clearEditModal } = useEditModalContext(); + + const editedMessageDraft = editState?.editedMessageDraft ?? ''; + const threadColor = threadInfo.color; + const saveButtonColors: ButtonColor = { + backgroundColor: `#${threadColor}`, + color: 'var(--fg)', + }; + const cancelButtonColor: ButtonColor = { + color: 'var(--fg)', + }; + let editFailed; + if (editState?.isError) { + editFailed = ( +
+
+ +
+
Edit failed.
+
Please try again.
+
+ ); + } + + return ( +
+
+ +
+
+ {editFailed} +
+ + +
+
+
+ ); +} + +const ComposedEditTextMessage: React.ComponentType = React.memo( + function ComposedEditTextMessage(props) { + const { background, width, ...restProps } = props; + return ( + + + + ); + }, +); + +export { EditTextMessage, ComposedEditTextMessage };