feat: add max height and scroll to textarea

SuperViz · Dec 20, 2023 · e86150a · e86150a
1 parent 3879c4f
commit e86150a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 30 deletions.
diff --git a/src/common/types/participant.types.ts b/src/common/types/participant.types.ts
@@ -33,4 +33,5 @@ export type ParticipantApi = {
   participantId: string;
   name: string;
   createdAt: string;
+  avatar: string;
 };
diff --git a/src/web-components/comments/components/comment-input.ts b/src/web-components/comments/components/comment-input.ts
@@ -83,16 +83,20 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
   private updateHeight() {
     const commentsInput = this.commentInput;
 
-    const commentsInputContainer = this.commentInputContainer;
+    commentsInput.style.height = '40px';
 
-    commentsInput.style.height = '0px';
-    commentsInputContainer.style.height = '0px';
+    let textareaHeight = commentsInput.scrollHeight + 15;
 
-    const textareaHeight = commentsInput.scrollHeight - 1.5;
-    const textareaContainerHeight = commentsInput.scrollHeight - 1.5;
+    if (textareaHeight > 40) {
+      commentsInput.style.paddingBottom = '8px';
+    }
+
+    if (textareaHeight === 46) {
+      commentsInput.style.paddingBottom = '0';
+      textareaHeight = 40;
+    }
 
     commentsInput.style.height = `${textareaHeight}px`;
-    commentsInputContainer.style.height = `${textareaContainerHeight}px`;
 
     const btnSend = this.getSendBtn();
     btnSend.disabled = !(commentsInput.value.length > 0);
@@ -200,15 +204,14 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
 
     return html`
       <div class="comment-input">
-        <div id="comment-input--container">
-          <textarea
-            id="comment-input--textarea"
-            placeholder=${this.placeholder ?? 'Add comment...'}
-            @input=${this.updateHeight}
-            @focus=${this.onTextareaFocus}
-            @blur=${this.onTextareaLoseFocus}
-          ></textarea>
-        </div>
+        <textarea
+          id="comment-input--textarea"
+          placeholder=${this.placeholder ?? 'Add comment...'}
+          @input=${this.updateHeight}
+          @focus=${this.onTextareaFocus}
+          @blur=${this.onTextareaLoseFocus}
+          spellcheck="false"
+        ></textarea>
         <hr class="sv-hr" />
         <div class="comment-input--options">
           <div class="comment-actions">

diff --git a/src/web-components/comments/css/annotation-pin.style.ts b/src/web-components/comments/css/annotation-pin.style.ts
@@ -24,6 +24,7 @@ export const annotationPinStyles = css`
     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
     transition: border-color 0.2s ease-in-out opacity 0.2s ease-in-out;
     padding: 2px;
+    box-sizing: border-box;
     cursor: pointer;
   }
 
@@ -44,7 +45,6 @@ export const annotationPinStyles = css`
   }
 
   .annotation-pin__avatar--add {
-    font-size: 24px;
     color: rgb(var(--sv-gray-700));
     background-color: rgb(var(--sv-white));
   }
@@ -59,7 +59,7 @@ export const annotationPinStyles = css`
 
   .floating-input {
     position: absolute;
-    bottom: 0;
+    top: -2px;
     opacity: 0;
   }
 

diff --git a/src/web-components/comments/css/comment-input.style.ts b/src/web-components/comments/css/comment-input.style.ts
@@ -23,24 +23,35 @@ export const commentInputStyle = css`
     border: 0px;
     border-radius: 4px;
     outline: none;
-    height: 1rem;
     font-size: 14px;
     color: rgb(var(--sv-gray-700));
     font-family: Roboto;
     white-space: pre-wrap;
     word-wrap: break-word;
-    overflow: hidden;
+    overflow-y: scroll;
     resize: none;
     line-height: 1rem;
     max-height: 5rem;
     appearance: none;
+    height: 40px;
     width: 100%;
     box-sizing: border-box;
+
+    padding-top: 7px;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 11px solid transparent;
+    border-left: 11px solid transparent;
+  }
+
+  #comment-input--textarea:invalid {
+    border-top: 15px solid transparent;
   }
 
   #comment-input--textarea::placeholder {
     color: rgb(var(--sv-gray-400));
     font-size: 14px;
+    line-height: 14px;
   }
 
   .comment-input--options {
@@ -53,7 +64,7 @@ export const commentInputStyle = css`
   }
 
   .active-textarea {
-    height: 38.5px;
+    height: 40px;
     padding: 4px 8px;
   }
 
@@ -64,11 +75,13 @@ export const commentInputStyle = css`
     transition: 0.25s opacity linear, 0.25s visibility;
     visibility: hidden;
     height: 0;
+    position: absolute;
   }
 
   .active-hr {
     border-top: 1px solid rgb(var(--sv-gray-300));
     opacity: 1;
+    position: relative;
     visibility: visible;
   }
 
@@ -143,14 +156,4 @@ export const commentInputStyle = css`
   #comment-input--textarea:focus::placeholder {
     color: transparent;
   }
-
-  #comment-input--container {
-    max-height: 5rem;
-    min-height: 32px;
-    height: 32px;
-    padding: 3px 11px;
-    overflow-y: scroll;
-    display: flex;
-    align-items: center;
-  }
 `;