summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--toolkit/content/datepicker.xhtml8
-rw-r--r--toolkit/content/widgets/datepicker.js19
-rw-r--r--toolkit/content/widgets/spinner.js9
-rw-r--r--toolkit/content/widgets/timepicker.js7
-rw-r--r--toolkit/themes/shared/datetimeinputpickers.css64
-rw-r--r--toolkit/themes/shared/icons/calendar-arrows.svg13
-rw-r--r--toolkit/themes/shared/jar.inc.mn1
7 files changed, 101 insertions, 20 deletions
diff --git a/toolkit/content/datepicker.xhtml b/toolkit/content/datepicker.xhtml
index abc7db303..d79b53102 100644
--- a/toolkit/content/datepicker.xhtml
+++ b/toolkit/content/datepicker.xhtml
@@ -16,8 +16,8 @@
<div id="date-picker">
<div class="calendar-container">
<div class="nav">
- <button class="left">&lt;</button>
- <button class="right">&gt;</button>
+ <button class="left"/>
+ <button class="right"/>
</div>
<div class="week-header"></div>
<div class="days-viewport">
@@ -25,8 +25,8 @@
</div>
</div>
<div class="month-year">
- <div class="month-year-label"></div>
- <div class="month-year-arrow"></div>
+ <div class="month-year-container">
+ <button class="month-year"/>
</div>
<div class="month-year-view"></div>
</div>
diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js
index d3f0fd1a4..7453b67eb 100644
--- a/toolkit/content/widgets/datepicker.js
+++ b/toolkit/content/widgets/datepicker.js
@@ -174,7 +174,8 @@ function DatePicker(context) {
*/
_attachEventListeners() {
window.addEventListener("message", this);
- document.addEventListener("click", this);
+ document.addEventListener("mouseup", this, { passive: true });
+ document.addEventListener("mousedown", this);
},
/**
@@ -188,16 +189,28 @@ function DatePicker(context) {
this.handleMessage(event);
break;
}
- case "click": {
+ case "mousedown": {
+ // Use preventDefault to keep focus on input boxes
+ event.preventDefault();
+ event.target.setCapture();
+
if (event.target == this.context.buttonLeft) {
+ event.target.classList.add("active");
this.state.dateKeeper.setMonthByOffset(-1);
this._update();
} else if (event.target == this.context.buttonRight) {
+ 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) {
+ event.target.classList.remove("active");
+ }
+
+ }
}
},
@@ -307,6 +320,7 @@ function DatePicker(context) {
this.context.monthYear.textContent = this.state.dateFormat(props.dateObj);
if (props.isVisible) {
+ this.context.monthYear.classList.add("active");
this.components.month.setState({
value: props.month,
items: props.months,
@@ -323,6 +337,7 @@ function DatePicker(context) {
});
this.state.firstOpened = false;
} else {
+ this.context.monthYear.classList.remove("active");
this.state.isMonthSet = false;
this.state.isYearSet = false;
this.state.firstOpened = true;
diff --git a/toolkit/content/widgets/spinner.js b/toolkit/content/widgets/spinner.js
index b3d996fb5..059e151fc 100644
--- a/toolkit/content/widgets/spinner.js
+++ b/toolkit/content/widgets/spinner.js
@@ -268,11 +268,11 @@ function Spinner(props, context) {
* Attach event listeners to the spinner and buttons.
*/
_attachEventListeners() {
- const { spinner } = this.elements;
+ const { spinner, container } = this.elements;
spinner.addEventListener("scroll", this, { passive: true });
- document.addEventListener("mouseup", this, { passive: true });
- document.addEventListener("mousedown", this);
+ container.addEventListener("mouseup", this, { passive: true });
+ container.addEventListener("mousedown", this, { passive: true });
},
/**
@@ -290,9 +290,6 @@ function Spinner(props, context) {
break;
}
case "mousedown": {
- // Use preventDefault to keep focus on input boxes
- event.preventDefault();
- event.target.setCapture();
this.state.mouseState = {
down: true,
layerX: event.layerX,
diff --git a/toolkit/content/widgets/timepicker.js b/toolkit/content/widgets/timepicker.js
index f438e9ec6..544032e9f 100644
--- a/toolkit/content/widgets/timepicker.js
+++ b/toolkit/content/widgets/timepicker.js
@@ -218,6 +218,7 @@ function TimePicker(context) {
},
_attachEventListeners() {
window.addEventListener("message", this);
+ document.addEventListener("mousedown", this);
},
/**
@@ -231,6 +232,12 @@ function TimePicker(context) {
this.handleMessage(event);
break;
}
+ case "mousedown": {
+ // Use preventDefault to keep focus on input boxes
+ event.preventDefault();
+ event.target.setCapture();
+ break;
+ }
}
},
diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css
index df93bc3a1..741f15281 100644
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -16,6 +16,7 @@
--border: 0.1rem solid #D6D6D6;
--border-radius: 0.3rem;
+ --border-active-color: #B1B1B1;
--font-color: #191919;
--fill-color: #EBEBEB;
@@ -26,6 +27,7 @@
--button-font-color: #858585;
--button-font-color-hover: #4D4D4D;
--button-font-color-active: #191919;
+ --button-fill-color-active: #D4D4D4;
--weekday-font-color: #6C6C6C;
--weekday-outside-font-color: #6C6C6C;
@@ -46,6 +48,12 @@ body {
font-size: var(--font-size-default);
}
+button {
+ -moz-appearance: none;
+ background: none;
+ border: none;
+}
+
.nav {
display: flex;
width: var(--calendar-width);
@@ -54,15 +62,29 @@ body {
justify-content: space-between;
}
-.nav button {
- -moz-appearance: none;
- background: none;
- border: none;
+.nav > button {
width: 3rem;
height: var(--date-picker-item-height);
+ background-color: var(--button-font-color);
+}
+
+.nav > button:hover {
+ background-color: var(--button-font-color-hover);
+}
+
+.nav > button.active {
+ background-color: var(--button-font-color-active);
}
-.month-year {
+.nav > button.left {
+ background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%;
+}
+
+.nav > button.right {
+ background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%;
+}
+
+.month-year-container {
position: absolute;
display: flex;
justify-content: center;
@@ -74,6 +96,35 @@ body {
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;
+}
+
+button.month-year:hover {
+ background: var(--fill-color);
+}
+
+button.month-year.active {
+ border-color: var(--border-active-color);
+ background: var(--button-fill-color-active);
+}
+
+button.month-year::after {
+ position: absolute;
+ content: "";
+ width: 2.6rem;
+ height: 1.6rem;
+ background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
+ background-color: var(--button-font-color);
+}
+
+button.month-year.active::after {
+ background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+}
+
.month-year-view {
position: absolute;
z-index: 5;
@@ -187,9 +238,6 @@ body {
}
.spinner-container > button {
- -moz-appearance: none;
- border: none;
- background: none;
background-color: var(--button-font-color);
height: var(--spinner-button-height);
}
diff --git a/toolkit/themes/shared/icons/calendar-arrows.svg b/toolkit/themes/shared/icons/calendar-arrows.svg
new file mode 100644
index 000000000..858676f55
--- /dev/null
+++ b/toolkit/themes/shared/icons/calendar-arrows.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+ <style>
+ path:not(:target) {
+ display: none;
+ }
+ </style>
+ <path id="right" d="M4.8 14L3 12.3 8.5 7 3 1.7 4.8 0 12 7"/>
+ <path id="left" d="M9.2 0L11 1.7 5.5 7 11 12.3 9.2 14 2 7"/>
+</svg>
diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn
index 39acff1c6..bdfca2a05 100644
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -23,6 +23,7 @@ toolkit.jar:
skin/classic/global/config.css (../../shared/config.css)
skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css)
skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css)
+ skin/classic/global/icons/calendar-arrows.svg (../../shared/icons/calendar-arrows.svg)
skin/classic/global/icons/find-arrows.svg (../../shared/icons/find-arrows.svg)
skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg)
skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg)
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-10 00:03:12 +0000