Bug 1204345 - Last letter at bottom right can be cut off, r=dmose,a=lhenry
authorChris Rafuse <chris.rafuse@priologic.com>
Sun, 04 Oct 2015 16:43:21 -0700
changeset 296293 327356c7570cde8ee00b91741813f902cce683a8
parent 296292 d0aa348ede4b517880cb80f37a28386613298133
child 296294 46a2fa2a827fe7856475ee1396ccca9155a80a81
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdmose, lhenry
bugs1204345
milestone43.0a2
Bug 1204345 - Last letter at bottom right can be cut off, r=dmose,a=lhenry
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/content/shared/js/textChatView.js
browser/components/loop/content/shared/js/textChatView.jsx
browser/components/loop/test/shared/textChatView_test.js
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -975,19 +975,17 @@ body[platform="win"] .share-service-drop
   background-image: url("../img/icons-16x16.svg#add-hover");
 }
 
 .dropdown-menu-item:hover:active > .icon-add-share-service {
   background-image: url("../img/icons-16x16.svg#add-active");
 }
 
 .context-url-view-wrapper {
-  /* 18px for indent of .text-chat-arrow, 1px for border of .text-chat-entry > p,
-     0.5rem for padding of .text-chat-entry > p */
-  padding: calc(18px - 1px - 0.5rem);
+  padding: 12px;
   margin-bottom: 0.5em;
   background-color: #dbf7ff;
 }
 
 .showing-room-name > .text-chat-entries > .text-chat-scroller > .context-url-view-wrapper {
   padding-top: 0;
 }
 
@@ -1486,163 +1484,145 @@ body[platform="win"] .share-service-drop
 }
 
 /* Text chat in styles */
 
 .text-chat-view {
   background: white;
 }
 
-.text-chat-box {
-  flex: 0 0 auto;
-  max-height: 40px;
-  min-height: 40px;
-  width: 100%;
-}
-
 .text-chat-entries {
   overflow: auto;
 }
 
