From 3459fa88cf122548fa0b50be0d438cfbac620d4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20J=C3=A4gle?= <github@beimir.net>
Date: Thu, 5 Oct 2017 23:21:05 +0200
Subject: [PATCH] Tabbed user interface for custom room types creation
 Addresses RocketChat/Rocket.Chat#8264

---
 .../rocketchat-lib/lib/roomTypesCommon.js     |  2 +
 .../imports/components/modal/full-modal.css   |  4 +-
 .../client/imports/components/tab.css         | 77 +++++++++++++++++++
 .../client/imports/general/variables.css      |  5 ++
 packages/rocketchat-theme/client/main.css     |  4 +
 .../client/components/tabContainer.html       | 19 +++++
 .../client/components/tabContainer.js         | 18 +++++
 .../client/views/app/createChannel.html       | 12 ---
 .../client/views/app/createChannel.js         | 20 -----
 .../client/views/app/createRooms.html         | 10 +++
 .../client/views/app/createRooms.js           | 48 ++++++++++++
 .../client/views/app/fullModal.js             |  4 +-
 packages/rocketchat-ui/package.js             |  5 +-
 13 files changed, 191 insertions(+), 37 deletions(-)
 create mode 100644 packages/rocketchat-theme/client/imports/components/tab.css
 create mode 100644 packages/rocketchat-ui/client/components/tabContainer.html
 create mode 100644 packages/rocketchat-ui/client/components/tabContainer.js
 create mode 100644 packages/rocketchat-ui/client/views/app/createRooms.html
 create mode 100644 packages/rocketchat-ui/client/views/app/createRooms.js

diff --git a/packages/rocketchat-lib/lib/roomTypesCommon.js b/packages/rocketchat-lib/lib/roomTypesCommon.js
index b64434676653..92e370543444 100644
--- a/packages/rocketchat-lib/lib/roomTypesCommon.js
+++ b/packages/rocketchat-lib/lib/roomTypesCommon.js
@@ -16,6 +16,8 @@ this.roomTypesCommon = class {
 	name: route name
 	action: route action function
 	identifier: room type identifier
+	creationTemplate: The blaze template which shall be used in the create-dialog
+	creationLabel: The hreadline of the creation dialog
 
 	Optional methods which can be redefined
 		getDisplayName(room): return room's name for the UI
diff --git a/packages/rocketchat-theme/client/imports/components/modal/full-modal.css b/packages/rocketchat-theme/client/imports/components/modal/full-modal.css
index 1eb2a86ac724..8489d1ca96dd 100644
--- a/packages/rocketchat-theme/client/imports/components/modal/full-modal.css
+++ b/packages/rocketchat-theme/client/imports/components/modal/full-modal.css
@@ -28,14 +28,14 @@
 	}
 
 	&__back-text {
+		z-index: 100;
 		margin-right: 2px;
-
 		line-height: 22px;
 	}
 
 	&__back-icon {
+		z-index: 100;
 		transform: rotate(45deg);
-
 		font-size: 1rem;
 	}
 }
