Merge pull request #122 from nathonius/feat/119/label-column

 feat: #119 Add Labels column
This commit is contained in:
Nathan 2024-06-30 16:01:32 -04:00 committed by GitHub
commit 99af75cffe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 1 deletions

View file

@ -80,4 +80,22 @@ export const CommonIssuePRColumns: ColumnsMap = {
DateCell(row.closed_at, el);
},
},
labels: {
header: "Labels",
cell: (row, el) => {
const wrapper = el.createDiv({ cls: "github-link-table-labels" });
for (const label of row.labels ?? []) {
// When would the label just be a string?
if (typeof label !== "string") {
const labelEl = wrapper.createSpan({
cls: "github-link-table-label",
text: label.name,
});
if (label.color) {
labelEl.style.setProperty("--status-color", `#${label.color}`);
}
}
}
},
},
};

View file

@ -62,6 +62,7 @@ body.theme-light {
--gh-color-primer-border-contrast: rgba(31, 35, 40, 0.1);
--gh-color-primer-shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);
--gh-color-primer-shadow-inset: inset 0 1px 0 rgba(208, 215, 222, 0.2);
--status-color: var(--gh-color-canvas-subtle);
}
body.theme-dark {
@ -310,6 +311,10 @@ table.github-link-table {
font-weight: var(--font-bold);
}
.github-link-table td {
vertical-align: middle;
}
.github-link-table a {
text-decoration: none;
}
@ -323,8 +328,31 @@ table.github-link-table {
}
.github-link-table-status,
.github-link-table-author {
.github-link-table-author,
.github-link-table-labels {
display: flex;
gap: 6px;
align-items: center;
}
.github-link-table-labels {
height: 100%;
flex-wrap: wrap;
justify-content: center;
}
.github-link-table-label {
border-radius: 2em;
font-size: 0.8em;
padding: 0 6px;
border: 1px solid var(--status-color);
}
body.theme-light .github-link-table .github-link-table-labels .github-link-table-label {
background-color: color-mix(in srgb, var(--status-color) 50%, transparent);
color: var(--text-normal);
}
body.theme-dark .github-link-table .github-link-table-labels .github-link-table-label {
background-color: color-mix(in srgb, var(--status-color) 20%, transparent);
color: var(--status-color);
}