[IMPROVE] UI of Permissions page (#13732)

* Changes Channel description to textarea * Solves linting issue * Solves invisible permissions issue * Increases size of font-awesome and reorders * Few minor fixes * Coverts CSS to SCSS * Updates linting * Updates linting * Updates linting * Revert "Solves linting issue" This reverts commit 6c8cc95. * Revert "Changes Channel description to textarea" This reverts commit df20b14. * Adds borders, reorganizes template, rotates roles to 90deg * Updates linting * Adds ID of permission below as smaller gray text * Vertically aligns the checkbox
RocketChat · Apr 6, 2019 · 8121c08 · 8121c08
1 parent d99d158
commit 8121c08
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 51 deletions.
diff --git a/app/authorization/client/stylesheets/permissions.css b/app/authorization/client/stylesheets/permissions.css
@@ -1,70 +1,74 @@
 .permissions-manager {
-	& h2 {
-		margin-top: 1em !important;
-		margin-bottom: 1em !important;
+	.permission-grid {
+		overflow-x: scroll;
 
-		border-bottom-width: 1px;
+		table-layout: fixed;
 
-		font-size: 16px;
-		font-weight: bold !important;
-	}
+		border-collapse: collapse;
 
-	& .permission-grid {
-		& table {
-			display: block;
-			overflow-x: auto;
+		.id-styler {
+			color: #7f7f7f;
 
-			white-space: nowrap;
+			font-size: smaller;
 		}
 
-		& th {
-			position: relative;
+		.role-name {
+			width: 70px;
+			height: 80px;
 
-			padding: 20px;
+			text-align: left;
 
-			text-align: center;
-			white-space: nowrap;
+			vertical-align: middle;
+
+			border-right: 1px solid	black;
+			border-left: 1px solid black;
 		}
 
-		& td {
-			width: 10%;
+		.role-name-edit-icon {
+			width: 70px;
+			height: 70px;
 
 			text-align: center;
-		}
 
-		& .icon-edit {
-			position: absolute;
-			top: 0;
-			left: 50%;
+			vertical-align: middle;
 
-			padding-left: 2px;
+			border-right: 1px solid	black;
+			border-left: 1px solid black;
+		}
 
-			transform: translateX(-50%);
+		.rotator {
+			transform: rotate(-90deg);
+		}
 
-			font-size: 80%;
+		.admin-table-row {
+			height: 50px;
 		}
 
-		& .permission-name {
-			cursor: default;
-			white-space: nowrap;
+		td {
+			overflow: hidden;
 		}
-	}
 
-	& .empty-role {
-		padding: 0.5em !important;
-	}
+		.permission-name {
+			width: 25%;
+			padding-left: 14px;
+
+			vertical-align: middle;
+		}
 
-	& .form-role {
-		& label {
-			display: inline-block;
+		.admin-table-row .permission-name {
+			border-top: 1px solid black;
+			border-bottom: 1px solid black;
+		}
 
-			width: 150px;
+		.permission-checkbox {
+			text-align: center;
+			vertical-align: middle;
 
-			text-align: right;
+			border: 1px solid black;
 		}
 
-		& .form-buttons {
-			padding-left: 150px;
+		.icon-edit {
+			font-size: 1.5em;
 		}
 	}
 }
diff --git a/app/authorization/client/views/permissions.html b/app/authorization/client/views/permissions.html
@@ -8,33 +8,49 @@
 			{{/header}}
 
 			<div class="content">
-				<table border="1" class="permission-grid secondary-background-color">
+				<table class="permission-grid secondary-background-color">
+
 					<thead class="content-background-color">
+
 						<tr>
-							<th class="border-component-color">&nbsp;</th>
+							<th class="permission-name border-component-color"></th>
 							{{#each role}}
-							<th class="border-component-color" title="{{description}}">
-								<a href="{{pathFor "admin-permissions-edit" name=_id}}">
-									{{_id}}
-									<i class="icon-edit"></i>
-								</a>
-							</th>
+								<th class="edit-icon role-name border-component-color" title="{{description}}">
+									<a href="{{pathFor "admin-permissions-edit" name=_id}}">
+										<p class = "rotator">
+										{{_id}}
+										</p>
+									</a>
+								</th>
+							{{/each}}
+						</tr>
+						<tr>
+							<th class="permission-name border-component-color"></th>
+							{{#each role}}
+								<th class="edit-icon role-name-edit-icon border-component-color" title="{{description}}">
+									<a href="{{pathFor "admin-permissions-edit" name=_id}}">
+										<p>
+											<i class="icon-edit"></i>
+										</p>
+									</a>
+								</th>
 							{{/each}}
 						</tr>
 					</thead>
 					<tbody>
 						{{#each permission}}
 						<tr class="admin-table-row">
-							<td class="permission-name border-component-color" title="{{_ permissionDescription}}">{{_ permissionName}}<br>[{{_id}}]</td>
+							<td class="permission-name border-component-color" title="{{_ permissionDescription}}">{{_ permissionName}}<br><span class = "id-styler">[ID: {{_id}}]</span></td>
 							{{#each role}}
-							<td class="border-component-color">
+							<td class="permission-checkbox border-component-color">
 								<input type="checkbox" name="perm[{{_id}}][{{../_id}}]" class="role-permission" value="1" checked="{{granted ../roles}}" data-role="{{_id}}" data-permission="{{../_id}}">
 							</td>
 							{{/each}}
 						</tr>
 						{{/each}}
 					</tbody>
 				</table>
+
 			</div>
 		{{else}}
 			<div class="content">