feat: redesign comments input

SuperViz · Nov 20, 2023 · 1a938c7 · 1a938c7
1 parent 9556d95
commit 1a938c7
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 16 deletions.
diff --git a/src/web-components/comments/components/comment-input.ts b/src/web-components/comments/components/comment-input.ts
@@ -45,6 +45,14 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
     return this.shadowRoot!.querySelector('.comment-input--send-btn') as HTMLButtonElement;
   };
 
+  private get optionsContainer() {
+    return this.shadowRoot!.querySelector('.comment-input--options') as HTMLTextAreaElement;
+  }
+
+  private get horizontalRule() {
+    return this.shadowRoot!.querySelector('.sv-hr') as HTMLDivElement;
+  }
+
   private commentInputFocus = ({ detail }: CustomEvent) => {
     this.pinCoordinates = detail;
     this.getCommentInput().focus();
@@ -56,6 +64,7 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
 
     window.document.body.addEventListener('comment-input-focus', this.commentInputFocus);
     this.addEventListener('keyup', this.sendEnter);
+    const input = this.getCommentInput();
   }
 
   disconnectedCallback(): void {
@@ -80,6 +89,7 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
 
   private updateHeight() {
     const commentsInput = this.getCommentInput();
+
     const commentsInputContainer = this.getCommentInputContainer();
 
     commentsInput.style.height = '0px';
@@ -151,6 +161,25 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
     this.emitEvent('close-edit-mode', {}, { composed: false, bubbles: false });
   };
 
+  private onTextareaFocus = () => {
+    const options = this.optionsContainer;
+    const rule = this.horizontalRule;
+
+    options.classList.add('active-textarea');
+    rule.classList.add('active-hr');
+  };
+
+  private onTextareaLoseFocus = () => {
+    const options = this.optionsContainer;
+    const rule = this.horizontalRule;
+    const textarea = this.getCommentInput();
+
+    if (!textarea.value.length) {
+      options.classList.remove('active-textarea');
+      rule.classList.remove('active-hr');
+    }
+  };
+
   protected render() {
     const commentInputEditableOptions = () => {
       if (!this.editable) return;
@@ -187,6 +216,8 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
             id="comment-input--textarea"
             placeholder="Add comment..."
             @input=${this.updateHeight}
+            @focus=${this.onTextareaFocus}
+            @blur=${this.onTextareaLoseFocus}
           ></textarea>
         </div>
         <div class="sv-hr"></div>

diff --git a/src/web-components/comments/css/comment-input.style.ts b/src/web-components/comments/css/comment-input.style.ts
@@ -4,26 +4,29 @@ export const commentInputStyle = css`
   .comment-input {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 288px;
     background: rgb(var(--sv-white));
     border-radius: 4px;
     border: 1px solid rgb(var(--sv-gray-300));
+    position: relative;
+    min-height: 40px;
+    box-sizing: border-box;
   }
 
   .comment-input:focus-within {
     border: 1px solid rgb(var(--sv-gray-500));
   }
 
   .comment-input:focus-within > .sv-hr {
-    background: rgb(var(--sv-gray-500))
+    background: rgb(var(--sv-gray-500));
   }
 
   #comment-input--textarea {
     all: unset;
     border: 0px;
     border-radius: 4px;
     outline: none;
-    height: 13px;
+    height: 39.5px;
     font-size: 14px;
     color: rgb(var(--sv-gray-700));
     padding: 12px 11px !important;
@@ -33,7 +36,8 @@ export const commentInputStyle = css`
     overflow: hidden;
     resize: none;
     appearance: none;
-    width: 90%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   #comment-input--textarea::placeholder {
@@ -44,11 +48,42 @@ export const commentInputStyle = css`
   .comment-input--options {
     display: flex;
     justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: 0;
+    transition: 0.25s;
+  }
+
+  .active-textarea {
+    height: 39.5px;
     padding: 4px 8px;
   }
+  .sv-hr {
+    width: 100%;
+    min-height: 1px;
+    background: rgb(var(--sv-gray-300));
+    padding: 0px;
+    margin: 0px;
+    display: none;
+  }
+
+  .active-hr {
+    display: block;
+  }
 
   .mention {
-    display: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 32px;
+    border-radius: 100%;
+    color: rgb(var(--sv-gray-600));
+  }
+
+  .mention > superviz-icon {
+    height: 16px;
+    width: 16px;
   }
 
   .comment-input--send-btn {
@@ -61,12 +96,13 @@ export const commentInputStyle = css`
     height: 32px;
     color: rgba(var(--sv-white), 1);
     border: 0px;
-    cursor: pointer;
   }
 
-  .align-send-btn > superviz-icon {
+  .align-send-btn > superviz-icon,
+  .mention > superviz-icon {
     margin-right: 2px;
     margin-top: 4px;
+    cursor: pointer;
   }
 
   .comment-input--send-btn:disabled {
@@ -77,20 +113,19 @@ export const commentInputStyle = css`
     border-radius: 100%;
     width: 32px;
     height: 32px;
-    color: rgb(var(--sv-gray-400));
+    color: rgb(var(--sv-gray-600));
     border: 0px;
   }
 
-  .sv-hr {
-    width: 100%;
-    height: 1px;
-    background: rgb(var(--sv-gray-300));
-    padding: 0px;
-    margin: 0px;
-  }
-
   .comment-input-options {
     display: flex;
     gap: 4px;
+    position: absolute;
+    right: 8px;
+    bottom: 3px;
+  }
+
+  #comment-input--textarea:focus::placeholder {
+    color: transparent;
   }
 `;