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
duckduckgo · Jan 9, 2024 · fa8ad58 · fa8ad58
1 parent d41f4c6
commit fa8ad58
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 33 deletions.
diff --git a/shared/html/list-editor.html b/shared/html/list-editor.html
@@ -1,44 +1,81 @@
+<!--
+   Copyright (C) 2021 DuckDuckGo, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+-->
+
 <!DOCTYPE html>
 <html>
-
 <head>
   <meta charset="utf-8">
-  <title>DDG List Editor</title>
+  <title>DuckDuckGo List Editor</title>
+
+  <link rel="stylesheet" href="../public/css/base.css">
+
   <style type="text/css">
-    @font-face {
-      font-family: 'DDG_ProximaNova';
-      src: url('../public/font/ProximaNova-Reg-webfont.woff') format('woff');
-      font-weight: normal;
-      font-style: normal;
+    h1 {
+      font-size: 2em;
     }
-
-    @font-face {
-      font-family: 'DDG_ProximaNova';
-      src: url('../public/font/ProximaNova-Sbold-webfont.woff') format('woff');
-      font-weight: 600;
-      font-style: bold;
+    textarea.frm__text {
+      font-family: monospace;
+      font-size: 12px;
+      height: 600px;
+    }
+    .page-container {
+      margin: 1em auto 0;
+      max-width: 800px;
+    }
+
+    /* Style for the button group */
+    .frm__btn-group {
+        display: flex;
     }
 
-    body {
-      font-family: 'DDG_ProximaNova';
-      color: #000
+    /* Styles for the buttons acting as tabs */
+    .frm__btn-group button {
+        border-bottom: 2px solid #e0e0e0;
+        border-radius: 4px 4px 0 0;
+        flex: 1;
+        padding: 4px;
+        text-transform: uppercase;
+    }
+    .frm__btn-group button:not(:last-child) {
+      margin-right: 4px;
     }
 
-    textarea {
-      width: 80%;
-      height: 600px;
+    /* Style for selected tab */
+    .frm__btn-group button.selected {
+        border-bottom: 2px solid #60a5da;
+        font-weight: bold;
     }
+
   </style>
 </head>
 
 <body>
-  <select id="list-picker"></select>
-  <div id="protections">
-    <textarea id="list-content"></textarea>
+  <div class="page-container">
+      <h1>DuckDuckGo List Editor</h1>
+
+      <div id="protections" class="padded--top">
+        <div id="list-picker" class="frm__btn-group"></div>
+        <textarea id="list-content" class="frm__text form__textarea"></textarea>
+      </div>
+
+      <button id="save" class="frm__btn btn">Save</button>
+      <button id="reload" class="frm__btn btn">Load remote version</button>
   </div>
-  <button id="save">Save</button>
-  <button id="reload">Load remote version</button>
 
   <script src="/public/js/list-editor.js" type="module"></script>
 </body>
-</html>
+</html>
diff --git 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)