Support RTL language issues: 80 , 1284 #1312

omriLugasi · 2017-12-16T13:37:40Z

Add support RTL language in the components below:

1.md-bottom-bar-item
2.md-card-actions
3.md-auto-complete
4.md-datepicker
5.md-dialog-alert
6.md-dialog-confirm
7.md-dialog-prompt
8.md-checkbox
9.md-chip

This commit will be "Stage One" in supporting rtl languages;
Next pull request will support rtl languages in the components below:

All input components
List
Menu
Snackbar
Tabs
Tooltip

this pull request fix part of the problem at issue number : 80, and fix issue number 1284

1.md-bottom-bar-item 2.md-card-actions 3.md-auto-complete 4.md-datepicker 5.md-dialog-alert 6.md-dialog-confirm 7.md-dialog-prompt 8.md-checkbox 9.md-chip This commit will be "Stage One" in supporting rtl languages; Next pull request will support rtl languages in the components below: 1. All input components 2. List 3. Menu 4. Snackbar 5. Tabs 6. Tooltip

fix vue-template-compiler version for travis issues

omriLugasi · 2017-12-17T12:03:27Z

@Samuell1

Travis issue

src/components/MdField/MdField.test.js

  ● Test suite failed to run

    Vue packages version mismatch:  

    - vue@2.5.11

    - vue-template-compiler@2.5.9

    

    This may cause things to work incorrectly. Make sure to use the same version for both.

    If you are using vue-loader@>=10.0, simply update vue-template-compiler.

    If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Please update " vue-template-compiler" version to 2.5.11

Samuell1 · 2017-12-18T13:55:04Z

@marcosmoura can you look at that dependency?

@omriLugasi i think better will be some global variable to enable RTL, then adding prop to all components, what you think?

VdustR · 2017-12-18T14:29:13Z

about Vue packages version mismatch,
fixed in #1306

~~You could install vue@2.5.9 manually temporarily.~~

Sorry, I didn't see that's travis reporting. Please ignore me.

omriLugasi · 2017-12-18T17:21:24Z

@Samuell1 Sure i can do it;
My idea was to let the user the option to write application with 2 options RTL and LTR, but i don't care to change it to global variable.

I'll change the flow to global variable :)

…, in the install function. Then The library will create the components with a rtl support design.

…, in the install function. Then The library will create the components with a rtl support design. Quick fix for Codeclimate

omriLugasi · 2017-12-18T23:28:24Z

@Samuell1

Ok 👍 :) Global configuration will be add by passing an object options to the vueMaterial Instace

const options = {
  mdRtl: true
}

Vue.use(VueMaterial , options);

* feat(MdCard): remove z-index to prevent card overlap FAB * fix(MdSelect): fix select content under dialog * refactor(MdSelect): change order of scss * docs: remove z-index from main-nav (#1134) * Revert "feat(MdCard): remove z-index to prevent card overlap FAB" This reverts commit 9e12806. * feat(MdButton): add fab z-index to prevent overlap

* feat(MdDatepicker): override browser native pickers * docs(MdDatepicker): add md-override-native prop * docs(MdDatepicker): remove note about firefox * refactor(MdDatepicker): remove nested statement

check whether clicked target is contained in menu content element within `bodyClickObserver` fix #1279

…1282) fix #1275

* feat(MdChips): feedback for duplicated chip add `md-duplicated` class which has the same style as `md-accent`. add `md-check-duplicated-on-change` props. fix #1212 * fix(MdChips): change api `mdCheckDuplicatedOnChange` to `mdAlwaysCheckDuplicated` * fix(MdChips): change for loop key from `key` to `chip` to prevent triggering animate while removing * docs(MdChips): example and new props for duplicated chip checking fix #1212 * fix(MdChips): always clear `duplicatedChip` on change * style(MdChips): fix style to pass scss-lint * fix(MdChips): rename prop * fix(MdChips): rename prop * fix(MdChips): rename prop * fix(MdChips): rename prop * style(MdChips): adjust code style

* Fix error to sort by attribute of child object * Fix attribute name * Remove blank lines * refactor(MdTable): cache attributes

marcosmoura · 2017-12-19T01:28:57Z

I don't think it's a good idea to have an option to configure the content direction.
I think the best and clever way to do it is to hook the styles based on [dir="rtl"] html attribute. It will be safer and complaint with HTML5 specs.

marcosmoura · 2017-12-19T01:29:44Z

I think that a PR per component would be better. It will be really hard to track which components have been upgraded.

marcosmoura · 2017-12-19T01:29:52Z

c.c @omriLugasi

upgrade vue-template-compiler in yarn.lock to resolve vue packages version mismatch

omriLugasi · 2017-12-19T07:49:01Z

@marcosmoura
@Samuell1

Did you mean something like:

<md-dialog-alert
      :md-active.sync="second"
      md-title="Post created!"
      md-content="Your post <strong>Material Design is awesome</strong> has been created."
      dir="rtl"
 />

