Small search bar style/UX tweaks (#2209)

* Combine name/address + lat-lon search, plus add compact mode for widget-containers * Make sure widget-container respects background color variables. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Wrap toolbar in a widget-container with no header * Fix imports. * Fix typo * Separate LayerManager from Toolbar * Keep the basemap selector resource select field visible when not needed, and fill with "---" * Minor CSS tweaks on container and inspector * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Fix widget removal from the top right layout box * Update unit tests * Add padding around search elements and some other tweaks * Add margin to tabs --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Nathaniel Schmitz <[email protected]>
gee-community · Jan 15, 2025 · 4003328 · 4003328
1 parent 02d01c8
commit 4003328
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/geemap/map_widgets.py b/geemap/map_widgets.py
@@ -1501,18 +1501,22 @@ def import_button_clicked(self):
 
             contents = "".join(code).strip()
             # create_code_cell(contents)
-
+            copy_success = False
             try:
                 import pyperclip
 
                 pyperclip.copy(str(contents))
+                copy_success = True
             except Exception as e:
                 pass
-            dataset_model["additional_html"] = (
-                "<pre>"
-                "# The code has been copied to the clipboard.\n"
-                "# Press Ctrl+V in a new cell to paste it.\n"
-                f"{contents}"
-                "</pre"
-            )
+            if copy_success:
+                dataset_model["additional_html"] = (
+                    "<pre>"
+                    "# The code has been copied to the clipboard.\n"
+                    "# Press Ctrl+V in a new cell to paste it.\n"
+                    f"{contents}"
+                    "</pre"
+                )
+            else:
+                dataset_model["additional_html"] = f"<pre>{contents}</pre"
             self.dataset_model = json.dumps(dataset_model)
diff --git a/js/search_bar.ts b/js/search_bar.ts
@@ -43,12 +43,12 @@ export class SearchBar extends LitWidget<
             }
 
             .input-container {
-                max-width: 340px;
+                max-width: 460px;
                 padding: 5px;
             }
 
             .input-container > p {
-                margin: 5px 3px;
+                margin: 8px 3px;
                 max-width: 230px;
             }
 
@@ -61,7 +61,7 @@ export class SearchBar extends LitWidget<
                 list-style-type: none;
                 margin: 0;
                 margin-bottom: 4px;
-                padding: 0;
+                padding: 8px 0;
             }
 
             label.result {
@@ -72,6 +72,7 @@ export class SearchBar extends LitWidget<
             .import-button, .reset-button {
                 margin: 0 2px 2px 2px;
                 padding: 0 8px;
+                white-space: nowrap;
             }
 
             .dataset-select {
@@ -82,6 +83,7 @@ export class SearchBar extends LitWidget<
             .additional-html-container {
                 max-height: 300px;
                 overflow: auto;
+                padding: 8px 0;
             }
 
             .additional-html-container pre {
@@ -200,9 +202,11 @@ export class SearchBar extends LitWidget<
                 ${results}
             </ul>`);
         }
-        renderedInputs.push(html`<div class="additional-html-container">
-            ${unsafeHTML(locationModel.additional_html)}
-        </div>`);
+        if (locationModel.additional_html) {
+            renderedInputs.push(html`<div class="additional-html-container">
+                ${unsafeHTML(locationModel.additional_html)}
+            </div>`);
+        }
         if (locationModel.search ||
             locationModel.results.length ||
             locationModel.selected) {
@@ -248,7 +252,7 @@ export class SearchBar extends LitWidget<
             @click="${() => {
                 this.model?.send({ type: "click", id: "import" });
             }}">
-            Import
+            Reveal Code
         </button>`;
         const results = html`
             <select
@@ -271,10 +275,12 @@ export class SearchBar extends LitWidget<
             html`<div class="row">
                 ${importButton}
                 ${results}
-            </div>`,
-            html`<div class="additional-html-container">
-                ${unsafeHTML(datasetModel.additional_html)}
             </div>`);
+        if (datasetModel.additional_html) {
+            renderedInputs.push(html`<div class="additional-html-container">
+                ${unsafeHTML(datasetModel.additional_html)}
+            </div>`)
+        }
         return renderedInputs;
     }
 }

diff --git a/js/tab_panel.ts b/js/tab_panel.ts
@@ -82,7 +82,7 @@ export class TabPanel extends LitElement {
             .tab-container button {
                 border-radius: 5px;
                 height: 28px;
-                margin: 2px;
+                margin: 2px 0 2px 8px;
                 user-select: none;
             }