Fix strange popover positioning

Now you define the activator position Signed-off-by: Manuel Meister <[email protected]>
ecamp · Sep 17, 2023 · f7b6cac · f7b6cac
1 parent b4d23ce
commit f7b6cac
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 54 deletions.
diff --git a/frontend/src/components/collaborator/CollaboratorEdit.vue b/frontend/src/components/collaborator/CollaboratorEdit.vue
@@ -11,21 +11,21 @@
     :cancel-action="close"
   >
     <template #moreActions>
-      <PromptEntityDelete v-if="inactive" :entity="collaborator" x="left" y="top">
-        <template #activator="{ on, attrs }">
-          <ButtonDelete
-            class="v-btn--has-bg"
-            :disabled="disabled"
-            v-bind="attrs"
-            v-on="on"
-          />
-        </template>
+      <PromptEntityDelete
+        v-if="inactive"
+        :entity="collaborator"
+        activator-x="left"
+        activator-y="below"
+        :btn-attrs="{
+          class: 'v-btn--has-bg',
+          disabled,
+        }"
+      >
         {{
           $tc('components.collaborator.collaboratorEdit.delete', 0, {
             name: name,
           })
         }}
-        <br />
       </PromptEntityDelete>
       <IconButton
         v-if="collaborator.status === 'invited'"
@@ -76,7 +76,11 @@
         >
           <template #activator="{ on, attrs }">
             <div v-bind="attrs" v-on="on">
-              <PromptCollaboratorDeactivate :entity="collaborator" x="left" y="bottom">
+              <PromptCollaboratorDeactivate
+                :entity="collaborator"
+                activator-x="right"
+                activator-y="above"
+              >
                 <template #activator="{ on: onDialog, attrs: attrsDialog }">
                   <IconButton
                     color="secondary"
@@ -125,7 +129,6 @@ import DialogBase from '@/components/dialog/DialogBase.vue'
 import CollaboratorForm from '@/components/collaborator/CollaboratorForm.vue'
 import { campRoleMixin } from '@/mixins/campRoleMixin.js'
 import IconButton from '@/components/buttons/IconButton.vue'
-import ButtonDelete from '@/components/buttons/ButtonDelete.vue'
 import PromptCollaboratorDeactivate from '@/components/collaborator/PromptCollaboratorDeactivate.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts.js'
 import CollaboratorListItem from '@/components/collaborator/CollaboratorListItem.vue'
