Replace all title attributes with actual boostrap tooltip functionality #1533

kelanik8 · 2023-11-21T16:52:24Z

The following changes are implemented

TODO: Summary

Changes in the user interface:

TODO: Add screenshots, recordings or remove this section

Checklist when submitting a final (!draft) PR

Commits are tidied up, squashed if needed and follow guidelines in CONTRIBUTING.md
Code builds
All existing tests pass
All new critical code is covered by tests
PR is linked to the relevant issue(s)
Rebased with the target branch

Fajfa · 2023-11-22T11:25:52Z

client/web/compose/src/components/ModuleFields/Configurator/Geometry.vue

@@ -35,7 +35,7 @@
        />
        <l-control class="leaflet-bar">
          <a
-            :title="$t('tooltip.goToCurrentLocation')"
+            v-b-tooltip.hover="{ title: $t('tooltip.goToCurrentLocation'), container: '#body' }"


I suggest you skip this and do it in the other issue PR, to avoid conflicts. Up to you tho

Fajfa · 2023-11-22T11:26:40Z

client/web/compose/src/components/ModuleFields/Editor/Geometry.vue

@@ -15,8 +15,8 @@
        class="d-flex align-items-center text-primary p-0"
      >
        <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"


Same here, i would do it on the map issue instead to avoid conflicts and possible problems with that

Fajfa · 2023-11-22T11:30:10Z

client/web/compose/src/components/PageBlocks/GeometryBase.vue

@@ -49,7 +49,7 @@
        />
        <l-control class="leaflet-bar">
          <a
-            :title="$t('geometry.tooltip.goToCurrentLocation')"
+            v-b-tooltip.hover="{ title: $t('geometry.tooltip.goToCurrentLocation'), container: '#body' }"


Same here (regarding conflicts)

Fajfa · 2023-11-22T11:30:14Z

client/web/compose/src/components/PageBlocks/GeometryConfigurator/Configurator.vue

@@ -22,7 +22,7 @@
        />
        <l-control class="leaflet-bar">
          <a
-            :title="$t('geometry.tooltip.goToCurrentLocation')"
+            v-b-tooltip.hover="{ title: $t('geometry.tooltip.goToCurrentLocation'), container: '#body' }"


Same here (regarding conflicts)

katrinDY · 2023-11-24T14:46:38Z

Please, discuss everything with Jože before starting to work on it. Sorry for the long comment

A couple of issues:

prev and next btn in recs ignore
tooltips in sidebar compose

A couple of suggestions:

do we need a toolbar that says the same thing as the permission rule?

module field value translations: maybe change it to Field translation singular since it's pointing to a specific field

same question here: does this make sense?

made add a tooltip for this since non-devs may be confused what's expected of them

add tooltips to ns edit translations

Fajfa · 2023-11-27T11:58:46Z

If button has only an icon it needs a tooltip
If it has text, it should keep using :title

Add "Expression" and "Warning text" tooltips
Add Namespace translation tooltip

Fajfa · 2023-11-28T11:41:54Z

client/web/compose/src/components/Common/Module/FieldExpressions.vue

