Bug 872548: panel subviews should swipe to the right in RTL mode. r=gkruitbosch

This commit is contained in:
Mike de Boer 2013-09-20 18:04:41 +02:00
parent c81a936f10
commit a874eeb648
2 changed files with 22 additions and 7 deletions

View File

@ -237,15 +237,22 @@
<parameter name="aAnchor"/>
<body><![CDATA[
if (aAnchor) {
// We need to find the left edge of the anchor, relative to the main
// panel. Then we need to add half the width of the anchor. This is the
// target that we need to transition to.
// We need to find the edge of the anchor, relative to the main panel.
// Then we need to add half the width of the anchor. This is the target
// that we need to transition to.
let anchorRect = aAnchor.getBoundingClientRect();
let mainViewRect = this._mainViewContainer.getBoundingClientRect();
let leftEdge = anchorRect.left - mainViewRect.left;
let center = aAnchor.clientWidth / 2;
let target = leftEdge + center;
this._mainViewContainer.style.transform = "translateX(-" + target + "px)";
let direction = aAnchor.ownerDocument.defaultView.getComputedStyle(aAnchor, null).direction;
let edge, target;
if (direction == "ltr") {
edge = anchorRect.left - mainViewRect.left;
target = "-" + (edge + center);
} else {
edge = mainViewRect.right - anchorRect.right;
target = edge + center;
}
this._mainViewContainer.style.transform = "translateX(" + target + "px)";
aAnchor.classList.add("panel-multiview-anchor");
} else {
this._mainViewContainer.style.transform = "";

View File

@ -8,13 +8,21 @@
background-image: linear-gradient(to bottom, white 1px, rgba(255, 255, 255, 0) 15px);
background-color: -moz-dialog;
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.2), -1px 0px 2px rgba(0, 0, 0, 0.1), 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
margin-left: 38px;
-moz-margin-start: 38px;
}
.panel-subviews:-moz-locale-dir(rtl) {
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.1), -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
}
.panel-viewstack[viewtype="main"] > .panel-subviews {
transform: translateX(@menuPanelWidth@);
}
.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
transform: translateX(-@menuPanelWidth@);
}
.panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
-moz-box-flex: 1;
}