DEV: Refactor popup-tip component (#15257)

app/assets/javascripts/discourse/app/components/popup-input-tip.js

@@ -1,17 +1,16 @@
-import { alias, not } from "@ember/object/computed";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { alias, not, or } from "@ember/object/computed";
+import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
-import { iconHTML } from "discourse-common/lib/icon-library";
+import { getOwner } from "discourse-common/lib/get-owner";
 
 export default Component.extend({
   classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
   attributeBindings: ["role"],
-  animateAttribute: null,
-  bouncePixels: 6,
-  bounceDelay: 100,
   rerenderTriggers: ["validation.reason"],
-  closeIcon: `${iconHTML("times-circle")}`.htmlSafe(),
   tipReason: null,
+  lastShownAt: or("shownAt", "validation.lastShownAt"),
+  bad: alias("validation.failed"),
+  good: not("bad"),
 
   @discourseComputed("bad")
   role(bad) {
@@ -22,30 +21,8 @@ export default Component.extend({
 
   click() {
     this.set("shownAt", null);
-    this.set("validation.lastShownAt", null);
-  },
-
-  bad: alias("validation.failed"),
-  good: not("bad"),
-
-  @discourseComputed("shownAt", "validation.lastShownAt")
-  lastShownAt(shownAt, lastShownAt) {
-    return shownAt || lastShownAt;
-  },
-
-  @observes("lastShownAt")
-  bounce() {
-    if (this.lastShownAt) {
-      let $elem = $(this.element);
-      if (!this.animateAttribute) {
-        this.animateAttribute = $elem.css("left") === "auto" ? "right" : "left";
-      }
-      if (this.animateAttribute === "left") {
-        this.bounceLeft($elem);
-      } else {
-        this.bounceRight($elem);
-      }
-    }
+    const composer = getOwner(this).lookup("controller:composer");
+    composer.clearLastValidatedAt();
   },
 
   didReceiveAttrs() {
@@ -57,20 +34,4 @@ export default Component.extend({
       this.set("tipReason", null);
     }
   },
-
-  bounceLeft($elem) {
-    for (let i = 0; i < 5; i++) {
-      $elem
-        .animate({ left: "+=" + this.bouncePixels }, this.bounceDelay)
-        .animate({ left: "-=" + this.bouncePixels }, this.bounceDelay);
-    }
-  },
-
-  bounceRight($elem) {
-    for (let i = 0; i < 5; i++) {
-      $elem
-        .animate({ right: "-=" + this.bouncePixels }, this.bounceDelay)
-        .animate({ right: "+=" + this.bouncePixels }, this.bounceDelay);
-    }
-  },
 });

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -1415,4 +1415,8 @@ export default Controller.extend({
   visible(state) {
     return state && state !== "closed";
   },
+
+  clearLastValidatedAt() {
+    this.set("lastValidatedAt", null);
+  },
 });

app/assets/javascripts/discourse/app/templates/components/popup-input-tip.hbs

@@ -1 +1 @@
-<span class="close">{{closeIcon}}</span>{{tipReason}}
+{{tipReason}} {{d-icon "times-circle"}}

app/assets/stylesheets/common/base/compose.scss

@@ -307,10 +307,6 @@
     z-index: z("composer", "dropdown");
   }
 
-  .popup-tip {
-    z-index: z("composer", "dropdown") + 1;
-  }
-
   .wmd-controls {
     position: relative;
     display: flex;

app/assets/stylesheets/common/input_tip.scss

@@ -1,8 +1,22 @@
+@keyframes slidein {
+  0% {
+    transform: translateX(0px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+
 .popup-tip {
+  @include form-item-sizing;
   position: absolute;
-  display: block;
-  padding: 5px 10px;
-  z-index: z("tooltip");
+  z-index: z("composer", "dropdown") + 1;
+  cursor: pointer;
+  animation: 0.15s slidein 3;
+
   &.bad {
     background: var(--danger-medium);
     color: white;
@@ -12,15 +26,12 @@
   &.good {
     display: none;
   }
-  .close {
-    float: right;
+  .d-icon {
     color: var(--primary);
     opacity: 0.5;
-    font-size: $font-0;
-    margin: 0 0 0 4px;
-    cursor: pointer;
-  }
-  .close:hover {
-    opacity: 1;
+    font-size: var(--font-0);
+    &:hover {
+      opacity: 1;
+    }
   }
 }