Merge pull request #7525 from RocketChat/toolbar-buttons

[NEW] Add toolbar buttons for iframe API

packages/rocketchat-theme/client/imports/base.css

@@ -1586,6 +1586,7 @@ label.required::after {
 		font-size: 22px;
 		font-weight: 500;
 		line-height: 29px;
+		flex: 1;
 
 		& .icon-at,
 		& .icon-hash,
@@ -1597,6 +1598,11 @@ label.required::after {
 		& .icon-star-empty {
 			margin-right: -4px;
 		}
+
+		& .iframe-toolbar {
+			flex-grow: 0;
+			white-space: nowrap;
+		}
 	}
 
 	& .submit {

packages/rocketchat-ui/client/lib/iframeCommands.js

@@ -50,6 +50,18 @@ const commands = {
 			Meteor.call('logoutCleanUp', user);
 			return FlowRouter.go('home');
 		});
+	},
+
+	'set-toolbar-button'({ id, icon, label }) {
+		const toolbar = Session.get('toolbarButtons') || { buttons: {} };
+		toolbar.buttons[id] = { icon, label };
+		Session.set('toolbarButtons', toolbar);
+	},
+
+	'remove-toolbar-button'({ id }) {
+		const toolbar = Session.get('toolbarButtons') || { buttons: {} };
+		delete toolbar.buttons[id];
+		Session.set('toolbarButtons', toolbar);
 	}
 };
 

packages/rocketchat-ui/client/views/app/room.html

@@ -27,8 +27,19 @@
 							{{/if}}
 							<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
 						</h2>
+
+						{{#with toolbarButtons}}
+							<div class="iframe-toolbar">
+								{{#each buttons}}
+									<button class="{{id}}">
+										{{#if icon}}<i class="{{icon}}"></i>{{/if}}
+										{{label}}
+									</button>
+								{{/each}}
+							</div>
+						{{/with}}
 					</header>
-					
+
 				{{/unless}}
 				<div class="messages-container-wrapper">
 					<div class="messages-container-main">

packages/rocketchat-ui/client/views/app/room.js

@@ -234,6 +234,16 @@ Template.room.helpers({
 
 		return (RocketChat.models.Subscriptions.findOne({rid: this._id}) != null);
 
+	},
+	toolbarButtons() {
+		const toolbar = Session.get('toolbarButtons') || { buttons: {} };
+		const buttons = Object.keys(toolbar.buttons).map(key => {
+			return {
+				id: key,
+				...toolbar.buttons[key]
+			};
+		});
+		return { buttons };
 	}
 });
 
@@ -243,6 +253,10 @@ let lastTouchX = null;
 let lastTouchY = null;
 
 Template.room.events({
+	'click .iframe-toolbar button'() {
+		fireGlobalEvent('click-toolbar-button', { id: this.id });
+	},
+
 	'click, touchend'(e, t) {
 		return Meteor.setTimeout(() => t.sendToBottomIfNecessaryDebounced(), 100);
 	},