update component badges to use template.

typerefinery-ai · Jun 21, 2024 · 7d3377a · 7d3377a
1 parent 9238d3e
commit 7d3377a
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 28 deletions.
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/content/embed/embed.html b/application/backend/src/main/resources/apps/typerefinery/components/content/embed/embed.html
@@ -26,9 +26,9 @@
   >
     <sly data-sly-use.template="${template}" data-sly-call="${template.variant @ model=model}">
     </sly>
-    <sly data-sly-test="${wcmmode.isEdit}">
-      <div style="--bs-bg-opacity: .5;" class="bg-warning">${model.componentTitle} Component</div>
-    </sly>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
   </div>
 </sly>
 
diff --git a/...rc/main/resources/apps/typerefinery/components/forms/fields/button/variant.hamburger.html b/...rc/main/resources/apps/typerefinery/components/forms/fields/button/variant.hamburger.html
@@ -24,7 +24,8 @@
             </sly>
         </button>
     </div>
-    <sly data-sly-test="${wcmmode.isEdit}">
-        <div style="--bs-bg-opacity: .5;" class="bg-warning">Hamburger visible for limited screen size.</div>
-    </sly>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Visible only on some screen sizes.'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
diff --git a/...ckend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.html b/...ckend/src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.html
@@ -33,5 +33,8 @@
   <div template>
     <sly data-sly-include="${'parsys.html' @ prependPath='/apps/typerefinery/components/parsys'}"></sly>
   </div>
-  <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}</div>
+  <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - (', model.name ,')'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
diff --git a/.../src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.list.html b/.../src/main/resources/apps/typerefinery/components/forms/fields/composite/variant.list.html
@@ -84,5 +84,8 @@
       </div>
     </template>
   </sly>  
-  <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template</div>
+  <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Template (', model.name ,')'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
diff --git a/...n/backend/src/main/resources/apps/typerefinery/components/forms/fields/label/variant.html b/...n/backend/src/main/resources/apps/typerefinery/components/forms/fields/label/variant.html
@@ -7,7 +7,7 @@
       class="${model.componentClassNames} ${model.variantClassNames}"
       for="${model.forId}">${model.label}</label>    
   </sly>
-  <sly data-sly-test="${wcmmode.isEdit && model.hideLabel}">
-    <div style="--bs-bg-opacity: .5;" class="bg-warning">Label is Hidden</div>
-  </sly>
+  <sly data-sly-test="${model.hideLabel}" data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Label is hidden'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
 </template>
diff --git a/...n/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html b/...n/backend/src/main/resources/apps/typerefinery/components/layout/accordion/accordion.html
@@ -20,26 +20,41 @@
     class="${model.componentName} ${model.componentClassNames} ${model.variantClassNames}"
     data-model="${model.jsonString}"
     data-sly-test="${resource.hasChildren}">
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Items Start</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Items Start'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
     <sly data-sly-repeat.paragraph="${resource.children}">
         <sly data-sly-test="${paragraph.name != 'template'}">
           <sly data-sly-test="${paragraph.resourceType && paragraph['sling:resourceType']}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
         </sly>
     </sly>
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Items End</div>
 
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Items End'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
     <sly data-sly-test="${model.isTemplated}">
-      <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template Start</div>
+      <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+        data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Template Start'] @ join=''}"
+        data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
       <sly data-sly-repeat.paragraph="${resource.children}">
           <sly data-sly-test="${paragraph.name == 'template'}">
             <sly data-sly-test="${paragraph.resourceType && paragraph['sling:resourceType']}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
           </sly>
       </sly>
-      <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} - Template End</div>
+
+      <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+        data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Template End'] @ join=''}"
+        data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
     </sly>
   </div>
   <sly data-sly-use.lib="/libs/wcm/foundation/components/commons/templates.html"
       data-sly-call="${lib.placeholder @ classes=model.componentClassNames}">
   </sly>
-  <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}</div>
+  <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
 </sly>
