Up/down chevrons and "expand"/"collapse" for Sphinx-togglebutton (#1605)

* Up/down chevrons and "expand"/"collapse" text for Sphinx-togglebutton

* Add translation strings

babel.cfg

@@ -1,4 +1,5 @@
-# See https://github.com/sphinx-doc/sphinx/blob/6.1.x/babel.cfg
+# See https://github.com/python-babel/babel/blob/2a1709a7768f6f07c3d2dbfdb03d3c8a6bd80aef/docs/messages.rst#extraction-method-mapping-and-configuration
+[python: **.py]
 [jinja2: **.html]
 encoding = utf-8
 ignore_tags = script,style

docs/conf.py

@@ -13,6 +13,7 @@
 
 import pydata_sphinx_theme
 from sphinx.application import Sphinx
+from sphinx.locale import _
 
 sys.path.append(str(Path(".").resolve()))
 
@@ -89,6 +90,11 @@
     "jupyter": ("Jupyter", "https://jupyter.org"),
 }
 
+# -- sphinx_togglebutton options ---------------------------------------------
+togglebutton_hint = str(_("Click to expand"))
+togglebutton_hint_hide = str(_("Click to collapse"))
+
+
 # -- Options for HTML output -------------------------------------------------
 
 html_theme = "pydata_sphinx_theme"

src/pydata_sphinx_theme/assets/styles/extensions/_togglebutton.scss

