Merge Upstream demo

.github/workflows/build_and_test.yml

@@ -245,7 +245,7 @@ jobs:
 
   build-image-pr:
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'DEACTIVATED_pull_request'
 
     steps:
     - uses: actions/checkout@v1

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);
 		},

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);
 		},

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);
 		},

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(() => {

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">

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();
 	},

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;

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 {

app/theme/client/imports/components/main-content.css

@@ -2,7 +2,7 @@
 
 	position: relative;
 
-	z-index: 0;
+	z-index: 2;
 
 	display: flex;
 	flex-direction: column;
@@ -11,6 +11,9 @@
 	width: 1vw;
 
 	height: 100%;
+
+	transition: transform 0.3s;
+	transform: translate3d(100%, 0, 0);
 }
 
 .messages-container .room-icon {

app/theme/client/imports/components/sidebar/rooms-list.css

@@ -46,14 +46,28 @@
 		position: absolute;
 		z-index: 1;
 
-		left: 10px;
+		left: 0;
 
 		overflow-y: scroll;
 
 		background-color: var(--sidebar-background);
 	}
 }
 
+@media (width <= 500px) {
+	.rooms-list {
+		&__type {
+			padding: 0 var(--sidebar-small-default-padding) 1rem var(--sidebar-small-default-padding);
+
+			font-size: var(--rooms-list-title-text-size-mobile);
+		}
+
+		&__empty-room {
+			font-size: var(--rooms-list-empty-text-size-mobile);
+		}
+	}
+}
+
 @media (width <= 400px) {
 	padding: 0 calc(var(--sidebar-small-default-padding) - 4px);
 

app/theme/client/imports/components/sidebar/sidebar-header.css

@@ -3,7 +3,6 @@
 
 	display: flex;
 
-	margin: 0 -10px;
 	padding: var(--sidebar-default-padding);
 	align-items: center;
 
@@ -65,10 +64,6 @@
 	display: flex;
 	flex: 1 1 100%;
 
-	margin: 0 -10px;
-
-	padding: 0 10px;
-
 	justify-content: space-between;
 
 	&-button {
@@ -149,3 +144,69 @@
 		}
 	}
 }
+
+@media (width <= 500px) {
+	.sidebar__header {
+		padding: var(--sidebar-small-default-padding);
+
+		&-thumb {
+			flex: 0 0 var(--sidebar-account-thumb-size-mobile);
+
+			width: var(--sidebar-account-thumb-size-mobile);
+			height: var(--sidebar-account-thumb-size-mobile);
+		}
+	}
+
+	.sidebar__toolbar {
+		& .rc-input > .rc-input__label > .rc-input__wrapper > #searchBar {
+			border-color: #81868d;
+			border-radius: 15px;
+		}
+
+		& .rc-input {
+			margin: 0 0.25rem;
+
+			&__wrapper {
+				padding: 0;
+
+				color: var(--rc-color-primary-light);
+			}
+
+			&__element {
+				color: var(--color-white);
+				border-color: var(--rc-color-primary-dark);
+				background-color: var(--rc-color-primary-darkest);
+
+				&::placeholder {
+					color: var(--rc-color-primary-light);
+				}
+
+				&:focus + .rc-input__icon--right {
+					display: flex;
+				}
+			}
+
+			&__icon {
+				left: 0.5rem;
+				fill: var(--rc-color-primary-light);
+
+				&--right {
+					right: 0.5rem;
+					left: auto;
+
+					display: none;
+				}
+
+				& + .rc-input__element {
+					padding: 0.5rem 1.5rem 0.5rem 2.25rem;
+				}
+
+				&-svg--plus {
+					transform: rotate(45deg);
+
+					font-size: 1rem;
+				}
+			}
+		}
+	}
+}