And in the md-dialog component under style section to do :

.md-dialog{
  ...
  &[dir="rtl"]{
     text-align: right;
  }
}

omriLugasi · 2017-12-21T08:47:41Z

Still waiting for your answer....

@marcosmoura

@Samuell1

marcosmoura · 2017-12-22T21:45:30Z

No. dir="rtl" inside the HTML tag:

<html dir="rtl"> ... </html>

This is the default standard.

…1323) * Update layout.scss with large and xlarge props * Added md-gutter-xlarge variable * Removed Trailing white spaces * fix: change gutter for large size

fix #1321

let developers choose what to show from outside fix #1327

`<a>` attributes `download`, `hreflang`, `ping`, `rel`, `type` supported fix #1320

* fix(MdSelect): make options in disabled groups un-selectable fix #1286 * fix(MdSelect): make multiple selection checkboxes effective * style(MdOption): remove empty lines

…irectly (#1285) * (Fix #1261) Don't emit input directly in MdInput and MdTextarea * use spread operator (+babel) instead of Object.assign for browser compatiblity

* fix(icons): fix components' name * fix(docs): fix components' name

make dense props available fix #1332

add `onInput` as `input` to listeners fix #1340

) fix #1349

fix #1351

…1345) * docs(componentExampleLoader): replace `vue-template-es2015-compiler` with `babel` using babel to compile javascript in examples fix #1337 * refactor(componentExampleLoader): replace `path.join` with `resolvePath`

* fix(MdTable): multiple selection with table sorting an easy way to handle multiple selection fix #1348 * refactor(MdTable): single selection using instance comparing instead of id comparing both `MdTable` and `MdTableRow` emit `md-selected` event to avoid breaking change * feat(MdTable): new props `:md-selected-value.sync` for reactive selection fix #1292 * fix(MdTable): `syncSelectedValue` without `mdSelectedValue` in multiple selecting mode * fix(MdTableHeadSelection): fix `allSelected`, now disabled row could be tick from `md-selected-value * fix(MdTableRow): remove `md-selected` event too many duplicated events on a selection. It should be emit from `MdTable` BREAKING CHANGE: no more `md-selected` event from `MdTableRow` * fix(MdTable): select event should be triggered after select update event * fix(MdTableHeadSelection): select all only take effect on selectable items

fix #1347

marcosmoura · 2017-12-29T17:53:53Z

@omriLugasi Any news on that? :)

…tag, in this commit i focused on the label inside the md-field component

# Conflicts: # src/components/MdChips/MdChip.vue # src/components/MdDatepicker/MdDatepicker.vue

omriLugasi · 2017-12-30T18:26:54Z

@marcosmoura

There is an issue with this rule

Avoid qualifying attribute selectors with an element
html[dir='rtl']

in the codeclimate....

Anyway I committed our first support in the md-filed icons and labels.

Please tell if you like it, and i can keep going with this line of structure...

Samuell1 · 2018-03-13T10:48:11Z

I think this PR should be closed and opened new after components are more stable. And there are many commits that only removing, moving code and that can make many conflicts in codebase.

Maybe RTL support should be in separate files (Like rtl.scss in every component folder) or as package? What you think? @marcosmoura @omriLugasi

omriLugasi and others added 8 commits December 16, 2017 15:27

Remove important from scss file and fix syntax

f713ea7

change sass syntax to work with the relevant rules

ab517bf

Change sass syntax;

7f3b739

Change sass syntax;

6aec24c

Change sass syntax;

f3142d9

Clean white spaces in base.scss

816159b

fix vue-template-compiler version for travis issues

omriLugasi added 3 commits December 19, 2017 00:57

From now on you can pass an object with mdRtl property equals to true…

8bd64fa

…, in the install function. Then The library will create the components with a rtl support design.

Merge remote-tracking branch 'origin/dev' into dev

c3f8c2e

From now on you can pass an object with mdRtl property equals to true…

a7e2a17

…, in the install function. Then The library will create the components with a rtl support design. Quick fix for Codeclimate

Samuell1 and others added 8 commits December 18, 2017 23:10

