feat(module:all): Add RTL support to all ng-zorro-antd #4703

saeedrahimi · 2020-01-20T05:02:41Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #4704 #1762

What is the new behavior?

All components will be displayed correctly in RTL direction.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

codecov · 2020-01-20T05:09:19Z

Codecov Report

Merging #4703 (bfd485f) into master (8b92cac) will decrease coverage by 0.01%.
The diff coverage is 91.33%.

@@            Coverage Diff             @@
##           master    #4703      +/-   ##
==========================================
- Coverage   89.84%   89.82%   -0.02%     
==========================================
  Files         468      469       +1     
  Lines       14262    14948     +686     
  Branches     2242     2273      +31     
==========================================
+ Hits        12813    13427     +614     
- Misses        894      935      +41     
- Partials      555      586      +31

Impacted Files	Coverage Δ
components/carousel/typings.ts	`100.00% <ø> (ø)`
components/checkbox/checkbox-wrapper.component.ts	`100.00% <ø> (ø)`
components/comment/demo/basic.ts	`100.00% <ø> (ø)`
components/core/config/config.ts	`100.00% <ø> (ø)`
components/tabs/tabs-ink-bar.directive.ts	`83.87% <ø> (ø)`
components/date-picker/picker.component.ts	`87.42% <37.50%> (-2.13%)`	⬇️
components/upload/upload.component.ts	`94.35% <44.44%> (-3.94%)`	⬇️
components/tree/tree.component.ts	`92.65% <50.00%> (-1.50%)`	⬇️
components/typography/typography.component.ts	`95.83% <57.14%> (-2.00%)`	⬇️
components/modal/modal-container.ts	`91.87% <62.50%> (-1.28%)`	⬇️
... and 82 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8b92cac...bfd485f. Read the comment docs.

vthinkxie · 2020-03-23T11:46:37Z

Hi @saeedrahimi
thanks for your pull request!
most components have been refactored now, it is safe to rebase and finish RTL support now :)

vthinkxie · 2020-04-20T11:59:56Z

Hi @saeedrahimi
how is everything going?
we have released 9.0 version and make RTL to the 9.1.0 milestone
if you need any help, please let us know, thanks a lot for your contributions!

hdm91 · 2020-05-05T13:56:23Z

Hi @vthinkxie, @saeedrahimi
I can help you to complete RTL support from two to four weeks, if there isn't any problem tell me to start the process.
thanks

hsuanxyz · 2020-12-15T01:58:04Z

.npmrc

@@ -0,0 +1 @@
+node-options=--max-old-space-size=14000


This is needed?

🤦‍♂️ No, it's for my local development

hsuanxyz · 2020-12-15T02:00:56Z

