From ab4b27bd882cffe13de41992e1a306eee30bada4 Mon Sep 17 00:00:00 2001
From: Wai Sing Yiu <89925410+waisingyiu@users.noreply.github.com>
Date: Mon, 3 Feb 2025 17:02:43 +0000
Subject: [PATCH] Add button next to headline header to toggle between working
 title and headline

---
 public/components/content-list/_content-list.scss |  8 +++++++-
 public/components/icons/icons.svg                 |  4 +++-
 public/components/icons/src/toggle.svg            | 14 ++++++++++++++
 public/lib/column-defaults.js                     | 10 +++++++++-
 4 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 public/components/icons/src/toggle.svg

diff --git a/public/components/content-list/_content-list.scss b/public/components/content-list/_content-list.scss
index f5cbe2347..9aeb7d27b 100644
--- 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
index 7283bf529..108791629 100644
--- a/public/components/icons/icons.svg
+++ b/public/components/icons/icons.svg
@@ -306,6 +306,8 @@
             <!-- white tick -->
             <path d="m118,128l-3,3l-3,-3l-15,-15l2,-2l15,8l30,-20l2,2l-26,26l-10,-7l23,-5l-15,13z" fill="#FFFFFF"/>
         </g>
-
+        <g id="icon-toggle">
+            <path d="m 109.99083,-2.999719 c 11.5159,0 21.05452,9.4788133 21.05452,21.122244 0,11.801984 -9.53862,21.280797 -21.05452,21.280797 A 20.952245,21.184287 0 0 1 89.10677,18.122525 v -0.668688 a 68.181725,68.93683 0 0 0 -9.702257,-0.827242 c -18.920431,0 -37.336315,9.306471 -46.38403,25.775479 l -0.818181,1.49593 -0.170454,-0.172342 -1.479544,-4.156891 -5.754537,-2.991858 -4.274995,1.495929 C 32.522756,16.957492 54.89318,3.4872363 79.404513,3.4872363 c 4.602265,0 9.374989,0.6617936 14.140888,1.6613776 A 20.590882,20.818921 0 0 1 109.99083,-2.999719 m 27.79769,40.410767 a 68.454453,69.212574 0 0 1 9.21136,34.585609 67.499906,68.247457 0 0 1 -9.04772,34.261603 62.727188,63.421881 0 0 1 -8.38635,11.63653 c 0.98864,2.49552 1.47954,5.32193 1.47954,7.98289 0,3.65365 -0.81818,7.14875 -2.79545,10.4784 A 20.999971,21.232542 0 0 1 109.99083,146.99992 21.818152,22.059785 0 0 1 99.627216,144.17351 20.999971,21.232542 0 0 1 89.10677,125.71223 c 0,-3.4882 0.981817,-7.14875 2.795453,-10.47839 a 21.272698,21.50829 0 0 1 18.422707,-10.64385 c 3.44999,0 7.23408,0.66869 10.36362,2.82641 l 0.49089,0.33781 c 2.13408,-2.66097 4.11135,-5.32193 5.5909,-7.98289 a 55.227198,55.83883 0 0 0 7.39772,-27.774644 c 0,-8.810129 -1.97727,-17.958046 -6.24545,-25.775482 l -0.81816,-1.495948 h 0.15684 l 4.275,0.827241 5.43408,-3.653651 z m -58.056732,103.101922 -3.456814,-2.99186 -0.327281,-6.6524 2.959088,-3.32965 v -0.16548 h -1.643178 c -18.749979,0 -36.020411,-10.97474 -45.395398,-27.602305 a 54.545381,55.149461 0 0 1 -4.111358,-8.982464 c 0.327275,-0.165477 0.490909,-0.165477 0.654545,-0.33089 A 20.999971,21.232542 0 0 0 38.93865,71.996638 c 0,-3.488203 -0.981817,-7.148752 -2.795451,-10.4784 A 21.136335,21.370416 0 0 0 17.890958,50.881304 c -3.62045,0 -7.077262,0.99269 -10.3636219,2.82641 A 20.999971,21.232542 0 0 0 -2.9999232,72.168995 c 0,3.488203 0.9886356,7.14875 2.79545194,10.478402 A 21.34088,21.577227 0 0 0 14.931871,93.118898 c 1.472725,4.653237 3.449995,8.982472 5.754537,13.139362 a 67.568088,68.316396 0 0 0 59.04538,34.25471" stroke-width="6.85581" />
+        </g>
     </defs>
 </svg>
