Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1320880 - Add RTL support to date picker r=mconley

Browse Source 
MozReview-Commit-ID: LIrOuUCfz17

--HG--
extra : rebase_source : 61781745759e1efb7851e1478bc6d3a591cb16c7
This commit is contained in:
Scott Wu 2017-02-17 18:16:17 +08:00
parent 2cba1fb22e
commit 998e9923de
4 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
toolkit/content/datepicker.xhtml
View File

@ -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")
});

11
toolkit/content/widgets/datepicker.js
View File

@ -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");
}

4
toolkit/content/widgets/datetimepopup.xml
View File

@ -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;

12
toolkit/themes/shared/datetimeinputpickers.css
View File

@ -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 {