Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BS5: migration follow up #4825

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

BS5: migration follow up #4825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c8fe33a
BS5: add `form-select` class to <select>
nboisteault Oct 1, 2024
710ed6c
BS5: selection tool dropdown and tooltips
nboisteault Oct 1, 2024
a45e995
BS5: migrate remaining dropdowns
nboisteault Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/src/components/ActionSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default class ActionSelector extends HTMLElement {

// Add the options from the actions object
const select = this.querySelector('select');
select.classList.add('form-select');
for (let a in this.actions) {
let action = this.actions[a];
let option = document.createElement("option");
Expand Down
2 changes: 1 addition & 1 deletion assets/src/components/BaseLayers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default class BaseLayers extends HTMLElement {
this._template = () => html`
${mainLizmap.state.baseLayers.baseLayers.length > 1
? keyed(mainLizmap.state.baseLayers.selectedBaseLayerName, html`
<select @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
<select class="form-select" @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
${mainLizmap.state.baseLayers.baseLayers.map((config) =>
html`<option ?selected="${mainLizmap.state.baseLayers.selectedBaseLayerName === config.name}" value="${config.name}">${config.type === BaseLayerTypes.Empty ? lizDict['baselayer.empty.title'] : config.title}</option>`
)}
Expand Down
14 changes: 6 additions & 8 deletions assets/src/components/FeatureToolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,12 @@ export default class FeatureToolbar extends HTMLElement {

${this.isFeatureExportable
? html`<div class="btn-group feature-export">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-toggle="tooltip" data-bs-title="${lizDict['attributeLayers.toolbar.btn.data.export.title']}">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lizDict['attributeLayers.toolbar.btn.data.export.title']}">
<i class="icon-download"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<ul class="dropdown-menu">
${this._downloadFormats.map((format) =>
html`<li><a href="#" @click=${() => this.export(format)}>${format}</a></li>`)}
html`<li><a class="dropdown-item" href="#" @click=${() => this.export(format)}>${format}</a></li>`)}
</ul>
</div>`
: ''
Expand Down Expand Up @@ -104,13 +103,12 @@ export default class FeatureToolbar extends HTMLElement {
${this.editableChildrenLayers.length
? html`
<div class="btn-group feature-create-child" style="margin-left: 0px;">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-title="${lizDict['attributeLayers.toolbar.btn.data.createFeature.title']}">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lizDict['attributeLayers.toolbar.btn.data.createFeature.title']}">
<i class="icon-plus-sign"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu">
${this.editableChildrenLayers.map((child) =>
html`<li><a data-child-layer-id="${child.layerId}" @click=${() => this.createChild(child)}>${child.title}</a></li>`)}
html`<li><a class="dropdown-item" href="#" data-child-layer-id="${child.layerId}" @click=${() => this.createChild(child)}>${child.title}</a></li>`)}
</ul>
</div>
`
Expand Down
2 changes: 1 addition & 1 deletion assets/src/components/MousePosition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default class MousePosition extends HTMLElement {
<button class="btn btn-sm" title="${lizDict['mouseposition.removeCenterPoint']}" @click=${() => this._removeCenterPoint()}><i class="icon-refresh"></i></button>
</div>
<div class="coords-unit">
<select title="${lizDict['mouseposition.select']}" @change=${(event) => { this.displayUnit = event.target.value }}>
<select class="form-select" title="${lizDict['mouseposition.select']}" @change=${(event) => { this.displayUnit = event.target.value }}>
${this._qgisProjectProjectionUnits === 'm' ? html`
<option selected value="m">${lizDict['mouseposition.units.m']}</option>` : ''}
${ ['ft', 'us-ft'].includes(this._qgisProjectProjectionUnits) ? html`
Expand Down
8 changes: 4 additions & 4 deletions assets/src/components/Print.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,12 @@ export default class Print extends HTMLElement {
</tr>
<tr>
<td>
<select id="print-template" @change=${(event) => { this.printTemplate = event.target.value }}>
<select id="print-template" class="form-select" @change=${(event) => { this.printTemplate = event.target.value }}>
${this._printTemplates.map((template, index) => html`<option value=${index}>${template.title}</option>`)}
</select>
</td>
<td>
<select id="print-scale" class="btn-print-scales" .value=${this._printScale} @change=${(event) => { this.printScale = parseInt(event.target.value) }}>
<select id="print-scale" class="btn-print-scales form-select" .value=${this._printScale} @change=${(event) => { this.printScale = parseInt(event.target.value) }}>
${this._printScales.map( scale => html`<option .selected=${scale === this._printScale} value=${scale}>${scale.toLocaleString()}</option>`)}
</select>
</td>
Expand All @@ -157,7 +157,7 @@ export default class Print extends HTMLElement {
${this.printDPIs.length > 1 ? keyed(this.defaultDPI, html`
<div class="print-dpi">
<span>${lizDict['print.toolbar.dpi']}</span>
<select class="btn-print-dpis" .value=${this.defaultDPI} @change=${(event) => { this._printDPI = event.target.value }}>
<select class="btn-print-dpis form-select" .value=${this.defaultDPI} @change=${(event) => { this._printDPI = event.target.value }}>
${this.printDPIs.map( dpi => html`<option ?selected=${dpi === this.defaultDPI} value=${dpi}>${dpi}</option>`)}
</select>
</div>`) : ''}
Expand All @@ -184,7 +184,7 @@ export default class Print extends HTMLElement {
</details>
<div class="flex">
${this.printFormats.length > 1 ? keyed(this.defaultFormat, html`
<select id="print-format" title="${lizDict['print.toolbar.format']}" class="btn-print-format" .value=${this.defaultFormat} @change=${(event) => { this._printFormat = event.target.value }}>
<select id="print-format" title="${lizDict['print.toolbar.format']}" class="btn-print-format form-select" .value=${this.defaultFormat} @change=${(event) => { this._printFormat = event.target.value }}>
${this.printFormats.map( format => html`<option ?selected=${format === this.defaultFormat} value="${format}">${format.toUpperCase()}</option>`)}
</select>`) : ''}
<button id="print-launch" class="btn-print-launch btn btn-primary flex-grow-1" @click=${() => { this._launch() }}>${lizDict['print.launch']}</button>
Expand Down
17 changes: 7 additions & 10 deletions assets/src/components/SelectionTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default class SelectionTool extends HTMLElement {
<div class="menu-content">
<div>${lizDict['selectiontool.toolbar.layer']}</div>
<div>
<select class="selectiontool-layer-list" @change=${ (event) => mainLizmap.selectionTool.allFeatureTypeSelected = event.target.value}>
<select class="selectiontool-layer-list form-select" @change=${ (event) => mainLizmap.selectionTool.allFeatureTypeSelected = event.target.value}>
<optgroup label="${lizDict['selectiontool.toolbar.layers.single']}">
${mainLizmap.selectionTool.layers.map((layer) => html`<option value="${layer.name}">${layer.title}</option>`)}
</optgroup>
Expand All @@ -52,7 +52,7 @@ export default class SelectionTool extends HTMLElement {
</label>
</div>
<div>
<select class="selection-geom-operator" @change=${ (event) => mainLizmap.selectionTool.geomOperator = event.target.value} data-bs-toggle="tooltip" data-bs-title="${lizDict['selectiontool.toolbar.geomOperator']}">
<select class="selection-geom-operator form-select" @change=${ (event) => mainLizmap.selectionTool.geomOperator = event.target.value} data-bs-toggle="tooltip" data-bs-title="${lizDict['selectiontool.toolbar.geomOperator']}">
<option value="intersects">${lizDict['selectiontool.toolbar.geomOperator.intersects']}</option>
<option value="within">${lizDict['selectiontool.toolbar.geomOperator.within']}</option>
<option value="overlaps">${lizDict['selectiontool.toolbar.geomOperator.overlaps']}</option>
Expand Down Expand Up @@ -83,15 +83,14 @@ export default class SelectionTool extends HTMLElement {
</button>
<lizmap-selection-invert></lizmap-selection-invert>
${this.hasAttribute('layer-export') ? html`
<div class="btn-group dropup selectiontool-export" role="group" data-bs-toggle="tooltip" data-bs-title="${mainLizmap.selectionTool.isExportable ? '' : lizDict['switcher.layer.export.warn']}">
<div class="btn-group dropup selectiontool-export" role="group" title="${mainLizmap.selectionTool.isExportable ? '' : lizDict['switcher.layer.export.warn']}">
<button type="button" class="btn btn-sm dropdown-toggle" ?disabled=${ !mainLizmap.selectionTool.isExportable } data-bs-toggle="dropdown" aria-expanded="false">
${lizDict['switcher.layer.export.title']}
<span class="caret"></span>
</button>
<ul class="selectiontool-export-formats dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#" class="btn-export-selection">GeoJSON</a></li>
<li><a href="#" class="btn-export-selection">GML</a></li>
${mainLizmap.selectionTool.exportFormats.map((format) => html`<li><a href="#" class="btn-export-selection">${format}</a></li>`)}
<li><a href="#" class="btn-export-selection dropdown-item">GeoJSON</a></li>
<li><a href="#" class="btn-export-selection dropdown-item">GML</a></li>
${mainLizmap.selectionTool.exportFormats.map((format) => html`<li><a href="#" class="btn-export-selection dropdown-item">${format}</a></li>`)}
</ul>
</div>` : ''
}
Expand All @@ -103,9 +102,7 @@ export default class SelectionTool extends HTMLElement {

// Add tooltip on buttons
// TODO allow tooltip on disabled buttons : https://stackoverflow.com/a/19938049/2000654
$('.menu-content button, .menu-content .selectiontool-export, .selection-geom-operator', this).tooltip({
placement: 'top'
});
$('.selection-geom-operator, .selectiontool-actions .btn', this).tooltip();

// Export
this.querySelectorAll('.btn-export-selection').forEach(exportbtn => {
Expand Down
2 changes: 1 addition & 1 deletion assets/src/components/Tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default class Tooltip extends HTMLElement {
this._tooltipLayersCfgs = mainLizmap.initialConfig.tooltipLayers.layerConfigs;

this._template = () => html`
<select @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
<select class="form-select" @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
<option value="">---</option>
${this._tooltipLayersCfgs.map(tooltipLayerCfg =>
html`<option ?selected=${this._tooltipLayersCfgs.length === 1} value="${tooltipLayerCfg.order}">${mainLizmap.state.layersAndGroupsCollection.getLayerByName(tooltipLayerCfg.name).title}</option>`
Expand Down
4 changes: 2 additions & 2 deletions assets/src/legacy/atlas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ import DOMPurify from 'dompurify';

// Add combobox with all data
home += '<p style="padding:0px 10px;">';
home += '<select id="liz-atlas-select">';
home += '<select id="liz-atlas-select" class="form-select">';
home += '<option value="-1"> --- </option>';
var pkey_field = lizAtlasConfig['primaryKey'];
for (var i in lizAtlasConfig['features_sorted']) {
Expand Down Expand Up @@ -306,7 +306,7 @@ import DOMPurify from 'dompurify';
// Multiple atlas
if (lizAtlasConfigArray.length > 1){
// Build select to choose between atlas layers
atlasHTML = '<i class="icon-globe icon-white" style="margin-right: 4px;vertical-align: baseline;"></i><select id="select-atlas-layer">';
atlasHTML = '<i class="icon-globe icon-white" style="margin-right: 4px;vertical-align: baseline;"></i><select id="select-atlas-layer" class="form-select">';
for (let i = 0; i < lizAtlasConfigArray.length; i++) {
atlasHTML += '<option value="' + lizAtlasConfigArray[i].layerId + '">' + lizMap.config.layers[lizAtlasConfigArray[i].layername]['title'] + '</option>';
}
Expand Down
5 changes: 2 additions & 3 deletions assets/src/legacy/attributeTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1144,7 +1144,7 @@ var lizAttributeTable = function() {
childCreateButtonItems.push(childButtonItem);

// Link parent with the selected features of the child
layerLinkButtonItems.push('<li><a href="#' + lizMap.cleanName(isNToM ? pivotConfig[0] : childLayerName) + '" class="btn-linkFeatures-attributeTable">' + (isNToM ? pivotConfig[1].title : childLayerConfig.title) +'</a></li>' );
layerLinkButtonItems.push('<li><a href="#' + lizMap.cleanName(isNToM ? pivotConfig[0] : childLayerName) + '" class="btn-linkFeatures-attributeTable dropdown-item">' + (isNToM ? pivotConfig[1].title : childLayerConfig.title) +'</a></li>' );
}
}
}
Expand All @@ -1163,9 +1163,8 @@ var lizAttributeTable = function() {
layerLinkButton+= '&nbsp;<div class="btn-group" role="group" >';
layerLinkButton+= ' <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">';
layerLinkButton+= lizDict['attributeLayers.toolbar.btn.data.linkFeatures.title'];
layerLinkButton+= ' <span class="caret"></span>';
layerLinkButton+= ' </button>';
layerLinkButton+= ' <ul class="dropdown-menu" role="menu">';
layerLinkButton+= ' <ul class="dropdown-menu">';
for( var i in layerLinkButtonItems){
var li = layerLinkButtonItems[i];
layerLinkButton+= li;
Expand Down
4 changes: 2 additions & 2 deletions assets/src/legacy/filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ var lizLayerFilterTool = function () {

html += '<div class="menu-content">';
// Add combo box to select the layer
html += '<select id="liz-filter-layer-selector">';
html += '<select id="liz-filter-layer-selector" class="form-select">';
var flayers = {};
for (var o in globalThis['filterConfig']) {
var conf = globalThis['filterConfig'][o];
Expand Down Expand Up @@ -504,7 +504,7 @@ var lizLayerFilterTool = function () {
html += getFormFieldHeader(field_item);

if (field_item.format == 'select') {
html += '<select id="liz-filter-field-' + lizMap.cleanName(field_item.title) + '" class="liz-filter-field-select">';
html += '<select id="liz-filter-field-' + lizMap.cleanName(field_item.title) + '" class="liz-filter-field-select form-select">';
html += '<option value=""> --- </option>';
html += '</select>';
}
Expand Down
4 changes: 2 additions & 2 deletions assets/src/legacy/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -986,7 +986,7 @@ window.lizMap = function() {


// add filter values list
$('#locate-layer-'+layerName).parent().before('<div class="locate-layer"><select id="locate-layer-'+layerName+'-'+locate.filterFieldName+'">'+fOptions+'</select></div><br/>');
$('#locate-layer-'+layerName).parent().before('<div class="locate-layer"><select class="form-select" id="locate-layer-'+layerName+'-'+locate.filterFieldName+'">'+fOptions+'</select></div><br/>');
// listen to filter select changes
$('#locate-layer-'+layerName+'-'+locate.filterFieldName).change(function(){
var filterValue = $(this).children(':selected').val();
Expand Down Expand Up @@ -1141,7 +1141,7 @@ window.lizMap = function() {
var lname = locateByLayerList[l];
var lConfig = config.layers[lname];
var html = '<div class="locate-layer">';
html += '<select id="locate-layer-' + cleanName(lname) + '" class="label">';
html += '<select id="locate-layer-' + cleanName(lname) + '" class="label form-select">';
html += '<option>' + lConfig.title + '...</option>';
html += '</select>';
html += '</div>';
Expand Down
4 changes: 2 additions & 2 deletions assets/src/legacy/switcher-layers-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ var lizLayerActionButtons = function() {
html+= ' <dt>'+lizDict['layer.metadata.style.title']+'</dt>';
html+= '<dd>';
html+= '<input type="hidden" class="styleLayer '+isBaselayer+'" value="'+aName+'">';
html+= '<select class="styleLayer '+isBaselayer+'">';
html+= '<select class="styleLayer form-select '+isBaselayer+'">';
html+= options;
html+= '</select>';
html+= '</dd>';
Expand Down Expand Up @@ -184,7 +184,7 @@ var lizLayerActionButtons = function() {
if( options != '' && layerConfig.typename != undefined) {
html+= ' <dt>'+lizDict['layer.metadata.export.title']+'</dt>';
html+= '<dd>';
html+= '<select class="exportLayer '+isBaselayer+'">';
html+= '<select class="exportLayer form-select '+isBaselayer+'">';
html+= options;
html+= '</select>';
html+= '<button class="btn btn-sm exportLayer '+isBaselayer+'" title="'+lizDict['layer.metadata.export.title']+'" value="'+aName+'"><i class="icon-download"></i></button>';
Expand Down
2 changes: 1 addition & 1 deletion lizmap/app/themes/default/jacl2db_admin/group_create.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</tr>
<tr>
<td><label for="rights-copy">{@acl2.group.copy.label@}</label></td>
<td><select id="rights-copy" name="rights-copy">
<td><select id="rights-copy" name="rights-copy" class="form-select">
<option value=""></option>
{foreach $groups as $group}
<option value="{$group->id_aclgrp}">{$group->name}</option>
Expand Down
2 changes: 1 addition & 1 deletion lizmap/modules/action/templates/action_dock.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<template id="lizmap-action-item-list">
<!-- div containing the select and the selected item description -->
<div class="action-selector-container">
<select class="action-select">
<select class="action-select form-select">
<option value="">-- {@action~action.dock.form.select.emptyItem.label@} -- </option>
</select>
<div class="action-description" data-default-value="{@action~action.dock.action.choose@}">
Expand Down
Loading
Loading