@@ -37,6 +40,10 @@
 <script>

 export default {
+  i18nOptions: {


Does this break anything else tho? Since it wasn't there before

Fajfa · 2023-11-28T11:43:03Z

client/web/compose/src/components/ModuleFields/Configurator/validation.vue

@@ -76,7 +76,10 @@
          :placeholder="$t('validators.expression.placeholder')"
        />
        <b-input-group-prepend>
-          <b-button variant="warning">
+          <b-button
+            v-b-tooltip.hover="{ title: $t('validators.error.placeholder'), container: '#body' }"


A bit confused what this translation means, it should be validators.error.tooltip
And should be Warning text

Fajfa · 2023-11-28T11:45:29Z

client/web/compose/src/components/ModuleFields/Editor/Bool.vue

          class="d-inline-block mw-100 pt-0"
          :class="{ 'py-1': !horizontal }"
+          :title="label"


class is always last, not sure why you moved it after it. Same for the others
Guess the linter issue will make this easier

katrinDY · 2023-11-29T13:39:20Z

Two things to address:

Missing tooltip for translations btn in gauge chart

Tooltip position for reminders

Screen.Recording.2023-11-29.at.15.37.02.mov

Fajfa · 2023-11-30T09:29:55Z

client/web/compose/src/components/Chart/ChartTranslator.vue

@@ -1,6 +1,7 @@
 <template>
  <c-translator-button
    v-if="canManageResourceTranslations && resourceTranslationsEnabled"
+    v-b-tooltip.hover="{ title: tooltip, container: '#body' }"


Why do it here if you made a prop for c-translator-button?

Fajfa · 2023-11-30T09:30:17Z

client/web/compose/src/components/Chart/ChartTranslator.vue

@@ -45,6 +46,11 @@ export default {
      type: Boolean,
      default: () => false,
    },
+
+    tooltip: {


since you do a v-bind to the c-translator-button, you don't need to define the prop

Fajfa · 2023-11-30T09:30:44Z

client/web/compose/src/components/Chart/Report/RadarChart.vue

@@ -19,6 +19,7 @@
              />
              <b-input-group-append>
                <chart-translator
+                  :tooltip="$t('general.translations')"


Instead of doing it on every chart translator, might make sense to just do it in the chart-translator component dirrectly.

Fajfa · 2023-11-30T09:31:05Z

client/web/compose/src/components/Namespaces/Reminders/List.vue

@@ -11,7 +11,7 @@
        <hr v-if="r.dismissedAt && sortedReminders[i - 1] ? !sortedReminders[i - 1].dismissedAt : false ">

        <div
-          class="overflow-auto border card shadow-sm my-2 p-1"
+          class="border card shadow-sm my-2 p-1"


Are you sure we can just remove the overflow-auto? Pretty sure it was there for a reason

kelanik8 force-pushed the 2023.9.x-feature-tooltip-refactor branch from 5f70af1 to d1f974b Compare November 21, 2023 16:54

kelanik8 requested a review from Fajfa November 21, 2023 16:54

kelanik8 linked an issue Nov 21, 2023 that may be closed by this pull request

Replace all :title tooltips with actual v-b.tooltips #1505

Closed

Fajfa requested changes Nov 22, 2023

View reviewed changes

Fajfa force-pushed the 2023.9.x branch from 38ec4de to ba01c12 Compare November 24, 2023 10:49

kelanik8 force-pushed the 2023.9.x-feature-tooltip-refactor branch from c44c1eb to 27af2a4 Compare November 24, 2023 13:12

Fajfa requested changes Nov 28, 2023

View reviewed changes

Fajfa approved these changes Nov 28, 2023

View reviewed changes

kelanik8 force-pushed the 2023.9.x-feature-tooltip-refactor branch from 6f9de1a to 0a7e50d Compare November 28, 2023 16:34

Fajfa requested changes Nov 30, 2023

View reviewed changes

kelanik8 force-pushed the 2023.9.x-feature-tooltip-refactor branch from 880dd9f to 04b2b5d Compare November 30, 2023 12:05

Fajfa approved these changes Nov 30, 2023

View reviewed changes

Replace all title attributes with actual bootstrap tooltip functionality

62f57d1

kelanik8 force-pushed the 2023.9.x-feature-tooltip-refactor branch from 04b2b5d to 62f57d1 Compare November 30, 2023 14:02

kelanik8 merged commit 62f57d1 into 2023.9.x Nov 30, 2023
1 check passed

kelanik8 deleted the 2023.9.x-feature-tooltip-refactor branch November 30, 2023 14:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace all title attributes with actual boostrap tooltip functionality #1533

Replace all title attributes with actual boostrap tooltip functionality #1533

kelanik8 commented Nov 21, 2023

Fajfa Nov 22, 2023

Fajfa Nov 22, 2023

Fajfa Nov 22, 2023

Fajfa Nov 22, 2023

katrinDY commented Nov 24, 2023 •

edited

Loading

Fajfa commented Nov 27, 2023 •

edited

Loading

Fajfa Nov 28, 2023

Fajfa Nov 28, 2023

Fajfa Nov 28, 2023

katrinDY commented Nov 29, 2023

Fajfa Nov 30, 2023

Fajfa Nov 30, 2023

Fajfa Nov 30, 2023

Fajfa Nov 30, 2023

Replace all title attributes with actual boostrap tooltip functionality #1533

Replace all title attributes with actual boostrap tooltip functionality #1533

Conversation

kelanik8 commented Nov 21, 2023

The following changes are implemented

Changes in the user interface:

Checklist when submitting a final (!draft) PR

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katrinDY commented Nov 24, 2023 • edited Loading

Fajfa commented Nov 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katrinDY commented Nov 29, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

katrinDY commented Nov 24, 2023 •

edited

Loading

Fajfa commented Nov 27, 2023 •

edited

Loading