diff --git a/...d/src/main/resources/apps/typerefinery/components/layout/accordionitem/accordionitem.html b/...d/src/main/resources/apps/typerefinery/components/layout/accordionitem/accordionitem.html
@@ -31,7 +31,9 @@ <h2 class="accordion-header">
           data-sly-call="${lib.placeholder @ classes=model.componentClassNames}">
         </sly>
 
-        <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}</div>
+        <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+          data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - (', model.title ,')'] @ join=''}"
+          data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
       </div>
     </div>
   </div>

diff --git a/...ion/backend/src/main/resources/apps/typerefinery/components/layout/container/variant.html b/...ion/backend/src/main/resources/apps/typerefinery/components/layout/container/variant.html
@@ -18,7 +18,10 @@
   <!--/* Show error if this container is inheriting but can't find parent. */-->
   <sly data-sly-test="${model.inheriting && !model.cancelInheritParent && !model.inheritedResource}">
     <!--${model.componentName} inherited resource not found-->
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentName}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle}: Inherited but parent not found.</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Inherited but parent not found'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
   </sly>
   <!--/* Print output of inherited resource. */-->
   <sly data-sly-test="${model.inheriting && !model.cancelInheritParent && model.inheritedResource}">

diff --git a/...tion/backend/src/main/resources/apps/typerefinery/components/layout/template/variant.html b/...tion/backend/src/main/resources/apps/typerefinery/components/layout/template/variant.html
@@ -20,7 +20,10 @@
     id="${model.id}"
     name="${model.name}"
     >
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} Start (${model.id})</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Start (', model.id ,')'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
     <sly data-sly-test="${resource.hasChildren}">
       <sly data-sly-include="${'parsys.html' @ prependPath='/libs/wcm/foundation/components/parsys'}"></sly>
     </sly>
@@ -29,6 +32,8 @@
         data-sly-call="${lib.placeholder @ classes=model.componentClassNames}">
       </sly>
     </sly>
-    <div data-sly-test="${wcmmode.isEdit}" component="${model.componentTitle}" style="--bs-bg-opacity: .5;" class="bg-warning ${model.componentClassNames}">${model.componentTitle} End (${model.id})</div>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - End (', model.id ,')'] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
   </template>
 </template>
diff --git a/...tion/backend/src/main/resources/apps/typerefinery/components/layout/treeview/variant.html b/...tion/backend/src/main/resources/apps/typerefinery/components/layout/treeview/variant.html
@@ -8,9 +8,8 @@
     data-sly-test="${model.parentPagePath}"
   >
   </div>
-  <sly data-sly-test="${!model.parentPagePath && wcmmode.isEdit}">
-    <div style="--bs-bg-opacity: .5;" class="bg-warning text-center">
-      Tree view content
-    </div>
-  </sly>
+  <sly data-sly-test="${!model.parentPagePath}" data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+    data-sly-set.componentPlaceholderTitle="${[model.componentTitle, ' - Set parent page path.'] @ join=''}"
+    data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
+
 </template>
diff --git a/application/backend/src/main/resources/apps/typerefinery/components/widgets/tabs/tabs.html b/application/backend/src/main/resources/apps/typerefinery/components/widgets/tabs/tabs.html
@@ -3,9 +3,9 @@
 <sly data-sly-use.model="ai.typerefinery.websight.models.components.widgets.tabs.Tabs"
     data-sly-set.template="${'./variant.html'}">
 
-    <sly data-sly-test="${wcmmode.isEdit}">
-      <div style="--bs-bg-opacity: .5;" class="bg-warning">${model.componentTitle} Component</div>
-    </sly>
+    <sly data-sly-use.lib="/apps/typerefinery/components/structure/templates/component-info.html"
+      data-sly-set.componentPlaceholderTitle="${[model.componentTitle] @ join=''}"
+      data-sly-call="${lib.placeholder @ title=componentPlaceholderTitle}"></sly>
 
     <div class="${model.componentClassNames}">
       <div