diff --git a/browser/components/loop/content/js/roomViews.js b/browser/components/loop/content/js/roomViews.js
index fb9dae7d146..dc677c95ba7 100644
--- a/browser/components/loop/content/js/roomViews.js
+++ b/browser/components/loop/content/js/roomViews.js
@@ -815,7 +815,7 @@ loop.roomViews = (function(mozL10n) {
renderRemoteVideo: this.shouldRenderRemoteVideo(),
screenShareMediaElement: this.state.screenShareMediaElement,
screenSharePosterUrl: null,
- showContextRoomName: false,
+ showInitialContext: false,
useDesktopPaths: true},
React.createElement(sharedViews.ConversationToolbar, {
audio: { enabled: !this.state.audioMuted, visible: true},
diff --git a/browser/components/loop/content/js/roomViews.jsx b/browser/components/loop/content/js/roomViews.jsx
index ac773850a50..a39933071cf 100644
--- a/browser/components/loop/content/js/roomViews.jsx
+++ b/browser/components/loop/content/js/roomViews.jsx
@@ -815,7 +815,7 @@ loop.roomViews = (function(mozL10n) {
renderRemoteVideo={this.shouldRenderRemoteVideo()}
screenShareMediaElement={this.state.screenShareMediaElement}
screenSharePosterUrl={null}
- showContextRoomName={false}
+ showInitialContext={false}
useDesktopPaths={true}>
.context-preview {
.clicks-allowed.context-wrapper:hover {
border: 2px solid #5cccee;
- /* Due to the increased border width, reduce the padding accordingly so that
- the text doesn't move. */
- padding: calc(.8em - 1px);
}
/* Only underline the url, not the associated text */
diff --git a/browser/components/loop/content/shared/css/conversation.css b/browser/components/loop/content/shared/css/conversation.css
index 49ef0e0301e..1c0332c13e6 100644
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -529,14 +529,8 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
background-image: url("../img/icons-16x16.svg#add-active");
}
-.context-url-view-wrapper {
- padding: 14px 15px;
- background-color: #dbf7ff;
-}
-
-.showing-room-name > .text-chat-entries > .text-chat-scroller > .context-url-view-wrapper {
- padding-top: 0;
- margin-bottom: 0;
+.context-url-view-wrapper > .context-content {
+ margin: 0 1rem 1.5rem 1rem;
}
.room-context {
@@ -947,6 +941,7 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
.text-chat-entries {
overflow: auto;
+ padding-top: .6rem;
}
.text-chat-entry,
@@ -965,20 +960,16 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
text-align: start;
}
-.text-chat-scroller div:nth-child(2) {
- margin-top: .5em;
-}
-
/* 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;
+ margin-right: 4px;
}
.text-chat-entry.received {
- margin-left: 4px;
+ margin-left: 2px;
margin-right: 0;
}
@@ -1126,20 +1117,16 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
}
.text-chat-header.special.room-name {
- color: black;
+ color: #666;
font-weight: bold;
- text-align: start;
- background-color: #dbf7ff;
margin-bottom: 0;
margin-right: 0;
}
.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);
+ width: 100%;
+ padding: 0.8rem 1rem 1.4rem;
+ margin: 0;
}
.text-chat-header.special > p {
diff --git a/browser/components/loop/content/shared/js/textChatStore.js b/browser/components/loop/content/shared/js/textChatStore.js
index 6f1db383497..cf5f3069357 100644
--- a/browser/components/loop/content/shared/js/textChatStore.js
+++ b/browser/components/loop/content/shared/js/textChatStore.js
@@ -118,7 +118,8 @@ loop.store.TextChatStore = (function() {
// Notify MozLoopService if appropriate that a message has been appended
// and it should therefore check if we need a different sized window or not.
- if (message.contentType !== CHAT_CONTENT_TYPES.ROOM_NAME) {
+ if (message.contentType !== CHAT_CONTENT_TYPES.ROOM_NAME &&
+ message.contentType !== CHAT_CONTENT_TYPES.CONTEXT) {
if (this._storeState.textChatEnabled) {
window.dispatchEvent(new CustomEvent("LoopChatMessageAppended"));
} else {
diff --git a/browser/components/loop/content/shared/js/textChatView.js b/browser/components/loop/content/shared/js/textChatView.js
index 8cd4fc2f02e..ae6a58ba10b 100644
--- a/browser/components/loop/content/shared/js/textChatView.js
+++ b/browser/components/loop/content/shared/js/textChatView.js
@@ -106,6 +106,7 @@ loop.shared.views.chat = (function(mozL10n) {
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
messageList: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+ showInitialContext: React.PropTypes.bool.isRequired,
useDesktopPaths: React.PropTypes.bool.isRequired
},
@@ -174,6 +175,7 @@ loop.shared.views.chat = (function(mozL10n) {
this.props.messageList.map(function(entry, i) {
if (entry.type === CHAT_MESSAGE_TYPES.SPECIAL) {
+ if (!this.props.showInitialContext) { return null; }
switch (entry.contentType) {
case CHAT_CONTENT_TYPES.ROOM_NAME:
return (
@@ -188,7 +190,6 @@ loop.shared.views.chat = (function(mozL10n) {
allowClick: true,
description: entry.message,
dispatcher: this.props.dispatcher,
- showContextTitle: true,
thumbnail: entry.extraData.thumbnail,
url: entry.extraData.location,
useDesktopPaths: this.props.useDesktopPaths})
@@ -357,8 +358,8 @@ loop.shared.views.chat = (function(mozL10n) {
* as a field for entering new messages.
*
* @property {loop.Dispatcher} dispatcher
- * @property {Boolean} showRoomName Set to true to show the room name
- * special list item.
+ * @property {Boolean} showInitialContext Set to true to show the room name
+ * and initial context tile for linker clicker's special list items
*/
var TextChatView = React.createClass({displayName: "TextChatView",
mixins: [
@@ -368,7 +369,7 @@ loop.shared.views.chat = (function(mozL10n) {
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
- showRoomName: React.PropTypes.bool.isRequired,
+ showInitialContext: React.PropTypes.bool.isRequired,
useDesktopPaths: React.PropTypes.bool.isRequired
},
@@ -377,18 +378,15 @@ loop.shared.views.chat = (function(mozL10n) {
},
render: function() {
- var messageList;
- var showingRoomName = false;
+ var messageList = this.state.messageList;
- if (this.props.showRoomName) {
- messageList = this.state.messageList;
- showingRoomName = this.state.messageList.some(function(item) {
- return item.contentType === CHAT_CONTENT_TYPES.ROOM_NAME;
- });
- } else {
- messageList = this.state.messageList.filter(function(item) {
+ // Filter out items not displayed when showing initial context.
+ // We do this here so that we can set the classes correctly on the view.
+ if (!this.props.showInitialContext) {
+ messageList = messageList.filter(function(item) {
return item.type !== CHAT_MESSAGE_TYPES.SPECIAL ||
- item.contentType !== CHAT_CONTENT_TYPES.ROOM_NAME;
+ (item.contentType !== CHAT_CONTENT_TYPES.ROOM_NAME &&
+ item.contentType !== CHAT_CONTENT_TYPES.CONTEXT);
});
}
@@ -398,10 +396,9 @@ loop.shared.views.chat = (function(mozL10n) {
});
var textChatViewClasses = React.addons.classSet({
- "showing-room-name": showingRoomName,
"text-chat-view": true,
- "text-chat-disabled": !this.state.textChatEnabled,
- "text-chat-entries-empty": !messageList.length
+ "text-chat-entries-empty": !messageList.length,
+ "text-chat-disabled": !this.state.textChatEnabled
});
return (
@@ -409,6 +406,7 @@ loop.shared.views.chat = (function(mozL10n) {
React.createElement(TextChatEntriesView, {
dispatcher: this.props.dispatcher,
messageList: messageList,
+ showInitialContext: this.props.showInitialContext,
useDesktopPaths: this.props.useDesktopPaths}),
React.createElement(TextChatInputView, {
dispatcher: this.props.dispatcher,
diff --git a/browser/components/loop/content/shared/js/textChatView.jsx b/browser/components/loop/content/shared/js/textChatView.jsx
index 48d4f11600f..2d0a9988122 100644
--- a/browser/components/loop/content/shared/js/textChatView.jsx
+++ b/browser/components/loop/content/shared/js/textChatView.jsx
@@ -106,6 +106,7 @@ loop.shared.views.chat = (function(mozL10n) {
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
messageList: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+ showInitialContext: React.PropTypes.bool.isRequired,
useDesktopPaths: React.PropTypes.bool.isRequired
},
@@ -174,6 +175,7 @@ loop.shared.views.chat = (function(mozL10n) {
{
this.props.messageList.map(function(entry, i) {
if (entry.type === CHAT_MESSAGE_TYPES.SPECIAL) {
+ if (!this.props.showInitialContext) { return null; }
switch (entry.contentType) {
case CHAT_CONTENT_TYPES.ROOM_NAME:
return (
@@ -188,7 +190,6 @@ loop.shared.views.chat = (function(mozL10n) {
allowClick={true}
description={entry.message}
dispatcher={this.props.dispatcher}
- showContextTitle={true}
thumbnail={entry.extraData.thumbnail}
url={entry.extraData.location}
useDesktopPaths={this.props.useDesktopPaths} />
@@ -357,8 +358,8 @@ loop.shared.views.chat = (function(mozL10n) {
* as a field for entering new messages.
*
* @property {loop.Dispatcher} dispatcher
- * @property {Boolean} showRoomName Set to true to show the room name
- * special list item.
+ * @property {Boolean} showInitialContext Set to true to show the room name
+ * and initial context tile for linker clicker's special list items
*/
var TextChatView = React.createClass({
mixins: [
@@ -368,7 +369,7 @@ loop.shared.views.chat = (function(mozL10n) {
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
- showRoomName: React.PropTypes.bool.isRequired,
+ showInitialContext: React.PropTypes.bool.isRequired,
useDesktopPaths: React.PropTypes.bool.isRequired
},
@@ -377,18 +378,15 @@ loop.shared.views.chat = (function(mozL10n) {
},
render: function() {
- var messageList;
- var showingRoomName = false;
+ var messageList = this.state.messageList;
- if (this.props.showRoomName) {
- messageList = this.state.messageList;
- showingRoomName = this.state.messageList.some(function(item) {
- return item.contentType === CHAT_CONTENT_TYPES.ROOM_NAME;
- });
- } else {
- messageList = this.state.messageList.filter(function(item) {
+ // Filter out items not displayed when showing initial context.
+ // We do this here so that we can set the classes correctly on the view.
+ if (!this.props.showInitialContext) {
+ messageList = messageList.filter(function(item) {
return item.type !== CHAT_MESSAGE_TYPES.SPECIAL ||
- item.contentType !== CHAT_CONTENT_TYPES.ROOM_NAME;
+ (item.contentType !== CHAT_CONTENT_TYPES.ROOM_NAME &&
+ item.contentType !== CHAT_CONTENT_TYPES.CONTEXT);
});
}
@@ -398,10 +396,9 @@ loop.shared.views.chat = (function(mozL10n) {
});
var textChatViewClasses = React.addons.classSet({
- "showing-room-name": showingRoomName,
"text-chat-view": true,
- "text-chat-disabled": !this.state.textChatEnabled,
- "text-chat-entries-empty": !messageList.length
+ "text-chat-entries-empty": !messageList.length,
+ "text-chat-disabled": !this.state.textChatEnabled
});
return (
@@ -409,6 +406,7 @@ loop.shared.views.chat = (function(mozL10n) {
{mozL10n.get("context_inroom_label2")}
;
- },
-
render: function() {
var hostname;
@@ -880,7 +867,6 @@ loop.shared.views = (function(_, mozL10n) {
return (
- {this.renderContextTitle()}
{this.state.localMediaAboslutelyPositioned ?
null : this.renderLocalVideo()}
diff --git a/browser/components/loop/standalone/content/js/standaloneRoomViews.js b/browser/components/loop/standalone/content/js/standaloneRoomViews.js
index 8557a522a10..37389b99c7c 100644
--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.js
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.js
@@ -619,7 +619,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
renderRemoteVideo: this.shouldRenderRemoteVideo(),
screenShareMediaElement: this.state.screenShareMediaElement,
screenSharePosterUrl: this.props.screenSharePosterUrl,
- showContextRoomName: true,
+ showInitialContext: true,
useDesktopPaths: false},
React.createElement(StandaloneOverlayWrapper, {dispatcher: this.props.dispatcher}),
React.createElement(StandaloneRoomInfoArea, {activeRoomStore: this.props.activeRoomStore,
diff --git a/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx b/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
index 44459784afd..04fbf47fdb4 100644
--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
@@ -619,7 +619,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
renderRemoteVideo={this.shouldRenderRemoteVideo()}
screenShareMediaElement={this.state.screenShareMediaElement}
screenSharePosterUrl={this.props.screenSharePosterUrl}
- showContextRoomName={true}
+ showInitialContext={true}
useDesktopPaths={false}>
p")).eql(null);
});
- it("should display a title if required", function() {
- view = mountTestComponent({
- showContextTitle: true,
- url: "http://wonderful.invalid"
- });
-
- expect(view.getDOMNode().querySelector(".context-content > p")).not.eql(null);
- });
-
it("should set the href on the link if clicks are allowed", function() {
view = mountTestComponent({
allowClick: true,
@@ -1024,7 +1015,7 @@ describe("loop.shared.views", function() {
localVideoMuted: false,
matchMedia: window.matchMedia,
renderRemoteVideo: false,
- showContextRoomName: false,
+ showInitialContext: false,
useDesktopPaths: false
};
diff --git a/browser/components/loop/ui/ui-showcase.js b/browser/components/loop/ui/ui-showcase.js
index 84d1a323c70..95a139092cd 100644
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/browser/components/loop/ui/ui-showcase.js
@@ -1288,7 +1288,7 @@
width: 298},
React.createElement("div", {className: "fx-embedded"},
React.createElement(TextChatView, {dispatcher: dispatcher,
- showRoomName: false,
+ showInitialContext: false,
useDesktopPaths: false})
)
),
@@ -1302,7 +1302,7 @@
React.createElement("div", {className: "media-wrapper"},
React.createElement(TextChatView, {
dispatcher: dispatcher,
- showRoomName: true,
+ showInitialContext: true,
useDesktopPaths: false})
)
)
diff --git a/browser/components/loop/ui/ui-showcase.jsx b/browser/components/loop/ui/ui-showcase.jsx
index d557bc8417f..ddf52e12d34 100644
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/browser/components/loop/ui/ui-showcase.jsx
@@ -1288,7 +1288,7 @@
width={298}>
@@ -1302,7 +1302,7 @@
diff --git a/browser/locales/en-US/chrome/browser/loop/loop.properties b/browser/locales/en-US/chrome/browser/loop/loop.properties
index c3e78b15edf..e0f03a2ca0f 100644
--- a/browser/locales/en-US/chrome/browser/loop/loop.properties
+++ b/browser/locales/en-US/chrome/browser/loop/loop.properties
@@ -219,12 +219,6 @@ no_conversations_start_message2=Start a new one!
# conversation window when the user edits context. It is a header to the edit
# section.
context_inroom_header=Let's Talk About…
-# LOCALIZATION NOTE (context_inroom_label2): this string is followed by the
-# title and domain of the website you are having a conversation about, displayed on a
-# separate line. If this structure doesn't work for your locale, you might want
-# to consider this as a stand-alone title. See example screenshot:
-# https://bug1115342.bugzilla.mozilla.org/attachment.cgi?id=8563677
-context_inroom_label2=Let's Talk About:
context_edit_name_placeholder=Conversation Name
context_edit_comments_placeholder=Comments
context_cancel_label=Cancel