maplibre-preview 1.3.7 → 1.3.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e8b7e6d3882215e2027f65d54d9e06c580674d09e11c7099a8713de14979100
-  data.tar.gz: 74975af297edce53fe68f87621be8104936f17969afbed60a241065f46e6c702
+  metadata.gz: 576fc35a947103556613fb983552a7fea7045b5109762b666ff4541dc08a3fb1
+  data.tar.gz: 91d004357c42439be1206b8d732834f5ed4b176ca88d2461c1a243a53c2a2564
 SHA512:
-  metadata.gz: 6735dbe8cce4882f933922a6f4cf9a5ce6de961e128e21f671f21f2b38067f0fb2aef5507e404c8aba7fab8fb6e8db9b3925edd618a1c399d37893b4465f458d
-  data.tar.gz: f667f936f515cbd8390abd5dadbcebfdf61a29572feed3496361a08d941f32a6d0acf6f75949c9bff537f56213d60172baebd0537f1687eee63ed2de96e8c45f
+  metadata.gz: be4c9c01fa9268120f9faa29001b571774dcadc03d190c3bf619753c06a62cd76da891d89c44f9a23eb7255863ac24c98778c9a7cbb6bc7cee86705451ada748
+  data.tar.gz: a0ca0a43e7fe67801a51e730303559eb6af9718e15d145bdd14a3d77e0e22f6eed48ab355203cb6088462954ac57d47d2dcd1de121d2fa96ee76acf38b3fbc6e

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [1.3.9] - 2025-11-19
+
+### Changed
+- **Version info display** - removed service name, kept only version number
+- **Version info styling** - repositioned to bottom-right corner with gray background, compact padding, subtle colors
+
+### Added
+- **Collapsible layer controls panel** - added collapse/expand button with arrow icon for layer controls panel
+
 ## [1.3.7] - 2025-10-29
 
 ### Added

data/lib/maplibre-preview/version.rb

@@ -1,3 +1,3 @@
 module MapLibrePreview
-  VERSION = '1.3.7'
+  VERSION = '1.3.9'
 end

data/lib/maplibre-preview/views/maplibre_layout.slim

