Page MenuHomePhabricator
Files F3541804

D7823.diff
No OneTemporary
Actions

D7823.diff
View Options

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,60 @@
+.editMessage {
+ padding: 10px;
+ background-color: var(--modal-bg);
+ border-radius: 8px;
+}
+
+.backgroundEditMessage {
+ width: 1000px;
+}
+
+.bottomRow {
+ padding-top: 10px;
+ display: flex;
+ align-items: center;
+}
+
+.buttons {
+ margin-left: auto;
+ margin-right: 0;
+}
+
+.icon {
+ color: var(--error);
+ height: 16px;
+ display: flex;
+ float: left;
+ margin-right: 2px;
+}
+
+.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;
+}
+
+.smallButton {
+ padding: 3px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ 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,102 @@
+// @flow
+
+import classNames from 'classnames';
+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,
+};
+
+const cancelButtonColor: ButtonColor = {
+ backgroundColor: 'transparent',
+};
+
+function EditTextMessage(props: Props): React.Node {
+ const { background, threadInfo } = props;
+ const { editState, clearEditModal } = useEditModalContext();
+
+ const editedMessageDraft = editState?.editedMessageDraft ?? '';
+ const threadColor = threadInfo.color;
+ const saveButtonColor: ButtonColor = React.useMemo(
+ () => ({
+ backgroundColor: `#${threadColor}`,
+ }),
+ [threadColor],
+ );
+ let editFailed;
+ if (editState?.isError) {
+ editFailed = (
+ <div className={css.failedText}>
+ <XCircleIcon className={css.icon} />
+ <div className={css.errorColor}>Edit failed.</div>
+ <div className={css.whiteColor}>Please try again.</div>
+ </div>
+ );
+ }
+
+ const containerStyle = classNames(css.editMessage, {
+ [css.backgroundEditMessage]: background,
+ });
+
+ return (
+ <div className={containerStyle}>
+ <div className={cssInputBar.inputBarTextInput}>
+ <ChatInputTextArea
+ focus={!background}
+ currentText={editedMessageDraft}
+ />
+ </div>
+ <div className={css.bottomRow}>
+ {editFailed}
+ <div className={css.buttons}>
+ <Button
+ className={[css.saveButton, css.smallButton]}
+ variant="filled"
+ buttonColor={saveButtonColor}
+ >
+ Save (enter)
+ </Button>
+ <Button
+ className={css.smallButton}
+ variant="filled"
+ buttonColor={cancelButtonColor}
+ onClick={clearEditModal}
+ >
+ Cancel (esc)
+ </Button>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+const ComposedEditTextMessage: React.ComponentType<Props> = React.memo<Props>(
+ function ComposedEditTextMessage(props) {
+ const { background, ...restProps } = props;
+ return (
+ <ComposedMessage
+ {...restProps}
+ sendFailed={false}
+ shouldDisplayPinIndicator={false}
+ >
+ <EditTextMessage {...props} />
+ </ComposedMessage>
+ );
+ },
+);
+
+export { EditTextMessage, ComposedEditTextMessage };

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 27, 7:12 AM (9 h, 14 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2711667
Default Alt Text
D7823.diff (4 KB)

Event Timeline