4717: Showed info on published content

Author: rimi-itk

config/sync/language/da/views.view.projects.yml

@@ -14,7 +14,7 @@ display:
         title:
           label: Navn
           alter:
-            text: "<h4>{{ title }}</h4>\r\n{{ field_description }}"
+            text: "<div class=\"inline-flex items-center\">\r\n{% include '@itkdev_project_theme/components/badge.html.twig' with { label: status != '1' ? 'Not published'|trans, additional_class_names: 'mr-3' } %}\r\n<h4>{{ title }}</h4>\r\n</div>\r\n{{ field_description }}"
           separator: ", "
         field_project_state:
           label: Tilstand

config/sync/views.view.projects.yml

@@ -242,7 +242,7 @@ display:
           exclude: false
           alter:
             alter_text: true
-            text: "<h4>{{ title }}</h4>\r\n{# @todo Do we want to show this?\r\n{% if status != '1' %}<div class=\"project-status not-published\">{{ 'Not published'|trans }}</div>{% endif %}\r\n#}\r\n{{ field_description }}"
+            text: "<div class=\"inline-flex items-center\">\r\n{% include '@itkdev_project_theme/components/badge.html.twig' with { label: status != '1' ? 'Not published'|trans, additional_class_names: 'mr-3' } %}\r\n<h4>{{ title }}</h4>\r\n</div>\r\n{{ field_description }}"
             make_link: false
             path: ""
             absolute: false

web/themes/custom/itkdev/itkdev_project_theme/templates/components/badge.html.twig

@@ -0,0 +1,22 @@
+{% if label is not empty %}
+  {# https://tailwindcss.com/plus/ui-blocks/application-ui/elements/badges #}
+  {% set class_names = {
+     gray: 'inline-flex items-center rounded-md bg-gray-400/10 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20',
+     red: 'inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20',
+     yellow: 'inline-flex items-center rounded-md bg-yellow-400/10 px-2 py-1 text-xs font-medium text-yellow-500 ring-1 ring-inset ring-yellow-400/20',
+     green: 'inline-flex items-center rounded-md bg-green-400/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-inset ring-green-500/20',
+     blue: 'inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30',
+     indigo: 'inline-flex items-center rounded-md bg-indigo-400/10 px-2 py-1 text-xs font-medium text-indigo-400 ring-1 ring-inset ring-indigo-400/30',
+     purple: 'inline-flex items-center rounded-md bg-purple-400/10 px-2 py-1 text-xs font-medium text-purple-400 ring-1 ring-inset ring-purple-400/30',
+     pink: 'inline-flex items-center rounded-md bg-pink-400/10 px-2 py-1 text-xs font-medium text-pink-400 ring-1 ring-inset ring-pink-400/20',
+    } %}
+  {# Add some sensible names for the classes #}
+  {% set class_names = class_names|merge({
+    info: class_names['red'],
+    }) %}
+  {# make sure that type is valid, i.e. defined in class_names #}
+  {% set type = (type and class_names[type] is defined) ? type : 'info' %}
+  <div class="badge badge-{{ type }} {{ class_names[type] }} {{ additional_class_names }}">
+    {{ label }}
+  </div>
+{% endif %}

web/themes/custom/itkdev/itkdev_project_theme/templates/node--project.html.twig

@@ -17,6 +17,7 @@
 
 {% block title %}
   <div class="inline-flex items-center">
+    {{ include('@itkdev_project_theme/components/badge.html.twig', {label: node.status.value != '1' ? 'Not published'|trans, additional_class_names: 'mr-3'}) }}
     <h1 class="dark:text-white inline-block">{{ label }}</h1>
     {% if node.access('update') %}
       <a href="{{ path('entity.node.edit_form', {node: node.id}) }}" class="inline-block mx-3 btn-icon bg-black text-white hover:bg-stone-700"><i class="fa-solid fa-pencil"></i></a>