feat(devindex): Add Hireable and Website columns to Grid (#9152)

tobiu · tobiu · commit 9366dc7d8834 · 2026-02-14T18:43:10.000+01:00
- Introduce generic Icon and IconLink components with full SCSS theme support
- Implement 'hideMode: visibility' for icon columns to optimize grid scrolling (avoids DOM thrashing)
- Add 'contain: layout paint style' to icons for rendering performance
- Refactor DevIndex grid to use 'cellCls' and CSS variables for theme-aware styling
- Add dark/light theme variables for new columns
diff --git a/apps/devindex/view/home/GridContainer.mjs b/apps/devindex/view/home/GridContainer.mjs
@@ -205,25 +205,28 @@ class GridContainer extends BaseGridContainer {
             cellAlign: 'center'
         }, {
             type     : 'iconLink',
+            cellAlign: 'center',
             dataField: 'website',
-            defaults : {style: {fontSize: '16px'}},
+            cellCls  : 'devindex-column-website',
             iconCls  : 'fa fa-home',
             text     : 'Website',
-            width    : 70
+            width    : 65
         }, {
             type     : 'iconLink',
+            cellAlign: 'center',
             dataField: 'linkedinUrl',
-            defaults : {style: {color   : '#0077b5', fontSize: '20px'}},
+            cellCls  : 'devindex-column-linkedin',
             iconCls  : 'fa-brands fa-linkedin',
             text     : 'LI',
             width    : 40
         }, {
             type     : 'icon',
+            cellAlign: 'center',
             dataField: 'isHireable',
-            defaults : {style: {color   : '#28a745', fontSize: '16px'}},
+            cellCls  : 'devindex-column-hireable',
             iconCls  : 'fas fa-circle-check',
             text     : 'Hireable',
-            width    : 75
+            width    : 65
         }, {
             type     : 'githubOrgs',
             dataField: 'organizations',
diff --git a/resources/scss/src/apps/devindex/home/GridContainer.scss b/resources/scss/src/apps/devindex/home/GridContainer.scss
@@ -65,6 +65,37 @@
                 font-weight     : bold;
                 text-shadow     : var(--heatmap-shadow-3);
             }
+
+            &.devindex-column-website {
+                .neo-icon-link {
+                    color     : var(--devindex-website-color);
+                    font-size : 16px;
+                    transition: color 200ms ease-out;
+
+                    &:hover {
+                        color: var(--devindex-website-hover-color);
+                    }
+                }
+            }
+
+            &.devindex-column-linkedin {
+                .neo-icon-link {
+                    color     : var(--devindex-linkedin-color);
+                    font-size : 20px;
+                    transition: color 200ms ease-out;
+
+                    &:hover {
+                        color: var(--devindex-linkedin-hover-color);
+                    }
+                }
+            }
+
+            &.devindex-column-hireable {
+                .neo-icon {
+                    color    : var(--devindex-hireable-color);
+                    font-size: 16px;
+                }
+            }
         }
     }
 }
diff --git a/resources/scss/src/component/Icon.scss b/resources/scss/src/component/Icon.scss
@@ -0,0 +1,5 @@
+.neo-icon {
+    color    : var(--icon-color);
+    contain  : layout paint style;
+    font-size: var(--icon-font-size);
+}
diff --git a/resources/scss/src/component/IconLink.scss b/resources/scss/src/component/IconLink.scss
@@ -0,0 +1,10 @@
+.neo-icon-link {
+    color          : var(--icon-link-color);
+    contain        : layout paint style;
+    font-size      : var(--icon-link-font-size);
+    text-decoration: var(--icon-link-text-decoration);
+
+    &:hover {
+        color: var(--icon-link-hover-color);
+    }
+}
diff --git a/resources/scss/theme-neo-dark/apps/devindex/home/GridContainer.scss b/resources/scss/theme-neo-dark/apps/devindex/home/GridContainer.scss
@@ -13,5 +13,13 @@
         --heatmap-bg-3: rgba(14, 233, 175, 0.65);
         --heatmap-text-3: #fff;
         --heatmap-shadow-3: 0 1px 2px rgba(0, 0, 0, 0.8);
+
+        --devindex-website-color      : var(--purple-300);
+        --devindex-website-hover-color: var(--purple-200);
+
+        --devindex-linkedin-color      : #0077b5;
+        --devindex-linkedin-hover-color: #298dcd;
+
+        --devindex-hireable-color: var(--green-500);
     }
 }