diff --git a/packages/rocketchat-theme/client/imports/components/tab.css b/packages/rocketchat-theme/client/imports/components/tab.css
new file mode 100644
index 000000000000..5283da2893fa
--- /dev/null
+++ b/packages/rocketchat-theme/client/imports/components/tab.css
@@ -0,0 +1,77 @@
+.rc-tabs {
+	position: relative;
+
+	display: flex;
+
+	margin: 0 calc(var(--tabs-padding) / -2);
+	padding: calc(var(--tabs-padding) / 2);
+
+	list-style: none;
+
+	color: var(--color-gray);
+
+	font-size: 14px;
+
+	&::before {
+		position: absolute;
+		bottom: 0;
+
+		width: 100%;
+		height: 2px;
+
+		content: '';
+
+		background: var(--color-gray-light);
+	}
+
+	&__tab {
+		position: relative;
+
+		margin: calc(var(--tabs-padding) / 2);
+		padding: 0 5px;
+
+		cursor: pointer;
+		transition: all 0.3s;
+
+		&-link {
+			color: inherit !important;
+		}
+
+		&:hover {
+			opacity: 0.5;
+		}
+
+		&.active,
+		&:active {
+			color: #1d74f5;
+
+			&::before {
+				position: absolute;
+				bottom: calc(var(--tabs-padding) * -1);
+				left: 0;
+
+				width: 100%;
+				height: 2px;
+
+				content: '';
+
+				background: #1d74f5;
+			}
+		}
+	}
+
+	&__content {
+		padding-top: 10px;
+		& header h1 { /* in tab-containers, the first heading of the header is the tab strip itself */
+			display: none;
+		}
+
+		&.inactive {
+			display: none;
+		}
+
+		&.active {
+			display: block;
+		}
+    }
+}
diff --git a/packages/rocketchat-theme/client/imports/general/variables.css b/packages/rocketchat-theme/client/imports/general/variables.css
index 994fb29d8cbd..777aab2a5222 100644
--- a/packages/rocketchat-theme/client/imports/general/variables.css
+++ b/packages/rocketchat-theme/client/imports/general/variables.css
@@ -264,4 +264,9 @@
 	--message-box-editing-color: #fff5df;
 	--message-box-popover-title-text-color: var(--color-gray);
 	--message-box-popover-title-text-size: 0.75rem;
+
+	/*
+	* Tabs
+	*/
+	--tabs-padding: 1rem;
 }
diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css
index dc41e7515e1d..e0524c41c152 100644
--- a/packages/rocketchat-theme/client/main.css
+++ b/packages/rocketchat-theme/client/main.css
@@ -40,3 +40,7 @@
 
 /* RTL */
 @import 'imports/general/rtl.css';
