infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

UI: Improve multi OS display #205

Merged
Oleg-Komarov merged 40 commits from ui/multi-os into main 2024-07-16 07:24:07 +02:00
Conversation 1 Commits 40 Files Changed 10 +50 -3
2 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0c5cfc6394 - Show all commits

8
common/static/common/scripts/app.js
View File

@ -100,6 +100,8 @@
const btnInstallAction = document.querySelector('.js-btn-install-action'); const btnInstallAction = document.querySelector('.js-btn-install-action');
const btnInstallGroup = document.querySelector('.js-btn-install-group'); const btnInstallGroup = document.querySelector('.js-btn-install-group');
const dropdownAllVersionsWrapper = document.querySelector('.js-dropdown-all-versions-wrapper');
// Create variables multiple // Create variables multiple
const btnInstallActionItem = document.querySelectorAll('.js-btn-install-action-item'); const btnInstallActionItem = document.querySelectorAll('.js-btn-install-action-item');
@ -107,8 +109,14 @@
return; return;
} }
// Hide dropdownAllVersionsWrapper by default
dropdownAllVersionsWrapper.classList.add('d-none');
// Show multi OS install buttons based on active platform // Show multi OS install buttons based on active platform
if (btnInstallActionItem.length > 1) { if (btnInstallActionItem.length > 1) {
// Show dropdownAllVersionsWrapper
dropdownAllVersionsWrapper.classList.remove('d-none');
btnInstallActionItem.forEach(function(item) { btnInstallActionItem.forEach(function(item) {
// Hide all items by default // Hide all items by default
item.classList.add('d-none'); item.classList.add('d-none');

45
extensions/templates/extensions/detail.html
View File

@ -110,7 +110,7 @@
{# Sidebar #} {# Sidebar #}
<div class="col-md-4"> <div class="col-md-4">
<aside class="is-sticky pt-2"> <aside class="is-sticky pt-2 z-1">
{# Info Summary #} {# Info Summary #}
{% block extension_summary_sidebar %} {% block extension_summary_sidebar %}
@ -282,7 +282,21 @@
<div class="btn-install-drag-group js-btn-install-drag-group mb-2 rounded"> <div class="btn-install-drag-group js-btn-install-drag-group mb-2 rounded">
<button class="btn btn-flex btn-primary btn-install-drag cursor-move js-btn-install-drag w-100" draggable="true"> <button class="btn btn-flex btn-primary btn-install-drag cursor-move js-btn-install-drag w-100" draggable="true">
<i class="i-move"></i> <i class="i-move"></i>
<span>{% trans 'Drag and Drop into Blender' %} <span class="fs-sm">{{ download_item.platform }}</span></span> <span>{% trans 'Drag and Drop into Blender' %}
{% with platform=download_item.platform %}
{% if platform == "linux-x64" %}
<i class="i-linux"></i>
{% elif platform == "macos-arm64" %}
<i class="i-macos"></i>
{% elif platform == "macos-x64" %}
<i class="i-macos"></i>
{% elif platform == "windows-arm64" %}
<i class="i-windows"></i>
{% elif platform == "windows-x64" %}
<i class="i-windows"></i>
{% endif %}
{% endwith %}
</span>
</button> </button>
</div> </div>
<small class="d-block text-center w-100"> <small class="d-block text-center w-100">
@ -293,7 +307,32 @@
</div> </div>
{% endfor %} {% endfor %}
{# TODO: add dropdown for other button install action items #} <div class="dropdown js-dropdown-all-versions-wrapper pt-3">
<button class="btn dropdown-toggle js-dropdown-toggle w-100" data-toggle-menu-id="js-dropdown-all-versions">
<i class="i-download me-1"></i> {% trans 'All versions' %}<i class="i-chevron-down"></i>
</button>
<ul class="dropdown-menu js-dropdown-menu w-100" id="js-dropdown-all-versions">
{% for download_item in download_list %}
<li>
<a class="dropdown-item" download="{{ download_item.name }}" href="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}">
{% with platform=download_item.platform %}
{% if platform == "linux-x64" %}
<i class="i-linux"></i> Linux
{% elif platform == "macos-arm64" %}
<i class="i-macos"></i> macOS <span class="text-muted">Apple Silicon</span>
{% elif platform == "macos-x64" %}
<i class="i-macos"></i> macOS <span class="text-muted">Intel</span>
{% elif platform == "windows-arm64" %}
<i class="i-windows"></i> Windows <span class="text-muted">ARM</span>
{% elif platform == "windows-x64" %}
<i class="i-windows"></i> Windows
{% endif %}
{% endwith %}
</a>
</li>
{% endfor %}
</ul>
</div>
</div> </div>
{# If JavaScript is disabled. #} {# If JavaScript is disabled. #}