Repository: inovex/scrumlr.io
Pull request #1782 (2022-06-07 14:32:27)

Improve hidden column info
## Changelog

- [x] Added dashed border under the name of hidden columns
- [x] Hidden icon moved in front of column name
- [x] Hidden-Icon is clickable, which toggles visibility
- [x] Fix layout when editing the column name

## Checklist

- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] The light- and dark-theme are both supported and tested
- [x] The design was implemented and is responsive for all devices and screen sizes
- [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)



Patch:
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 507ecd5a..a2fe431e 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -45,13 +45,29 @@
 .column__header-title {
   display: flex;
   word-break: break-all;
+  align-items: center;
+  margin-bottom: $margin--default;
+  height: 48px;
   position: relative;
 }
 
+.column__header-text-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  height: auto;
+  border-bottom: solid 3px var(--accent-color);
+  margin: 0 $margin--small 0 0;
+}
+
+.column__header-text-wrapper--hidden {
+  border-bottom-style: dashed;
+}
+
 .column__header-text {
   font-size: calc(18px + 0.4vw);
-  border-bottom: solid 3px var(--accent-color);
-  margin: $margin--default $margin--small $margin--default $margin--default;
+  margin: 0;
   font-weight: bold;
   letter-spacing: $letter-spacing--large;
   line-height: $line-height--large;
@@ -66,12 +82,13 @@
 }
 
 .column__header-input {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   border: none;
   font-size: calc(18px + 0.4vw);
   color: $color-black;
-  border-bottom: solid 3px var(--accent-color);
-  margin: $margin--default $margin--small $margin--default 0;
+  border-bottom: dashed 3px var(--accent-color);
+  margin: 0 $margin--small 0 0;
   font-weight: bold;
   letter-spacing: $letter-spacing--large;
   line-height: $line-height--large;
@@ -88,6 +105,7 @@
 }
 
 .column__header-card-number {
+  margin-bottom: $margin--default;
   font-size: 20px;
   color: $color-middle-gray;
   font-weight: 600;
@@ -174,8 +192,19 @@
 
 .column__header-hidden-icon {
   height: 20px;
-  margin: 4px 0 0 $margin--small;
+  margin: 0 $margin--small 0 0;
   color: $color-middle-gray;
+  cursor: pointer;
+}
+
+.column__header-hidden-icon:hover {
+  color: $color-black;
+}
+
+[theme="dark"] {
+  .column__header-hidden-icon:hover {
+    color: $color-white;
+  }
 }
 
 .column__header-edit-button {
diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx
index 3a404989..8e06cb39 100644
--- a/src/components/Column/Column.tsx
+++ b/src/components/Column/Column.tsx
@@ -69,9 +69,16 @@ export const Column = ({id, name, color, visible, index, tabIndex}: ColumnProps)
     }
   }
 
+  const toggleVisibilityHandler = () => {
+    dispatch(Actions.editColumn(id, {name, color, index, visible: !visible}));
+  };
+
   const renderColumnName = () =>
     columnNameMode === "VIEW" ? (
-      <h2 className={classNames("column__header-text", visible ? "column__header-text--visible" : "column__header-text--hidden")}>{name}</h2>
+      <div className={classNames("column__header-text-wrapper", {"column__header-text-wrapper--hidden": !visible})}>
+        {!visible && <HiddenIcon className="column__header-hidden-icon" title={t("Column.hiddenColumn")} onClick={toggleVisibilityHandler} />}
+        <h2 className={classNames("column__header-text", visible ? "column__header-text--visible" : "column__header-text--hidden")}>{name}</h2>
+      </div>
     ) : (
       <input
         tabIndex={tabIndex}
@@ -127,7 +134,6 @@ export const Column = ({id, name, color, visible, index, tabIndex}: ColumnProps)
           <div className="column__header-title">
             {renderColumnName()}
             {columnNameMode === "VIEW" && <span className="column__header-card-number">{state.notes.length}</span>}
-            {columnNameMode === "VIEW" && !visible && <HiddenIcon className="column__header-hidden-icon" title={t("Column.hiddenColumn")} />}
             {isModerator && renderColumnModifiers()}
             {openedColumnSettings && (
               <ColumnSettings


Test patch:
diff --git a/src/components/Column/__tests__/Column.test.tsx b/src/components/Column/__tests__/Column.test.tsx
index d97b89f5..39f887fc 100644
--- a/src/components/Column/__tests__/Column.test.tsx
+++ b/src/components/Column/__tests__/Column.test.tsx
@@ -38,7 +38,7 @@ describe("Column", () => {
 
     test("column header text is present", () => {
       const {container} = render(createColumn());
-      expect(container.querySelector(".column__header-title")!.firstChild).toHaveClass("column__header-text");
+      expect(container.querySelector(".column__header-title")!.firstChild).toHaveClass("column__header-text-wrapper");
     });
 
     test("column header cardnumber is present", () => {
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index ce34c545..6f967a68 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -13,22 +13,26 @@ exports[`Column should have correct style show column with correct style 1`] = `
       <div
         class="column__header-title"
       >
-        <h2
-          class="column__header-text column__header-text--hidden"
+        <div
+          class="column__header-text-wrapper column__header-text-wrapper--hidden"
         >
-          Testheader
-        </h2>
+          <svg
+            class="column__header-hidden-icon"
+            title="Column is hidden for all participants"
+          >
+            icon-hidden.svg
+          </svg>
+          <h2
+            class="column__header-text column__header-text--hidden"
+          >
+            Testheader
+          </h2>
+        </div>
         <span
           class="column__header-card-number"
         >
           0
         </span>
-        <svg
-          class="column__header-hidden-icon"
-          title="Column is hidden for all participants"
-        >
-          icon-hidden.svg
-        </svg>
         <button
           class="column__header-edit-button"
           tabindex="NaN"