+
+/* tabs */
+@import 'imports/components/tab.css';
+
diff --git a/packages/rocketchat-ui/client/components/tabContainer.html b/packages/rocketchat-ui/client/components/tabContainer.html
new file mode 100644
index 000000000000..aa3fa66c16ea
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/tabContainer.html
@@ -0,0 +1,19 @@
+<template name="tabContainer">
+	<div class="rc-tabs__container">
+		<nav class="rc-tabs">
+			{{#each tab in tabs}}
+				<li class="rc-tabs__tab {{activeClass tab.template}}">
+					<a class="rc-tabs__tab-link" href="#{{tab.template}}">
+						{{_ tab.label}}
+					</a>
+				</li>
+			{{/each}}
+		</nav>
+
+		{{#each tab in tabs}}
+			<div class="rc-tabs__content {{activeClass tab.template}}">
+				{{> Template.dynamic template=tab.template }}
+			</div>
+		{{/each}}
+	</div>
+</template>
diff --git a/packages/rocketchat-ui/client/components/tabContainer.js b/packages/rocketchat-ui/client/components/tabContainer.js
new file mode 100644
index 000000000000..7c542dce1f8a
--- /dev/null
+++ b/packages/rocketchat-ui/client/components/tabContainer.js
@@ -0,0 +1,18 @@
+Template.tabContainer.helpers({
+	activeClass(templateName) {
+		const instance = Template.instance();
+		return instance.activeTemplate.get() === templateName ? 'active' : 'inactive';
+	},
+});
+
+Template.tabContainer.events({
+	'click .rc-tabs__tab-link'(event, instance) {
+		event.preventDefault();
+		const tmp = event.target.href.split('#');
+		instance.activeTemplate.set(tmp[tmp.length - 1]);
+	}
+});
+
+Template.tabContainer.onCreated(function(){
+	this.activeTemplate = new ReactiveVar(this.data.tabs[0].template);
+});
diff --git a/packages/rocketchat-ui/client/views/app/createChannel.html b/packages/rocketchat-ui/client/views/app/createChannel.html
index 6bd261588ccb..db54ba26d77a 100644
--- a/packages/rocketchat-ui/client/views/app/createChannel.html
+++ b/packages/rocketchat-ui/client/views/app/createChannel.html
@@ -1,10 +1,4 @@
 <template name="createChannel">
-	<section class="create-channel">
-		{{#each roomType in roomTypesBeforeStandard}}
-			<div class="room-type-creation">
-				{{> Template.dynamic template=roomType.creationTemplate }}
-			</div>
-		{{/each}}
 		<div class="room-type-creation">
 			<header class="create-channel__header">
 				<h1 class="create-channel__title">{{_ "Create_A_New_Channel"}}</h1>
@@ -89,12 +83,6 @@ <h1 class="create-channel__title">{{_ "Create_A_New_Channel"}}</h1>
 					   value="{{_ "Create"}}">
 			</form>
 		</div>
-		{{#each roomType in roomTypesAfterStandard}}
-			<div class="room-type-creation">
-				{{> Template.dynamic template=roomType.creationTemplate }}
-			</div>
-		{{/each}}
-	</section>
 </template>
 
 <template name='tag'>
diff --git a/packages/rocketchat-ui/client/views/app/createChannel.js b/packages/rocketchat-ui/client/views/app/createChannel.js
index c5be0ec5693a..f8910a5f6fc4 100644
--- a/packages/rocketchat-ui/client/views/app/createChannel.js
+++ b/packages/rocketchat-ui/client/views/app/createChannel.js
@@ -96,26 +96,6 @@ Template.createChannel.helpers({
 	},
 	iconType() {
 		return Template.instance().type.get() === 'p' ? 'lock' : 'hashtag';
-	},
-	roomTypesBeforeStandard() {
-		const orderLow = RocketChat.roomTypes.roomTypesOrder.filter((roomTypeOrder) => roomTypeOrder.identifier === 'c')[0].order;
-		return RocketChat.roomTypes.roomTypesOrder.filter(
-			(roomTypeOrder) => roomTypeOrder.order < orderLow
-		).map(
-			(roomTypeOrder) => {
-				return RocketChat.roomTypes.roomTypes[roomTypeOrder.identifier];
-			}
-		).filter((roomType) => roomType.creationTemplate);
-	},
-	roomTypesAfterStandard() {
-		const orderHigh = RocketChat.roomTypes.roomTypesOrder.filter((roomTypeOrder) => roomTypeOrder.identifier === 'd')[0].order;
-		return RocketChat.roomTypes.roomTypesOrder.filter(
-			(roomTypeOrder) => roomTypeOrder.order > orderHigh
-		).map(
-			(roomTypeOrder) => {
-				return RocketChat.roomTypes.roomTypes[roomTypeOrder.identifier];
-			}
-		).filter((roomType) => roomType.creationTemplate);
 	}
 });
 
diff --git a/packages/rocketchat-ui/client/views/app/createRooms.html b/packages/rocketchat-ui/client/views/app/createRooms.html
new file mode 100644
index 000000000000..a50b722c885f
--- /dev/null
+++ b/packages/rocketchat-ui/client/views/app/createRooms.html
@@ -0,0 +1,10 @@
+<template name="createRooms">
+	<section class="create-channel">
+		{{#if tabsNeeded }}
+			{{> tabContainer tabs=tabs}}
+		{{else}}
+			{{> createChannel }}
+		{{/if}}
+	</section>
+
+</template>
diff --git a/packages/rocketchat-ui/client/views/app/createRooms.js b/packages/rocketchat-ui/client/views/app/createRooms.js
new file mode 100644
index 000000000000..bf29a2b31ddc
--- /dev/null
+++ b/packages/rocketchat-ui/client/views/app/createRooms.js
@@ -0,0 +1,48 @@
+const roomTypesBeforeStandard = function() {
+	const orderLow = RocketChat.roomTypes.roomTypesOrder.filter((roomTypeOrder) => roomTypeOrder.identifier === 'c')[0].order;
+	return RocketChat.roomTypes.roomTypesOrder.filter(
+		(roomTypeOrder) => roomTypeOrder.order < orderLow
+	).map(
+		(roomTypeOrder) => {
+			return RocketChat.roomTypes.roomTypes[roomTypeOrder.identifier];
+		}
+	).filter((roomType) => roomType.creationTemplate);
+};
+const roomTypesAfterStandard = function() {
+	const orderHigh = RocketChat.roomTypes.roomTypesOrder.filter((roomTypeOrder) => roomTypeOrder.identifier === 'd')[0].order;
+	return RocketChat.roomTypes.roomTypesOrder.filter(
+		(roomTypeOrder) => roomTypeOrder.order > orderHigh
+	).map(
+		(roomTypeOrder) => {
+			return RocketChat.roomTypes.roomTypes[roomTypeOrder.identifier];
+		}
+	).filter((roomType) => roomType.creationTemplate);
+};
+
+const allTemplatesOrdered = function() {
+	return roomTypesBeforeStandard()
+		.concat([{
+			creationLabel: 'Create_A_New_Channel',
+			creationTemplate: 'createChannel'
+		}])
+		.concat(roomTypesAfterStandard())
+		.map((roomtype) => {
+			return {
+				label: roomtype.creationLabel,
+				template: roomtype.creationTemplate
+			};
+		});
+};
+
+Template.createRooms.helpers({
+	tabsNeeded() {
+		const instance = Template.instance();
+		return !!(instance.data.roomTypesBeforeStandard.length || instance.data.roomTypesAfterStandard.length);
+	}
+});
+
+Template.createRooms.onCreated(function() {
+	this.data.roomTypesBeforeStandard = roomTypesBeforeStandard();
+	this.data.roomTypesAfterStandard = roomTypesAfterStandard();
+	this.data.tabs = allTemplatesOrdered();
+});
diff --git a/packages/rocketchat-ui/client/views/app/fullModal.js b/packages/rocketchat-ui/client/views/app/fullModal.js
index 50eb0528d18e..43c469af5129 100644
--- a/packages/rocketchat-ui/client/views/app/fullModal.js
+++ b/packages/rocketchat-ui/client/views/app/fullModal.js
@@ -10,9 +10,9 @@ FlowRouter.route('/create-channel', {
 
 	action() {
 		if (parent) {
-			Blaze.renderWithData(Template.fullModal, {template: 'createChannel'}, parent);
+			Blaze.renderWithData(Template.fullModal, {template: 'createRooms'}, parent);
 		} else {
-			BlazeLayout.render('main', {center: 'fullModal', template: 'createChannel'});
+			BlazeLayout.render('main', {center: 'fullModal', template: 'createRooms'});
 		}
 	},
 
diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js
index 2547ed441487..3bfec6cc3f8b 100644
--- a/packages/rocketchat-ui/package.js
+++ b/packages/rocketchat-ui/package.js
@@ -86,6 +86,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/views/app/audioNotification.html', 'client');
 	api.addFiles('client/views/app/burger.html', 'client');
 	api.addFiles('client/views/app/createChannel.html', 'client');
+	api.addFiles('client/views/app/createRooms.html', 'client');
 	api.addFiles('client/views/app/fullModal.html', 'client');
 	api.addFiles('client/views/app/home.html', 'client');
 	api.addFiles('client/views/app/notAuthorized.html', 'client');
@@ -107,6 +108,7 @@ Package.onUse(function(api) {
 	api.addFiles('client/views/404/roomNotFound.js', 'client');
 	api.addFiles('client/views/app/burger.js', 'client');
 	api.addFiles('client/views/app/createChannel.js', 'client');
+	api.addFiles('client/views/app/createRooms.js', 'client');
 	api.addFiles('client/views/app/fullModal.js', 'client');
 	api.addFiles('client/views/app/home.js', 'client');
 	api.addFiles('client/views/app/mobileMessageMenu.js', 'client');
@@ -127,7 +129,8 @@ Package.onUse(function(api) {
 	api.addFiles('client/components/selectDropdown.html', 'client');
 	api.addFiles('client/components/selectDropdown.js', 'client');
 
-
+	api.addFiles('client/components/tabContainer.html', 'client');
+	api.addFiles('client/components/tabContainer.js', 'client');
 
 	api.export('fileUpload');
 });