feat(MdDatepicker): override browser native pickers (#1270)

1cfaf3c

* feat(MdDatepicker): override browser native pickers * docs(MdDatepicker): add md-override-native prop * docs(MdDatepicker): remove note about firefox * refactor(MdDatepicker): remove nested statement

fix(MdMenu): fix close-on-select props (#1280)

40406af

check whether clicked target is contained in menu content element within `bodyClickObserver` fix #1279

fix(MdSelect): emit md-selected event after localValue changed (#…

023723a

…1282) fix #1275

fix(MdAutocomplete): fix input emit when cleared (#1295)

8a055e8

docs: refactor i18n handling (#1301)

49787d1

fix(MdTable): fix error to sort by attribute of child object (#1309)

9134227

* Fix error to sort by attribute of child object * Fix attribute name * Remove blank lines * refactor(MdTable): cache attributes

fix: upgrade vue-template-compiler in yarn.lock (#1306)

b1bc2e1

upgrade vue-template-compiler in yarn.lock to resolve vue packages version mismatch

chore: update rollbar sponsorship

f983c53

mrwhy-orig and others added 17 commits December 22, 2017 19:47

fix(MdLayout): add xlarge and large classes to the layout component (#…

6c5fe65

…1323) * Update layout.scss with large and xlarge props * Added md-gutter-xlarge variable * Removed Trailing white spaces * fix: change gutter for large size

fix(MdField): disable clear button while field is disabled (#1326)

03a9425

fix #1321

fix(MdChips): add labels for static chips (#1329)

b7094cb

let developers choose what to show from outside fix #1327

feat(MdListItemLink): add all <a> attributes supported (#1328)

c9a2b9f

`<a>` attributes `download`, `hreflang`, `ping`, `rel`, `type` supported fix #1320

fix(MdSelect): make options in disabled groups un-selectable (#1293)

89138eb

* fix(MdSelect): make options in disabled groups un-selectable fix #1286 * fix(MdSelect): make multiple selection checkboxes effective * style(MdOption): remove empty lines

fix(MdField): prevent MdInput and MdTextarea from emit input events d…

00832e9

…irectly (#1285) * (Fix #1261) Don't emit input directly in MdInput and MdTextarea * use spread operator (+babel) instead of Object.assign for browser compatiblity

docs: update issue template

8ae249c

docs: improve components name (#1344)

84699ce

* fix(icons): fix components' name * fix(docs): fix components' name

fix(MdSelect): fix dense layout not being rendered properly (#1346)

7110eab

make dense props available fix #1332

fix(MdTextarea): fix input event handler not triggering (#1341)

567e9a7

add `onInput` as `input` to listeners fix #1340

fix(MdTable): improve sort function on table for numbered columns (#1353

18bb96c

) fix #1349

fix(MdHighlightText): avoid printing 'null' as a value (#1352)

4d906b6

fix #1351

docs: update backers

ba876d7

fix(MdDialog): IE not rendering Dialogs (#1356)

8115f32

fix(MdTable): remove table head when column removed (#1354)

b54eb10

fix #1347

omriLugasi added 7 commits December 30, 2017 18:10

Add Rtl support when user adds the attribute 'dir="rtl"' to the HTML …

6e8fb8b

…tag, in this commit i focused on the label inside the md-field component

Merge remote-tracking branch 'origin/dev' into dev

93899ca

# Conflicts: # src/components/MdChips/MdChip.vue # src/components/MdDatepicker/MdDatepicker.vue

clean the last irrelevant changes from the previous commits

52361a9

quick fixes....

8b8462e

quick fixes....

f89b491

quick fixes....

72c8915

quick fixes....

9122153

marcosmoura closed this Mar 27, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support RTL language issues: 80 , 1284 #1312

Support RTL language issues: 80 , 1284 #1312

omriLugasi commented Dec 16, 2017

omriLugasi commented Dec 17, 2017 •

edited

Loading

Samuell1 commented Dec 18, 2017

VdustR commented Dec 18, 2017 •

edited

Loading

omriLugasi commented Dec 18, 2017

omriLugasi commented Dec 18, 2017

marcosmoura commented Dec 19, 2017

marcosmoura commented Dec 19, 2017

marcosmoura commented Dec 19, 2017

omriLugasi commented Dec 19, 2017

omriLugasi commented Dec 21, 2017

marcosmoura commented Dec 22, 2017 •

edited

Loading

marcosmoura commented Dec 29, 2017

omriLugasi commented Dec 30, 2017

Samuell1 commented Mar 13, 2018

Support RTL language issues: 80 , 1284 #1312

Support RTL language issues: 80 , 1284 #1312

Conversation

omriLugasi commented Dec 16, 2017

omriLugasi commented Dec 17, 2017 • edited Loading

Samuell1 commented Dec 18, 2017

VdustR commented Dec 18, 2017 • edited Loading

omriLugasi commented Dec 18, 2017

omriLugasi commented Dec 18, 2017

marcosmoura commented Dec 19, 2017

marcosmoura commented Dec 19, 2017

marcosmoura commented Dec 19, 2017

omriLugasi commented Dec 19, 2017

omriLugasi commented Dec 21, 2017

marcosmoura commented Dec 22, 2017 • edited Loading

marcosmoura commented Dec 29, 2017

omriLugasi commented Dec 30, 2017

Samuell1 commented Mar 13, 2018

omriLugasi commented Dec 17, 2017 •

edited

Loading

VdustR commented Dec 18, 2017 •

edited

Loading

marcosmoura commented Dec 22, 2017 •

edited

Loading