[#181] rename hideOperations / resetOperations to more semantic name

src/web/Manager.mjs

@@ -145,7 +145,7 @@ class Manager {
         // Operations
         this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);
         this.addDynamicListener(".op-list li.operation", "dblclick", this.ops.operationDblclick, this.ops);
-        document.getElementById("reset-operations").addEventListener("click", this.ops.resetOperations.bind(this.ops));
+        document.getElementById("close-operations-dropdown").addEventListener("click", this.ops.closeOperationsDropdown.bind(this.ops));
         document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
         document.getElementById("save-favourites").addEventListener("click", this.ops.saveFavouritesClick.bind(this.ops));
         document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops));

src/web/html/index.html

@@ -203,8 +203,8 @@
                         <span class="pane-controls hide-on-maximised-output">
                             <button type="button"
                                     class="btn bmd-btn-icon mobile-only hidden"
-                                    id="reset-operations"
+                                    id="close-operations-dropdown"
-                                    title="Reset operations">
+                                    title="Close dropdown">
                                 <i class="material-icons">close</i>
                             </button>
                         </span>

src/web/stylesheets/components/operations/_operations.css

@@ -20,7 +20,7 @@
     border-bottom: 1px solid var(--primary-border-colour);
 }
 
-#reset-operations.hidden,
+#close-operations-dropdown.hidden,
 #search-results.hidden,
 #categories.hidden {
     z-index: -10;
@@ -32,6 +32,7 @@
         border-bottom: none;
     }
 
+    /* On desktop UI, the dropdown is always open */
     #search-results.hidden,
     #categories.hidden {
         z-index: initial;

src/web/waiters/OperationsWaiter.mjs

@@ -28,6 +28,7 @@ class OperationsWaiter {
         this.removeIntent = false;
     }
 
+
     /**
      * Handler for search events.
      * Finds operations which match the given search term and displays them under the search box.
@@ -35,34 +36,31 @@ class OperationsWaiter {
      * @param {event} e
      */
     searchOperations(e) {
-        let ops, selected, hideOperations, categories, searchResults;
+        let ops, selected;
+
+        // 'close' button in Operations component mobile UI
+        const closeOperationsDropdown = document.getElementById("close-operations-dropdown");
+        const categories = document.getElementById("categories");
+        const searchResults = document.getElementById("search-results");
 
         if (e.type === "click" && !e.target.value.length){
-            categories = document.getElementById("categories");
-            hideOperations = document.getElementById("reset-operations");
-            searchResults = document.getElementById("search-results" );
-
             this.app.setVisibility(categories, true);
-            this.app.setVisibility(hideOperations, true);
+            this.app.setVisibility(closeOperationsDropdown, true);
         }
 
         if (e.type === "keyup"){
-            categories = document.getElementById("categories");
-            hideOperations = document.getElementById("reset-operations");
-            searchResults = document.getElementById("search-results" );
-
             if ( e.target.value.length === 0 ) {
                 this.app.setVisibility(categories, true);
-                this.app.setVisibility(hideOperations, true);
+                this.app.setVisibility(closeOperationsDropdown, true);
             } else {
                 this.app.setVisibility(categories, true );
                 this.app.setVisibility(searchResults, true );
-                this.app.setVisibility(hideOperations, true );
+                this.app.setVisibility(closeOperationsDropdown, true );
             }
         }
 
         if (e.type === "keyup" && e.keyCode === 27 ) { // Escape
-            this.resetOperations();
+            this.closeOperationsDropdown();
         }
 
         if (e.type === "search" || e.keyCode === 13) { // Search or Return
@@ -301,13 +299,13 @@ class OperationsWaiter {
      * Hide any operation lists ( #categories or #search-results ) and the reset-operations button itself,
      * clear any search input
      */
-    resetOperations(){
+    closeOperationsDropdown(){
-        let search, categories, searchResults, resetOperations;
+        let search, categories, searchResults, closeOperationsDropdown;
 
         search = document.getElementById("search");
         categories = document.getElementById( "categories");
         searchResults = document.getElementById( "search-results");
-        resetOperations = document.getElementById("reset-operations");
+        closeOperationsDropdown = document.getElementById("close-operations-dropdown");
 
         // if any input remains in #search, clear it
         if (search.value.length) {
@@ -316,7 +314,7 @@ class OperationsWaiter {
 
         this.app.setVisibility(categories, false );
         this.app.setVisibility(searchResults, false );
-        this.app.setVisibility(resetOperations, false );
+        this.app.setVisibility(closeOperationsDropdown, false );
     }
 
     /**