Add language chooser control option (default select, minimal select). #136

admin_interface/admin.py

@@ -45,6 +45,7 @@ class ThemeAdmin(admin.ModelAdmin):
                 "classes": ("wide",),
                 "fields": (
                     "language_chooser_active",
+                    "language_chooser_control",
                     "language_chooser_display",
                 ),
             },

admin_interface/migrations/0025_theme_language_chooser_control.py

@@ -0,0 +1,24 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("admin_interface", "0024_remove_theme_css"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="theme",
+            name="language_chooser_control",
+            field=models.CharField(
+                choices=[
+                    ("default-select", "Default Select"),
+                    ("minimal-select", "Minimal Select"),
+                ],
+                default="select",
+                max_length=20,
+                verbose_name="control",
+            ),
+        ),
+    ]

admin_interface/models.py

@@ -143,6 +143,16 @@ class Theme(models.Model):
     language_chooser_active = models.BooleanField(
         default=True, verbose_name=_("active")
     )
+    language_chooser_control_choices = (
+        ("default-select", _("Default Select")),
+        ("minimal-select", _("Minimal Select")),
+    )
+    language_chooser_control = models.CharField(
+        max_length=20,
+        choices=language_chooser_control_choices,
+        default="default-select",
+        verbose_name=_("control"),
+    )
     language_chooser_display_choices = (
         ("code", _("code")),
         ("name", _("name")),

admin_interface/static/admin_interface/css/language-chooser.css

@@ -15,15 +15,65 @@
 @media (min-width: 1024px) {
     .admin-interface .language-chooser {
         position: static;
-        float: right;
         margin-left: 20px;
     }
 }
 
-.admin-interface .language-chooser-hidden-form {
+.admin-interface .language-chooser .language-chooser-hidden-form {
     display: none;
 }
 
-.admin-interface .language-chooser-select-form {
+.admin-interface .language-chooser .language-chooser-select-form {
     display: inline-block;
+    position: relative;
+    z-index: 0;
+}
+
+.admin-interface .language-chooser select {
+    width: auto;
+    min-width: auto;
+}
+
+.admin-interface .language-chooser.minimal .language-chooser-select-form::after {
+    content: "";
+    position: absolute;
+    right: 2px;
+    top: 50%;
+    border: solid var(--admin-interface-header-text-color);
+    border-width: 0px 0px 1px 1px;
+    display: inline-block;
+    padding: 2px;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    pointer-events: none;
+    margin-top: -4px;
+}
+
+.admin-interface .language-chooser.minimal .language-chooser-select-form:hover select {
+    border-bottom: 1px solid transparent;
+    color: var(--admin-interface-header-link-hover-color);
+}
+
+.admin-interface .language-chooser.minimal select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 0;
+    color: var(--admin-interface-header-link-color);
+    cursor: pointer;
+    font-weight: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+    height: auto;
+    margin: 0;
+    padding: 0 12px 0 0;
+}
+
+@-moz-document url-prefix() {
+    .admin-interface .language-chooser.minimal select {
+        text-indent: -1px !important;
+    }
 }

admin_interface/templates/admin/base_site.html

@@ -165,9 +165,15 @@ flat-theme admin-interface
 
 {% block welcome-msg %}
 {% get_admin_interface_theme as theme %}
+{% if theme.env_visible_in_header %}<span class="environment-label {{ theme.env_name }}">{{ theme.env_name }}</span><br>{% endif %}{{ block.super }}<br>
+{{ block.super }}
+{% endblock %}
+
+{% block userlinks %}
+{{ block.super }}
+{% get_admin_interface_theme as theme %}
 {% if theme.language_chooser_active %}
     {% get_admin_interface_languages as languages %}
     {% include "admin_interface/language_chooser.html" %}
 {% endif %}
-{% if theme.env_visible_in_header %}<span class="environment-label {{ theme.env_name }}">{{ theme.env_name }}</span><br>{% endif %}{{ block.super }}<br>
 {% endblock %}

admin_interface/templates/admin_interface/language_chooser.html

@@ -1,7 +1,7 @@
 {% load admin_interface_tags %}
 
 {% if languages %}
-<div class="language-chooser">
+<div class="language-chooser {% if theme.language_chooser_control == 'minimal-select' %}minimal {% endif %}">
     {% for language in languages %}
     <form class="language-chooser-hidden-form" id="language-chooser-hidden-form-{{ language.code }}" action="{{ language.activation_url }}" method="POST">
         {% csrf_token %}