Bug 1320880 - Add RTL support to date picker
MozReview-Commit-ID: LIrOuUCfz17
--- a/toolkit/content/datepicker.xhtml
+++ b/toolkit/content/datepicker.xhtml
@@ -11,18 +11,18 @@
<script type="application/javascript" src="chrome://global/content/bindings/spinner.js"></script>
<script type="application/javascript" src="chrome://global/content/bindings/calendar.js"></script>
<script type="application/javascript" src="chrome://global/content/bindings/datepicker.js"></script>
</head>
<body>
<div id="date-picker">
<div class="calendar-container">
<div class="nav">
- <button class="left"/>
- <button class="right"/>
+ <button class="prev"/>
+ <button class="next"/>
</div>
<div class="week-header"></div>
<div class="days-viewport">
<div class="days-view"></div>
</div>
</div>
<div class="month-year-container">
<button class="month-year"/>
@@ -46,16 +46,16 @@
getInterface(Components.interfaces.nsIDOMWindowUtils);
domWinUtls.loadSheetUsingURIString('data:text/css,@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); scrollbar { display: none; }', domWinUtls.AGENT_SHEET);
// Create a DatePicker instance and prepare to be
// initialized by the "DatePickerInit" event from datetimepopup.xml
const root = document.getElementById("date-picker");
new DatePicker({
monthYear: root.querySelector(".month-year"),
monthYearView: root.querySelector(".month-year-view"),
- buttonLeft: root.querySelector(".left"),
- buttonRight: root.querySelector(".right"),
+ buttonPrev: root.querySelector(".prev"),
+ buttonNext: root.querySelector(".next"),
weekHeader: root.querySelector(".week-header"),
daysView: root.querySelector(".days-view")
});
</script>
</body>
</html>
--- a/toolkit/content/widgets/datepicker.js
+++ b/toolkit/content/widgets/datepicker.js
@@ -45,25 +45,28 @@ function DatePicker(context) {
const now = new Date();
const { year = now.getFullYear(),
month = now.getMonth(),
day = now.getDate(),
firstDayOfWeek,
weekends,
monthStrings,
weekdayStrings,
- locale } = this.props;
+ locale,
+ dir } = this.props;
const dateKeeper = new DateKeeper({
year, month, day
}, {
firstDayOfWeek,
weekends,
calViewSize: CAL_VIEW_SIZE
});
+ document.dir = dir;
+
this.state = {
dateKeeper,
locale,
isMonthPickerVisible: false,
isYearSet: false,
isMonthSet: false,
isDateSet: false,
datetimeOrders: new Intl.DateTimeFormat(locale)
@@ -212,29 +215,29 @@ function DatePicker(context) {
this.handleMessage(event);
break;
}
case "mousedown": {
// Use preventDefault to keep focus on input boxes
event.preventDefault();
event.target.setCapture();
- if (event.target == this.context.buttonLeft) {
+ if (event.target == this.context.buttonPrev) {
event.target.classList.add("active");
this.state.dateKeeper.setMonthByOffset(-1);
this._update();
- } else if (event.target == this.context.buttonRight) {
+ } else if (event.target == this.context.buttonNext) {
event.target.classList.add("active");
this.state.dateKeeper.setMonthByOffset(1);
this._update();
}
break;
}
case "mouseup": {
- if (event.target == this.context.buttonLeft || event.target == this.context.buttonRight) {
+ if (event.target == this.context.buttonPrev || event.target == this.context.buttonNext) {
event.target.classList.remove("active");
}
}
}
},
/**
--- a/toolkit/content/widgets/datetimepopup.xml
+++ b/toolkit/content/widgets/datetimepopup.xml
@@ -92,16 +92,17 @@
}
}
]]></body>
</method>
<method name="initPicker">
<parameter name="detail"/>
<body><![CDATA[
const locale = Components.classes["@mozilla.org/chrome/chrome-registry;1"].getService(Ci.nsIXULChromeRegistry).getSelectedLocale("global");
+ const dir = this.mozIntl.getLocaleInfo(locale).direction;
switch (this.type) {
case "time": {
const { hour, minute } = detail.value;
const format = detail.format || "12";
this.postMessageToPicker({
name: "PickerInit",
@@ -153,17 +154,18 @@
year,
// Month value from input box starts from 1 instead of 0
month: month == undefined ? undefined : month - 1,
day,
firstDayOfWeek,
weekends,
monthStrings,
weekdayStrings,
- locale
+ locale,
+ dir,
}
});
break;
}
}
]]></body>
</method>
<method name="setInputBoxValue">
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -72,41 +72,47 @@ button {
.nav > button:hover {
fill: var(--button-font-color-hover);
}
.nav > button.active {
fill: var(--button-font-color-active);
}
-.nav > button.left {
+.nav > button.prev,
+.nav > button.next:dir(rtl) {
background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
}
-.nav > button.right {
+.nav > button.next,
+.nav > button.prev:dir(rtl) {
background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
}
.month-year-container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 3rem;
+ right: 3rem;
width: 17.1rem;
height: var(--date-picker-item-height);
z-index: 10;
}
button.month-year {
font-size: 1.3rem;
border: var(--border);
border-radius: 0.3rem;
- padding: 0.2rem 2.6rem 0.2rem 1.2rem;
+ padding-top: 0.2rem;
+ padding-bottom: 0.2rem;
+ padding-inline-start: 1.2rem;
+ padding-inline-end: 2.6rem;
}
button.month-year:hover {
background: var(--fill-color);
}
button.month-year.active {
border-color: var(--border-active-color);