rtl sidenav

RocketChat · Sep 13, 2017 · 7062918 · Silic0nS0ldier · Feb 6, 2018 · 7062918
1 parent 0ddf27a
commit 7062918
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 28 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css b/packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css
@@ -1,5 +1,7 @@
+
+
 .rooms-list {
-	overflow-y: auto;
+	overflow-y: scroll;
 
 	height: 100%;
 
@@ -10,12 +12,20 @@
 	}
 
 	&__type {
-		margin-bottom: 0.5rem;
-		margin-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+		display: flex;
+
+		flex-direction: row;
+
+		padding: 0 var(--sidebar-default-padding) 0.5rem var(--sidebar-default-padding);
 
 		color: var(--rooms-list-title-color);
 
 		font-size: var(--rooms-list-title-text-size);
+		align-items: center;
+
+		&-text {
+			margin: 0 8px;
+		}
 	}
 
 	&__empty-room {
@@ -27,7 +37,7 @@
 	}
 
 	& .badge {
-		margin-left: 8px;
+		margin: 0 4px;
 	}
 
 	&__toolbar-search {
@@ -47,12 +57,18 @@
 }
 
 @media (width <= 400px) {
+	padding: 0 calc(var(--sidebar-small-default-padding) - 4px);
+
 	.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);
+		}
+
 		&__toolbar-search {
 			bottom: 0;
 		}

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-account.css
@@ -133,8 +133,6 @@
 
 @media (width <= 400px) {
 	.sidebar__account {
-		margin: 0 0 5px;
-
 		&-thumb {
 
 			flex: 0 0 var(--sidebar-small-account-thumb-size);

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css
@@ -1,11 +1,17 @@
+.rtl .sidebar-item {
+	margin: 0 8px 0 0;
+}
+
 .sidebar-item {
 	position: relative;
 
 	display: flex;
 
 	height: var(--sidebar-item-height);
 
-	padding-left: calc(var(--sidebar-default-padding) - calc(var(--sidebar-default-padding) / 3));
+	margin: 0 0 0 8px;
+
+	padding: 0 calc(var(--sidebar-default-padding) - 8px);
 
 	cursor: pointer;
 
@@ -39,10 +45,11 @@
 		overflow: hidden;
 		flex: 1;
 
+		margin: 0 -4px;
+
 		color: var(--sidebar-item-text-color);
 
 		font-size: 1rem;
-		line-height: var(--sidebar-item-height);
 		align-items: center;
 
 		&--active {
@@ -55,8 +62,6 @@
 	}
 
 	&__icon {
-		margin: 0 auto;
-
 		font-size: 1.25rem;
 		fill: currentColor;
 	}
@@ -96,12 +101,16 @@
 		display: flex;
 		flex: 0 0 var(--sidebar-item-thumb-size);
 
-		margin-right: 6px;
+		margin: 0 4px;
+
 		align-items: center;
 	}
 
 	&__name {
 		overflow: hidden;
+		flex: 1;
+
+		margin: 0 4px;
 
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -110,13 +119,21 @@
 	}
 }
 
+.rtl .sidebar-item__user-status {
+	right: 4px;
+	left: initial;
+}
+
 @media (width <= 400px) {
 	.sidebar-item {
-		padding-left: 0;
+		padding: 0 calc(var(--sidebar-small-default-padding) - 8px);
 
 		&__user-status {
-			right: calc(100% + var(--sidebar-small-item-user-status-size));
-			left: auto;
+			left: 0;
 		}
 	}
+
+	.rtl .sidebar-item__user-status {
+		right: 0;
+	}
 }
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -66,10 +66,6 @@
 	& .unread-rooms {
 		display: none;
 	}
-
-	& .rooms-list {
-		padding: 0 calc(var(--sidebar-default-padding) / 3);
-	}
 }
 
 @media (width < 780px) {
@@ -99,11 +95,6 @@
 			padding: var(--sidebar-small-default-padding);
 		}
 
-		& .unread-rooms,
-		& .rooms-list {
-			padding: 0 var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding)  var(--sidebar-small-default-padding);
-		}
-
 		&__footer {
 			display: none;
 		}

diff --git a/packages/rocketchat-ui-sidenav/client/roomList.html b/packages/rocketchat-ui-sidenav/client/roomList.html
@@ -5,7 +5,7 @@
 		{{#with rooms}}
 			{{#if shouldAppear .. .}}
 					<h3 class="rooms-list__type">
-						{{_ ../label}}
+						<div class="rooms-list__type-text">{{_ ../label}}</div>
 						{{#with count}}
 							{{#if .}}
 								<span class="badge">{{.}}</span>

diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.html b/packages/rocketchat-ui-sidenav/client/sidebarItem.html
@@ -16,10 +16,9 @@
 				{{/if}}
 			</div>
 			<div class='sidebar-item__name {{archivedClass}}'>{{name}}</div>
-		</a>
-
-		{{#if unread}}
+			{{#if unread}}
 			<span class="badge badge--unread">{{unread}}</span>
-		{{/if}}
+			{{/if}}
+		</a>
 	</li>
 </template>