Language Chooser dropdown keeps style across different OS

[saymoncoppi]

No description provided.

[saymoncoppi]

Some problem with the markdown

[saymoncoppi]

Hello @fabiocaccamo !

When I wrote the issue 314 I also realized that we could set the dropdown CSS style to keep the same design across different O.S.

Since I was trying to contribute to you and make an improved style on that component for my current projects I discovered that is a native component. It means the style depends on the OS.

[saymoncoppi]

Sources

• https://stackoverflow.com/questions/75552987/why-is-my-dropdown-list-showing-differently-on-phone-than-desktop-and-how-can-i
• https://html.spec.whatwg.org/multipage/rendering.html#native-appearance-2
• https://drafts.csswg.org/css-ui/#native-appearance

[saymoncoppi]

So I decided to develop a dropdown based on this sample to combine solutions to render always the same design.

[saymoncoppi]

Take a look the results:

2023-09-01.11.59.16.mp4

[saymoncoppi]

I believe it could be improved by the team and used on new releases...

Sharing codes

../templates/language_chooser.html

{% load static %}
<script src="{% static 'js/extra_base_site.js' %}"></script>
{% load admin_interface_tags %}
...

../css/extra_base_site.css

#logout-form button {
  color: #747474;
}

#logout-form button:hover {
  color: #333333;
}

.admin-interface .language-chooser {
  display: inline-block;
  position: unset !important;

}

.language-chooser-select-form select {
  margin-top: -9px;
  margin-left: -15px;
  font-size: 11px;
  font-weight: 300;
  outline: none;
  border: 0px;
  border-style: none !important;
  appearance: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  color: #747474;
  border-radius: 0 !important;
}

.language-chooser-select-form::before {
  content: '/';
  font-size: 11px;
  font-weight: 300;
  left: -17px;
  color: #747474;
  display: inline-block;
  position: absolute;
}

.language-chooser-select-form::after {
  content: '';
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #ccc;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  right: -10px;
  bottom: 10px;
}

.language-chooser-select-form select:hover {
  color: #333333;
}

@media (max-width: 768px),
(max-width: 1024px) {
  .language-chooser-select-form select {
    margin-top: 0px !important;
    margin-left: 0px !important;
  }

  .language-chooser-select-form::before {
    left: -1px !important;
    top: 5px !important;
  }
}

.language-chooser-select-form .selector-options {
  list-style: none;
  width: 14px;
  margin-left: -15px;
  margin-top: -7px;
  background: #fff;
  color: #747474;
  border-radius: 0 !important;
  z-index: 9999;
  position: fixed;
  box-shadow:
    rgba(0, 0, 0, 0.14) 0px 4px 8px,
    rgba(0, 0, 0, 0.12) 0px 0px 2px;
}

.language-chooser-select-form .selector-options ul {
  padding-inline: inherit;
  margin-left: -15px;
}

.language-chooser-select-form .selector-options li {
  display: flex;
  width: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 11px;
  font-weight: 300;
  margin-left: -30px;
}

.language-chooser-select-form .selector-options li:hover {
  color: #333333;
}

.active_language {
  font-weight: 600 !important;
}

../js/extra_base_site.js

document.addEventListener('DOMContentLoaded', function () {
  const get_elements = document.querySelectorAll('.language-chooser-select-form');

  get_elements.forEach(form => {
    const select = form.querySelector('select');
    let isDropdownOpen = false; // Variável para rastrear o estado do dropdown

    select.addEventListener('change', e => {
      console.log('changed', e.target.value);
    });

    select.addEventListener('mousedown', e => {
      if (window.innerWidth >= 420) {
        e.preventDefault();

        if (isDropdownOpen) {
          // Se o dropdown estiver aberto, feche-o
          closeDropdown();
        } else {
          const options = select.querySelectorAll('option');
          const dropDown = document.createElement('ul');
          dropDown.className = "selector-options";

          options.forEach(option => {
            const dropDownOption = document.createElement('li');
            dropDownOption.textContent = option.textContent;

            // Adicionar a classe "active" ao <li> correspondente ao <option> ativo
            if (option.value === select.value) {
              dropDownOption.classList.add('active_language');
            }

            dropDownOption.addEventListener('mousedown', (e) => {
              e.stopPropagation();
              select.value = option.value;
              select.dispatchEvent(new Event('change'));
              closeDropdown(); // Feche o dropdown após selecionar uma opção
            });

            dropDown.appendChild(dropDownOption);
          });

          select.parentNode.appendChild(dropDown);

          // Defina o estado do dropdown como aberto
          isDropdownOpen = true;

          // Adicione um evento de clique ao documento para fechar o dropdown
          document.addEventListener('click', clickOutsideDropdown);
        }
      }
    });

    // Função para fechar o dropdown
    function closeDropdown() {
      const dropDown = select.parentNode.querySelector('.selector-options');
      if (dropDown) {
        dropDown.remove();
        isDropdownOpen = false;
        document.removeEventListener('click', clickOutsideDropdown);
      }
    }

    // Função para fechar o dropdown ao clicar fora dele
    function clickOutsideDropdown(e) {
      if (!select.parentNode.contains(e.target)) {
        closeDropdown();
      }
    }
  });
});

[fabiocaccamo]

Hi @saymoncoppi,
I think many people, myself included, prefer native controls instead of custom ones.

Anyway, this is a good idea and I'm open to support a new language chooser control style: "Dropdown".
Feel free to submit a PR!

---

PS. In the CSS, the theme CSS variables should be used:
https://github.com/fabiocaccamo/django-admin-interface#add-theme-support-to-third-party-libraries

[saymoncoppi]

Hello @fabiocaccamo honestly I don't know which is the next step to take. Is it ok for you if we schedule a call to talk about it? Maybe you could teach me what should I do... feel free to call me any time

[merwok]

The next step is making a fork of this repo, cloning it locally, adding an option to https://github.com/fabiocaccamo/django-admin-interface/blob/main/admin_interface/models.py#L138 and adding the markup to https://github.com/fabiocaccamo/django-admin-interface/blob/main/admin_interface/templates/admin_interface/language_chooser.html

[fabiocaccamo]

Here you can find also a step by step guide:
https://github.com/fabiocaccamo/django-admin-interface#testing

[fabiocaccamo]

@saymoncoppi I close this issue because it's not my intention to implement a custom dropdown.