Merge pull request RocketChat#261 from shubhsherl/rc_pwa_ui_1

[Upstream PWA] ChatRoom UI improvements for mobile devices
Shailesh351 · May 13, 2020 · 8c4be34 · 8c4be34
2 parents 73a749f + c38cc24
commit 8c4be34
Show file tree

Hide file tree

Showing 20 changed files with 296 additions and 132 deletions.
diff --git a/app/livechat/server/livechat.js b/app/livechat/server/livechat.js
@@ -26,11 +26,11 @@ WebApp.connectHandlers.use('/livechat', Meteor.bindEnvironment((req, res, next)
 
 		const referer = url.parse(req.headers.referer);
 		if (!_.contains(domainWhiteList, referer.host)) {
-			res.setHeader('X-FRAME-OPTIONS', 'DENY');
+			res.setHeader('Content-Security-Policy', 'frame-ancestors \'none\'');
 			return next();
 		}
 
-		res.setHeader('X-FRAME-OPTIONS', `ALLOW-FROM ${ referer.protocol }//${ referer.host }`);
+		res.setHeader('Content-Security-Policy', `frame-ancestors ${ referer.protocol }//${ referer.host }`);
 	}
 
 	res.write(indexHtmlWithServerURL);

diff --git a/app/mentions-flextab/client/actionButton.js b/app/mentions-flextab/client/actionButton.js
@@ -13,7 +13,7 @@ Meteor.startup(function() {
 		action() {
 			const { msg: message } = messageArgs(this);
 			if (window.matchMedia('(max-width: 500px)').matches) {
-				Template.instance().tabBar.close();
+				Template.currentData().instance.tabBar.close();
 			}
 			RoomHistoryManager.getSurroundingMessages(message, 50);
 		},

diff --git a/app/message-pin/client/actionButton.js b/app/message-pin/client/actionButton.js
@@ -68,7 +68,7 @@ Meteor.startup(function() {
 		action() {
 			const { msg: message } = messageArgs(this);
 			if (window.matchMedia('(max-width: 500px)').matches) {
-				Template.instance().tabBar.close();
+				Template.currentData().instance.tabBar.close();
 			}
 			return RoomHistoryManager.getSurroundingMessages(message, 50);
 		},

diff --git a/app/message-star/client/actionButton.js b/app/message-star/client/actionButton.js
@@ -67,7 +67,7 @@ Meteor.startup(function() {
 		action() {
 			const { msg: message } = messageArgs(this);
 			if (window.matchMedia('(max-width: 500px)').matches) {
-				Template.instance().tabBar.close();
+				Template.currentData().instance.tabBar.close();
 			}
 			RoomHistoryManager.getSurroundingMessages(message, 50);
 		},

diff --git a/app/search/client/provider/result.js b/app/search/client/provider/result.js
@@ -18,6 +18,13 @@ Meteor.startup(function() {
 		context: ['search'],
 		action() {
 			const { msg: message } = messageArgs(this);
+			if (Session.get('openSearchPage')) {
+				Session.set('openSearchPage', false);
+				window.setTimeout(() => {
+					RoomHistoryManager.getSurroundingMessages(message, 50);
+				}, 400);
+				return;
+			}
 			if (Session.get('openedRoom') === message.rid) {
 				return RoomHistoryManager.getSurroundingMessages(message, 50);
 			}
@@ -26,7 +33,7 @@ Meteor.startup(function() {
 			// RocketChat.MessageAction.hideDropDown();
 
 			if (window.matchMedia('(max-width: 500px)').matches) {
-				Template.instance().tabBar.close();
+				Template.currentData().instance.tabBar.close();
 			}
 
 			window.setTimeout(() => {

diff --git a/app/search/client/search/search.html b/app/search/client/search/search.html
@@ -6,12 +6,21 @@
 			</div>
 		{{/if}}
 	{{else}}
+	{{#if isMobile}}
+		<div class="back-button">
+			<button class ="js-close-search" aria-label="{{_ "Close"}}" style="font-size: 1.5em;">
+				{{> icon icon="back"}}
+			</button>
+		</div>
+	{{/if}}
 	<div class="rocket-search-tab list-view {{provider.key}}">
-		{{#if provider.description}}
-			<div class="title">
-				<p>{{{_ provider.description}}}</p>
-			</div>
-		{{/if}}
+		{{#unless isMobile}}
+			{{#if provider.description}}
+				<div class="title">
+					<p>{{{_ provider.description}}}</p>
+				</div>
+			{{/if}}
+		{{/unless}}
 		<div class="control rocket-search-input">
 			<form class="search-form" role="form">
 				<div class="rc-input">

diff --git a/app/search/client/search/search.js b/app/search/client/search/search.js
@@ -7,6 +7,8 @@ import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
 import toastr from 'toastr';
 import _ from 'underscore';
 
+import { isMobile } from '../../../utils/client';
+
 Template.RocketSearch.onCreated(function() {
 	this.provider = new ReactiveVar();
 	this.isActive = new ReactiveVar(false);
@@ -78,6 +80,9 @@ Template.RocketSearch.onCreated(function() {
 });
 
 Template.RocketSearch.events = {
+	'click .js-close-search'() {
+		Session.set('openSearchPage', !Session.get('openSearchPage'));
+	},
 	'keydown #message-search'(evt, t) {
 		if (evt.keyCode === 13) {
 			if (t.suggestionActive.get() !== undefined) {
@@ -144,6 +149,9 @@ Template.RocketSearch.events = {
 };
 
 Template.RocketSearch.helpers({
+	isMobile() {
+		return isMobile();
+	},
 	error() {
 		return Template.instance().error.get();
 	},

diff --git a/app/search/client/style/style.css b/app/search/client/style/style.css
@@ -16,6 +16,13 @@
 	flex: 1;
 }
 
+.back-button {
+	position: relative;
+	top: 36px;
+
+	padding-left: 24px;
+}
+
 .rocket-default-search-results {
 	overflow: auto;
 	overflow-x: hidden;

diff --git a/app/theme/client/imports/components/header.css b/app/theme/client/imports/components/header.css
@@ -71,7 +71,7 @@
 	&__block {
 		display: flex;
 
-		margin: 0 -0.5rem;
+		margin: 0 0.5rem;
 
 		padding: 0 0.5rem;
 
@@ -415,7 +415,24 @@
 @media (width <= 500px) {
 	.rc-header {
 		&__block {
-			margin: 0 0.25rem;
+			margin: 0 0.2em;
+
+			padding: 0 0.1em;
+		}
+
+		&__section {
+			display: flex;
+
+			margin: 0 0.5rem;
+
+			padding: 0 0.5rem;
+
+			align-items: center;
+		}
+
+		&__first-icon {
+			width: 2.25em;
+			padding: 0;
 		}
 
 		&__block-action {
@@ -429,10 +446,24 @@
 					border-left: 0;
 				}
 			}
+
+			.rc-room-actions {
+				&__action {
+					.rc-room-actions__button {
+						.tab-button-icon {
+							height: 1.2em;
+						}
+					}
+				}
+			}
 		}
 
-		&__favorite {
-			order: 1;
+		&__search-button {
+			&__action {
+				&__icon {
+					height: 1.2em;
+				}
+			}
 		}
 
 		&__data {
@@ -442,7 +473,7 @@
 		}
 
 		&__status {
-			margin: 0 0.5rem;
+			margin: 0.2rem 0.5rem;
 		}
 
 		&__image {
@@ -457,6 +488,31 @@
 			padding: 0;
 		}
 	}
+
+	.rc-channel {
+		&--room {
+			background: var(--rc-color-primary);
+		}
+
+		&__wrap {
+			color: var(--color-white);
+			background: var(--rc-color-primary);
+		}
+
+		&__name {
+			color: var(--color-white);
+
+			font-size: 1.3rem;
+
+			& > .rc-header__icon {
+				display: none;
+			}
+		}
+
+		.burger i {
+			background-color: var(--color-white);
+		}
+	}
 }
 
 .embedded-view .room-container .rc-header--burger {

diff --git a/app/ui-flextab/client/flexTabBar.js b/app/ui-flextab/client/flexTabBar.js
@@ -9,6 +9,7 @@ import { hasAllPermission } from '../../authorization';
 import { popover, TabBar, Layout } from '../../ui-utils';
 import { t } from '../../utils';
 import { settings } from '../../settings';
+import { isMobile } from '../../utils/client';
 
 const commonHelpers = {
 	title() {
@@ -53,6 +54,9 @@ const filterButtons = (button, anonymous, rid) => {
 	if (button.groups.indexOf(Template.instance().tabBar.currentGroup()) === -1) {
 		return false;
 	}
+	if (button.id === 'rocket-search' && isMobile()) {
+		return false;
+	}
 	if (button.id === 'addUsers' && !canShowAddUsersButton(rid)) {
 		return false;
 	}