kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 09:41:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add tooltips to map controls

Browse source
This commit is contained in:
Eugene Burmakin 2025-10-15 12:01:51 +02:00
parent 44cbfff8ff
commit e3c6da1332
5 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/builds/tailwind.css
View file

File diff suppressed because one or more lines are too long

6
app/assets/stylesheets/leaflet_theme.css
View file

@ -228,3 +228,9 @@
.leaflet-bottom.leaflet-right { .leaflet-bottom.leaflet-right {
padding-right: 10px !important; padding-right: 10px !important;
} }
/* DaisyUI tooltips on map buttons - ensure they appear above date navigation (z-index: 9999) */
.tooltip:before,
.tooltip:after {
z-index: 10000 !important;
}

8
app/javascript/controllers/maps_controller.js
View file

@ -728,8 +728,9 @@ export default class extends BaseController {
// Define the custom control // Define the custom control
const SettingsControl = L.Control.extend({ const SettingsControl = L.Control.extend({
onAdd: (map) => { onAdd: (map) => {
const button = L.DomUtil.create('button', 'map-settings-button'); const button = L.DomUtil.create('button', 'map-settings-button tooltip tooltip-right');
button.innerHTML = '⚙️'; // Gear icon button.innerHTML = '⚙️'; // Gear icon
button.setAttribute('data-tip', 'Settings');
// Style the button with theme-aware styling // Style the button with theme-aware styling
applyThemeToButton(button, this.userTheme); applyThemeToButton(button, this.userTheme);
@ -763,7 +764,9 @@ export default class extends BaseController {
}, },
onAdd: function(map) { onAdd: function(map) {
const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control'); const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
const button = L.DomUtil.create('button', 'map-info-toggle-button', container); const button = L.DomUtil.create('button', 'map-info-toggle-button tooltip tooltip-right', container);
button.setAttribute('data-tip', 'Toggle footer visibility');
// Lucide info icon // Lucide info icon
button.innerHTML = ` button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info">
@ -772,7 +775,6 @@ export default class extends BaseController {
<path d="M12 8h.01"></path> <path d="M12 8h.01"></path>
</svg> </svg>
`; `;
button.title = 'Toggle footer visibility';
// Style the button with theme-aware styling // Style the button with theme-aware styling
applyThemeToButton(button, controller.userTheme); applyThemeToButton(button, controller.userTheme);

6
app/javascript/maps/map_controls.js
View file

@ -10,12 +10,12 @@ import { applyThemeToButton } from "./theme_utils";
* @param {String} title - Button title/tooltip * @param {String} title - Button title/tooltip
* @param {String} userTheme - User's theme preference ('dark' or 'light') * @param {String} userTheme - User's theme preference ('dark' or 'light')
* @param {Function} onClickCallback - Callback function to execute when button is clicked * @param {Function} onClickCallback - Callback function to execute when button is clicked
* @returns {HTMLElement} Button element * @returns {HTMLElement} Button element with tooltip
*/ */
function createStandardButton(className, svgIcon, title, userTheme, onClickCallback) { function createStandardButton(className, svgIcon, title, userTheme, onClickCallback) {
const button = L.DomUtil.create('button', className); const button = L.DomUtil.create('button', `${className} tooltip tooltip-left`);
button.innerHTML = svgIcon; button.innerHTML = svgIcon;
button.title = title; button.setAttribute('data-tip', title);
// Apply standard button styling // Apply standard button styling
applyThemeToButton(button, userTheme); applyThemeToButton(button, userTheme);

2
app/views/map/index.html.erb
View file

@ -19,7 +19,7 @@
<!-- Expandable Panel (hidden on mobile by default, always visible on desktop) --> <!-- Expandable Panel (hidden on mobile by default, always visible on desktop) -->
<div <div
data-map-controls-target="panel" data-map-controls-target="panel"
class="hidden lg:!block bg-base-100 bg-opacity-95 rounded-lg shadow-lg p-4 mt-2 lg:mt-0"> class="hidden lg:!block bg-base-100 bg-opacity-95 rounded-lg shadow-lg p-4 mt-2 lg:mt-0 scale-80">
<%= form_with url: map_path(import_id: params[:import_id]), method: :get do |f| %> <%= form_with url: map_path(import_id: params[:import_id]), method: :get do |f| %>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 lg:items-end"> <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 lg:items-end">
<div class="w-full lg:w-1/12"> <div class="w-full lg:w-1/12">