Adjust referenced block indication implementation

cortezaproject · Nov 1, 2023 · 1a1ede0 · 1a1ede0
1 parent b0b63b5
commit 1a1ede0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -182,7 +182,6 @@
     </b-modal>
 
     <b-modal
-      :title="$t('block.general.title')"
       :ok-title="$t('build.addBlock')"
       ok-variant="primary"
       cancel-variant="link"
@@ -194,6 +193,20 @@
       @ok="updateBlocks()"
       @hide="editor = undefined"
     >
+      <template #modal-title>
+        <div class="d-flex gap-1 align-items-center">
+          <h5 class="mb-0">
+            {{ $t('block.general.title') }}
+          </h5>
+          <font-awesome-icon
+            v-if="isEditorBlockReferenced"
+            v-b-tooltip.hover.right="{ title: $t('referencedBlock') }"
+            :icon="['fas', 'exclamation-circle']"
+            class="text-warning"
+          />
+        </div>
+      </template>
+
       <configurator
         v-if="showCreator"
         :namespace="namespace"
@@ -210,6 +223,7 @@
       :visible="showEditor"
       body-class="p-0 border-top-0"
       footer-class="d-flex justify-content-between"
+      header-class="p-3 pb-0 border-bottom-0"
       @hide="editor = undefined"
     >
       <template #modal-title>
@@ -219,7 +233,7 @@
           </h5>
           <font-awesome-icon
             v-if="isEditorBlockReferenced"
-            v-b-popover.hover.right="{ content: 'This block is used in other layouts' }"
+            v-b-tooltip.hover.right="{ title: $t('referencedBlock') }"
             :icon="['fas', 'exclamation-circle']"
             class="text-warning"
           />
@@ -490,25 +504,25 @@ export default {
       ]
     },
 
-    otherLayoutBlocks () {
-      let set
-      if (!set) {
-        set = new Set()
-      }
+    // Set of blockIDs used on other layouts
+    otherLayoutBlockIDs () {
+      const set = new Set()
 
-      return set
+      return this.layouts.reduce((acc, { blocks, pageLayoutID }) => {
+        if (pageLayoutID === this.layout.pageLayoutID) return acc
+
+        blocks.forEach(({ blockID }) => acc.add(blockID))
+
+        return acc
+      }, set)
     },
 
+    // Is block open in editor referenced on other layouts
     isEditorBlockReferenced () {
-      if (!this.editor || this.editor.block.blockID === NoID) return
+      const { block } = this.editor || {}
+      if (!block || block.blockID === NoID) return
 
-      // All blockIDs in other layouts except this one
-      const otherLayoutBlockIDs = this.layouts.reduce((acc, { blocks, pageLayoutID }) => {
-        if (pageLayoutID === this.layout.pageLayoutID) return acc
-        blocks.forEach(({ blockID }) => acc.add(blockID))
-        return acc
-      }, this.otherLayoutBlocks)
-      return otherLayoutBlockIDs.has(this.editor.block.blockID)
+      return this.otherLayoutBlockIDs.has(this.editor.block.blockID)
     },
   },
 

diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
@@ -127,7 +127,6 @@ file:
   preview:
     label: File block
 general:
-  changeBlock: Change existing block
   descriptionLabel: Description
   descriptionPlaceholder: Block description
   headerStyle: Block header style (color)

diff --git a/locale/en/corteza-webapp-compose/page.yaml b/locale/en/corteza-webapp-compose/page.yaml
@@ -58,7 +58,6 @@ page-layout:
 
 block:
   general:
-    changeBlock: Change existing block
     label:
       cancel: Cancel
       noHandle: No handle
@@ -70,6 +69,7 @@ block:
     title: Add new block
     invalid-handle-characters: Should be at least 2 characters long. Can contain only letters, numbers, dashes, underscores and dots. Must end with letter or number
 changeBlock: Change existing block
+referencedBlock: This block is used in other layouts
 copyOf: "Copy of {{title}}"
 build:
   addBlock: Add block