-.text-chat-entry {
+.text-chat-entry,
+.text-chat-header {
   display: flex;
-  flex-direction: row;
-  margin-right: .2em;
   margin-bottom: .5em;
-  text-align: start;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-content: stretch;
   align-items: flex-start;
 }
 
-html[dir="rtl"] .text-chat-entry {
-  margin-right: auto;
-  margin-left: .2em;
+.text-chat-entry {
+  /* aligns paragraph to side where reading starts from */
+  text-align: start;
+}
+
+/* Sent text chat entries should be on the right */
+.text-chat-entry.sent {
+  /* aligns paragraph to right side */
+  justify-content: flex-end;
+  margin-left: 0;
+  margin-right: 5px;
+}
+
+.text-chat-entry.received {
+  margin-left: 4px;
+  margin-right: 0;
+}
+
+html[dir="rtl"] .text-chat-entry.sent {
+  margin-left: 5px;
+  margin-right: 0;
+}
+
+
+html[dir="rtl"] .text-chat-entry.received {
+  margin-left: 0;
+  margin-right: 5px;
 }
 
 /* If you change this entry, check it doesn't affect the "special" text
    chat entries as well (.speical, .room-name, .context-url-view-wrapper */
 .text-chat-entry > p {
   position: relative;
   z-index: 10;
   /* Drop the default margins from the 'p' element. */
   margin: 0;
-  padding: .5rem;
+  padding: .8rem;
   /* leave some room for the chat bubble arrow */
-  max-width: 80%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #5cccee;
+  max-width: 70%;
+  border-radius: 15px;
+  border: 1px solid #5cccee;
   background: #fff;
   word-wrap: break-word;
   flex: 0 1 auto;
-  align-self: auto;
-}
-
-.text-chat-entry.sent > p,
-.text-chat-entry.received > p {
-  background: #fff;
+  order: 1;
 }
 
 .text-chat-entry.sent > p {
-  border-radius: 15px;
   border-bottom-right-radius: 0;
 }
 
 .text-chat-entry.received > p {
-  border-radius: 15px;
   border-top-left-radius: 0;
+  border-color: #d8d8d8;
 }
 
 html[dir="rtl"] .text-chat-entry.sent > p {
-  border-radius: 15px;
   border-bottom-left-radius: 0;
+  border-bottom-right-radius: 15px;
 }
 
 html[dir="rtl"] .text-chat-entry.received > p {
-  border-radius: 15px;
   border-top-right-radius: 0;
-}
-
-.text-chat-entry.received > p {
-  order: 1;
-}
-
-.text-chat-entry.sent > p {
-  order: 1;
-}
-
-.text-chat-entry.received {
-  text-align: start;
-}
-
-.text-chat-entry.received > p {
-  border-color: #d8d8d8;
+  border-top-left-radius: 15px;
 }
 
 /* Text chat entry timestamp */
 .text-chat-entry-timestamp {
   margin: 0 .5em;
   color: #aaa;
   font-style: italic;
   font-size: .8em;
   flex: 0 1 auto;
   align-self: center;
 }
 
-/* Sent text chat entries should be on the right */
-.text-chat-entry.sent {
-  justify-content: flex-end;
-}
-
 .received > .text-chat-entry-timestamp {
   order: 2;
 }
 
-/* Pseudo element used to cover part between chat bubble and chat arrow. */
+/* Pseudo element used to cover part between chat bubble and chat arrow.
+   dimensions may change for each position */
 .text-chat-entry > p:after {
   position: absolute;
   background: #fff;
   content: "";
+  /* default dimensions */
+  width: 6px;
+  height: 7px;
 }
 
 .text-chat-entry.sent > p:after {
-  right: -2px;
+  right: -1px;
   bottom: 0;
-  width: 15px;
-  height: 9px;
-  border-top-left-radius: 15px;
-  border-top-right-radius: 22px;
+  width: 7px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
 
 .text-chat-entry.received > p:after {
   top: 0;
-  left: -2px;
-  width: 15px;
-  height: 9px;
-  border-bottom-left-radius: 22px;
-  border-bottom-right-radius: 15px;
+  left: -1px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 html[dir="rtl"] .text-chat-entry.sent > p:after {
   /* Reset */
   right: auto;
   left: -1px;
   bottom: 0;
-  width: 15px;
-  height: 9px;
 }
 
 html[dir="rtl"] .text-chat-entry.received > p:after {
   /* Reset */
-  left: auto;
   top: 0;
   right: -1px;
-  width: 15px;
+  width: 9px;
   height: 6px;
 }
 
 /* Text chat entry arrow */
 .text-chat-arrow {
   width: 18px;
   background-repeat: no-repeat;
   flex: 0 1 auto;
@@ -1678,39 +1658,43 @@ html[dir="rtl"] .text-chat-entry.sent .t
 }
 
 html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
   /* Reset margin. */
   margin-right: 0;
   margin-left: -10px;
 }
 
-.text-chat-entry.special.room-name {
+.text-chat-header.special.room-name {
   color: black;
   font-weight: bold;
   text-align: start;
   background-color: #dbf7ff;
   margin-bottom: 0;
   margin-right: 0;
 }
 
-.text-chat-entry.special.room-name p {
+.text-chat-header.special.room-name p {
   background: #dbf7ff;
   max-width: 100%;
   /* 18px for indent of .text-chat-arrow, 1px for border of .text-chat-entry > p,
    0.5rem for padding of .text-chat-entry > p */
   padding: calc(18px - 1px - 0.5rem);
 }
 
-.text-chat-entry.special > p {
+.text-chat-header.special > p {
   border: none;
 }
 
 .text-chat-box {
   margin: auto;
+  flex: 0 0 auto;
+  max-height: 40px;
+  min-height: 40px;
+  width: 100%;
 }
 
 .text-chat-box > form > input {
   width: 100%;
   height: 40px;
   padding: 0 .4rem .4rem;
   font-size: 1.1em;
   border: 0;
--- a/browser/components/loop/content/shared/js/textChatView.js
+++ b/browser/components/loop/content/shared/js/textChatView.js
@@ -76,17 +76,17 @@ loop.shared.views.chat = (function(mozL1
     mixins: [React.addons.PureRenderMixin],
 
     propTypes: {
       message: React.PropTypes.string.isRequired
     },
 
     render: function() {
       return (
-        React.createElement("div", {className: "text-chat-entry special room-name"}, 
+        React.createElement("div", {className: "text-chat-header special room-name"}, 
           React.createElement("p", null, mozL10n.get("rooms_welcome_title", {conversationName: this.props.message}))
         )
       );
     }
   });
 
   /**
    * Manages the text entries in the chat entries view. This is split out from
--- a/browser/components/loop/content/shared/js/textChatView.jsx
+++ b/browser/components/loop/content/shared/js/textChatView.jsx
@@ -76,17 +76,17 @@ loop.shared.views.chat = (function(mozL1
     mixins: [React.addons.PureRenderMixin],
 
     propTypes: {
       message: React.PropTypes.string.isRequired
     },
 
     render: function() {
       return (
-        <div className="text-chat-entry special room-name">
+        <div className="text-chat-header special room-name">
           <p>{mozL10n.get("rooms_welcome_title", {conversationName: this.props.message})}</p>
         </div>
       );
     }
   });
 
   /**
    * Manages the text entries in the chat entries view. This is split out from
--- a/browser/components/loop/test/shared/textChatView_test.js
+++ b/browser/components/loop/test/shared/textChatView_test.js
@@ -575,17 +575,17 @@ describe("loop.shared.views.TextChatView
       store.updateRoomInfo(new sharedActions.UpdateRoomInfo({
         roomName: "A wonderful surprise!",
         roomUrl: "Fake"
       }));
 
       var node = view.getDOMNode();
       expect(node.querySelector(".text-chat-entries")).to.not.eql(null);
 
-      var entries = node.querySelectorAll(".text-chat-entry");
+      var entries = node.querySelectorAll(".text-chat-header");
       expect(entries.length).eql(1);
       expect(entries[0].classList.contains("special")).eql(true);
       expect(entries[0].classList.contains("room-name")).eql(true);
     });
 
     it("should render a special entry for the context url", function() {
       view = mountTestComponent();