components/grid/col.directive.ts


  ngOnInit(): void {
+    this.dir = this.directionality.value;
+    this.directionality.change.subscribe((direction: Direction) => {


need pipe(takeUntil(this.destroy$)) here

hsuanxyz · 2020-12-15T02:17:07Z

@saeedrahimi @HDaghash @hdm91

Thank for your contribution, it looks sufficiently great now. We would like to mention your contribution in the release log, so could you please tell us your twitter IDs?

wenqi73 · 2020-12-15T03:26:53Z

components/date-picker/date-picker.component.ts

@@ -65,6 +66,7 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
      [placeholder]="nzPlaceHolder"
      style="display: inherit; align-items: center; width: 100%;"
      [dropdownClassName]="nzDropdownClassName"


add [dir]="dir"

wenqi73 · 2020-12-15T03:29:52Z

components/date-picker/picker.component.ts

+        [style.left]="datePickerService?.arrowLeft"
+        [style.right]="datePickerService?.arrowRight"


Suggested change

[style.left]="datePickerService?.arrowLeft"

[style.right]="datePickerService?.arrowRight"

[ngStyle]="activeBarStyle"

wenqi73 · 2020-12-15T03:31:04Z

components/date-picker/picker.component.ts

+
+    if (this.dir === 'rtl') {
+      this.datePickerService.arrowRight =
+        this.datePickerService.activeInput === 'right' ? this.inputWidth + this.separatorElement?.nativeElement.offsetWidth || 0 : 0;
+      this.datePickerService.arrowLeft = 'auto';
+    } else {
+      this.datePickerService.arrowLeft =
+        this.datePickerService.activeInput === 'left' ? 0 : this.inputWidth + this.separatorElement?.nativeElement.offsetWidth || 0;
+      this.datePickerService.arrowRight = 'auto';
+    }
+


Suggested change

if (this.dir === 'rtl') {

this.datePickerService.arrowRight =

this.datePickerService.activeInput === 'right' ? this.inputWidth + this.separatorElement?.nativeElement.offsetWidth || 0 : 0;

this.datePickerService.arrowLeft = 'auto';

} else {

this.datePickerService.arrowLeft =

this.datePickerService.activeInput === 'left' ? 0 : this.inputWidth + this.separatorElement?.nativeElement.offsetWidth || 0;

this.datePickerService.arrowRight = 'auto';

}

const baseStyle = { position: 'absolute', width: `${this.inputWidth}px` };

this.datePickerService.arrowLeft = this.datePickerService.activeInput === 'left' ? 0 : this.inputWidth + this.separatorElement?.nativeElement.offsetWidth || 0;

if (this.dir === 'rtl') {

this.activeBarStyle = { ...baseStyle, right: `${this.datePickerService.arrowLeft}px` };

} else {

this.activeBarStyle = { ...baseStyle, left: `${this.datePickerService.arrowLeft}px` };

}

also need to define activeBarStyle.

wenqi73 · 2020-12-15T03:32:23Z

components/date-picker/date-picker.service.ts

+  arrowLeft: string = 'auto';
+  arrowRight: string = 'auto';


Suggested change

arrowLeft: string = 'auto';

arrowRight: string = 'auto';

arrowLeft: number = 0;

wenqi73

the active bar in range picker cannot work, need some changes.

saeedrahimi · 2020-12-15T06:41:28Z

@saeedrahimi @HDaghash @hdm91

Thank for your contribution, it looks sufficiently great now. We would like to mention your contribution in the release log, so could you please tell us your twitter IDs?

I'm glad I could help.
twitter ID :@Saeedr_ir

HDaghash · 2020-12-15T06:45:03Z

@saeedrahimi @HDaghash @hdm91

Thank for your contribution, it looks sufficiently great now. We would like to mention your contribution in the release log, so could you please tell us your twitter IDs?

Thank you guys for making this happen
Glad to hear
Twitter :@HDagash

saeedrahimi · 2020-12-15T07:00:23Z

@saeedrahimi @HDaghash @hdm91

Thank for your contribution, it looks sufficiently great now. We would like to mention your contribution in the release log, so could you please tell us your twitter IDs?

Someone missed to mention.
I want to thank @hmdnikoo for all his contributions. he kindly changed most of the components to fix a bug on RTL change.

yangjunhan · 2020-12-15T07:06:01Z

@saeedrahimi @HDaghash @hdm91
Thank for your contribution, it looks sufficiently great now. We would like to mention your contribution in the release log, so could you please tell us your twitter IDs?

Someone missed to mention.
I want to thank @hmdnikoo for all his contributions. he kindly changed most of the components to fix a bug on RTL change.

Certainly. We value all your contribution very much. Please also provide his Twitter id. By the way, do you have @hdm91 's Twitter id?

components/menu/menu-item.directive.ts

components/menu/submenu-title.component.ts

Co-authored-by: Wenqi Chen <[email protected]>

hdm91 · 2020-12-15T09:18:26Z

@saeedrahimi @HDaghash @hdm91
Thank for your contribution, it looks sufficiently great now. We would like to mention your contribution in the release log, so could you please tell us your twitter IDs?

Someone missed to mention.
I want to thank @hmdnikoo for all his contributions. he kindly changed most of the components to fix a bug on RTL change.

Certainly. We value all your contribution very much. Please also provide his Twitter id. By the way, do you have @hdm91 's Twitter id?

Hi guys , thanks for your consideration and helping to make RTL feature on great ng zorro , I wish I would have enough time to help you in future
my twitter ID :@hdm9170

saeedrahimi changed the title ~~[WIP] Add RTL support to all ng-zorro-antd~~ feat(module:table): Add RTL support to all ng-zorro-antd Jan 20, 2020

pr-triage bot added the PR: unreviewed label Jan 20, 2020

saeedrahimi mentioned this pull request Jan 20, 2020

RTL Support #4704

Closed

62 tasks

saeedrahimi changed the title ~~feat(module:table): Add RTL support to all ng-zorro-antd~~ feat(module:all): Add RTL support to all ng-zorro-antd Jan 21, 2020

weekly-digest bot mentioned this pull request Jan 26, 2020

Weekly Digest (19 January, 2020 - 26 January, 2020) #4734

Closed

saeedrahimi force-pushed the v9-rtl branch from c5342a3 to 8732e99 Compare February 1, 2020 06:23

wenqi73 requested a review from vthinkxie February 3, 2020 08:03

wenqi73 assigned vthinkxie Feb 3, 2020

weekly-digest bot mentioned this pull request Feb 9, 2020

Weekly Digest (2 February, 2020 - 9 February, 2020) #4760

Closed

saeedrahimi force-pushed the v9-rtl branch from 83684dd to 1ccf9b7 Compare March 14, 2020 05:57

saeedrahimi force-pushed the v9-rtl branch from 6a8ae6b to 2424304 Compare March 24, 2020 05:54

saeedrahimi force-pushed the v9-rtl branch from 91f93ff to 2921039 Compare April 4, 2020 05:34

saeedrahimi force-pushed the v9-rtl branch from 64aadab to 27f0f38 Compare May 30, 2020 05:01

saeedrahimi requested review from cipchk, CK110, hsuanxyz, wzhudev and wenqi73 as code owners May 30, 2020 05:01

saeedrahimi added 8 commits October 3, 2020 17:32

feat(module:nz-table): add rtl support

2f00366

feat(module:table): add rtl tests and some rtl fixes

4d786af

feat(module:grid): add rtl support

a7b7494

feat(module:demo): add some rtl fixes to whole demo

ce50527

fix(module:layout): fix rtl button issue

d80b199

feat(module:cascader): added rtl support

61febb0

feat(module:carousel): added rtl direction

574ac4e

feat(module:button): added rtl direction

c500040

saeedrahimi added 7 commits December 14, 2020 20:16

test(module:descriptions): fix descriptions

06b7d3e

test(module:page-header): increase rtl test cover

b012ade

test(module:rate): add rtl test

931bba1

test(module:layout): add rtl test

5e8412c

test(module:list): add rtl test

4b94b45

test(module:progress): add rtl test

5e08cf0

test(module:transfer): add rtl test

9047622

hsuanxyz reviewed Dec 15, 2020

View reviewed changes

wenqi73 reviewed Dec 15, 2020

View reviewed changes

wenqi73 requested changes Dec 15, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Dec 15, 2020

wenqi73 reviewed Dec 15, 2020

View reviewed changes

components/menu/menu-item.directive.ts Outdated Show resolved Hide resolved

wenqi73 reviewed Dec 15, 2020

View reviewed changes

components/menu/submenu-title.component.ts Outdated Show resolved Hide resolved

Update components/menu/submenu-title.component.ts

1c4d11e

Co-authored-by: Wenqi Chen <[email protected]>

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Dec 15, 2020

Update components/menu/menu-item.directive.ts

bfd485f

Co-authored-by: Wenqi Chen <[email protected]>

hsuanxyz merged commit 860dfed into NG-ZORRO:master Dec 15, 2020

pr-triage bot added PR: merged and removed PR: unreviewed labels Dec 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module:all): Add RTL support to all ng-zorro-antd #4703

feat(module:all): Add RTL support to all ng-zorro-antd #4703

saeedrahimi commented Jan 20, 2020 •

edited

Loading

codecov bot commented Jan 20, 2020 •

edited

Loading

vthinkxie commented Mar 23, 2020

vthinkxie commented Apr 20, 2020 •

edited

Loading

hdm91 commented May 5, 2020

hsuanxyz Dec 15, 2020

saeedrahimi Dec 15, 2020

hsuanxyz Dec 15, 2020

hsuanxyz commented Dec 15, 2020

wenqi73 Dec 15, 2020 •

edited

Loading

wenqi73 Dec 15, 2020 •

edited

Loading

wenqi73 Dec 15, 2020 •

edited

Loading

wenqi73 Dec 15, 2020

wenqi73 left a comment

saeedrahimi commented Dec 15, 2020 •

edited

Loading

HDaghash commented Dec 15, 2020

saeedrahimi commented Dec 15, 2020

yangjunhan commented Dec 15, 2020

hdm91 commented Dec 15, 2020

		[style.left]="datePickerService?.arrowLeft"
		[style.right]="datePickerService?.arrowRight"

	[style.left]="datePickerService?.arrowLeft"
	[style.right]="datePickerService?.arrowRight"
	[ngStyle]="activeBarStyle"

	arrowLeft: string = 'auto';
	arrowRight: string = 'auto';
	arrowLeft: number = 0;

		@@ -0,0 +1 @@
		node-options=--max-old-space-size=14000

feat(module:all): Add RTL support to all ng-zorro-antd #4703

feat(module:all): Add RTL support to all ng-zorro-antd #4703

Conversation

saeedrahimi commented Jan 20, 2020 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

codecov bot commented Jan 20, 2020 • edited Loading

Codecov Report

vthinkxie commented Mar 23, 2020

vthinkxie commented Apr 20, 2020 • edited Loading

hdm91 commented May 5, 2020

hsuanxyz Dec 15, 2020

Choose a reason for hiding this comment

saeedrahimi Dec 15, 2020

Choose a reason for hiding this comment

hsuanxyz Dec 15, 2020

Choose a reason for hiding this comment

hsuanxyz commented Dec 15, 2020

wenqi73 Dec 15, 2020 • edited Loading

Choose a reason for hiding this comment

wenqi73 Dec 15, 2020 • edited Loading

Choose a reason for hiding this comment

wenqi73 Dec 15, 2020 • edited Loading

Choose a reason for hiding this comment

wenqi73 Dec 15, 2020

Choose a reason for hiding this comment

wenqi73 left a comment

Choose a reason for hiding this comment

saeedrahimi commented Dec 15, 2020 • edited Loading

HDaghash commented Dec 15, 2020

saeedrahimi commented Dec 15, 2020

yangjunhan commented Dec 15, 2020

hdm91 commented Dec 15, 2020

saeedrahimi commented Jan 20, 2020 •

edited

Loading

codecov bot commented Jan 20, 2020 •

edited

Loading

vthinkxie commented Apr 20, 2020 •

edited

Loading

wenqi73 Dec 15, 2020 •

edited

Loading

wenqi73 Dec 15, 2020 •

edited

Loading

wenqi73 Dec 15, 2020 •

edited

Loading

saeedrahimi commented Dec 15, 2020 •

edited

Loading