@@ -136,7 +139,6 @@ export default {
   name: 'CollaboratorEdit',
   components: {
     PromptEntityDelete,
-    ButtonDelete,
     CollaboratorListItem,
     DetailPane,
     CollaboratorForm,

diff --git a/frontend/src/components/prompt/PopoverPrompt.vue b/frontend/src/components/prompt/PopoverPrompt.vue
@@ -5,7 +5,7 @@
     offset-y
     :close-on-content-click="false"
     :close-on-click="true"
-    nudge-left="1"
+    allow-overflow
     v-bind="{ ...$attrs, ...positions }"
     @input="onInput"
   >
@@ -16,15 +16,15 @@
       <slot name="activator" />
     </div>
     <v-alert
-      :border="y === 'top' ? 'bottom' : 'bottom'"
+      border="bottom"
       colored-border
       type="error"
       class="mb-0"
       :class="{
-        'pb-5 rounded-tr-0': y === 'bottom' && x === 'left',
-        'pb-5 rounded-tl-0': y === 'bottom' && x === 'right',
-        'pb-5 rounded-br-0': y === 'top' && x === 'left',
-        'pb-5 rounded-bl-0': y === 'top' && x === 'right',
+        'pb-5 rounded-tr-0': activatorY === 'above' && activatorX === 'right',
+        'pb-5 rounded-tl-0': activatorY === 'above' && activatorX === 'left',
+        'pb-5 rounded-br-0': activatorY === 'below' && activatorX === 'right',
+        'pb-5 rounded-bl-0': activatorY === 'below' && activatorX === 'left',
       }"
     >
       <slot />
@@ -67,13 +67,13 @@ export default {
   name: 'PopoverPrompt',
   extends: DialogUiBase,
   props: {
-    x: {
+    activatorX: {
       type: String,
       default: 'right',
     },
-    y: {
+    activatorY: {
       type: String,
-      default: 'top',
+      default: 'above',
     },
   },
   data: () => ({
@@ -82,30 +82,21 @@ export default {
   computed: {
     positions() {
       const positions = {}
-      if (this.x === 'left') {
-        positions.left = true
-      } else if (this.x === 'right') {
+      if (this.activatorX === 'left') {
         positions.right = true
+      } else if (this.activatorX === 'right') {
+        positions.left = true
       }
-      if (this.y === 'top') {
-        positions.top = true
-        positions.nudgeBottom = 10
-      } else if (this.y === 'bottom') {
+      if (this.activatorY === 'above') {
         positions.bottom = true
+      } else if (this.activatorY === 'below') {
+        positions.nudgeBottom = 10
+        positions.top = true
       }
       return positions
     },
     contentClass() {
-      return (
-        'ec-popover-prompt ' +
-        (this.x === 'left'
-          ? this.y === 'bottom'
-            ? 'ec-popover-prompt--topright'
-            : 'ec-popover-prompt--bottomright'
-          : this.y === 'bottom'
-          ? 'ec-popover-prompt--topleft'
-          : 'ec-popover-prompt--bottomleft')
-      )
+      return `ec-popover-prompt ec-popover-prompt--activator-${this.activatorY}${this.activatorX}`
     },
   },
   methods: {
@@ -158,27 +149,35 @@ export default {
   opacity: 0;
 }
 
-.ec-popover-prompt--topleft ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--activator-aboveleft ::v-deep .ec-activator .v-btn {
   left: 0;
 }
 
-.ec-popover-prompt--topright ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--activator-aboveright ::v-deep .ec-activator .v-btn {
   right: 0;
 }
 
-.ec-popover-prompt--topleft ::v-deep .ec-activator .v-btn,
-.ec-popover-prompt--topright ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--activator-aboveleft ::v-deep .ec-activator .v-btn,
+.ec-popover-prompt--activator-aboveright ::v-deep .ec-activator .v-btn {
   bottom: 100%;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
-.ec-popover-prompt--bottomleft ::v-deep .ec-activator .v-btn,
-.ec-popover-prompt--bottomright ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--activator-belowleft ::v-deep .ec-activator .v-btn,
+.ec-popover-prompt--activator-belowright ::v-deep .ec-activator .v-btn {
   top: calc(100% - 10px);
   z-index: 10;
   left: 0;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 10px 10px 1px rgba(0, 0, 0, 0.14),
+    0 14px 14px 0 rgba(0, 0, 0, 0.12);
 }
 </style>
diff --git a/frontend/src/components/prompt/PromptEntityDelete.vue b/frontend/src/components/prompt/PromptEntityDelete.vue
@@ -11,11 +11,18 @@
     :submit-icon="icon"
     cancel-icon=""
     :cancel-action="close"
+    v-bind="$attrs"
   >
     <template #activator="scope">
-      <slot name="activator" v-bind="scope" />
+      <slot name="activator" v-bind="scope">
+        <ButtonDelete v-bind="{ ...scope.attrs, ...btnAttrs }" v-on="scope.on" />
+      </slot>
     </template>
-    <slot>{{ $tc('components.prompt.promptEntityDelete.warningText') }}</slot>
+    <slot>{{
+      $tc('components.prompt.promptEntityDelete.warningText', warningTextEntity ? 2 : 0, {
+        entity: warningTextEntity,
+      })
+    }}</slot>
     <template v-if="$slots.error || error" #error>
       <slot name="error">
         {{ error }}
@@ -27,18 +34,22 @@
 <script>
 import DialogBase from '../dialog/DialogBase.vue'
 import PopoverPrompt from '@/components/prompt/PopoverPrompt.vue'
+import ButtonDelete from '@/components/buttons/ButtonDelete.vue'
 
 export default {
   name: 'PromptEntityDelete',
-  components: { PopoverPrompt },
+  components: { ButtonDelete, PopoverPrompt },
   extends: DialogBase,
   props: {
-    entity: { type: Object, required: true },
+    entity: { type: [Object, String], required: true },
     submitEnabled: { type: Boolean, required: false, default: true },
     icon: { type: String, required: false, default: 'mdi-delete' },
+    warningTextEntity: { type: String, required: false, default: '' },
+    btnAttrs: { type: Object, required: false, default: () => {} },
   },
   created() {
-    this.entityUri = this.entity._meta.self
+    this.entityUri =
+      typeof this.entity === 'string' ? this.entity : this.entity._meta.self
   },
 }
 </script>

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -298,7 +298,7 @@
     "prompt": {
       "promptEntityDelete": {
         "title": "Wirklich löschen?",
-        "warningText": "Möchtest du das wirklich löschen?"
+        "warningText": "Möchtest du das wirklich löschen? | Möchtest du \"{entity}\" wirklich löschen?"
       }
     },
     "toast": {

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -298,7 +298,7 @@
     "prompt": {
       "promptEntityDelete": {
         "title": "Really delete?",
-        "warningText": "Do you really want to delete this?"
+        "warningText": "Do you really want to delete this? | Do you really want to delete \"{entity}\"?"
       }
     },
     "toast": {

diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
@@ -298,7 +298,7 @@
     "prompt": {
       "promptEntityDelete": {
         "title": "Confirmation de suppression",
-        "warningText": "Veux-tu vraiment le supprimer ?"
+        "warningText": "Veux-tu vraiment le supprimer? | Veux-tu vraiment supprimer \"{entity}\"?"
       }
     },
     "toast": {

diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
@@ -298,7 +298,7 @@
     "prompt": {
       "promptEntityDelete": {
         "title": "Davvero cancellare?",
-        "warningText": "Volete davvero cancellarlo?"
+        "warningText": "Volete davvero cancellarlo? | Volete davvero cancellarlo \"{entity}\"?"
       }
     },
     "toast": {