From baba9ce661476c0143ef8792737c13721e347c55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Wed, 10 Aug 2022 10:00:18 +0200
Subject: [PATCH] make label clickable, change var names & increase disabled
checkboxes contrast
---
.../FeaturesListAndMap/FeatureListTable.vue | 30 +++++++++++++------
.../FeaturesListAndMapFilters.vue | 4 +--
src/store/modules/feature.store.js | 2 +-
src/views/Project/FeaturesListAndMap.vue | 6 +++-
4 files changed, 29 insertions(+), 13 deletions(-)
diff --git a/src/components/Project/FeaturesListAndMap/FeatureListTable.vue b/src/components/Project/FeaturesListAndMap/FeatureListTable.vue
index d8cd0573..006a27a2 100644
--- a/src/components/Project/FeaturesListAndMap/FeatureListTable.vue
+++ b/src/components/Project/FeaturesListAndMap/FeatureListTable.vue
@@ -2,38 +2,44 @@
<div>
<div class="ui form">
<div class="inline fields">
- <label>Mode de sélection :</label>
+ <label
+ data-tooltip="Choisir un type de sélection de signalements pour effectuer une action"
+ data-position="bottom left"
+ >Mode de sélection :</label>
<div class="field">
<div class="ui radio checkbox">
<input
+ id="edit-status"
v-model="mode"
type="radio"
name="mode"
- value="modify-status"
+ value="edit-status"
>
- <label>Édition de statut</label>
+ <label for="edit-status">Édition de statut</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input
+ id="edit-attributes"
v-model="mode"
type="radio"
name="mode"
- value="modify-attributes"
+ value="edit-attributes"
>
- <label>Édition d'attribut</label>
+ <label for="edit-attributes">Édition d'attribut</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input
+ id="delete-features"
v-model="mode"
type="radio"
name="mode"
value="delete-features"
>
- <label>Suppression de signalement</label>
+ <label for="delete-features">Suppression de signalement</label>
</div>
</div>
</div>
@@ -494,7 +500,7 @@ export default {
]),
storeClickedFeature(feature) {
- if (this.checkedFeatures.length === 0 && this.massMode === 'modify-attributes') { // if modifying attributes
+ if (this.checkedFeatures.length === 0 && this.massMode === 'edit-attributes') { // if modifying attributes
this.editAttributesFeatureType = feature.feature_type.slug; // store feature type slug to restrict selection for next selected features
}
this.UPDATE_CLICKED_FEATURES([
@@ -521,7 +527,7 @@ export default {
if (this.checkedFeatures.length > 0 && // check if selection should be restricted to a specific feature type, for attributes modification
feature.feature_type.slug !== this.editAttributesFeatureType &&
- this.massMode === 'modify-attributes') {
+ this.massMode === 'edit-attributes') {
return false;
} else if (this.user.is_superuser) {
return true;
@@ -535,7 +541,7 @@ export default {
},
checkRights(feature) {
- if (this.massMode.includes('modify')) {
+ if (this.massMode.includes('edit')) {
return this.canEditFeature(feature);
} else if (this.massMode === 'delete-features') {
return this.canDeleteFeature(feature);
@@ -665,6 +671,12 @@ i.icon.sort:not(.down):not(.up) {
.table-mobile-buttons {
margin-bottom: 1em;
}
+
+/* increase contrast between available checkboxes and disabled ones */
+#table-features .ui.disabled.checkbox label::before {
+ background-color: #fbf5f5;;
+}
+
@media only screen and (min-width: 761px) {
.table-mobile-buttons {
display: none !important;
diff --git a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue
index 16a760b6..bab2e7ce 100644
--- a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue
+++ b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue
@@ -86,7 +86,7 @@
</div>
</div>
<div
- v-if="checkedFeatures.length > 0 && massMode === 'modify-status'"
+ v-if="checkedFeatures.length > 0 && massMode === 'edit-status'"
class="ui dropdown button compact button-hover-green tiny-margin-left"
data-tooltip="Modifier le statut des Signalements"
data-position="bottom right"
@@ -109,7 +109,7 @@
v-for="status in availableStatus"
:key="status.value"
class="item"
- @click="$emit('modify-status', status.value)"
+ @click="$emit('edit-status', status.value)"
>
{{ status.name }}
</span>
diff --git a/src/store/modules/feature.store.js b/src/store/modules/feature.store.js
index 2ad217f9..94ba91e9 100644
--- a/src/store/modules/feature.store.js
+++ b/src/store/modules/feature.store.js
@@ -15,7 +15,7 @@ const feature = {
form: null,
linkedFormset: [], //* used to edit in feature_edit
linked_features: [], //* used to display in feature_detail
- massMode: 'modify-status',
+ massMode: 'edit-status',
},
mutations: {
SET_FEATURES(state, features) {
diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue
index c48c19ed..897fd9ff 100644
--- a/src/views/Project/FeaturesListAndMap.vue
+++ b/src/views/Project/FeaturesListAndMap.vue
@@ -9,7 +9,7 @@
@reset-pagination="resetPagination"
@fetch-features="fetchPagedFeatures"
@show-map="setShowMap"
- @modify-status="modifyStatus"
+ @edit-status="modifyStatus"
@toggle-delete-modal="toggleDeleteModal"
/>
@@ -282,6 +282,10 @@ export default {
this.toggleDeleteModal();
},
+ modifyFeaturesAttributes() {
+ console.log('modifyFeaturesAttributes');
+ },
+
onFilterChange() {
if (mapService.getMap() && mapService.mvtLayer) {
mapService.mvtLayer.changed();
--
GitLab