Merge pull request #8154 from RocketChat/sidebar-rtl-alignment

[FIX] Sidebar and RTL alignments

packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json

@@ -15,6 +15,11 @@
       "resolved": "https://registry.npmjs.org/arguejs/-/arguejs-0.2.3.tgz",
       "from": "arguejs@>=0.2.3 <0.3.0"
     },
+    "array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "from": "array-union@>=1.0.1 <2.0.0"
+    },
     "array-uniq": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
@@ -286,6 +291,11 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
       "from": "glob@>=7.0.5 <8.0.0"
     },
+    "globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "from": "globby@>=6.1.0 <7.0.0"
+    },
     "google-auth-library": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-0.10.0.tgz",
@@ -297,8 +307,8 @@
       "from": "google-auto-auth@>=0.7.1 <0.8.0"
     },
     "google-gax": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-0.13.4.tgz",
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-0.13.5.tgz",
       "from": "google-gax@>=0.13.0 <0.14.0",
       "dependencies": {
         "google-auto-auth": {
@@ -307,9 +317,19 @@
           "from": "google-auto-auth@>=0.5.2 <0.6.0"
         },
         "google-proto-files": {
-          "version": "0.9.1",
-          "resolved": "https://registry.npmjs.org/google-proto-files/-/google-proto-files-0.9.1.tgz",
-          "from": "google-proto-files@>=0.9.1 <0.10.0"
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/google-proto-files/-/google-proto-files-0.13.1.tgz",
+          "from": "google-proto-files@>=0.13.1 <0.14.0"
+        },
+        "object-assign": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+          "from": "object-assign@>=3.0.0 <4.0.0"
+        },
+        "protobufjs": {
+          "version": "6.8.0",
+          "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.8.0.tgz",
+          "from": "protobufjs@>=6.8.0 <7.0.0"
         }
       }
     },
@@ -1125,9 +1145,9 @@
       "from": "oauth-sign@>=0.8.1 <0.9.0"
     },
     "object-assign": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-      "from": "object-assign@>=3.0.0 <4.0.0"
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "from": "object-assign@>=4.0.1 <5.0.0"
     },
     "once": {
       "version": "1.4.0",
@@ -1159,6 +1179,16 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "from": "pify@>=2.3.0 <3.0.0"
     },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "from": "pinkie@>=2.0.0 <3.0.0"
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "from": "pinkie-promise@>=2.0.0 <3.0.0"
+    },
     "process-nextick-args": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",

packages/rocketchat-livechat/app/client/lib/tapi18n.js

@@ -20,4 +20,7 @@ this.tr = function(key, options, ...replaces) {
 	}
 };
 
-this.isRtl = (language) => language != null && ['ar', 'dv', 'fa', 'he', 'ku', 'ps', 'sd', 'ug', 'ur', 'yi'].includes(language.split('-').shift().toLowerCase());
+this.isRtl = (lang) => {
+	const language = lang ? lang : localStorage.getItem('userLanguage');
+	return ['ar', 'dv', 'fa', 'he', 'ku', 'ps', 'sd', 'ug', 'ur', 'yi'].includes(language.split('-').shift().toLowerCase());
+};

packages/rocketchat-livechat/client/stylesheets/livechat.less

