Avoid page reload after interface language is changed #13712
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removed code that triggers a refresh from the me/account form. Changing language now behaves like changing any other setting. Removed the redirect functionality from the me/form-base mixin, as it's no longer used anywhere. Also removed the 'changingUsername' property from the me/form-base state, as it seems to be a legacy property that's not used anywhere.
This was referenced May 7, 2017
|
One idea how to solve the Currently, when .something {
margin-left: 10px;
}It's transformed by RTLCSS into a .something {
margin-right: 10px;
}What about splitting the rule into two and let them all live in one file? [dir=ltr] .something {
margin-left: 10px;
}
[dir=rtl] .something {
margin-right: 10px;
}I'm not sure if RTLCSS can do this, but I assume it shouldn't be hard to write a custom PostCSS plugin from scratch that does exactly this. |
|
Another place where the |
gziolo
reviewed
May 22, 2017
| @@ -525,7 +516,7 @@ const Account = React.createClass( { | |||
| onFocus={ this.recordFocusEvent( 'Interface Language Field' ) } | |||
| valueKey="langSlug" | |||
| value={ this.getUserSetting( 'language' ) || '' } | |||
| onChange={ this.updateLanguage } | |||
| onChange={ this.updateUsetSettingInput } | |||
There was a problem hiding this comment.
there is typo here updateUse*t*SettingInput
|
Closing as this PR is stale - please reopen if necessary |
alisterscott
deleted the
update/avoid-page-refresh-after-language-switch
branch
alisterscott
deleted the
update/avoid-page-refresh-after-language-switch
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The goal of this change is to avoid reloading the page after the interface language is changed and saved in the
me/accountform. Let's just refresh the UI in place by rerendering all React components that need to be updated!There are several problems that need to be solved to make this work.
First, all React components that use
i18n.translateto localize strings need to translate them again and rerender. That will happen if the component uses thei18n.localizeHOC or thei18n.mixinmixin. Both will be notified by thei18nmodule and will callforceUpdate.However, there are a few React components that call the
i18n.translatefunction directly. (Just grep the sources to find them). These are not guaranteed to rerender. They will only if some parent callsforceUpdate, and there is no intermediate component that would returnshouldComponentUpdate() == true.Solution: migrate these
i18n.translatecallers to thelocalizeHOC.Then there are modules that call
i18n.translatestatically at module initializations. For these, the strings will never be translated again. I know about protect-form doing this, and there might be others.Second, there is some language-specific info that's rendered by the server into the index page that needs to be updated dynamically on language change. This is important mainly when switching between LTR and RTL languages:
<html>element haslanganddirattributes that need to be changed<body>element has anrtlclass when the language is RTLstyle.css. For RTL, we loadstyle-rtl.css, which is thestyle.cssprocessed by RTLCSS. We'll need to reload the stylesheet at runtime, or find a way to merge them into one. (This would be much easier if more browsers supported CSS logical properties likemargin-block-startorborder-inline-end. But except Firefox, they don't.)I pushed a commit that disables the page refresh on language change. It doesn't solve any of the problems mentioned above.