@@ -154,11 +154,36 @@ html
       | }
       | .controls a { color: #6897bb; text-decoration: none; margin-right: 15px; }
       | .controls a:hover { text-decoration: underline; }
-      | .layer-controls {
+      | .layer-controls-wrapper {
       |   position: absolute; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1000;
-      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; padding: 15px;
+      |   display: flex; align-items: center; gap: 0;
+      | }
+      | .layer-controls {
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555; border-right: none; padding: 15px;
       |   border-radius: 4px; color: #a9b7c6; display: flex; flex-direction: column; gap: 6px;
-      |   max-width: 300px; max-height: 80vh;
+      |   max-width: 300px; max-height: 80vh; transition: max-width 0.2s;
+      |   overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 1;
+      | }
+      | .layer-controls.collapsed {
+      |   max-width: 0; padding: 15px 0; border: none; opacity: 0; pointer-events: none;
+      | }
+      | .layer-controls-toggle {
+      |   background: rgba(60, 63, 65, 0.95); border: 1px solid #555555;
+      |   border-left: none; border-radius: 0 4px 4px 0; padding: 8px 4px;
+      |   color: #a9b7c6; cursor: pointer; display: flex; align-items: center; justify-content: center;
+      |   width: 18px; height: auto; min-height: 60px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); order: 2;
+      | }
+      | .layer-controls-toggle:hover {
+      |   background: rgba(75, 77, 79, 0.95); color: #ffc66d; border-color: #666666;
+      | }
+      | .layer-controls-wrapper.collapsed .layer-controls-toggle {
+      |   order: 0; border-left: 1px solid #555555; border-right: 1px solid #555555; border-radius: 4px;
+      | }
+      | .layer-controls-wrapper.collapsed .toggle-icon {
+      |   transform: rotate(180deg);
+      | }
+      | .toggle-icon {
+      |   font-size: 12px; font-weight: bold; transition: transform 0.2s;
       | }
       | .mode-switcher {
       |   display: flex; gap: 2px; margin-bottom: 10px; background: #3c3f41;
@@ -325,23 +350,19 @@ html
       | .profile-tooltip-circle { fill: #ff0000; r: 4; }
       | .profile-tooltip-text { text-anchor: middle; fill: #ff0000; font-size: 14px; }
       | .version-info {
-      |   position: fixed; bottom: 10px; right: 10px; z-index: 1000;
-      |   color: #a9b7c6; font-size: 13px; line-height: 1.3;
-      |   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-      |   user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
-      | }
-      | .version-info-title {
-      |   color: #ffc66d; font-weight: bold;
-      |   font-size: 12px;
+      |   position: fixed; bottom: 0; right: 0; z-index: 1000;
+      |   background: rgba(60, 63, 65, 0.85); border: none; border-radius: 4px 0 0 0;
+      |   padding: 4px 8px; backdrop-filter: blur(5px);
+      |   line-height: 1.2; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
       | }
       | .version-info-version {
-      |   color: #6897bb; font-family: 'Courier New', monospace; text-decoration: none;
+      |   color: #808080; font-family: 'Courier New', monospace; text-decoration: none;
       |   transition: color 0.2s ease;
-      |   font-size: 13px;
+      |   font-size: 11px;
       |   user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto;
       | }
       | .version-info-version:hover {
-      |   color: #7aa8cc; text-decoration: underline;
+      |   color: #a9b7c6; text-decoration: none;
       | }
   body
     .container

data/lib/maplibre-preview/views/maplibre_map.slim

@@ -10,33 +10,35 @@ ruby:
       .progress-fill
 
 - if style_name || external_style_url || options[:style_url]
-  .layer-controls
-    .mode-switcher
-      button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
-      button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
-    button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
-    button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
-    button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
-
-    #filters-panel.control-panel.active
-      .control-panel-header
-        button.control-button onclick="toggleAllFilters()" Toggle All Filters
-        button.control-button onclick="toggleBasemap()" Show/Hide Basemap
-      .control-panel-content
-        #filter-buttons
-
-    #layers-panel.control-panel
-      .control-panel-header
-        button.control-button onclick="toggleAllLayers()" Toggle All Layers
-        button.control-button onclick="toggleBasemap()" Show/Hide Basemap
-      .control-panel-content
-        #layer-buttons
+  .layer-controls-wrapper
+    .layer-controls id="layer-controls"
+      .mode-switcher
+        button.mode-button.active id="mode-filters" onclick="switchMode(this, 'filters')" Filters
+        button.mode-button id="mode-layers" onclick="switchMode(this, 'layers')" Layers
+      button.control-button onclick="toggleHoverMode()" id="hover-mode-btn" Hover Mode
+      button.control-button onclick="toggleProfileMode()" id="profile-mode-btn" style="display: none;" Elevation Profile
+      button.control-button onclick="toggleAntialias()" id="antialias-btn" Antialias
+
+      #filters-panel.control-panel.active
+        .control-panel-header
+          button.control-button onclick="toggleAllFilters()" Toggle All Filters
+          button.control-button onclick="toggleBasemap()" Show/Hide Basemap
+        .control-panel-content
+          #filter-buttons
+
+      #layers-panel.control-panel
+        .control-panel-header
+          button.control-button onclick="toggleAllLayers()" Toggle All Layers
+          button.control-button onclick="toggleBasemap()" Show/Hide Basemap
+        .control-panel-content
+          #layer-buttons
+    button.layer-controls-toggle id="layer-controls-toggle" onclick="toggleLayerControls()" title="Collapse/Expand Panel"
+      span.toggle-icon ▶
 
 #map-container
   #map.map-layer data-style-url="#{style_url}"
 
   #version-info.version-info
-    span.version-info-title MapLibre Preview 
     a.version-info-version href="https://github.com/artyomb/maplibre-preview" target="_blank" v#{MapLibrePreview::VERSION}
 
   #performance-panel.performance-overlay
@@ -855,6 +857,18 @@ javascript:
         btn.className = `control-button ${antialiasEnabled ? 'active' : 'inactive'}`;
     };
 
+    let layerControlsCollapsed = false;
+
+    const toggleLayerControls = () => {
+        const wrapper = document.querySelector('.layer-controls-wrapper');
+        const controls = document.getElementById('layer-controls');
+        if (!wrapper || !controls) return;
+
+        layerControlsCollapsed = !layerControlsCollapsed;
+        controls.classList.toggle('collapsed', layerControlsCollapsed);
+        wrapper.classList.toggle('collapsed', layerControlsCollapsed);
+    };
+
     window.switchMode = switchMode;
     window.toggleBasemap = toggleBasemap;
     window.toggleHoverMode = toggleHoverMode;
@@ -863,6 +877,7 @@ javascript:
     window.togglePerformancePanel = togglePerformancePanel;
     window.toggleProfileMode = toggleProfileMode;
     window.toggleAntialias = toggleAntialias;
+    window.toggleLayerControls = toggleLayerControls;
     window.hideProfile = hideProfile;
 
     initializeMap();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: maplibre-preview
 version: !ruby/object:Gem::Version
-  version: 1.3.7
+  version: 1.3.9
 platform: ruby
 authors:
 - Alexander Ludov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-10-29 00:00:00.000000000 Z
+date: 2025-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack