From fa8ad58aed4f147d2f227dd084f5b1fa1be9164a Mon Sep 17 00:00:00 2001 From: Daniel Davis Date: Tue, 9 Jan 2024 17:58:10 +0900 Subject: [PATCH] Update list editor with tabs and improved UI (#2407) * Update list-editor.html to use tabs and improved design * Update list-editor.js to handle tabs instead of dropdown * Update list-editor.js to fix lint failures --- shared/html/list-editor.html | 87 ++++++++++++++++++++++--------- shared/js/devtools/list-editor.js | 21 +++++--- 2 files changed, 75 insertions(+), 33 deletions(-) diff --git a/shared/html/list-editor.html b/shared/html/list-editor.html index 324dd5aeb9..1a9dbf25d5 100644 --- a/shared/html/list-editor.html +++ b/shared/html/list-editor.html @@ -1,44 +1,81 @@ + + - - DDG List Editor + DuckDuckGo List Editor + + + - -
- +
+

DuckDuckGo List Editor

+ +
+
+ +
+ + +
- - - \ No newline at end of file + diff --git a/shared/js/devtools/list-editor.js b/shared/js/devtools/list-editor.js index 257023d106..73cd182808 100644 --- a/shared/js/devtools/list-editor.js +++ b/shared/js/devtools/list-editor.js @@ -13,19 +13,24 @@ function getListFormat (name) { // build switcher options lists.forEach(({ name }) => { - const option = document.createElement('option') - option.value = name - option.innerText = name - listPicker.appendChild(option) + const button = document.createElement('button') + button.innerText = name + button.classList.add('silver-bg') + button.addEventListener('click', listSwitcher) + listPicker.appendChild(button) }) -function listSwitcher () { - selected = listPicker.selectedOptions[0].value +function listSwitcher (event) { + document.querySelectorAll('#list-picker button').forEach((btn) => { + btn.classList.remove('selected') + }) + event.target.classList.add('selected') + selected = event.target.innerText.toLowerCase() loadList(selected) saveButton.removeAttribute('disabled') } -listPicker.addEventListener('change', listSwitcher) -listSwitcher() + +document.querySelector('#list-picker button').click() function sendMessage (messageType, options, callback) { chrome.runtime.sendMessage({ messageType, options }, callback)