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 +20 -2
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7edfe03ebb - Show all commits

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

@ -101,6 +101,7 @@
const btnInstallGroup = document.querySelector('.js-btn-install-group'); const btnInstallGroup = document.querySelector('.js-btn-install-group');
const dropdownAllVersionsItemDot = document.querySelectorAll('.js-dropdown-all-versions-item-dot'); const dropdownAllVersionsItemDot = document.querySelectorAll('.js-dropdown-all-versions-item-dot');
const dropdownAllVersionsItemIcon = document.querySelectorAll('.js-dropdown-all-versions-item-icon');
const dropdownAllVersionsWrapper = document.querySelector('.js-dropdown-all-versions-wrapper'); const dropdownAllVersionsWrapper = document.querySelector('.js-dropdown-all-versions-wrapper');
// Create variables multiple // Create variables multiple
@ -115,7 +116,6 @@
.then((values) => { .then((values) => {
// Extract the architecture value // Extract the architecture value
const arch = values.architecture; const arch = values.architecture;
// Check if the architecture is ARM // Check if the architecture is ARM
if (arch.toLowerCase().includes('arm')) { if (arch.toLowerCase().includes('arm')) {
return true; return true;
@ -161,6 +161,11 @@
item.classList.add('d-none'); item.classList.add('d-none');
}); });
// Style dropdownAllVersionsItemIcon by default
dropdownAllVersionsItemIcon.forEach(function(item) {
item.classList.add('text-muted');
});
// Get item platform // Get item platform
const itemPlatform = item.getAttribute('data-platform'); const itemPlatform = item.getAttribute('data-platform');
const itemPlatformBase = itemPlatform.split('-')[0]; const itemPlatformBase = itemPlatform.split('-')[0];
@ -182,6 +187,7 @@
} }
}); });
// TODO: refactor and DRY code
dropdownAllVersionsItemDot.forEach(function(item) { dropdownAllVersionsItemDot.forEach(function(item) {
// TODO: create named function to not repeat this (optional) // TODO: create named function to not repeat this (optional)
// Get item platform // Get item platform
@ -194,6 +200,18 @@
item.classList.remove('d-none'); item.classList.remove('d-none');
} }
}); });
dropdownAllVersionsItemIcon.forEach(function(item) {
// Get item platform
const itemPlatform = item.getAttribute('data-platform');
const itemPlatformBase = itemPlatform.split('-')[0];
const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
// Show dropdownAllVersionsItemIcon if item platform matches active platform
if (itemPlatformBasePrefix.startsWith(activePlatformPrefix)) {
item.classList.remove('text-muted');
}
});
} }
// Show btnInstallAction // Show btnInstallAction

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

@ -305,7 +305,7 @@
{% with platform=download_item.platform %} {% with platform=download_item.platform %}
<span class="dropdown-all-versions-item-dot js-dropdown-all-versions-item-dot" data-platform="{{ platform.name_first_word|lower|slice:"3" }}"></span> <span class="dropdown-all-versions-item-dot js-dropdown-all-versions-item-dot" data-platform="{{ platform.name_first_word|lower|slice:"3" }}"></span>
<span> <span>
<i class="i-{{ platform.name_first_word|lower }} me-0"></i> {{ platform.name_first_word }} <span class="text-muted">{{ platform.name_rest}}</span> <i class="i-{{ platform.name_first_word|lower }} js-dropdown-all-versions-item-icon me-0" data-platform="{{ platform.name_first_word|lower|slice:"3" }}"></i> {{ platform.name_first_word }} <span class="text-muted">{{ platform.name_rest}}</span>
</span> </span>
{% endwith %} {% endwith %}
<span class="text-muted">{{ download_item.size|filesizeformat }}</span> <span class="text-muted">{{ download_item.size|filesizeformat }}</span>