wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1173036 - Change Loop's RTL attributes to be consistently set on the html element. r=mikedeboer

Browse Source
This commit is contained in:
Mark Banner 2015-06-10 14:12:42 +01:00
parent 40995be175
commit 0f2a5d6e98
12 changed files with 102 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
browser/components/loop/content/css/contacts.css
View File

@ -134,7 +134,7 @@
background-color: #fff;
}
body[dir="rtl"] .contact > .details > .username > i.icon-google {
html[dir="rtl"] .contact > .details > .username > i.icon-google {
left: 1rem;
right: auto;
}
@ -193,7 +193,7 @@ body[dir="rtl"] .contact > .details > .username > i.icon-google {
left: auto;
}
body[dir="rtl"] .contact > .dropdown-menu {
html[dir="rtl"] .contact > .dropdown-menu {
right: auto;
left: 3em;
}
@ -211,7 +211,7 @@ body[dir="rtl"] .contact > .dropdown-menu {
margin-top: 3px;
}
body[dir="rtl"] .contact > .dropdown-menu > .dropdown-menu-item > .icon {
html[dir="rtl"] .contact > .dropdown-menu > .dropdown-menu-item > .icon {
background-position: center right;
}
@ -259,7 +259,7 @@ body[dir="rtl"] .contact > .dropdown-menu > .dropdown-menu-item > .icon {
word-wrap: break-word;
}
body[dir=rtl] .contacts-gravatar-promo > p {
html[dir="rtl"] .contacts-gravatar-promo > p {
margin-right: 0;
margin-left: 4px;
}
@ -279,7 +279,7 @@ body[dir=rtl] .contacts-gravatar-promo > p {
right: 8px;
}
body[dir=rtl] .contacts-gravatar-promo > .button-close {
html[dir="rtl"] .contacts-gravatar-promo > .button-close {
right: auto;
left: 8px;
}

6
browser/components/loop/content/css/panel.css
View File

@ -265,7 +265,7 @@ body {
flex: 0 1 auto;
}
body[dir=rtl] .new-room-view > .context > .context-content > .context-preview {
html[dir="rtl"] .new-room-view > .context > .context-content > .context-preview {
float: left;
}
@ -563,7 +563,7 @@ body[dir=rtl] .new-room-view > .context > .context-content > .context-preview {
right: 4px;
}
body[dir=rtl] .generate-url-spinner {
html[dir="rtl"] .generate-url-spinner {
left: 4px;
right: auto;
}
@ -749,7 +749,7 @@ body[dir=rtl] .generate-url-spinner {
right: 14px;
}
body[dir="rtl"] .settings-menu .dropdown-menu {
html[dir="rtl"] .settings-menu .dropdown-menu {
/* This is specified separately rather than using -moz-margin-start etc, as
we need to override .dropdown-menu's values which can't use the gecko
specific extensions. */

3
browser/components/loop/content/js/conversation.js
View File

@ -163,7 +163,8 @@ loop.conversation = (function(mozL10n) {
dispatcher: dispatcher,
mozLoop: navigator.mozLoop}), document.querySelector("#main"));
document.body.setAttribute("dir", mozL10n.getDirection());
document.documentElement.setAttribute("lang", mozL10n.getLanguage());
document.documentElement.setAttribute("dir", mozL10n.getDirection());
document.body.setAttribute("platform", loop.shared.utils.getPlatform());
dispatcher.dispatch(new sharedActions.GetWindowData({

3
browser/components/loop/content/js/conversation.jsx
View File

@ -163,7 +163,8 @@ loop.conversation = (function(mozL10n) {
dispatcher={dispatcher}
mozLoop={navigator.mozLoop} />, document.querySelector("#main"));
document.body.setAttribute("dir", mozL10n.getDirection());
document.documentElement.setAttribute("lang", mozL10n.getLanguage());
document.documentElement.setAttribute("dir", mozL10n.getDirection());
document.body.setAttribute("platform", loop.shared.utils.getPlatform());
dispatcher.dispatch(new sharedActions.GetWindowData({

3
browser/components/loop/content/js/panel.js
View File

@ -1002,7 +1002,8 @@ loop.panel = (function(_, mozL10n) {
mozLoop: navigator.mozLoop,
dispatcher: dispatcher}), document.querySelector("#main"));
document.body.setAttribute("dir", mozL10n.getDirection());
document.documentElement.setAttribute("lang", mozL10n.getLanguage());
document.documentElement.setAttribute("dir", mozL10n.getDirection());
document.body.setAttribute("platform", loop.shared.utils.getPlatform());
// Notify the window that we've finished initalization and initial layout

3
browser/components/loop/content/js/panel.jsx
View File

@ -1002,7 +1002,8 @@ loop.panel = (function(_, mozL10n) {
mozLoop={navigator.mozLoop}
dispatcher={dispatcher} />, document.querySelector("#main"));
document.body.setAttribute("dir", mozL10n.getDirection());
document.documentElement.setAttribute("lang", mozL10n.getLanguage());
document.documentElement.setAttribute("dir", mozL10n.getDirection());
document.body.setAttribute("platform", loop.shared.utils.getPlatform());
// Notify the window that we've finished initalization and initial layout

4
browser/components/loop/content/shared/css/common.css
View File

@ -426,7 +426,7 @@ p {
border-radius: 2px;
}
body[dir=rtl] .dropdown-menu {
html[dir="rtl"] .dropdown-menu {
left: auto;
right: 0;
}
@ -481,7 +481,7 @@ body[dir=rtl] .dropdown-menu {
background-size: 1em 1em;
}
body[dir="rtl"] .checkbox {
html[dir="rtl"] .checkbox {
float: right;
}

8
browser/components/loop/content/shared/css/conversation.css
View File

@ -879,7 +879,7 @@ html, .fx-embedded, #main,
text-decoration: underline;
}
body[dir="rtl"] .room-invitation-addcontext {
html[dir="rtl"] .room-invitation-addcontext {
padding-left: 0;
padding-right: 1.5em;
background-position: right top;
@ -1104,13 +1104,13 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
background-image: url("../img/icons-10x10.svg#close-active");
}
body[dir=rtl] .room-context-btn-close,
body[dir=rtl] .room-context-btn-edit {
html[dir="rtl"] .room-context-btn-close,
html[dir="rtl"] .room-context-btn-edit {
right: auto;
left: 8px;
}
body[dir=rtl] .room-context-btn-edit {
html[dir="rtl"] .room-context-btn-edit {
left: 20px;
}

8
browser/components/loop/ui/react-frame-component.js vendored
View File

@ -62,6 +62,14 @@ window.Frame = React.createClass({
);
React.render(contents, doc.body, this.fireOnContentsRendered.bind(this));
// Set the RTL mode. We assume for now that rtl is the only query parameter.
//
// See also "ShowCase" in ui-showcase.jsx
if (document.location.search === "?rtl=1") {
doc.documentElement.setAttribute("lang", "ar");
doc.documentElement.setAttribute("dir", "rtl");
}
} else {
// Queue it, only if it isn't already. We do need to set the timeout
// regardless, as this function can get re-entered several times.

8
browser/components/loop/ui/ui-showcase.css
View File

@ -86,6 +86,14 @@ body {
color: #555;
}
.showcase .checkbox-wrapper label {
font-weight: bold;
}
.showcase .checkbox.checked {
background-image: url("../content/shared/img/check.svg#check-blue");
}
.showcase p.note {
margin: 0;
padding: 0;

32
browser/components/loop/ui/ui-showcase.js
View File

@ -31,6 +31,7 @@
// 3. Shared components
var ConversationToolbar = loop.shared.views.ConversationToolbar;
var FeedbackView = loop.shared.views.FeedbackView;
var Checkbox = loop.shared.views.Checkbox;
// Store constants
var ROOM_STATES = loop.store.ROOM_STATES;
@ -415,11 +416,42 @@
});
var ShowCase = React.createClass({displayName: "ShowCase",
getInitialState: function() {
// We assume for now that rtl is the only query parameter.
//
// Note: this check is repeated in react-frame-component to save passing
// rtlMode down the props tree.
var rtlMode = document.location.search === "?rtl=1";
return {
rtlMode: rtlMode
};
},
_handleCheckboxChange: function(newState) {
var newLocation = "";
if (newState.checked) {
newLocation = document.location.href.split("#")[0];
newLocation += "?rtl=1";
} else {
newLocation = document.location.href.split("?")[0];
}
newLocation += document.location.hash;
document.location = newLocation;
},
render: function() {
if (this.state.rtlMode) {
document.documentElement.setAttribute("lang", "ar");
document.documentElement.setAttribute("dir", "rtl");
}
return (
React.createElement("div", {className: "showcase"},
React.createElement("header", null,
React.createElement("h1", null, "Loop UI Components Showcase"),
React.createElement(Checkbox, {label: "RTL mode?", checked: this.state.rtlMode,
onChange: this._handleCheckboxChange}),
React.createElement("nav", {className: "showcase-menu"},
React.Children.map(this.props.children, function(section) {
return (

32
browser/components/loop/ui/ui-showcase.jsx
View File

@ -31,6 +31,7 @@
// 3. Shared components
var ConversationToolbar = loop.shared.views.ConversationToolbar;
var FeedbackView = loop.shared.views.FeedbackView;
var Checkbox = loop.shared.views.Checkbox;
// Store constants
var ROOM_STATES = loop.store.ROOM_STATES;
@ -415,11 +416,42 @@
});
var ShowCase = React.createClass({
getInitialState: function() {
// We assume for now that rtl is the only query parameter.
//
// Note: this check is repeated in react-frame-component to save passing
// rtlMode down the props tree.
var rtlMode = document.location.search === "?rtl=1";
return {
rtlMode: rtlMode
};
},
_handleCheckboxChange: function(newState) {
var newLocation = "";
if (newState.checked) {
newLocation = document.location.href.split("#")[0];
newLocation += "?rtl=1";
} else {
newLocation = document.location.href.split("?")[0];
}
newLocation += document.location.hash;
document.location = newLocation;
},
render: function() {
if (this.state.rtlMode) {
document.documentElement.setAttribute("lang", "ar");
document.documentElement.setAttribute("dir", "rtl");
}
return (
<div className="showcase">
<header>
<h1>Loop UI Components Showcase</h1>
<Checkbox label="RTL mode?" checked={this.state.rtlMode}
onChange={this._handleCheckboxChange} />
<nav className="showcase-menu">{
React.Children.map(this.props.children, function(section) {
return (