Add button next to headline header to toggle between working title an…

…d headline
guardian · Feb 3, 2025 · ab4b27b · ab4b27b
1 parent 5c883c6
commit ab4b27b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/public/components/content-list/_content-list.scss b/public/components/content-list/_content-list.scss
@@ -135,7 +135,8 @@ $tableHeaderRowHeight: 48px;
 
             &-icon {
                 &--presence,
-                &--assignee {
+                &--assignee,
+                &--headline-toggle {
                     display: inline-block;
                 }
 
@@ -149,6 +150,11 @@ $tableHeaderRowHeight: 48px;
                     height: $content-list-icon-size;
                     margin-top: 3px;
                 }
+                &--headline-toggle {
+                    width: $content-list-icon-size;
+                    height: $content-list-icon-size;
+                    margin-right: 5px;
+                }
             }
 
             &--notifier {

diff --git a/public/components/icons/icons.svg b/public/components/icons/icons.svg
diff --git a/public/components/icons/src/toggle.svg b/public/components/icons/src/toggle.svg
diff --git a/public/lib/column-defaults.js b/public/lib/column-defaults.js
@@ -75,6 +75,14 @@ const createSortTemplate = (colName, sortField, labelHTML, flipSortIconDirection
   `;
 };
 
+const createCustomHeadlineLabelHtml = () => {
+    return `
+        <i ng-click="console.log('test'); showHeadline = !showHeadline; console.log('showHeadline ' + showHeadline); $event.stopPropagation()"
+           title="Click to toggle Headlines"
+           class="content-list-head__heading-icon--headline-toggle" wf-icon="toggle"/>Working title / Headline
+    `;
+};
+
 export const getSortField = column => column
   && column.isSortable
   && (column.sortField || [column.name]);
@@ -105,7 +113,7 @@ const columnDefaults = [{
 },{
     name: 'titles',
     prettyName: 'Working title / Headline',
-    labelHTML: 'Working title / Headline',
+    labelHTML: createCustomHeadlineLabelHtml(),
     colspan: 1,
     title: '',
     templateUrl: templateRoot + 'title.html',