From b8bd3b07ef9aa2027af838445a90e4bc752aa564 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 23 May 2023 10:12:03 +0200
Subject: [PATCH] DEV: regroups composer button code (#21690)

This commit makes it easier to ensure each button have a similar behavior: hover, disabled, focus...

It also removes some dead code (__inline-button) and fixes a bug where the emoji button didnt have the right un-focused color (it was more visible than it should.
---
 .../discourse/components/chat-composer.hbs    |  6 +-
 .../common/chat-composer-dropdown.scss        | 15 ---
 .../stylesheets/common/chat-composer.scss     | 96 +++++++++----------
 3 files changed, 47 insertions(+), 70 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
index 4402a8d2760..7540dfed5ba 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
@@ -21,7 +21,7 @@
       (if this.isFocused "is-focused")
       (if this.pane.sending "is-sending")
       (if this.sendEnabled "is-send-enabled" "is-send-disabled")
-      (if this.disabled "is-disabled")
+      (if this.disabled "is-disabled" "is-enabled")
     }}
     {{did-update this.didUpdateMessage this.currentMessage}}
     {{did-update this.didUpdateInReplyTo this.currentMessage.inReplyTo}}
@@ -73,7 +73,7 @@
             <Chat::Composer::Button
               @icon={{button.icon}}
               class={{button.id}}
-              disabled={{button.disabled}}
+              disabled={{or this.disabled button.disabled}}
               tabindex={{if button.disabled -1 0}}
               {{on
                 "click"
@@ -90,7 +90,7 @@
 
         <Chat::Composer::Button
           @icon="paper-plane"
-          class="chat-composer__send-btn"
+          class="chat-composer__send-btn primary"
           title={{i18n "chat.composer.send"}}
           disabled={{or this.disabled (not this.sendEnabled)}}
           tabindex={{if this.sendEnabled 0 -1}}
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
index a4d281330d6..a3c08c7839d 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
@@ -21,23 +21,8 @@
   .d-icon {
     padding: 5px;
     transition: transform 0.1s ease-in-out;
-    color: var(--primary-high);
     background: var(--secondary-very-high);
     border-radius: 100%;
-
-    .is-disabled & {
-      color: var(--primary-low-mid);
-    }
-  }
-
-  .no-touch & {
-    &:hover,
-    &:focus {
-      cursor: pointer;
-      .d-icon {
-        color: var(--primary);
-      }
-    }
   }
 
   &.has-active-panel {
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index 4d7e8acdeb6..2e75146aaa8 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -37,18 +37,6 @@
     padding-inline: 1rem;
   }
 
-  &__inline-button {
-    .d-icon {
-      color: var(--primary-medium);
-    }
-
-    &:hover {
-      .d-icon {
-        color: var(--primary);
-      }
-    }
-  }
-
   &__inner-container {
     display: flex;
     align-items: center;
@@ -75,6 +63,45 @@
     }
   }
 
+  .chat-composer-button__btn {
+    background: none;
+
+    &:not(:disabled) {
+      .d-icon {
+        color: var(--primary-high);
+      }
+
+      .no-touch & {
+        &:hover,
+        &:focus {
+          .d-icon {
+            color: var(--primary);
+          }
+
+          &.primary {
+            .d-icon {
+              color: var(--tertiary);
+            }
+          }
+        }
+      }
+
+      &.primary {
+        .d-icon {
+          color: var(--tertiary);
+        }
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+
+      .d-icon {
+        color: var(--primary-low-mid);
+      }
+    }
+  }
+
   &__send-btn {
     will-change: scale;
 
@@ -90,55 +117,16 @@
       }
     }
 
-    .chat-composer.is-focused.is-send-disabled & {
-      .d-icon {
-        color: var(--primary-high);
-      }
-    }
-
     .chat-composer.is-sending & {
       animation: sendingScales 1s infinite linear;
     }
 
-    .d-icon {
-      background: none !important;
-      color: var(--primary);
-    }
-
-    .chat-composer.is-send-enabled & {
-      .d-icon {
-        color: var(--tertiary);
-      }
-
+    &:not(:disabled) {
       &:hover {
         .d-icon {
           transform: scale(1.2);
         }
       }
-
-      &:focus {
-        outline: auto;
-      }
-    }
-
-    .chat-composer.is-send-disabled & {
-      cursor: default;
-
-      .d-icon {
-        color: var(--primary-low-mid);
-      }
-
-      &:hover {
-        background: none !important;
-      }
-    }
-
-    .chat-composer.is-disabled & {
-      opacity: 0.4;
-
-      &:hover {
-        background: none !important;
-      }
     }
   }
 
@@ -177,6 +165,10 @@
 
     &[disabled] {
       background: none;
+
+      .d-icon {
+        opacity: 0.4;
+      }
     }
 
     &:focus,