Additional UI tweaks

gee-community · Jan 25, 2025 · 49498ba · 49498ba
1 parent 5aa97b5
commit 49498ba
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 13 deletions.
diff --git a/geemap/map_widgets.py b/geemap/map_widgets.py
@@ -781,7 +781,6 @@ def _delete_layer(self) -> None:
         self.host_map.remove_layer(self.layer)
 
 
-@Theme.apply
 class LayerManager(anywidget.AnyWidget):
     """A layer manager widget for geemap."""
 

diff --git a/geemap/toolbar.py b/geemap/toolbar.py
@@ -86,7 +86,6 @@ def _observe_value(self, change: Dict[str, Any]) -> None:
             self.active = False
 
 
-@map_widgets.Theme.apply
 class Toolbar(anywidget.AnyWidget):
     """A toolbar that can be added to the map."""
 

diff --git a/js/container.ts b/js/container.ts
@@ -66,6 +66,13 @@ export class Container extends LitWidget<ContainerModel, Container> {
                 width: 28px;
             }
 
+            .compact-header-button {
+                background: transparent;
+                font-size: 16px;
+                height: 28px;
+                width: 28px;
+            }
+
             .header-text {
                 align-content: center;
                 flex-grow: 1;
@@ -179,7 +186,8 @@ export class Container extends LitWidget<ContainerModel, Container> {
         return html`<button
             class="${classMap({
             'legacy-button': true,
-            'header-button': true,
+            'header-button': !this.compactMode,
+            'compact-header-button': this.compactMode,
             'active': !this.collapsed,
         })}"
             class="legacy-button header-button"

diff --git a/js/inspector.ts b/js/inspector.ts
@@ -40,8 +40,8 @@ export class Inspector extends LitWidget<InspectorModel, Inspector> {
 
             .object-browser {
                 max-height: 300px;
-                min-width: 290px;
                 overflow: auto;
+                width: 290px;
             }
 
             input[type='checkbox'] {

diff --git a/js/layer_manager_row.ts b/js/layer_manager_row.ts
@@ -170,7 +170,7 @@ export class LayerManagerRow extends LitWidget<
                 >
                     <div class="spinner"></div>
                     <span class="close-icon material-symbols-outlined"
-                        >close</span
+                        >delete</span
                     >
                 </button>
             </div>
@@ -186,16 +186,16 @@ export class LayerManagerRow extends LitWidget<
             <div class="row confirm-deletion-container">
                 <span class="legacy-text remove-layer-text">Remove layer?</span>
                 <button
-                    class="legacy-button primary confirm-deletion-button"
-                    @click="${this.confirmDeletion}"
+                    class="legacy-button"
+                    @click="${this.cancelDeletion}"
                 >
-                    Yes
+                    No
                 </button>
                 <button
-                    class="legacy-button primary"
-                    @click="${this.cancelDeletion}"
+                    class="legacy-button primary confirm-deletion-button"
+                    @click="${this.confirmDeletion}"
                 >
-                    No
+                    Yes
                 </button>
             </div>
         `;

diff --git a/js/search_bar.ts b/js/search_bar.ts
@@ -40,10 +40,11 @@ export class SearchBar extends LitWidget<
         css`
             .row {
                 display: flex;
+                gap: 6px;
             }
 
             .input-container {
-                max-width: 460px;
+                max-width: 320px;
             }
 
             .input-container > p {
@@ -52,7 +53,7 @@ export class SearchBar extends LitWidget<
             }
 
             input.search {
-                margin: 2px;
+                margin: 2px 2px 8px 2px;
                 width: calc(100% - 4px);
             }
 
@@ -66,6 +67,7 @@ export class SearchBar extends LitWidget<
             label.result {
                 align-items: center;
                 display: flex;
+                margin-bottom: 4px;
             }
 
             .import-button, .reset-button {