Improved daterangepicker to support light/dark theme and transfered i…

…ts html link to the base template
WeblateOrg · Jun 14, 2024 · 480e9ab · 480e9ab
1 parent a3c78aa
commit 480e9ab
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 56 deletions.
diff --git a/weblate/static/daterangepicker-dark.css b/weblate/static/daterangepicker-dark.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright © Michal Čihař <michal@weblate.org>
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+@media (prefers-color-scheme: dark) {
+  .daterangepicker {
+    color: rgb(217, 211, 204);
+    background-color: rgb(26, 29, 30);
+  }
+
+  .daterangepicker td.in-range {
+    background-color: rgb(40, 43, 44);
+    color: rgb(217, 211, 204);
+  }
+}
diff --git a/weblate/static/vendor/daterangepicker.css → weblate/static/daterangepicker.css b/weblate/static/vendor/daterangepicker.css → weblate/static/daterangepicker.css
@@ -1,12 +1,8 @@
-/*
-  Modified daterangepicker.css
-  This is to align with the weblate design and colors
- */
 
 .daterangepicker {
   position: absolute;
-  color: rgb(217, 211, 204);
-  background-color: rgb(26, 29, 30);
+  color: #2a3744;
+  background-color: #ffffff;
   border-radius: 4px;
   border: 1px solid rgb(59, 64, 67);
   width: 278px;
@@ -194,8 +190,8 @@
 }
 
 .daterangepicker td.in-range {
-  background-color: rgb(40, 43, 44);
-  color: rgb(217, 211, 204);
+  background-color: #e9eaec;
+  color: #333333;
   border-radius: 0;
 }
 
@@ -290,24 +286,6 @@
   padding: 4px 8px;
 }
 
-/*
-.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
-  border-right: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
-  border-left: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.rtl .drp-calendar.right {
-  border-right: 1px solid #ddd;
-}
-
-.daterangepicker.show-ranges.ltr .drp-calendar.left {
-  border-left: 1px solid #ddd;
-}
-*/
-
 .daterangepicker .ranges {
   float: none;
   text-align: left;

diff --git a/...static/vendor/daterangepicker.css.license → weblate/static/daterangepicker.css.license b/...static/vendor/daterangepicker.css.license → weblate/static/daterangepicker.css.license
diff --git a/weblate/templates/base.html b/weblate/templates/base.html
@@ -75,6 +75,8 @@
   <script defer data-cfasync="false" src="{% static 'vendor/prism/prism-icu-message-format.js' %}{{ cache_param }}"></script>
   <script defer data-cfasync="false" src="{% static 'prism-weblatesearch.js' %}{{ cache_param }}"></script>
   <script defer data-cfasync="false" src="{% static 'loader-bootstrap.js' %}{{ cache_param }}"></script>
+  <script defer data-cfasync="false" src="{% static 'vendor/moment.js' %}{{ cache_param }}"></script>
+  <script defer data-cfasync="false" src="{% static 'vendor/daterangepicker.js' %}{{ cache_param }}"></script>
 {% endcompress %}
 
 {% block extra_script %}

diff --git a/weblate/templates/component.html b/weblate/templates/component.html
@@ -7,16 +7,6 @@
 {% load crispy_forms_tags %}
 {% load metrics %}
 
-{% block extra_script %}
-  {% compress js %}
-    <script defer data-cfasync="false" src="{% static 'vendor/moment.js' %}{{ cache_param }}"></script>
-    <script defer data-cfasync="false" src="{% static 'vendor/daterangepicker.js' %}{{ cache_param }}"></script>
-  {% endcompress %}
-  {% compress css %}
-    <link rel="stylesheet" href="{% static 'vendor/daterangepicker.css' %}{{ cache_param }}" />
-  {% endcompress %}
-{% endblock %}
-
 {% block breadcrumbs %}
 {% path_object_breadcrumbs path_object %}
 

diff --git a/weblate/templates/dashboard/user.html b/weblate/templates/dashboard/user.html
@@ -7,16 +7,6 @@
 {% load crispy_forms_tags %}
 {% load icons %}
 
-{% block extra_script %}
-  {% compress js %}
-    <script defer data-cfasync="false" src="{% static 'vendor/moment.js' %}{{ cache_param }}"></script>
-    <script defer data-cfasync="false" src="{% static 'vendor/daterangepicker.js' %}{{ cache_param }}"></script>
-  {% endcompress %}
-  {% compress css %}
-    <link rel="stylesheet" href="{% static 'vendor/daterangepicker.css' %}{{ cache_param }}" />
-  {% endcompress %}
-{% endblock %}
-
 {% block content %}
 
 {% announcements %}

diff --git a/weblate/templates/project.html b/weblate/templates/project.html
@@ -7,16 +7,6 @@
 {% load crispy_forms_tags %}
 {% load metrics %}
 
-{% block extra_script %}
-  {% compress js %}
-    <script defer data-cfasync="false" src="{% static 'vendor/moment.js' %}{{ cache_param }}"></script>
-    <script defer data-cfasync="false" src="{% static 'vendor/daterangepicker.js' %}{{ cache_param }}"></script>
-  {% endcompress %}
-  {% compress css %}
-    <link rel="stylesheet" href="{% static 'vendor/daterangepicker.css' %}{{ cache_param }}" />
-  {% endcompress %}
-{% endblock %}
-
 {% block breadcrumbs %}
 {% path_object_breadcrumbs path_object %}
 

diff --git a/weblate/templates/snippets/meta-css.html b/weblate/templates/snippets/meta-css.html
@@ -12,10 +12,13 @@
   {% endif %}
   <link rel="stylesheet" href="{% static 'vendor/multi.css' %}{{ cache_param }}" />
   <link rel="stylesheet" href="{% static 'style-bootstrap.css' %}{{ cache_param }}" />
+  <link rel="stylesheet" href="{% static 'daterangepicker.css' %}{{ cache_param }}" />
 {% if theme == "auto" %}
   <link rel="stylesheet" href="{% static 'style-dark.css' %}{{ cache_param }}" media="(prefers-color-scheme: dark)" />
+  <link rel="stylesheet" href="{% static 'daterangepicker-dark.css' %}{{ cache_param }}" />
 {% elif theme == "dark" %}
   <link rel="stylesheet" href="{% static 'style-dark.css' %}{{ cache_param }}" />
+  <link rel="stylesheet" href="{% static 'daterangepicker-dark.css' %}{{ cache_param }}" />
 {% endif %}
 {% endcompress %}
 {% if fonts_cdn_url %}