mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-16 23:05:42 +00:00
Bug 1320880
- Add RTL support to date picker r=mconley
MozReview-Commit-ID: LIrOuUCfz17 --HG-- extra : rebase_source : 61781745759e1efb7851e1478bc6d3a591cb16c7
This commit is contained in:
parent
2cba1fb22e
commit
998e9923de
@ -16,8 +16,8 @@
|
||||
<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">
|
||||
@ -51,8 +51,8 @@
|
||||
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")
|
||||
});
|
||||
|
@ -50,7 +50,8 @@ function DatePicker(context) {
|
||||
weekends,
|
||||
monthStrings,
|
||||
weekdayStrings,
|
||||
locale } = this.props;
|
||||
locale,
|
||||
dir } = this.props;
|
||||
const dateKeeper = new DateKeeper({
|
||||
year, month, day
|
||||
}, {
|
||||
@ -59,6 +60,8 @@ function DatePicker(context) {
|
||||
calViewSize: CAL_VIEW_SIZE
|
||||
});
|
||||
|
||||
document.dir = dir;
|
||||
|
||||
this.state = {
|
||||
dateKeeper,
|
||||
locale,
|
||||
@ -217,11 +220,11 @@ function DatePicker(context) {
|
||||
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();
|
||||
@ -229,7 +232,7 @@ function DatePicker(context) {
|
||||
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");
|
||||
}
|
||||
|
||||
|
@ -97,6 +97,7 @@
|
||||
<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": {
|
||||
@ -158,7 +159,8 @@
|
||||
weekends,
|
||||
monthStrings,
|
||||
weekdayStrings,
|
||||
locale
|
||||
locale,
|
||||
dir,
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
@ -77,11 +77,13 @@ button {
|
||||
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%;
|
||||
}
|
||||
|
||||
@ -92,6 +94,7 @@ button {
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 3rem;
|
||||
right: 3rem;
|
||||
width: 17.1rem;
|
||||
height: var(--date-picker-item-height);
|
||||
z-index: 10;
|
||||
@ -101,7 +104,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 {
|
||||
|
Loading…
Reference in New Issue
Block a user