diff --git a/resources/scss/theme-neo-dark/component/Icon.scss b/resources/scss/theme-neo-dark/component/Icon.scss
@@ -0,0 +1,4 @@
+:root .neo-theme-neo-dark {
+    --icon-color    : inherit;
+    --icon-font-size: inherit;
+}
diff --git a/resources/scss/theme-neo-dark/component/IconLink.scss b/resources/scss/theme-neo-dark/component/IconLink.scss
@@ -0,0 +1,6 @@
+:root .neo-theme-neo-dark {
+    --icon-link-color          : var(--sem-color-text-primary-default);
+    --icon-link-font-size      : inherit;
+    --icon-link-hover-color    : var(--sem-color-fg-primary-highlighted);
+    --icon-link-text-decoration: none;
+}
diff --git a/resources/scss/theme-neo-light/apps/devindex/home/GridContainer.scss b/resources/scss/theme-neo-light/apps/devindex/home/GridContainer.scss
@@ -13,5 +13,13 @@
         --heatmap-bg-3: rgba(14, 233, 175, 0.65);
         --heatmap-text-3: #fff;
         --heatmap-shadow-3: 0 1px 2px rgba(0, 0, 0, 0.8);
+
+        --devindex-website-color      : var(--purple-600);
+        --devindex-website-hover-color: var(--purple-900);
+
+        --devindex-linkedin-color      : #0077b5;
+        --devindex-linkedin-hover-color: #005582;
+
+        --devindex-hireable-color: var(--green-600);
     }
 }
diff --git a/resources/scss/theme-neo-light/component/Icon.scss b/resources/scss/theme-neo-light/component/Icon.scss
@@ -0,0 +1,4 @@
+:root .neo-theme-neo-light {
+    --icon-color    : inherit;
+    --icon-font-size: inherit;
+}
diff --git a/resources/scss/theme-neo-light/component/IconLink.scss b/resources/scss/theme-neo-light/component/IconLink.scss
@@ -0,0 +1,6 @@
+:root .neo-theme-neo-light {
+    --icon-link-color          : var(--sem-color-text-primary-default);
+    --icon-link-font-size      : inherit;
+    --icon-link-hover-color    : var(--sem-color-fg-primary-highlighted);
+    --icon-link-text-decoration: none;
+}
diff --git a/src/grid/column/Component.mjs b/src/grid/column/Component.mjs
@@ -97,9 +97,14 @@ class Component extends Column {
 
             componentConfig[recordProperty] = record;
 
+            if (componentConfig.hideMode === undefined) {
+                componentConfig.hideMode = me.hideMode
+            }
+
             component.set(componentConfig, silent)
         } else {
             component = Neo.create({
+                hideMode: me.hideMode,
                 ...me.defaults,
                 ...componentConfig,
                 appName,
diff --git a/src/grid/column/Icon.mjs b/src/grid/column/Icon.mjs
@@ -19,6 +19,11 @@ class Icon extends ComponentColumn {
         defaults: {
             module: IconComponent
         },
+        /**
+         * @member {String} hideMode='visibility'
+         * @reactive
+         */
+        hideMode: 'visibility',
         /**
          * @member {String|null} iconCls=null
          */
diff --git a/src/grid/column/IconLink.mjs b/src/grid/column/IconLink.mjs
@@ -19,6 +19,11 @@ class IconLink extends ComponentColumn {
         defaults: {
             module: IconLinkComponent
         },
+        /**
+         * @member {String} hideMode='visibility'
+         * @reactive
+         */
+        hideMode: 'visibility',
         /**
          * @member {String|null} iconCls=null
          */

Original file line number	Diff line number	Diff line change
`@@ -13,5 +13,13 @@`
`13`	`13`	`--heatmap-bg-3: rgba(14, 233, 175, 0.65);`
`14`	`14`	`--heatmap-text-3: #fff;`
`15`	`15`	`--heatmap-shadow-3: 0 1px 2px rgba(0, 0, 0, 0.8);`
	`16`	`+`
	`17`	`+ --devindex-website-color : var(--purple-300);`
	`18`	`+ --devindex-website-hover-color: var(--purple-200);`
	`19`	`+`
	`20`	`+ --devindex-linkedin-color : #0077b5;`
	`21`	`+ --devindex-linkedin-hover-color: #298dcd;`
	`22`	`+`
	`23`	`+ --devindex-hireable-color: var(--green-500);`
`16`	`24`	`}`
`17`	`25`	`}`