GCW-3167 User Mentions UI

app/components/variable-height-textarea.js

@@ -0,0 +1,90 @@
+import Ember from "ember";
+import config from "./../config/environment";
+
+export default Ember.TextArea.extend({
+  tagName: "textarea",
+  attributeBindings: ["disabled"],
+  disabled: false,
+  cordova: Ember.inject.service(),
+
+  valueChanged: Ember.observer("value", function() {
+    var _this = this;
+    var textarea = _this.element;
+
+    if (textarea) {
+      Ember.run.once(function() {
+        // auto-resize height of textarea $('textarea')[0].
+        if (textarea.scrollHeight < 120) {
+          Ember.$(textarea)
+            .css({ height: "auto", "overflow-y": "hidden" })
+            .height(textarea.scrollHeight - 15);
+
+          var parent = _this.get("parentDiv");
+          var grandParentDiv = Ember.$(`.${parent}`).closest(".review_item ");
+          if (grandParentDiv.length === 0) {
+            // auto-move textarea by chaning margin of parentDiv
+            var paddingSize = config.cordova.enabled
+              ? 5
+              : textarea.scrollHeight - 40;
+            Ember.$(`.${parent}`).css({
+              "padding-bottom": paddingSize > 0 ? paddingSize : 0
+            });
+
+            // scrolling down to bottom of page
+            if (_this.get("value") !== "") {
+              window.scrollTo(0, document.body.scrollHeight);
+            }
+          }
+        } else {
+          Ember.$(textarea)
+            .css({ height: "auto", "overflow-y": "auto" })
+            .height(105);
+        }
+      });
+    }
+  }),
+
+  didInsertElement() {
+    var _this = this;
+    var parent = _this.get("parentDiv");
+    var grandParentDiv = Ember.$(`.${parent}`).closest(".review_item ");
+
+    // Apply only in Donor Cordova App.
+    if (grandParentDiv.length === 0 && config.cordova.enabled) {
+      var msgTextbox = Ember.$(
+        Ember.$(_this.element).closest(".message-textbar")
+      );
+
+      Ember.run.scheduleOnce("afterRender", this, function() {
+        var isIOS = _this.get("cordova").isIOS();
+
+        var height = isIOS ? 55 : 30;
+        Ember.$(".message-footer").height(height);
+
+        Ember.$(_this.element).focus(function() {
+          if (isIOS) {
+            if (document.body.scrollHeight === Ember.$(window).height()) {
+              Ember.$(".message-footer").addClass("message_footer_small_page");
+            } else {
+              Ember.$(".message-footer").removeClass(
+                "message_footer_small_page"
+              );
+            }
+            msgTextbox.css({ position: "relative" });
+          } else {
+            var positionVal =
+              document.body.scrollHeight === Ember.$(window).height()
+                ? "fixed"
+                : "relative";
+          }
+
+          window.scrollTo(0, document.body.scrollHeight);
+        });
+
+        Ember.$(_this.element).blur(function() {
+          msgTextbox.css({ position: "fixed" });
+        });
+      });
+    }
+  }
+});

app/styles/_mentions.scss

@@ -0,0 +1,79 @@
+$mentioned-user-display-color: rgb(249, 193, 118);
+$mentioned-user-display-border: rgba(235,176,97,1);
+$mentioned-user-textbox-color: rgba(196,221,255,1);
+$mentioned-user-textbox-border: rgba(156,198,255,1);
+
+
+.tribute-container {
+  position: absolute;
+  display: block;
+  top: -14rem !important;
+  max-height: 10rem;
+  border-radius: 6px;
+  width: 15rem;
+  line-height: 2px;
+  top: auto;
+  overflow-y: scroll;
+  background: black;
+}
+
+.tribute-container > ul {
+  list-style-type: none;
+  margin: 0px;
+  line-height: 2rem;
+}
+
+ul > li:hover,
+.highlight {
+  background: #0079d3;
+}
+
+.item {
+  margin-left: 10px;
+  text-align: left;
+}
+
+.mentionable {
+  border: none;
+  margin: 0rem 1rem;
+  max-width: 95%;
+  background: white;
+  box-shadow: none;
+  -webkit-box-sizing: none;
+  -moz-box-sizing: none;
+  box-sizing: none;
+  transition: none;
+  margin: 0rem;
+  height: 3rem;
+  padding: 0.4rem 0.2rem;
+  display: block;
+  text-align: left;
+  color: black;
+  overflow-x: scroll;
+  max-height: 5rem;
+}
+
+.mentioned {
+  background: $mentioned-user-textbox-color;
+  border: 1.6px solid $mentioned-user-textbox-border;
+  border-radius: 5px;
+  padding: 5px;
+  color: black;
+}
+
+.mentioned-message-display {
+  background: $mentioned-user-display-color;
+  border: 1.6px solid $mentioned-user-display-border;
+  border-radius: 5px;
+  color: black;
+  padding: 7px;
+}
+
+.mentionedImage {
+  margin-left: 10px;
+  width: 1rem;
+  height: 1rem;
+  color: white;
+  border-radius: 10px;
+  background-color: white;
+}

app/styles/app.scss

@@ -2,6 +2,7 @@
 @import "joyride_override";
 @import "date_time_picker";
 @import "porterage_charges";
+@import "mentions";
 
 /* template specific */
 @import "templates/tour";
@@ -22,3 +23,4 @@
 @import "templates/delivery/book_van";
 @import "templates/delivery/confirm_van";
 @import "ember_offline";
+@import "mentions";