Improvement: Permissions table (#14646)

app/authorization/client/stylesheets/permissions.css

@@ -1,4 +1,37 @@
 .permissions-manager {
+	&.page-container {
+		padding-bottom: 0 !important;
+	}
+
+	.permission-edit {
+		display: flex;
+		flex-direction: column;
+
+		height: 100%;
+
+		padding: 10px;
+		align-items: center;
+	}
+
+	.permission-label,
+	.permission-icon {
+		display: flex;
+
+		align-items: flex-end;
+		flex-grow: 1;
+	}
+
+	.permission-icon {
+		width: 30px;
+
+		margin-bottom: 0;
+		flex-grow: 0;
+	}
+
+	.content {
+		padding: 0 !important;
+	}
+
 	.permission-grid {
 		overflow-x: scroll;
 
@@ -7,21 +40,29 @@
 		border-collapse: collapse;
 
 		.id-styler {
+			white-space: nowrap;
+
 			color: #7f7f7f;
 
 			font-size: smaller;
 		}
 
+		.edit-icon.role-name-edit-icon {
+			height: 30px;
+		}
+
 		.role-name {
+			position: sticky;
+
+			top: 0;
+
 			width: 70px;
-			height: 80px;
 
 			text-align: left;
 
 			vertical-align: middle;
 
-			border-right: 1px solid	black;
-			border-left: 1px solid black;
+			background: white;
 		}
 
 		.role-name-edit-icon {
@@ -31,16 +72,22 @@
 			text-align: center;
 
 			vertical-align: middle;
-
-			border-right: 1px solid	black;
-			border-left: 1px solid black;
 		}
 
 		.rotator {
-			width: 80px;
-			margin: 0 auto;
+			overflow: hidden;
 
-			transform: rotate(-90deg);
+			width: 30px;
+			height: 130px;
+
+			padding: 10px 0;
+
+			transform: rotate(-180deg);
+
+			white-space: nowrap;
+
+			text-overflow: ellipsis;
+			writing-mode: vertical-rl;
 		}
 
 		.admin-table-row {
@@ -58,16 +105,9 @@
 			vertical-align: middle;
 		}
 
-		.admin-table-row .permission-name {
-			border-top: 1px solid black;
-			border-bottom: 1px solid black;
-		}
-
 		.permission-checkbox {
 			text-align: center;
 			vertical-align: middle;
-
-			border: 1px solid black;
 		}
 
 		.icon-edit {

app/authorization/client/views/permissions.html

@@ -13,23 +13,17 @@
 					<thead class="content-background-color">
 
 						<tr>
-							<th class="permission-name border-component-color"></th>
+							<th class=" role-name permission-name border-component-color"></th>
 							{{#each role}}
 								<th class="edit-icon role-name border-component-color" title="{{description}}">
-									<a href="{{pathFor "admin-permissions-edit" name=_id}}">
-										<p class = "rotator">
-										{{_id}}
+									<a class="permission-edit" href="{{pathFor "admin-permissions-edit" name=_id}}">
+										<p class="permission-label">
+											<div class = "rotator">
+												{{_id}}
+											</div>
 										</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>
+
+										<p class="permission-icon">
 											<i class="icon-edit"></i>
 										</p>
 									</a>

app/ui-message/client/messageBox/messageBox.js

@@ -265,6 +265,15 @@ const handleFormattingShortcut = (event, instance) => {
 	return true;
 };
 
+let sendOnEnter;
+let sendOnEnterActive;
+
+Tracker.autorun(() => {
+	sendOnEnter = getUserPreference(Meteor.userId(), 'sendOnEnter');
+	sendOnEnterActive = sendOnEnter == null || sendOnEnter === 'normal'
+		|| (sendOnEnter === 'desktop' && Meteor.Device.isDesktop());
+});
+
 const handleSubmit = (event, instance) => {
 	const { which: keyCode } = event;
 
@@ -274,9 +283,6 @@ const handleSubmit = (event, instance) => {
 		return false;
 	}
 
-	const sendOnEnter = getUserPreference(Meteor.userId(), 'sendOnEnter');
-	const sendOnEnterActive = sendOnEnter == null || sendOnEnter === 'normal'
-		|| (sendOnEnter === 'desktop' && Meteor.Device.isDesktop());
 	const withModifier = event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
 	const isSending = (sendOnEnterActive && !withModifier) || (!sendOnEnterActive && withModifier);
 

app/ui/client/lib/chatMessages.js

@@ -249,8 +249,8 @@ export class ChatMessages {
 
 		messageBoxState.save({ rid, tmid }, this.input);
 
-		let msg = value;
-		if (value.trim()) {
+		let msg = value.trim();
+		if (msg) {
 			const mention = this.$input.data('mention-user') || false;
 			const replies = this.$input.data('reply') || [];
 			if (!mention || !threadsEnabled) {
@@ -260,8 +260,6 @@ export class ChatMessages {
 			if (mention && threadsEnabled && replies.length) {
 				tmid = replies[0]._id;
 			}
-		} else {
-			msg = '';
 		}
 
 		if (msg) {
@@ -280,7 +278,6 @@ export class ChatMessages {
 				await this.processMessageSend(message);
 				this.$input.removeData('reply').trigger('dataChange');
 			} catch (error) {
-				console.error(error);
 				handleError(error);
 			}
 			return done();
@@ -299,7 +296,6 @@ export class ChatMessages {
 				this.resetToDraft(this.editing.id);
 				this.confirmDeleteMsg(message, done);
 			} catch (error) {
-				console.error(error);
 				handleError(error);
 			}
 		}