Regression: Admin embedded layout (#14229)

* Only show sidenav in embedded mode if rendering admin templates * Add layout parameter to pathFor helper * Keep sidenav for admin pages in embedded layout
RocketChat · Apr 27, 2019 · 0593d87 · 0593d87
1 parent 64a9552
commit 0593d87
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 69 deletions.
diff --git a/app/theme/client/imports/general/base_old.css b/app/theme/client/imports/general/base_old.css
@@ -1397,12 +1397,6 @@ rc-old select,
 /* MAIN CONTENT + MAIN PAGES */
 
 .rc-old.main-content {
-	&.main-modal {
-		left: 0;
-
-		margin-right: 0;
-	}
-
 	& .container-fluid {
 		padding-top: 0;
 	}

diff --git a/app/ui-admin/client/adminFlex.html b/app/ui-admin/client/adminFlex.html
@@ -2,11 +2,9 @@
 	<aside class="sidebar-light sidebar--medium" role="navigation">
 		<header class="sidebar-flex__header">
 			<h1 class="sidebar-flex__title">{{_ "Administration"}}</h1>
-			{{#unless embeddedVersion}}
-				<button class="sidebar-flex__close-button" data-action="close">
-					{{> icon block="sidebar-flex__close-icon" icon="cross"}}
-				</button>
-			{{/unless}}
+			<button class="sidebar-flex__close-button" data-action="close">
+				{{> icon block="sidebar-flex__close-icon" icon="cross"}}
+			</button>
 		</header>
 		<div class="rooms-list {{#if embeddedVersion}}rooms-list--embedded{{/if}}" aria-label="{{_ "Administration"}}">
 			<ul class="rooms-list__list">

diff --git a/app/ui-admin/client/adminFlex.js b/app/ui-admin/client/adminFlex.js
@@ -1,14 +1,15 @@
+import _ from 'underscore';
+import s from 'underscore.string';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Template } from 'meteor/templating';
 import { TAPi18n } from 'meteor/tap:i18n';
 import { settings } from '../../settings';
 import { CachedCollection } from '../../ui-cached-collection';
-import { SideNav, AdminBox, Layout } from '../../ui-utils';
+import { menu, SideNav, AdminBox, Layout } from '../../ui-utils/client';
 import { t } from '../../utils';
-import _ from 'underscore';
-import s from 'underscore.string';
 
 Template.adminFlex.onCreated(function() {
+	this.isEmbedded = Layout.isEmbedded();
 	this.settingsFilter = new ReactiveVar('');
 	if (settings.cachedCollectionPrivate == null) {
 		settings.cachedCollectionPrivate = new CachedCollection({
@@ -25,10 +26,6 @@ const label = function() {
 	return TAPi18n.__(this.i18nLabel || this._id);
 };
 
-// Template.adminFlex.onRendered(function() {
-// 	$(this.find('.rooms-list')).perfectScrollbar();
-// });
-
 Template.adminFlex.helpers({
 	groups() {
 		const filter = Template.instance().settingsFilter.get();
@@ -77,12 +74,17 @@ Template.adminFlex.helpers({
 		};
 	},
 	embeddedVersion() {
-		return Layout.isEmbedded();
+		return this.isEmbedded;
 	},
 });
 
 Template.adminFlex.events({
-	'click [data-action="close"]'() {
+	'click [data-action="close"]'(e, instance) {
+		if (instance.isEmbedded) {
+			menu.close();
+			return;
+		}
+
 		SideNav.closeFlex();
 	},
 	'keyup [name=settings-search]'(e, t) {

diff --git a/app/ui-master/client/main.html b/app/ui-master/client/main.html
@@ -37,7 +37,7 @@
 								{{#unless removeSidenav}}
 									{{> sideNav }}
 								{{/unless}}
-								<div class="{{#unless $eq old false}} rc-old {{/unless}} main-content content-background-color {{readReceiptsEnabled}} {{#if modal}}main-modal{{/if}}">
+								<div class="{{#unless $eq old false}}rc-old{{/unless}} main-content content-background-color {{readReceiptsEnabled}}">
 									{{> Template.dynamic template=center}}
 								</div>
 							</div>

diff --git a/app/ui-master/client/main.js b/app/ui-master/client/main.js
@@ -1,3 +1,5 @@
+import Clipboard from 'clipboard';
+import s from 'underscore.string';
 import { Meteor } from 'meteor/meteor';
 import { Match } from 'meteor/check';
 import { Tracker } from 'meteor/tracker';
@@ -13,8 +15,6 @@ import { CachedChatSubscription, Roles, ChatSubscription } from '../../models';
 import { CachedCollectionManager } from '../../ui-cached-collection';
 import { hasRole } from '../../authorization';
 import { tooltip } from '../../tooltip';
-import Clipboard from 'clipboard';
-import s from 'underscore.string';
 
 settings.collection.find({ _id:/theme-color-rc/i }, { fields:{ value: 1 } }).observe({ changed: () => { DynamicCss.run(true, settings); } });
 
@@ -133,8 +133,7 @@ Template.main.onCreated(function() {
 
 Template.main.helpers({
 	removeSidenav() {
-		const { modal } = this;
-		return (modal || typeof modal === 'function' ? modal() : modal); // || RocketChat.Layout.isEmbedded();
+		return Layout.isEmbedded() && !/^\/admin/.test(FlowRouter.current().route.path);
 	},
 	siteName() {
 		return settings.get('Site_Name');

diff --git a/app/ui-sidenav/client/sideNav.html b/app/ui-sidenav/client/sideNav.html
@@ -1,30 +1,30 @@
 <template name="sideNav">
-		<aside class="sidebar sidebar--{{sidebarViewMode}} {{#if sidebarHideAvatar}}sidebar--hide-avatar{{/if}}" role="navigation">
-			{{> sidebarHeader }}
-			{{#if loggedInUser}}
-				<div class="unread-rooms background-primary-action-color color-primary-action-contrast top-unread-rooms hidden">
-					{{_ "More_unreads"}} <i class="icon-up-big"></i>
+	<aside class="sidebar sidebar--{{sidebarViewMode}} {{#if sidebarHideAvatar}}sidebar--hide-avatar{{/if}}" role="navigation">
+		{{> sidebarHeader }}
+		{{#if loggedInUser}}
+			<div class="unread-rooms background-primary-action-color color-primary-action-contrast top-unread-rooms hidden">
+				{{_ "More_unreads"}} <i class="icon-up-big"></i>
+			</div>
+			<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
+				{{#each roomType}}
+					{{> Template.dynamic template=template data=data }}
+				{{/each}}
+			</div>
+			<div class="unread-rooms background-primary-action-color color-primary-action-contrast bottom-unread-rooms hidden">
+				{{_ "More_unreads"}} <i class="icon-down-big"></i>
+			</div>
+			<div class="flex-nav animated-hidden">
+				{{> Template.dynamic template=flexTemplate data=flexData }}
+			</div>
+		{{else}}
+			<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
+				<div class="wrapper">
+					{{> roomList anonymous=true label="Channels" }}
 				</div>
-				<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
-					{{#each roomType}}
-						{{> Template.dynamic template=template data=data }}
-					{{/each}}
-				</div>
-				<div class="unread-rooms background-primary-action-color color-primary-action-contrast bottom-unread-rooms hidden">
-					{{_ "More_unreads"}} <i class="icon-down-big"></i>
-				</div>
-				<div class="flex-nav animated-hidden">
-					{{> Template.dynamic template=flexTemplate data=flexData }}
-				</div>
-			{{else}}
-				<div class="rooms-list" aria-label="{{_ "Channels"}}" role="region">
-					<div class="wrapper">
-						{{> roomList anonymous=true label="Channels" }}
-					</div>
-				</div>
-			{{/if}}
+			</div>
+		{{/if}}
 
-			<footer class="sidebar__footer">{{{footer}}}</footer>
-		</aside>
-		<div class="sidebar-wrap"></div>
+		<footer class="sidebar__footer">{{{footer}}}</footer>
+	</aside>
+	<div class="sidebar-wrap"></div>
 </template>
diff --git a/app/ui-utils/client/lib/SideNav.js b/app/ui-utils/client/lib/SideNav.js
@@ -41,16 +41,10 @@ export const SideNav = new class {
 		}, 500);
 	}
 	closeFlex(callback = null) {
-		let subscription;
-		if (!roomTypes.getTypes().filter(function(i) {
-			return i.route;
-		}).map(function(i) {
-			return i.route.name;
-		}).includes(FlowRouter.current().route.name)) {
-			subscription = Subscriptions.findOne({
-				rid: Session.get('openedRoom'),
-			});
-			if (subscription != null) {
+		const routesNamesForRooms = roomTypes.getTypes().filter((i) => i.route).map((i) => i.route.name);
+		if (!routesNamesForRooms.includes(FlowRouter.current().route.name)) {
+			const subscription = Subscriptions.findOne({ rid: Session.get('openedRoom') });
+			if (subscription) {
 				roomTypes.openRouteLink(subscription.t, subscription, FlowRouter.current().queryParams);
 			} else {
 				FlowRouter.go('home');
@@ -59,7 +53,7 @@ export const SideNav = new class {
 		if (this.animating === true) {
 			return;
 		}
-		return this.toggleFlex(-1, callback);
+		this.toggleFlex(-1, callback);
 	}
 	flexStatus() {
 		return this.flexNav.opened;

diff --git a/app/ui-utils/client/lib/openRoom.js b/app/ui-utils/client/lib/openRoom.js
@@ -5,7 +5,7 @@ import { Template } from 'meteor/templating';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 import { Session } from 'meteor/session';
-import { Layout, RoomManager, fireGlobalEvent, readMessage, RoomHistoryManager } from '..';
+import { RoomManager, fireGlobalEvent, readMessage, RoomHistoryManager } from '..';
 import { ChatSubscription, Rooms } from '../../../models';
 import { settings } from '../../../settings';
 import { callbacks } from '../../../callbacks';
@@ -41,9 +41,6 @@ function replaceCenterDomBy(dom) {
 	return mainNode;
 }
 
-const { render } = BlazeLayout;
-BlazeLayout.render = (layout, regions = {}) => render(layout, Object.assign(regions, { modal: Layout.isEmbedded() }));
-
 export const openRoom = function(type, name) {
 	Session.set('openedRoom', null);
 

diff --git a/app/ui/client/components/header/header.html b/app/ui/client/components/header/header.html
@@ -1,7 +1,6 @@
 <template name="header">
-<header class="rc-header">
+	<header class="rc-header">
 		<div class="rc-header__wrap">
-
 			<div class="rc-header__block rc-header--burger">
 				{{> burger}}
 			</div>

diff --git a/client/routes/router.js b/client/routes/router.js
@@ -1,3 +1,4 @@
+import s from 'underscore.string';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Tracker } from 'meteor/tracker';
@@ -6,7 +7,6 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 import { Session } from 'meteor/session';
 import { KonchatNotification } from '../../app/ui';
-import s from 'underscore.string';
 
 Blaze.registerHelper('pathFor', function(path, kw) {
 	return FlowRouter.path(path, kw.hash);