Merge pull request #124 from itk-dev/feature/4717-published-info

Add info on unpublished content

Author: rimi-itk

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+- [PR-124](https://github.com/itk-dev/ai-screening/pull/124)
+  Added info badge on unpublished content
 - [PR-123](https://github.com/itk-dev/ai-screening/pull/123)
   Replaced "bortfald" with "ændring" in select places
 - [PR-118](https://github.com/itk-dev/ai-screening/pull/118)

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 light theme v3.4 #}
+  {% set class_names = {
+    gray: 'inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10',
+    red: 'inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10',
+    yellow: 'inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20',
+    green: 'inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20',
+    blue: 'inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10',
+    indigo: 'inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10',
+    purple: 'inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10',
+    pink: 'inline-flex items-center rounded-md bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-700/10',
+    } %}
+  {# Add some sensible names for the classes #}
+  {% set class_names = class_names|merge({
+    info: class_names['gray'],
+    }) %}
+  {# 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>