Merge pull request #7944 from RocketChat/fix-embedded

[FIX] Broken embedded view layout
RocketChat · Aug 30, 2017 · 6dbfad7 · 6dbfad7
1 parent 4f16ade
commit 6dbfad7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 31 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/message-box.css b/packages/rocketchat-theme/client/imports/components/message-box.css
@@ -6,6 +6,10 @@
 
 	font-size: var(--message-box-text-size);
 
+	&--embedded {
+		padding: 12px;
+	}
+
 	&__toolbar-markdown {
 		position: absolute;
 		left: 0;

diff --git a/packages/rocketchat-ui-flextab/client/flexTabBar.html b/packages/rocketchat-ui-flextab/client/flexTabBar.html
@@ -1,21 +1,23 @@
 <template name="flexTabBar">
-	<div class="flex-tab-container border-component-color {{opened}}">
-		<section class="flex-tab border-component-color">
-			<div class="content flex-tab__content">
-				<button class="close-flex-tab secondary-font-color">
-					<span class="secondary-background-color"><i class="icon-cancel"></i></span>
-				</button>
-				{{> Template.dynamic template=template data=flexData}}
-			</div>
-		</section>
-		<div class="flex-tab-bar content-background-color" role="toolbar">
-			{{#each buttons}}
-				<div class="tab-button {{active}} {{visible}} {{class}}" title="{{title}}">
-					<button aria-label="{{title}}">
-						{{> icon block="tab-button-icon" icon=icon }}
+	{{#unless embeddedVersion}}
+		<div class="flex-tab-container border-component-color {{opened}}">
+			<section class="flex-tab border-component-color">
+				<div class="content flex-tab__content">
+					<button class="close-flex-tab secondary-font-color">
+						<span class="secondary-background-color"><i class="icon-cancel"></i></span>
 					</button>
+					{{> Template.dynamic template=template data=flexData}}
 				</div>
-			{{/each}}
+			</section>
+			<div class="flex-tab-bar content-background-color" role="toolbar">
+				{{#each buttons}}
+					<div class="tab-button {{active}} {{visible}} {{class}}" title="{{title}}">
+						<button aria-label="{{title}}">
+							{{> icon block="tab-button-icon" icon=icon }}
+						</button>
+					</div>
+				{{/each}}
+			</div>
 		</div>
-	</div>
+	{{/unless}}
 </template>
diff --git a/packages/rocketchat-ui-flextab/client/flexTabBar.js b/packages/rocketchat-ui-flextab/client/flexTabBar.js
@@ -35,6 +35,10 @@ Template.flexTabBar.helpers({
 		return Object.assign(Template.currentData().data || {}, {
 			tabBar: Template.instance().tabBar
 		});
+	},
+
+	embeddedVersion() {
+		return RocketChat.Layout.isEmbedded();
 	}
 });
 

diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
@@ -1,5 +1,5 @@
 <template name="messageBox">
-	<div class="rc-message-box rc-new">
+	<div class="rc-message-box rc-new {{#if embeddedVersion}}rc-message-box--embedded{{/if}}">
 		{{#if subscribed}}
 			{{#with usersTyping}}
 				<div class="rc-message-box__typing">
@@ -67,21 +67,23 @@ <h3 class="rc-popover__title">{{_ group.name}}</h3>
 
 					{{/if}}
 				</label>
-				{{#if showFormattingTips}}
-					<div class="rc-message-box__toolbar-markdown">
-						{{#each mdButtons}}
-							<button class="rc-message-box__toolbar-markdown-item rc-tooltip js-md" aria-label={{_ label}} data-link="{{link}}">
-								{{#if icon}}
-									{{> icon block="rc-message-box__toolbar-markdown-icon" icon=icon }}
-								{{else}}
-									{{#if link}}
-										<a href="{{link}}" target="_blank" class="rc-message-box__toolbar-markdown-link">{{label}}</a>
+				{{#unless embeddedVersion}}
+					{{#if showFormattingTips}}
+						<div class="rc-message-box__toolbar-markdown">
+							{{#each mdButtons}}
+								<button class="rc-message-box__toolbar-markdown-item rc-tooltip js-md" aria-label={{_ label}} data-link="{{link}}">
+									{{#if icon}}
+										{{> icon block="rc-message-box__toolbar-markdown-icon" icon=icon }}
+									{{else}}
+										{{#if link}}
+											<a href="{{link}}" target="_blank" class="rc-message-box__toolbar-markdown-link">{{label}}</a>
+										{{/if}}
 									{{/if}}
-								{{/if}}
-							</button>
-						{{/each}}
-					</div>
-				{{/if}}
+								</button>
+							{{/each}}
+						</div>
+					{{/if}}
+				{{/unless}}
 			{{else}}
 				<div class="stream-info">
 					{{#if isBlockedOrBlocker}}

diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
@@ -277,6 +277,9 @@ Template.messageBox.helpers({
 	},
 	sendIcon() {
 		return Template.instance().sendIcon.get();
+	},
+	embeddedVersion() {
+		return RocketChat.Layout.isEmbedded();
 	}
 });