Improve Display of setting permissions

redlink-gmbh · Nov 19, 2017 · 8523456 · 8523456
1 parent 28b769b
commit 8523456
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
diff --git a/packages/rocketchat-authorization/client/stylesheets/permissions.css b/packages/rocketchat-authorization/client/stylesheets/permissions.css
@@ -9,6 +9,10 @@
 		font-weight: bold !important;
 	}
 
+	& .section:not(.section-collapsed) {
+		inline-size: fit-content;
+  	}
+
 	& .permission-grid {
 		& th {
 			position: relative;

diff --git a/packages/rocketchat-authorization/client/views/permissions.html b/packages/rocketchat-authorization/client/views/permissions.html
@@ -16,7 +16,8 @@
 		<tbody>
 		{{#each permission in permissions}}
 			<tr class="admin-table-row">
-				<td class="permission-name border-component-color" title="{{permissionDescription permission}}">{{permissionName permission}}<br>[{{permission._id}}]
+				<td class="permission-name border-component-color"
+					title="{{permissionDescription permission}}">{{permissionName permission}}<br>[{{permission._id}}]
 				</td>
 				{{#each role in allRoles}}
 					<td class="border-component-color">
@@ -31,18 +32,41 @@
 	</table>
 </template>
 <template name="permissions">
-	<div class="permissions-manager">
-		{{#if hasPermission}}
-			<a href="{{pathFor "admin-permissions-new"}}" class="button primary new-role">{{_ "New_role"}}</a>
-			{{> permissionsTable permissions=permissions allRoles=roles}}
-			{{#if settingPermissionExpanded}}
-				<div class="js-toggle-setting-permissions">{{_ "setting-permissions-collapse"}}</div>
-				{{> permissionsTable permissions=settingPermissions allRoles=roles}}
+	<section class="page-settings">
+		<div class="permissions-manager">
+			{{#if hasPermission}}
+				<a href="{{pathFor "admin-permissions-new"}}" class="button primary new-role">{{_ "New_role"}}</a>
+				<div class="rocket-form">
+					<div class="section">
+						{{> permissionsTable permissions=permissions allRoles=roles}}
+					</div>
+				</div>
+				<div class="rocket-form">
+					<div class="section {{#unless settingPermissionExpanded}}section-collapsed{{/unless}}">
+						<div class="section-title">
+							<div class="section-title-text">
+								{{_ "setting-permissions"}}</div>
+							<div class="section-title-right">
+								<button class="button primary js-toggle-setting-permissions"><span>
+									{{#if settingPermissionExpanded }}
+										{{_ "Collapse"}}
+									{{else}}
+										{{_ "Expand"}}
+									{{/if}}
+								</span>
+								</button>
+							</div>
+						</div>
+						<div class="section-content border-component-color">
+							{{#if settingPermissionExpanded }}
+								{{> permissionsTable permissions=settingPermissions allRoles=roles}}
+							{{/if}}
+						</div>
+					</div>
+				</div>
 			{{else}}
-				<div class="js-toggle-setting-permissions">{{_ "setting-permissions-expand"}}</div>
+				{{_ "Not_authorized"}}
 			{{/if}}
-		{{else}}
-			{{_ "Not_authorized"}}
-		{{/if}}
-	</div>
+		</div>
+	</section>
 </template>
diff --git a/packages/rocketchat-authorization/client/views/permissions.js b/packages/rocketchat-authorization/client/views/permissions.js
@@ -1,4 +1,6 @@
 /* globals ChatPermissions, SettingPermissions */
+import {permissionLevel} from '../../lib/rocketchat';
+
 Template.permissions.helpers({
 	roles() {
 		return Template.instance().roles.get();
@@ -54,7 +56,7 @@ Template.permissionsTable.helpers({
 	},
 
 	permissionName(permission) {
-		return t(permission._id);
+		return permission.level === permissionLevel.SETTING ? t(permission.settingId) : t(permission._id);
 	},
 
 	permissionDescription(permission) {

diff --git a/packages/rocketchat-authorization/server/startup.js b/packages/rocketchat-authorization/server/startup.js
@@ -113,7 +113,8 @@ Meteor.startup(function() {
 		const permissionId = getSettingPermissionId(setting._id);
 		const permission = {
 			_id: permissionId,
-			level: permissionLevel.SETTING
+			level: permissionLevel.SETTING,
+			settingId: setting._id
 		};
 		// copy previously assigned roles if available
 		if (previousSettingPermissions[permissionId] && previousSettingPermissions[permissionId].roles) {

diff --git a/packages/rocketchat-ui-admin/client/admin.html b/packages/rocketchat-ui-admin/client/admin.html
@@ -23,7 +23,7 @@ <h2>
 							<p class="settings-description">{{description}}</p>
 						</div>
 					{{/if}}
-					<div class="rocket-form">
+					<div class="page-settings rocket-form">
 						{{#each sections}}
 							<div class="section {{#if section}}section-collapsed{{/if}}">
 								{{#if section}}