put settings in a drop-down menu

evdokimovm · Aug 29, 2023 · fdac900 · fdac900
1 parent 8965e22
commit fdac900
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 6 deletions.
diff --git a/js/options.js b/js/options.js
@@ -7,6 +7,8 @@ var textarea = document.querySelector('textarea')
 var filename_input = document.querySelector('input[name=filename]')
 var all_windows_checkbox = document.querySelector('input.all_windows')
 var ignore_pinned_checkbox = document.querySelector('input.ignore_pinned')
+var settigns_dropdown = document.querySelector("#settingsDropdown")
+var dropdown_content = settigns_dropdown.querySelector(".settings-dropdown-content")
 
 var copy_button = document.querySelector('.copy')
 var save_button = document.querySelector('.save')
@@ -436,6 +438,12 @@ textarea.addEventListener('input', function () {
     linkPreview()
 })
 
+settigns_dropdown.addEventListener('click', function (e) {
+    if (!dropdown_content.contains(e.target)) {
+        this.classList.toggle('active')
+    }
+})
+
 async function composeSettingsObject() {
     var settings = await promiseWrapper('user_settings', storageGetAllFrom)
 

diff --git a/options.html b/options.html
@@ -140,6 +140,51 @@
 
     select {
         text-transform: capitalize;
+        height: 36px;
+        width: 72px;
+    }
+
+    .groups_list {
+        display: inline-block;
+        margin-left: 10px;
+    }
+
+    .settings-dropdown {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 10px;
+        cursor: pointer;
+    }
+
+    .settings-btn {
+        padding: 7px 17px;
+        border: 1px solid #000;
+        font-weight: bold;
+        color: #000;
+        background-color: transparent;
+    }
+
+    .settings-btn:hover {
+        background-color: #f9f9f9;
+    }
+
+    .settings-dropdown.active .settings-btn {
+        background-color: #f9f9f9;
+    }
+
+    .settings-dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 180px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        padding: 10px;
+        z-index: 1;
+    }
+
+    .settings-dropdown.active .settings-dropdown-content {
+        display: block;
     }
 </style>
 <body>
@@ -160,12 +205,20 @@
                     <button type="button" class="btn btn-common grey import_file">IMPORT FILE</button>
                     <button type="button" class="btn btn-common red delete_file" disabled>DELETE</button>
 
-                    <span>Choose the group: </span><select class="form-select" style="height: 36px; width: 72px;" id="select_group"></select>
-                    <span>|</span>
-                    <span>Ignore pinned: </span><input class="settings ignore_pinned" data-type="pinned" type="checkbox">
-                    <span>|</span>
-                    <span>All windows: </span><input class="settings all_windows" data-type="windows" type="checkbox">
-                    <span>|</span>
+                    <div class="settings-dropdown" id="settingsDropdown">
+                        <button class="settings-btn">Settings</button>
+                        <div class="settings-dropdown-content">
+                            <input class="settings ignore_pinned" data-type="pinned" type="checkbox">
+                            <label for="ignore_pinned">Ignore pinned</label><br>
+                            <input class="settings all_windows" data-type="windows" type="checkbox">
+                            <label for="all_windows">All windows</label><br>
+                        </div>
+                    </div>
+
+                    <div class="groups_list">
+                        <span>Choose the group: </span>
+                        <select class="form-select" id="select_group"></select>
+                    </div>
                 </div>
                 <textarea></textarea>
             </div>