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