Netlify-cms: add right-to-left layout support

[dur41d]

Is your feature request related to a problem? Please describe.

Languages like Arabic, Persian, Hebrew, require right-to-left support for the admin layout.

Describe the solution you'd like

Enable right-to-left for the admin panel. This could be done:

1. Via configuration so that it is always enabled. This could work well if the site is uni-lingual and the layout can be pre-determined to be right-to-left.
2. Via a button on the admin panel that can switch the layout on demand. This is good for multi-lingual sites like English and Arabic which is common.
3. Per collection so the user can define collections that are right-to-left which will also work well for multi-lingual sites.

I guess we can start with #1 and then increase the complexity of the support afterwards.

Describe alternatives you've considered

I tried putting dir="rtl" in the root html element of the admin page. but it didn't work well (see the screenshot below).

Additional context

[tech4him1]

(WIP) CSS changes necessary to make this work:

• Change padding-left to be on right as well: https://github.com/netlify/netlify-cms/blob/a9666aadd49ad5d375d00c6df597a4d25ab577ca/packages/netlify-cms-core/src/components/Collection/Collection.js#L19
• Adjust "spacing hack" of 12px for entry cards on collection page.
• Move "preview" buttons on entry screen when dir=rtl is set.
• In media library, use text-align: initial instead of text-align: left/right when wanting something un-centered.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mehdisadeghi]

Perhaps below snippet could help someone. It partially forces RTL layout. Just add it to the admin page's index.html.

   <script>
    var PostPreview = createClass({
      render: function() {
        var entry = this.props.entry;
        var image = entry.getIn(['data', 'image']);
        var bg = this.props.getAsset(image) || '';
        return h('div', {'dir': 'rtl'},
          h('h1', {}, entry.getIn(['data', 'title'])),
          h('img', {src: bg.toString()}),
          h('div', {"className": "text"}, this.props.widgetFor('body'))
        );
      }
    });

    CMS.registerPreviewTemplate("posts", PostPreview);
    </script>