aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKuuuube <61125188+Kuuuube@users.noreply.github.com>2024-06-21 02:01:00 -0400
committerGitHub <noreply@github.com>2024-06-21 06:01:00 +0000
commit1c609d972ae76f8779190d7a3621f77a664a6dec (patch)
treedfcd1d306dfff79e7fabf809c9f1d8aa5fbbbc8e
parent051347488237b8dffd2f0e9c93afb36fca255513 (diff)
Add profile selector to mobile action-popup (#1105)24.6.21.0
-rw-r--r--ext/action-popup.html11
-rw-r--r--ext/css/action-popup.css1
-rw-r--r--ext/js/pages/action-popup-main.js43
3 files changed, 33 insertions, 22 deletions
diff --git a/ext/action-popup.html b/ext/action-popup.html
index 64e3c21f..7b3d3275 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -33,8 +33,8 @@
<div class="nav-button-container">
<button type="button" class="nav-button action-select-profile" title="Change primary profile" hidden>
<span class="icon" data-icon="profile"></span>
- <span class="profile-select-container"><select class="profile-select" id="profile-select">
- <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+ <span class="profile-select-container"><select class="profile-select">
+ <optgroup label="Primary Profile" class="profile-select-option-group"></optgroup>
</select></span>
</button>
<a tabindex="0" class="nav-button action-open-settings" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'>
@@ -70,6 +70,13 @@
<span class="toggle-handle"></span>
</div>
</label>
+ <a tabindex="0" class="link-group action-select-profile">
+ <span class="link-group-icon" data-icon="profile"></span>
+ <span class="link-group-label">Profile</span>
+ <span class="profile-select-container"><select class="profile-select">
+ <optgroup label="Primary Profile" class="profile-select-option-group"></optgroup>
+ </select></span>
+ </a>
<a tabindex="0" class="link-group action-open-settings">
<span class="link-group-icon" data-icon="cog"></span>
<span class="link-group-label">Settings</span>
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index 4cf65076..77238003 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -166,6 +166,7 @@ label {
.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); filter: var(--svg-filter); }
.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); filter: var(--svg-filter); }
.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); filter: var(--svg-filter); }
+.link-group-icon[data-icon=profile] { background-image: url(/images/profile.svg); filter: var(--svg-filter); }
.link-group-label {
vertical-align: middle;
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index 4137d5c3..3cda32db 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -19,7 +19,6 @@
import {ThemeController} from '../app/theme-controller.js';
import {Application} from '../application.js';
import {getAllPermissions, hasRequiredPermissionsForOptions} from '../data/permissions-util.js';
-import {querySelectorNotNull} from '../dom/query-selector.js';
import {HotkeyHelpController} from '../input/hotkey-help-controller.js';
class DisplayController {
@@ -67,9 +66,11 @@ class DisplayController {
this._setupOptions(primaryProfile);
}
- /** @type {HTMLElement} */
- const profileSelect = querySelectorNotNull(document, '.action-select-profile');
- profileSelect.hidden = (profiles.length <= 1);
+ /** @type {NodeListOf<HTMLElement>} */
+ const profileSelect = document.querySelectorAll('.action-select-profile');
+ for (let i = 0; i < profileSelect.length; i++) {
+ profileSelect[i].hidden = (profiles.length <= 1);
+ }
this._updateProfileSelect(profiles, profileCurrent);
@@ -231,23 +232,25 @@ class DisplayController {
* @param {number} profileCurrent
*/
_updateProfileSelect(profiles, profileCurrent) {
- /** @type {HTMLSelectElement} */
- const select = querySelectorNotNull(document, '#profile-select');
- /** @type {HTMLElement} */
- const optionGroup = querySelectorNotNull(document, '#profile-select-option-group');
- const fragment = document.createDocumentFragment();
- for (let i = 0, ii = profiles.length; i < ii; ++i) {
- const {name} = profiles[i];
- const option = document.createElement('option');
- option.textContent = name;
- option.value = `${i}`;
- fragment.appendChild(option);
- }
- optionGroup.textContent = '';
- optionGroup.appendChild(fragment);
- select.value = `${profileCurrent}`;
+ /** @type {NodeListOf<HTMLSelectElement>} */
+ const selects = document.querySelectorAll('.profile-select');
+ /** @type {NodeListOf<HTMLElement>} */
+ const optionGroups = document.querySelectorAll('.profile-select-option-group');
+ for (let i = 0; i < Math.min(selects.length, optionGroups.length); i++) {
+ const fragment = document.createDocumentFragment();
+ for (let j = 0, jj = profiles.length; j < jj; ++j) {
+ const {name} = profiles[j];
+ const option = document.createElement('option');
+ option.textContent = name;
+ option.value = `${j}`;
+ fragment.appendChild(option);
+ }
+ optionGroups[i].textContent = '';
+ optionGroups[i].appendChild(fragment);
+ selects[i].value = `${profileCurrent}`;
- select.addEventListener('change', this._onProfileSelectChange.bind(this), false);
+ selects[i].addEventListener('change', this._onProfileSelectChange.bind(this), false);
+ }
}
/**