Merge pull request #193 from v0l/reply

Note creator improvements

src/Element/NoteCreator.css

@@ -1,9 +1,10 @@
 .note-creator {
     margin-bottom: 10px;
     background-color: var(--note-bg);
-    border: 1px solid var(--gray);
+    border: none;
     border-radius: 10px;
     padding: 6px;
+    position: relative;
 }
 
 .note-reply {
@@ -15,10 +16,25 @@
     resize: none;
     background-color: var(--note-bg);
     border-radius: 10px 10px 0 0;
+    min-height: 120px;
     max-width: stretch;
     min-width: stretch;
 }
 
+.note-creator textarea::placeholder {
+  color: var(--font-secondary-color);
+  font-size: var(--font-size);
+  line-height: 24px;
+}
+
+@media (min-width: 520px) {
+  .note-creator textarea { min-height: 210px; }
+}
+
+@media (min-width: 720px) {
+  .note-creator textarea { min-height: 321px; }
+}
+
 .note-creator-actions {
     width: 100%;
     display: flex;
@@ -29,18 +45,45 @@
 }
 
 .note-creator .attachment {
-    cursor: pointer;
-    margin-left: auto;
+  cursor: pointer;
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  width: 48px;
+  height: 36px;
+  background: var(--gray-dark);
+  color: white;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.note-creator .attachment:hover {
+  background: var(--font-color);
+  color: var(--gray-dark);
+}
+
+.light .note-creator .attachment {
+  background: var(--gray-light);
+}
+
+.light .note-creator .attachment:hover {
+  background: var(--gray-dark);
+  color: white;
 }
 
 .note-creator-actions button:not(:last-child) {
     margin-right: 4px;
 }
 
-.note-creator .attachment .error {
-    font-weight: normal;
-    margin-right: 5px;
-    font-size: 14px;
+.note-creator .error {
+    position: absolute;
+    left: 16px;
+    bottom: 12px;
+    font-color: var(--error);
+    margin-right: 12px;
+    font-size: 16px;
 }
 
 .note-creator .btn {
@@ -77,6 +120,10 @@
   }
 }
 
+.note-creator-modal .modal-body {
+  background: var(--modal-bg-color);
+}
+
 @media (max-width: 720px) {
   .note-creator-modal {
     align-items: flex-start;
@@ -85,3 +132,13 @@
     margin-top: 20vh;
   }
 }
+
+.note-preview {
+  word-break: break-all;
+}
+
+.note-preview-body {
+  text-overflow: ellipsis;
+  padding: 4px 4px 0 56px;
+  font-size: 14px;
+}

src/Element/NoteCreator.tsx

@@ -1,17 +1,33 @@
-import { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPaperclip } from "@fortawesome/free-solid-svg-icons";
-
 import "./NoteCreator.css";
 
+import { useState } from "react";
+
+import Attachment from "Icons/Attachment";
 import Plus from "Icons/Plus";
 import useEventPublisher from "Feed/EventPublisher";
 import { openFile } from "Util";
 import Textarea from "Element/Textarea";
 import Modal from "Element/Modal";
+import ProfileImage from "Element/ProfileImage";
 import { default as NEvent } from "Nostr/Event";
 import useFileUpload from "Upload";
 
+interface NotePreviewProps {
+  note: NEvent
+}
+
+function NotePreview({ note }: NotePreviewProps) {
+  return (
+    <div className="note-preview">
+      <ProfileImage pubkey={note.PubKey} />
+      <div className="note-preview-body">
+        {note.Content.slice(0, 136)}
+        {note.Content.length > 140 && '...'}
+      </div>
+    </div>
+  )
+}
+
 export interface NoteCreatorProps {
     show: boolean
     setShow: (s: boolean) => void
@@ -27,6 +43,7 @@ export function NoteCreator(props: NoteCreatorProps) {
     const [error, setError] = useState<string>();
     const [active, setActive] = useState<boolean>(false);
     const uploader = useFileUpload();
+    const hasErrors = (error?.length ?? 0) > 0
 
     async function sendNote() {
         if (note) {
@@ -88,6 +105,9 @@ export function NoteCreator(props: NoteCreatorProps) {
             className="note-creator-modal"
             onClose={() => setShow(false)}
           >
+            {replyTo &&  (
+              <NotePreview note={replyTo} />
+            )}
             <div className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}>
                 <div className="flex f-col mr10 f-grow">
                     <Textarea
@@ -97,11 +117,11 @@ export function NoteCreator(props: NoteCreatorProps) {
                         value={note}
                         onFocus={() => setActive(true)}
                     />
-                <div className="attachment">
-                    {(error?.length ?? 0) > 0 ? <b className="error">{error}</b> : null}
-                    <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
-                </div>
+                <button type="button" className="attachment" onClick={(e) => attachFile()}>
+                  <Attachment />
+                </button>
                 </div>
+                {hasErrors && <span className="error">{error}</span>}
             </div>
             <div className="note-creator-actions">
                 <button className="secondary" type="button" onClick={cancel}>

src/Element/Textarea.tsx

@@ -61,7 +61,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
     <ReactTextareaAutocomplete
       {...rest}
       loadingComponent={() => <span>Loading....</span>}
-      placeholder="Say something!"
+      placeholder="What's on your mind?"
       onChange={onChange}
       textAreaComponent={TextareaAutosize}
       trigger={{