diff --git a/public/components/icons/src/toggle.svg b/public/components/icons/src/toggle.svg
new file mode 100644
index 000000000..90514975c
--- /dev/null
+++ b/public/components/icons/src/toggle.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="150"
+   viewBox="-3 -3 150 150"
+   focusable="false"
+   aria-hidden="true"
+   version="1.1"
+   height="150"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     d="m 109.99083,-2.999719 c 11.5159,0 21.05452,9.4788133 21.05452,21.122244 0,11.801984 -9.53862,21.280797 -21.05452,21.280797 A 20.952245,21.184287 0 0 1 89.10677,18.122525 v -0.668688 a 68.181725,68.93683 0 0 0 -9.702257,-0.827242 c -18.920431,0 -37.336315,9.306471 -46.38403,25.775479 l -0.818181,1.49593 -0.170454,-0.172342 -1.479544,-4.156891 -5.754537,-2.991858 -4.274995,1.495929 C 32.522756,16.957492 54.89318,3.4872363 79.404513,3.4872363 c 4.602265,0 9.374989,0.6617936 14.140888,1.6613776 A 20.590882,20.818921 0 0 1 109.99083,-2.999719 m 27.79769,40.410767 a 68.454453,69.212574 0 0 1 9.21136,34.585609 67.499906,68.247457 0 0 1 -9.04772,34.261603 62.727188,63.421881 0 0 1 -8.38635,11.63653 c 0.98864,2.49552 1.47954,5.32193 1.47954,7.98289 0,3.65365 -0.81818,7.14875 -2.79545,10.4784 A 20.999971,21.232542 0 0 1 109.99083,146.99992 21.818152,22.059785 0 0 1 99.627216,144.17351 20.999971,21.232542 0 0 1 89.10677,125.71223 c 0,-3.4882 0.981817,-7.14875 2.795453,-10.47839 a 21.272698,21.50829 0 0 1 18.422707,-10.64385 c 3.44999,0 7.23408,0.66869 10.36362,2.82641 l 0.49089,0.33781 c 2.13408,-2.66097 4.11135,-5.32193 5.5909,-7.98289 a 55.227198,55.83883 0 0 0 7.39772,-27.774644 c 0,-8.810129 -1.97727,-17.958046 -6.24545,-25.775482 l -0.81816,-1.495948 h 0.15684 l 4.275,0.827241 5.43408,-3.653651 z m -58.056732,103.101922 -3.456814,-2.99186 -0.327281,-6.6524 2.959088,-3.32965 v -0.16548 h -1.643178 c -18.749979,0 -36.020411,-10.97474 -45.395398,-27.602305 a 54.545381,55.149461 0 0 1 -4.111358,-8.982464 c 0.327275,-0.165477 0.490909,-0.165477 0.654545,-0.33089 A 20.999971,21.232542 0 0 0 38.93865,71.996638 c 0,-3.488203 -0.981817,-7.148752 -2.795451,-10.4784 A 21.136335,21.370416 0 0 0 17.890958,50.881304 c -3.62045,0 -7.077262,0.99269 -10.3636219,2.82641 A 20.999971,21.232542 0 0 0 -2.9999232,72.168995 c 0,3.488203 0.9886356,7.14875 2.79545194,10.478402 A 21.34088,21.577227 0 0 0 14.931871,93.118898 c 1.472725,4.653237 3.449995,8.982472 5.754537,13.139362 a 67.568088,68.316396 0 0 0 59.04538,34.25471"
+     style="stroke-width:6.85581" />
+</svg>
diff --git a/public/lib/column-defaults.js b/public/lib/column-defaults.js
index 170ce5b7a..99f700b38 100644
--- 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',