Skip to content

Commit

Permalink
feat: RTL support (#846)
Browse files Browse the repository at this point in the history 
closes #426
  • Loading branch information
@atakchidi @anjmao
atakchidi authored and anjmao committed Oct 3, 2018
1 parent be34154 commit b155f83
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 19 deletions.
4 changes: 2 additions & 2 deletions demo/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<layout-header [version]="version"></layout-header>
<div class="container fill">
<layout-header [version]="version" [(dir)]="dir"></layout-header>
<div class="container fill" [attr.dir]="dir">
<div class="row">
<div class="col-12 col-md-3 col-xl-3 py-md-4 bd-sidebar">
<layout-sidenav></layout-sidenav>
Expand Down
1 change: 1 addition & 0 deletions demo/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export class AppComponent {
title: string;
version: string = window['ngSelectVersion'];
exampleSourceUrl: string;
dir: 'ltr' | 'rtl' = 'ltr';

constructor(private router: Router,
private activatedRoute: ActivatedRoute,
Expand Down
19 changes: 18 additions & 1 deletion demo/app/layout/header.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
const defaultTheme = require('./../../../src/themes/default.theme.scss');
const materialTheme = require('./../../../src/themes/material.theme.scss');

type langDir = 'ltr' | 'rtl';

@Component({
selector: 'layout-header',
template: `
Expand Down Expand Up @@ -29,6 +31,14 @@ const materialTheme = require('./../../../src/themes/material.theme.scss');
</div>
</div>
<div ngbDropdown class="d-inline-block ml-2">
<button class="btn btn-outline-light btn-sm text-uppercase" style="width: 60px;" ngbDropdownToggle>{{dir}}</button>
<div ngbDropdownMenu>
<button (click)="changeDirTo('ltr')" class="dropdown-item btn-sm text-uppercase">ltr</button>
<button (click)="changeDirTo('rtl')" class="dropdown-item btn-sm text-uppercase">rtl</button>
</div>
</div>
<ul class="navbar-nav mr-auto">
</ul>
Expand All @@ -47,6 +57,8 @@ const materialTheme = require('./../../../src/themes/material.theme.scss');
export class LayoutHeaderComponent implements OnInit {
theme = 'Default theme';
@Input() version: string;
@Input() dir: langDir;
@Output() dirChange = new EventEmitter<langDir>();

ngOnInit() {
defaultTheme.use();
Expand All @@ -62,6 +74,11 @@ export class LayoutHeaderComponent implements OnInit {
materialTheme.use();
}
}

changeDirTo(dir: langDir) {
this.dir = dir;
this.dirChange.emit(dir);
}
}


5 changes: 5 additions & 0 deletions src/themes/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@mixin rtl {
@at-root [dir="rtl"] #{&} {
@content
}
}
77 changes: 64 additions & 13 deletions src/themes/default.theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "mixins";

$color-selected: #f5faff;
.ng-select {
&.ng-select-opened {
Expand Down Expand Up @@ -55,6 +57,10 @@ $color-selected: #f5faff;
.ng-value-container {
align-items: center;
padding-left: 10px;
@include rtl {
padding-right: 10px;
padding-left: 0
}
.ng-placeholder {
color: #aaa;
}
Expand All @@ -65,10 +71,14 @@ $color-selected: #f5faff;
height: 36px;
.ng-value-container {
.ng-input {
top: 5px;
left: 0;
padding-left: 10px;
padding-right: 50px;
top: 5px;
@include rtl {
padding-right: 10px;
padding-left: 50px;
}
}
}
}
Expand All @@ -79,54 +89,80 @@ $color-selected: #f5faff;
background-color: #f9f9f9;
border: 1px solid #e3e3e3;
.ng-value-label {
padding: 0px 5px;
padding: 0 5px;
}
}
}
.ng-select-container {
.ng-value-container {
padding-left: 7px;
padding-top: 5px;
padding-left: 7px;
@include rtl {
padding-right: 7px;
padding-left: 0
}
.ng-value {
font-size: 0.9em;
margin-right: 5px;
margin-bottom: 5px;
background-color: $color-selected;
border-radius: 2px;
border: 1px solid #c2e0ff;
margin-right: 5px;
@include rtl {
margin-right: 0;
margin-left: 5px;
}
&.ng-value-disabled {
background-color: #f9f9f9;
border: 1px solid #e3e3e3;
.ng-value-label {
padding-left: 5px;
@include rtl {
padding-left: 0;
padding-right: 5px;
}
}
}
.ng-value-label {
display: inline-block;
padding: 0px 5px 0px 5px;
padding: 0 5px 0 5px;
}
.ng-value-icon {
display: inline-block;
padding: 0px 5px;
padding: 0 5px;
&:hover {
background-color: #d8eafd;
}
&.left {
border-right: 1px solid #c2e0ff;
@include rtl {
border-left: 1px solid #c2e0ff;
border-right: none;
}
}
&.right {
border-left: 1px solid #c2e0ff;
@include rtl {
border-left: 0;
border-right: 1px solid #c2e0ff;
}
}
}
}
.ng-input {
padding-bottom: 3px;
padding-left: 3px;
padding: 0 0 3px 3px;
@include rtl {
padding: 0 3px 3px 0;
}
}
.ng-placeholder {
top: 5px;
padding-bottom: 5px;
padding-left: 3px;
@include rtl {
padding-right: 3px;
padding-left: 0;
}
}
}
}
Expand All @@ -140,12 +176,19 @@ $color-selected: #f5faff;
}
}
.ng-spinner-zone {
padding-right: 5px;
padding-top: 5px;
padding: 5px 5px 0 0;

@include rtl {
padding: 5px 0 0 5px;
}
}
.ng-arrow-wrapper {
padding-right: 5px;
width: 25px;
padding-right: 5px;
@include rtl {
padding-left: 5px;
padding-right: 0;
}
&:hover {
.ng-arrow {
border-top-color: #666;
Expand All @@ -164,6 +207,7 @@ $color-selected: #f5faff;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
left: 0;
&.ng-select-bottom {
top: 100%;
border-bottom-right-radius: 4px;
Expand Down Expand Up @@ -206,7 +250,6 @@ $color-selected: #f5faff;
margin-bottom: 1px;
.ng-optgroup {
user-select: none;
cursor: default;
padding: 8px 10px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
Expand Down Expand Up @@ -242,11 +285,19 @@ $color-selected: #f5faff;
}
&.ng-option-child {
padding-left: 22px;
@include rtl {
padding-right: 22px;
padding-left: 0;
}
}
.ng-tag-label {
padding-right: 5px;
font-size: 80%;
font-weight: 400;
padding-right: 5px;
@include rtl {
padding-left: 5px;
padding-right: 0;
}
}
}
}
Expand Down
26 changes: 23 additions & 3 deletions src/themes/material.theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "mixins";

$highlight-color: #3f51b5;
.ng-select {
padding-bottom: 1.25em;
Expand Down Expand Up @@ -98,12 +100,14 @@ $highlight-color: #3f51b5;
.ng-select-container {
.ng-value-container {
.ng-value {
margin-right: 0.4375em;
margin-bottom: 0.4375em;
background-color: $highlight-color;
border-radius: 2px;
color: #fff;
padding: 2px 5px;
margin: 0 0.4375em 0.4375em 0;
@include rtl {
margin: 0 0 0.4375em 0.4375em;
}
&.ng-value-disabled {
background-color: rgba(0, 0, 0, .12);
color: rgba(0, 0, 0, .26);
Expand All @@ -115,6 +119,10 @@ $highlight-color: #3f51b5;
.ng-value-icon {
color: rgba(255, 255, 255, .54);
padding-right: 5px;
@include rtl {
padding-left: 5px;
padding-right: 0;
}
&:hover {
color: rgba(255, 255, 255, .87);
}
Expand Down Expand Up @@ -160,6 +168,7 @@ $highlight-color: #3f51b5;

.ng-dropdown-panel {
background: #fff;
left: 0;
&.ng-select-bottom {
top: calc(100% - 1.25em);
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
Expand Down Expand Up @@ -217,10 +226,13 @@ $highlight-color: #3f51b5;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 16px;
text-align: left;
text-decoration: none;
position: relative;
color: rgba(0, 0, 0, .87);
text-align: left;
@include rtl {
text-align: right;
}
&.ng-option-marked {
background: rgba(0, 0, 0, .04);
color: rgba(0, 0, 0, .87);
Expand All @@ -234,9 +246,17 @@ $highlight-color: #3f51b5;
}
&.ng-option-child {
padding-left: 32px;
@include rtl {
padding-right: 32px;
padding-left: 0
}
}
.ng-tag-label {
padding-right: 5px;
@include rtl {
padding-left: 5px;
padding-right: 0;
}
font-size: 80%;
font-weight: 400;
color: rgba(0, 0, 0, 0.38);
Expand Down

0 comments on commit b155f83

Please sign in to comment.