@@ -3,10 +3,32 @@
  */
 
 .bd-content {
+  @mixin chevron-down {
+    .toggle-chevron-right {
+      transform: rotate(90deg); // point chevron down
+      transition: none; // match non-animated behavior of other chevrons on site
+    }
+  }
+
+  @mixin chevron-up {
+    .toggle-chevron-right {
+      transform: rotate(-90deg); // point chevron down
+      transition: none; // match non-animated behavior of other chevrons on site
+    }
+  }
+
   // Admonition toggles
   .admonition {
     button.toggle-button {
       color: inherit;
+
+      // When disclosure widget is closed
+      &.toggle-button-hidden {
+        @include chevron-down;
+      }
+
+      // When open
+      @include chevron-up;
     }
 
     // Focus ring
@@ -52,12 +74,18 @@
     // Over-ride border color to re-use our primary color
     summary {
       border-left: 3px solid var(--pst-color-primary);
+
+      @include chevron-down;
     }
 
     // When expanded, sharpen the bottom left and right corners of the focus ring
-    &[open] :focus-visible {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    &[open] {
+      @include chevron-up;
+
+      :focus-visible {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
 }

src/pydata_sphinx_theme/locale/ca/LC_MESSAGES/sphinx.po

@@ -1,30 +1,45 @@
 # English translations for pydata-sphinx-theme.
 # Copyright (C) 2023 PyData developers
-# This file is distributed under the same license as the pydata-sphinx-theme project.
-# 
+# This file is distributed under the same license as the pydata-sphinx-theme
+# project.
+#
 # Translators:
 # Oriol Abril-Pla <[email protected]>, 2023
-# 
 msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2023-02-16 14:32-0500\n"
+"POT-Creation-Date: 2023-12-21 08:09-0700\n"
 "PO-Revision-Date: 2023-04-14 14:57+0000\n"
 "Last-Translator: Oriol Abril-Pla <[email protected]>, 2023\n"
-"Language-Team: Catalan (https://app.transifex.com/12rambau/teams/166811/ca/)\n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: 8bit\n"
-"Generated-By: Babel 2.11.0\n"
 "Language: ca\n"
+"Language-Team: Catalan "
+"(https://app.transifex.com/12rambau/teams/166811/ca/)\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Generated-By: Babel 2.13.0\n"
+
+#: docs/conf.py:94
+msgid "Click to expand"
+msgstr ""
+
+#: docs/conf.py:95
+msgid "Click to collapse"
+msgstr ""
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html:50
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html:53
 msgid "Skip to main content"
 msgstr "Salta al contingut principal"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html:7
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html:64
+msgid "Back to top"
+msgstr ""
+
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html:5
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html:7
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html:5
 #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/search.html:5
 #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/search.html:28
 msgid "Search"
@@ -38,93 +53,89 @@ msgstr "Error"
 msgid "Please activate JavaScript to enable the search functionality."
 msgstr "Activeu JavaScript per habilitar la funcionalitat de cerca."
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html:12
-msgid "Breadcrumbs"
-msgstr "Rutes de navegació"
-
 #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html:13
 msgid "Breadcrumb"
 msgstr "Ruta de navegació"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html:16
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html:17
 msgid "Home"
 msgstr "Inici"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/copyright.html:4
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/copyright.html:5
 #, python-format
 msgid "© <a href=\"%(path)s\">Copyright</a> %(copyright)s."
 msgstr "© <a href=\"%(path)s\">Copyright</a> %(copyright)s."
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/copyright.html:7
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/copyright.html:8
 #, python-format
 msgid "© Copyright %(copyright)s."
 msgstr "© Copyright %(copyright)s."
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html:9
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html:10
 #, python-format
 msgid "Edit on %(provider)s"
 msgstr "Edita a %(provider)s"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html:11
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/edit-this-page.html:12
 msgid "Edit"
 msgstr "Edita"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html:31
-msgid "GitHub"
-msgstr "GitHub"
-
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html:32
-msgid "GitLab"
-msgstr "GitLab"
-
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html:33
-msgid "Bitbucket"
-msgstr "Bitbucket"
-
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html:34
-msgid "Twitter"
-msgstr "Twitter"
-
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:2
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:4
 msgid "Indices"
 msgstr "Índexs"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:9
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:11
 msgid "General Index"
 msgstr "Índex general"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:13
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:15
 msgid "Global Module Index"
 msgstr "Índex Global de Mòduls"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:17
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html:19
 msgid "Python Module Index"
 msgstr "Índex de Mòduls Python"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/last-updated.html:2
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/last-updated.html:4
 #, python-format
 msgid "Last updated on %(last_updated)s."
 msgstr "Última actualització el %(last_updated)s."
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html:5
 #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html:6
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html:7
 msgid "Site Navigation"
 msgstr "Navegació del lloc"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html:4
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html:8
 msgid "On this page"
 msgstr "Continguts de la pàgina"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sidebar-nav-bs.html:2
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/prev-next.html:6
+msgid "previous page"
+msgstr "pàgina anterior"
+
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/prev-next.html:9
+msgid "previous"
+msgstr "anterior"
+
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/prev-next.html:17
+msgid "next page"
+msgstr "pàgina següent"
+
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/prev-next.html:19
+msgid "next"
+msgstr "següent"
+
 #: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sidebar-nav-bs.html:3
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sidebar-nav-bs.html:4
 msgid "Section Navigation"
 msgstr "Navegació de la Secció"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sourcelink.html:4
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sourcelink.html:5
 msgid "Show Source"
 msgstr "Mostra el fitxer d'origen"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sphinx-version.html:3
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/sphinx-version.html:4
 #, python-format
 msgid ""
 "Created using <a href=\"https://www.sphinx-doc.org/\">Sphinx</a> "
@@ -137,7 +148,7 @@ msgstr ""
 msgid "light/dark"
 msgstr "clar/fosc"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-version.html:2
+#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-version.html:3
 #, python-format
 msgid ""
 "Built with the <a href=\"https://pydata-sphinx-"
@@ -148,18 +159,18 @@ msgstr ""
 "theme.readthedocs.io/en/stable/index.html\">Tema PyData Sphinx</a> "
 "%(theme_version)s."
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html:6
-msgid "previous page"
-msgstr "pàgina anterior"
+#~ msgid "Breadcrumbs"
+#~ msgstr "Rutes de navegació"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html:9
-msgid "previous"
-msgstr "anterior"
+#~ msgid "GitHub"
+#~ msgstr "GitHub"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html:17
-msgid "next page"
-msgstr "pàgina següent"
+#~ msgid "GitLab"
+#~ msgstr "GitLab"
+
+#~ msgid "Bitbucket"
+#~ msgstr "Bitbucket"
+
+#~ msgid "Twitter"
+#~ msgstr "Twitter"
 
-#: src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/footer-article/prev-next.html:19
-msgid "next"
-msgstr "següent"