@@ -625,8 +625,6 @@
 }
 
 .livechat-status {
-	float: right;
-	margin-right: 16px;
 	font-size: 20px;
 	line-height: 18px;
 	color: #9d9fa3;

packages/rocketchat-livechat/client/views/sideNav/livechat.html

@@ -1,10 +1,10 @@
 <template name="livechat">
 	<div class="livechat-section">
 		<h3 class="rooms-list__type {{isActive}}">
+			<span class="rooms-list__type-text--livechat">{{_ "Livechat"}}</span>
 			{{#with available}}
 				<i class="livechat-status {{status}} {{icon}}" title="{{hint}}"></i>
 			{{/with}}
-			{{_ "Livechat"}}
 		</h3>
 
 		{{#if guestPool}}

packages/rocketchat-theme/client/imports/components/messages.css

@@ -91,3 +91,8 @@
 .first-unread .message-actions {
 	top: 18px;
 }
+
+.rtl .message-actions {
+	right: auto;
+	left: 2px;
+}

packages/rocketchat-theme/client/imports/components/modal/create-channel.css

@@ -27,6 +27,7 @@
 
 	&__switches {
 		display: flex;
+		flex-wrap: wrap;
 	}
 
 	& .rc-switch {
@@ -47,3 +48,15 @@
 		opacity: 1;
 	}
 }
+
+@media (width <= 400px) {
+	.create-channel {
+		& .rc-switch {
+			width: 100%;
+
+			&:not(:last-child) {
+				margin-bottom: 2rem;
+			}
+		}
+	}
+}

packages/rocketchat-theme/client/imports/components/modal/full-modal.css

@@ -41,5 +41,17 @@
 @media (width < 1024px) {
 	.full-modal {
 		padding: 50px;
+
+		&__wrapper {
+			margin: 0;
+		}
+	}
+}
+
+@media (width <= 400px) {
+	.full-modal {
+		&__back-button {
+			top: -1.5rem;
+		}
 	}
 }

packages/rocketchat-theme/client/imports/components/popover.css

@@ -174,3 +174,10 @@
 		opacity: 1;
 	}
 }
+
+.rtl .rc-popover {
+	&__item-text {
+		margin-right: 0.25rem;
+		margin-left: auto;
+	}
+}

packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css

@@ -23,13 +23,13 @@
 		font-size: var(--rooms-list-title-text-size);
 		align-items: center;
 
-		&-text {
-			margin: 0 8px;
+		&-text--livechat {
+			flex: 1;
 		}
 	}
 
 	&__empty-room {
-		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+		padding: 0 var(--sidebar-default-padding);
 
 		color: var(--rooms-list-empty-text-color);
 
@@ -62,10 +62,6 @@
 	.rooms-list {
 		&__type,
 		&__empty-room {
-			margin-left: 0;
-		}
-
-		&__type {
 			padding: 0 calc(var(--sidebar-small-default-padding) - 4px) 0.5rem calc(var(--sidebar-small-default-padding) - 4px);
 		}
 

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css

@@ -1,9 +1,9 @@
 .sidebar__account {
 	display: flex;
 
-	margin: calc(var(--sidebar-default-padding) / 2) 0;
+	margin: 0 0 var(--sidebar-header-small-padding);
 
-	padding: calc(var(--sidebar-default-padding) / 2) var(--sidebar-default-padding);
+	padding: var(--sidebar-header-small-padding) var(--sidebar-default-padding) var(--sidebar-header-small-padding);
 
 	align-items: center;
 
@@ -21,6 +21,10 @@
 		& .sidebar__account-menu {
 			fill: var(--sidebar-account-username-color-darker);
 		}
+
+		&.active:hover {
+			background-color: var(--sidebar-background-light-hover);
+		}
 	}
 
 	&-thumb {
@@ -29,7 +33,7 @@
 
 		width: var(--sidebar-account-thumb-size);
 		height: var(--sidebar-account-thumb-size);
-		margin: 0 0.5rem;
+		margin: 0 0.5rem 0 0;
 	}
 
 	&-data {
@@ -144,6 +148,7 @@
 @media (width <= 400px) {
 	.sidebar__account {
 		margin: 0 0 5px;
+		padding: var(--sidebar-header-small-padding) calc(var(--sidebar-small-default-padding) - 8px) var(--sidebar-header-small-padding);
 
 		&-thumb {
 

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-flex.css

@@ -2,6 +2,8 @@
 	&__back-button {
 		margin-left: 0.25rem;
 
+		padding: 1rem var(--sidebar-default-padding) 1.5rem;
+
 		color: var(--sidebar-flex-back-button-color);
 
 		font-size: 1rem;
@@ -36,3 +38,11 @@
 		}
 	}
 }
+
+@media (width <= 400px) {
+	.sidebar-flex {
+		&__back-button {
+			padding: 1rem calc(var(--sidebar-small-default-padding) - 8px) 1.5rem;
+		}
+	}
+}

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css

@@ -120,6 +120,7 @@
 		text-overflow: ellipsis;
 
 		font-size: var(--sidebar-item-text-size);
+		line-height: var(--sidebar-item-height);
 	}
 }
 

packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css

@@ -104,6 +104,6 @@
 
 @media (width <= 400px) {
 	.toolbar {
-		padding: 0 var(--sidebar-small-default-padding) var(--sidebar-small-default-padding);
+		padding: 0 calc(var(--sidebar-small-default-padding) - 8px) var(--sidebar-small-default-padding);
 	}
 }

packages/rocketchat-theme/client/imports/forms/switch.css

@@ -79,3 +79,18 @@
 		font-size: var(--input-font-size);
 	}
 }
+
+.rtl .rc-switch {
+	&__button {
+		margin-right: 0;
+		margin-left: 0.5rem;
+	}
+
+	&__button-inside {
+		transform: translate3d(-13px, 1px, 0);
+	}
+
+	&__input:checked + .rc-switch__button .rc-switch__button-inside {
+		transform: translate3d(-1px, 1px, 0);
+	}
+}

packages/rocketchat-theme/client/imports/general/rtl.css

@@ -237,7 +237,7 @@
 	}
 
 	& .messages-box {
-		margin: 60px 0 0 20px;
+		margin: 60px 0 0;
 
 		& .new-message {
 			right: 50%;

packages/rocketchat-theme/client/imports/general/variables.css

@@ -134,7 +134,8 @@
 	--sidebar-background-light-hover: var(--color-gray-light);
 	--sidebar-default-padding: 24px;
 	--sidebar-small-default-padding: 16px;
-	--sidebar-header-padding: var(--sidebar-default-padding);
+	--sidebar-header-padding: 16px;
+	--sidebar-header-small-padding: 12px;
 	--sidebar-footer-height: 70px;
 	--sidebar-footer-padding: var(--sidebar-header-padding);
 	--sidebar-small-header-padding: var(--sidebar-small-default-padding);

packages/rocketchat-ui-message/client/messageBox.js

@@ -1,4 +1,4 @@
-/* globals fileUpload KonchatNotification chatMessages popover */
+/* globals fileUpload KonchatNotification chatMessages popover isRtl */
 import toastr from 'toastr';
 import moment from 'moment';
 
@@ -425,6 +425,7 @@ Template.messageBox.events({
 	},
 	'click .rc-message-box__action-menu'(e) {
 		const groups = RocketChat.messageBox.actions.get();
+		const textArea = document.querySelector('.rc-message-box__textarea');
 
 		const config = {
 			popoverClass: 'message-box',
@@ -451,6 +452,9 @@ Template.messageBox.events({
 				x: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().right + 10,
 				y: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().top
 			},
+			customCSSProperties: {
+				left: isRtl() ? `${ textArea.getBoundingClientRect().left - 10 }px` : undefined
+			},
 			data: {
 				rid: this._id
 			},

packages/rocketchat-ui-sidenav/client/accountBox.js

@@ -1,4 +1,4 @@
-/* globals popover */
+/* globals popover isRtl */
 
 Template.accountBox.helpers({
 	myUserInfo() {
@@ -93,7 +93,9 @@ Template.accountBox.events({
 									icon: item.icon,
 									name: t(item.name),
 									type: 'open',
-									id: item.name
+									id: item.name,
+									href: item.href,
+									sideNav: item.sideNav
 								};
 							}).concat([
 								adminOption,
@@ -116,11 +118,12 @@ Template.accountBox.events({
 				}
 			],
 			position: {
-				top: accountBox.offsetHeight + parseInt(getComputedStyle(accountBox)['padding-bottom'].replace('px', '')),
-				left: parseInt(getComputedStyle(accountBox)['padding-left'].replace('px', ''))
+				top: accountBox.offsetHeight
 			},
 			customCSSProperties: {
-				width: `${ accountBox.offsetWidth - parseInt(getComputedStyle(accountBox)['padding-left'].replace('px', '')) * 2 }px`
+				width: `${ accountBox.offsetWidth - parseInt(getComputedStyle(accountBox)['padding-left'].replace('px', '')) * 2 }px`,
+				left: isRtl() ? 'auto' : getComputedStyle(accountBox)['padding-left'],
+				right: isRtl() ? getComputedStyle(accountBox)['padding-right'] : 'auto'
 			}
 		};
 

packages/rocketchat-ui-sidenav/client/roomList.html

@@ -5,7 +5,7 @@
 		{{#with rooms}}
 			{{#if shouldAppear .. .}}
 					<h3 class="rooms-list__type">
-						<div class="rooms-list__type-text">{{_ ../label}}</div>
+						<span class="rooms-list__type-text">{{_ ../label}}</span>
 						{{#with count}}
 							{{#if .}}
 								<span class="badge">{{.}}</span>

packages/rocketchat-ui/client/lib/menu.js

@@ -124,7 +124,6 @@ this.menu = new class extends EventEmitter {
 		this.wrapper.css('overflow', 'hidden');
 		this.sidebarWrap.css('background-color', '#000');
 		this.sidebarWrap.css('opacity', map((Math.abs(diff) / width), 0, 1, -.1, .8).toFixed(2));
-		console.log(sideNavW, diff);
 		this.isRtl ? this.sidebar.css('transform', `translate3d(${ (sideNavW + diff).toFixed(3) }px, 0 , 0)`) : this.sidebar.css('transform', `translate3d(${ (diff - sideNavW).toFixed(3) }px, 0 , 0)`);
 	}
 	touchend() {

packages/rocketchat-ui/client/lib/tapi18n.js

@@ -20,4 +20,7 @@ this.tr = function(key, options, ...replaces) {
 	}
 };
 
-this.isRtl = (language) => language != null && ['ar', 'dv', 'fa', 'he', 'ku', 'ps', 'sd', 'ug', 'ur', 'yi'].includes(language.split('-').shift().toLowerCase());
+this.isRtl = (lang) => {
+	const language = lang ? lang : localStorage.getItem('userLanguage');
+	return ['ar', 'dv', 'fa', 'he', 'ku', 'ps', 'sd', 'ug', 'ur', 'yi'].includes(language.split('-').shift().toLowerCase());
+};

packages/rocketchat-ui/client/views/app/createChannel.html

@@ -8,7 +8,7 @@
 			<div class="create-channel__switches">
 				<div class="rc-switch">
 					<label class="rc-switch__label" tabindex="-1">
-						<input type="checkbox" class="rc-switch__input" name="type" value="d" checked>
+						<input type="checkbox" class="rc-switch__input" name="type" value="p" checked>
 						<span class="rc-switch__button">
 							<span class="rc-switch__button-inside"></span>
 						</span>

packages/rocketchat-ui/client/views/app/createChannel.js

@@ -106,7 +106,7 @@ Template.createChannel.events({
 		t.selectedUsers.set(t.selectedUsers.get().filter(user => user.username !== username));
 	},
 	'change [name=type]'(e, t) {
-		t.type.set(e.target.checked ? e.target.value : 'p');
+		t.type.set(e.target.checked ? e.target.value : 'd');
 	},
 	'input [name=users]'(e, t) {
 		const input = e.target;
@@ -189,7 +189,7 @@ Template.createChannel.onCreated(function() {
 	});
 
 	this.name = new ReactiveVar('');
-	this.type = new ReactiveVar('d');
+	this.type = new ReactiveVar('p');
 	this.inUse = new ReactiveVar(undefined);
 	this.invalid = new ReactiveVar(false);
 	this.userFilter = new ReactiveVar('');

packages/rocketchat-ui/client/views/app/popover.html

@@ -9,7 +9,7 @@
 						{{/if}}
 						<ul class="rc-popover__list">
 							{{#each item in group.items}}
-							<li class="rc-popover__item rc-popover__item--{{item.class}}" data-type={{item.type}} data-id={{item.id}} >
+							<li class="rc-popover__item rc-popover__item--{{item.class}}" data-type={{item.type}} data-id={{item.id.toLowerCase}} data-href={{item.href}} data-sidenav={{item.sideNav}}>
 									{{#if item.icon}}
 										<span class="rc-popover__icon">
 											{{> icon block="rc-popover__icon-element" icon=item.icon }}

packages/rocketchat-ui/client/views/app/popover.js

@@ -1,4 +1,4 @@
-/* globals popover */
+/* globals popover isRtl */
 
 this.popover = {
 	renderedPopover: null,
@@ -39,7 +39,7 @@ Template.popover.onRendered(function() {
 		const mousePosition = this.data.mousePosition;
 
 		let top;
-		if (mousePosition.y <= popoverHeight) {
+		if (mousePosition.y <= popoverHeightHalf) {
 			top = 10;
 		} else if (mousePosition.y + popoverHeightHalf > windowHeight) {
 			top = windowHeight - popoverHeight - 10;
@@ -47,19 +47,19 @@ Template.popover.onRendered(function() {
 			top = mousePosition.y - popoverHeightHalf;
 		}
 
-		let right;
+		let left;
 		if (mousePosition.x + popoverWidth >= windowWidth) {
-			right = mousePosition.x - popoverWidth;
+			left = mousePosition.x - popoverWidth;
 		} else if (mousePosition.x <= popoverWidth) {
-			right = 10;
+			left = isRtl() ? mousePosition.x + 10 : 10;
 		} else if (mousePosition.x <= windowWidth / 2) {
-			right = mousePosition.x;
+			left = mousePosition.x;
 		} else {
-			right = mousePosition.x - popoverWidth;
+			left = mousePosition.x - popoverWidth;
 		}
 
 		popoverContent.style.top = `${ top }px`;
-		popoverContent.style.left = `${ right }px`;
+		popoverContent.style.left = `${ left }px`;
 	}
 
 	if (customCSSProperties) {
@@ -96,9 +96,9 @@ Template.popover.events({
 		popover.close();
 	},
 	'click [data-type="open"]'(e) {
-		const open = e.currentTarget.dataset.id;
+		const data = e.currentTarget.dataset;
 
-		switch (open) {
+		switch (data.id) {
 			case 'account':
 				SideNav.setFlex('accountFlex');
 				SideNav.openFlex();
@@ -119,12 +119,12 @@ Template.popover.events({
 				break;
 		}
 
-		if (this.href) {
-			FlowRouter.go(this.href);
+		if (data.href) {
+			FlowRouter.go(data.href);
 		}
 
-		if (this.sideNav != null) {
-			SideNav.setFlex(this.sideNav);
+		if (data.sideNav) {
+			SideNav.setFlex(data.sideNav);
 			SideNav.openFlex();
 		}