@conduction/nextcloud-vue 2.140.0 → 2.142.0

package/src/css/look-board-index.css

@@ -52,13 +52,11 @@
 	grid-row: 2;
 }
 
-/* A list page's breadcrumb and note read 15px; the case page's row stays 14px. */
-.cn-look-board .cn-index-page .cn-page-header .cn-header-trail.cn-detail-page__header-row2 {
-	font-size: 15px;
-}
-
-.cn-look-board .cn-index-page .cn-header-trail.cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue.button-vue {
-	font-size: 15px;
+/* The note after the breadcrumb ("38 contracten bij 21 leveranciers") is 14px
+   muted on every Dq list board (37 of 37).
+   @spec openspec/changes/board-index-header-meta-14/specs/index-page/spec.md */
+.cn-look-board .cn-index-page .cn-page-header .cn-header-trail .cn-detail-page__header-meta {
+	font-size: 14px;
 }
 
 .cn-look-board .cn-index-page .cn-page-header .cn-header-trail ~ .cn-page-header__description {
@@ -982,6 +980,17 @@
 	text-decoration: none;
 }
 
+/* `rowTitle: "strong"` (DqZaaktypeStatussen "Statussen", "Resultaten"): the
+   name column of a card's list, the cell's 14px at weight 600 in the main
+   ink, no underline; the row stays a link.
+   @spec openspec/changes/table-strong-title/specs/table-strong-title/spec.md#requirement-a-tables-title-column-can-read-as-a-strong-name */
+.cn-look-board .cn-table-container--board.cn-table-container--title-strong .cn-data-table td.cn-table-col--title {
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: none;
+}
+
 /* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
    the name, the e-mail under the name beside it. The name keeps the title's
    weight and size, and its underline: an inline-flex box is atomic, so the
@@ -999,6 +1008,19 @@
 	font-weight: 700;
 }
 
+/* `widgetProps.tone: "neutral"`: the grey person chip (DqContacten), 13px,
+   12px before the name.
+   @spec openspec/changes/board-avatar-chip/specs/data-table/spec.md#requirement-a-board-avatar-cell-draws-the-initials-chip */
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials--neutral {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar:has(.cn-cell-renderer__avatar-initials--neutral) {
+	gap: 12px;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
 	text-decoration: underline;
 	text-underline-offset: 2px;
@@ -2101,3 +2123,117 @@
 .cn-look-board .cn-index-page--with-side-panel:not(.cn-look-nextcloud *) > .cn-index-page__quick-filter-row {
 	margin-bottom: calc(var(--cn-board-section-gap) + 12px);
 }
+
+/* ---- The side panel's filters as checkbox lists (DqZakenSorteren) ------- */
+/* "Filters" with "Alles wissen" beside it; per field its 14px semibold label
+   over rows of a checkbox, the value and its count in 13px muted at the end,
+   32px each.
+   @spec openspec/changes/board-sidebar-filters-as-checkbox-lists/specs/index-sidebar/spec.md#requirement-the-board-look-draws-a-short-filter-as-a-checkbox-list-with-counts */
+.cn-look-board .cn-index-sidebar__filters-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	margin-bottom: 14px;
+}
+
+.cn-look-board .cn-index-sidebar__filters-head h3 {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-index-sidebar__filters-clear {
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.cn-look-board .cn-index-sidebar__filter-group:has(> .cn-index-sidebar__checklist) .cn-index-sidebar__filter-label {
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-index-sidebar__checklist {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 32px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-row > input[type='checkbox'] {
+	width: 18px;
+	min-width: 18px;
+	height: 18px;
+	min-height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+
+.cn-look-board .cn-index-sidebar__checklist-label {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-count {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+/* A table's leading icon on a 32px tile, radius 8, an 18px glyph, 12px
+   before the title (DqOrganisaties, PqOrganisaties: teal; most boards: the
+   light primary). The tile's tone is the page's `rowIconTone`.
+   @spec openspec/changes/board-row-icon-tile/specs/data-table/spec.md#requirement-a-board-tables-leading-icon-sits-on-a-tile */
+.cn-look-board .cn-data-table td.cn-table-col--icon,
+.cn-look-board .cn-data-table th.cn-table-col--icon {
+	width: 48px;
+	padding-inline: 16px 0;
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon .material-design-icon {
+	width: 32px;
+	height: 32px;
+	border-radius: 8px;
+	justify-content: center;
+	align-items: center;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon-teal .material-design-icon {
+	background: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon-neutral .material-design-icon {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon .material-design-icon svg {
+	width: 18px;
+	height: 18px;
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon + td,
+.cn-look-board .cn-data-table th.cn-table-col--icon + th {
+	padding-inline-start: 12px;
+}

package/src/css/look-board.css

@@ -2173,6 +2173,26 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A list in a side card draws a hairline over every row, the first too, so
+   a line separates the title from the list (DqZaaktype*, DqTenant,
+   DqSociaalDomein, DqTaak "Versies" and the like). Its row titles keep the
+   main ink without an underline: the plain side rule marks them as links,
+   and the board underlines on hover only. The footer note is 13px muted; the
+   theme sets paragraphs through its tokens with `!important`, so the note
+   hands it its size and ink through those tokens. */
+.cn-look-board .cn-detail-page__side .cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__item {
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__row:not(:hover):not(:focus-visible) .cn-record-list__title {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-record-list__footer-note:not(.cn-look-nextcloud *) {
+	--nldesign-component-paragraph-font-size: 13px;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+}
+
 /* An audit row is a board list row (DqHandhaving, DqTenant "Historie"): 10px
    above and below, a hairline over every row including the first, the head
    and the line under it at their normal line height, 2px apart: 56px, the
@@ -2412,6 +2432,29 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	gap: 2px;
 }
 
+/* A stacked list (`density: "stacked"`) keeps its rows unruled and unpadded
+   in the board look too, 10px apart (DqDagAfsluiten "Morgen eerst").
+   @spec openspec/changes/record-list-stacked-density/specs/record-list-stacked-density/spec.md#requirement-a-record-list-can-stack-its-rows */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--stacked .cn-record-list__row {
+	min-height: 0;
+	padding-block: 0;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--stacked.cn-record-list--rows .cn-record-list__item + .cn-record-list__item {
+	border-top: 0;
+}
+
+/* A dashboard card's task list and decision list rule above every row, the
+   first one under the title included, as the record lists with ruleAbove do
+   (DqMijnWerk "Mijn taken", "Mijn archiefbeoordelingen"); no rule under the
+   last row.
+   @spec openspec/changes/board-dashboard-lists-rule-above/specs/board-dashboard-lists-rule-above/spec.md#requirement-a-dashboard-task-or-decision-list-rules-above-every-row */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-tasks-widget__row,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-decision-list__row {
+	border-block-end: 0;
+	border-top: 1px solid var(--color-border);
+}
+
 /* Hover: the whole row takes the hover ground, 8px beyond the text so the
    text does not move. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link {
@@ -2680,6 +2723,17 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 0;
 }
 
+/* A chart in a section of a sections widget (a framed section card, 14px
+   16px in) takes none of the dashboard card's inset either: its bars and plot
+   start 17px in, not 39 (DqDoorlooptijd "Naleving": Naleving per zaaktype,
+   Verdeling doorlooptijd, Maandelijkse SLA-trend, Doorstroom).
+   @spec openspec/changes/board-sections-chart-single-inset/specs/board-sections-chart-single-inset/spec.md#requirement-a-chart-inside-a-dashboard-sections-card-is-inset-once */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget__html,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget__canvas,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget > .cn-chart-widget__footnote {
+	padding: 0;
+}
+
 /* ---- A plain sections widget on a dashboard card ------------------------ */
 /* The card is flush, because a sections widget usually draws its own cards;
    the plain one draws none, so its body takes the card's side inset and 20px
@@ -2805,6 +2859,27 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 600;
 }
 
+/* A toned cell takes the theme's status badge grounds, as the board's tones
+   are (DqHandhaving: #E7F3EA, #FFF4DE, #FCEDEC); the darkest tone has its
+   own token and otherwise deepens the error ground. Nextcloud's own mix of
+   the status colours read a shade off each.
+   @spec openspec/changes/board-matrix-tones/specs/board-matrix-tones/spec.md#requirement-a-board-matrix-cell-takes-the-themes-status-grounds */
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--success {
+	background: var(--nldesign-component-status-badge-success-background-color, var(--color-success-light, color-mix(in srgb, var(--color-success) 15%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--warning {
+	background: var(--nldesign-component-status-badge-warning-background-color, var(--color-warning-light, color-mix(in srgb, var(--color-warning) 15%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--error {
+	background: var(--nldesign-component-status-badge-error-background-color, var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--danger {
+	background: var(--nldesign-component-status-badge-danger-background-color, color-mix(in srgb, var(--color-error) 10%, var(--nldesign-component-status-badge-error-background-color, var(--color-main-background))));
+}
+
 /* A cell without a tone ("geen") sits on the page ground in the muted ink,
    as the board draws it; toned and coloured cells keep their ground.
    @spec openspec/changes/board-matrix-plain-cells/specs/board-matrix-plain-cells/spec.md#requirement-a-board-matrix-cell-without-a-tone-sits-on-the-ground-in-the-muted-ink */
@@ -3002,6 +3077,23 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A bar list with the value at the bar's end (DqProcesanalyse "Doorlooptijd
+   per status") sets its rows in 13px, the label in the secondary text, the
+   value in the main ink at 600, rows 34px apart.
+   @spec openspec/changes/chart-bar-list-value-at-end/specs/chart-bar-list-value-at-end/spec.md#requirement-a-bar-list-can-put-each-value-at-its-bars-end */
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) {
+	gap: 16px;
+}
+
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) .cn-chart-widget__bar-line {
+	font-size: 13px;
+}
+
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) .cn-chart-widget__bar-label {
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
+	color: var(--cn-board-text-soft);
+}
+
 /* A dialog's options as the boards draw them (DqVolgendeStap, DqBesluit,
    DqDocumentGenereren, DqFilterBewerken): rounded at 10px, an idle option
    edged in the dark border grey, and an 18px radio. The chosen option keeps
@@ -3023,6 +3115,23 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	background: var(--cn-board-sunken-ground);
 }
 
+/* An option's two lines at line height 1.2 and its icon at the top of the
+   row, as DqVolgendeStap draws them (rows 60 high, not 70). */
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-title:not(.cn-look-nextcloud *),
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-description:not(.cn-look-nextcloud *) {
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-icon:not(.cn-look-nextcloud *) {
+	align-self: flex-start;
+}
+
+/* The chosen option's fields start under its text: radio 18, icon 20 and
+   two 12px gaps past the row's 14px inset. */
+.cn-look-board .cn-choice-cards .cn-choice-cards__cell--with-details:has(.cn-choice-cards__row-icon) .cn-choice-cards__details:not(.cn-look-nextcloud *) {
+	padding-inline-start: 76px;
+}
+
 /* A chosen option stays white under its primary edge, as every Dq dialog board
    draws it (design-system #371); the Nextcloud look keeps the tint.
    @spec openspec/changes/board-choice-row-chosen-white/specs/board-choice-row-chosen-white/spec.md#requirement-a-chosen-board-option-is-white */

package/src/css/table.css

@@ -226,6 +226,18 @@
 	overflow-wrap: anywhere;
 }
 
+/* In a table fitted to its tile every column but the growing one asks for
+   as little width as its content allows (`width: 1%`). With
+   `overflow-wrap: anywhere` that is one character, so a wrapping head broke
+   letter by letter ("D o e l", DqDoorlooptijd "Prestaties per zaaktype",
+   240px tall). Here a wrapping column breaks between words and only breaks
+   a word that is longer than the column.
+   @spec openspec/changes/fit-table-wrap-by-word/specs/fit-table-wrap-by-word/spec.md#requirement-a-wrapping-column-in-a-fitted-table-breaks-between-words */
+.cn-data-table--fit th.cn-cell--wrap,
+.cn-data-table--fit td.cn-cell--wrap {
+	overflow-wrap: break-word;
+}
+
 /* Opt-in fixed layout (CnDataTable's `fixedLayout` prop).
 
    Under the default `table-layout: auto` a column's declared `width` is only a

package/src/integrations/builtin/contacts/CnContactsTab.vue

@@ -87,7 +87,7 @@
 				class="cn-contacts-tab__group">
 				<h3 class="cn-contacts-tab__group-title">
 					{{ group.label }}
-					<span class="cn-contacts-tab__group-count">{{ group.items.length }}</span>
+					<span v-if="!isBoard" class="cn-contacts-tab__group-count">{{ group.items.length }}</span>
 				</h3>
 				<ul class="cn-contacts-tab__list">
 					<li
@@ -97,7 +97,7 @@
 						@click="openReverseLookup(contact)">
 						<div class="cn-contacts-tab__avatar">
 							<NcAvatar
-								:size="40"
+								:size="isBoard ? 32 : 40"
 								:displayName="contact.displayName || unknownLabel"
 								:user="avatarSeed(contact)"
 								:url="contact.avatarUrl || undefined"
@@ -112,7 +112,7 @@
 									{{ contact.displayName || unknownLabel }}
 								</span>
 								<CnStatusBadge
-									v-if="contact.role"
+									v-if="contact.role && !isBoard"
 									:label="roleLabel(contact)"
 									:variant="roleVariant(contact)"
 									size="small" />
@@ -123,30 +123,54 @@
 									size="small"
 									data-testid="cn-contacts-tab-inactive" />
 							</div>
-							<div v-if="contact.email" class="cn-contacts-tab__sub">
-								<Email :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.email }}</span>
-							</div>
-							<div v-if="contact.phone" class="cn-contacts-tab__sub">
-								<Phone :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.phone }}</span>
-							</div>
-							<div v-if="contact.org" class="cn-contacts-tab__sub">
-								<OfficeBuildingOutline :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.org }}</span>
-							</div>
-							<div
-								v-if="periodOf(contact)"
-								class="cn-contacts-tab__sub"
-								data-testid="cn-contacts-tab-period">
-								<CalendarRange :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ periodOf(contact) }}</span>
-							</div>
-							<div v-if="contact.note" class="cn-contacts-tab__sub">
-								<span class="cn-contacts-tab__sub-text">{{ contact.note }}</span>
-							</div>
+							<!-- The board look sets the details on one line (DqZaakBetrokkenen). -->
+							<span v-if="isBoard && boardMetaOf(contact)"
+								class="cn-contacts-tab__meta"
+								data-testid="cn-contacts-tab-meta">{{ boardMetaOf(contact) }}</span>
+							<template v-if="!isBoard">
+								<div v-if="contact.email" class="cn-contacts-tab__sub">
+									<Email :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.email }}</span>
+								</div>
+								<div v-if="contact.phone" class="cn-contacts-tab__sub">
+									<Phone :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.phone }}</span>
+								</div>
+								<div v-if="contact.org" class="cn-contacts-tab__sub">
+									<OfficeBuildingOutline :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.org }}</span>
+								</div>
+								<div
+									v-if="periodOf(contact)"
+									class="cn-contacts-tab__sub"
+									data-testid="cn-contacts-tab-period">
+									<CalendarRange :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ periodOf(contact) }}</span>
+								</div>
+								<div v-if="contact.note" class="cn-contacts-tab__sub">
+									<span class="cn-contacts-tab__sub-text">{{ contact.note }}</span>
+								</div>
+							</template>
 						</div>
+						<template v-if="isBoard">
+							<span v-if="boardPeriodOf(contact)"
+								class="cn-contacts-tab__period"
+								data-testid="cn-contacts-tab-board-period">{{ boardPeriodOf(contact) }}</span>
+							<NcActions class="cn-contacts-tab__menu"
+								variant="secondary"
+								:aria-label="moreActionsLabel(contact)"
+								data-testid="cn-contacts-tab-menu"
+								@click.stop>
+								<NcActionButton :closeAfterClick="true" @click="unlink(contact)">
+									<template #icon>
+										<Close :size="20" />
+									</template>
+									{{ unlinkLabel }}
+								</NcActionButton>
+							</NcActions>
+						</template>
 						<button
+							v-else
 							type="button"
 							class="cn-contacts-tab__unlink"
 							:aria-label="unlinkLabel"
@@ -178,7 +202,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcAvatar, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcAvatar, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import AccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import AccountPlus from 'vue-material-design-icons/AccountPlus.vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
@@ -193,6 +217,7 @@ import CnContactPicker from '../../../components/CnContactPicker/CnContactPicker
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import CnWidgetHeaderActionButtons from '../../../components/CnWidgetWrapper/CnWidgetHeaderActionButtons.vue'
 import { normalizeLook } from '../../../composables/useLook.js'
+import { formatBoardDate } from '../../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
 import { WIDGET_BODY_ACTIONS } from '../../../utils/widgetHeaderActions.js'
 
@@ -223,6 +248,8 @@ export default {
 	name: 'CnContactsTab',
 
 	components: {
+		NcActionButton,
+		NcActions,
 		NcAvatar,
 		NcButton,
 		NcEmptyContent,
@@ -313,6 +340,11 @@ export default {
 	},
 
 	computed: {
+		/** @return {boolean} The board look draws the rows as DqZaakBetrokkenen does. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
 		/**
 		 * The two header buttons in the order and weight of the look: the
 		 * board look draws Link contact then New contact, both outlined; the
@@ -605,6 +637,49 @@ export default {
 		 *
 		 * @return {string} The window.
 		 */
+		/**
+		 * A person's details on one line for the board look: e-mail, phone,
+		 * organisation and note, separated by middots.
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		boardMetaOf(contact) {
+			return [contact?.email, contact?.phone, contact?.org, contact?.note].filter((part) => typeof part === 'string' && part !== '').join(' · ')
+		},
+
+		/**
+		 * The validity window in the board's short dates: "Vanaf 3 okt",
+		 * "Tot 31 okt" or "3 okt – 31 okt".
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		boardPeriodOf(contact) {
+			const from = formatBoardDate(contact?.validFrom || '')
+			const until = formatBoardDate(contact?.validUntil || '')
+			if (from === '' && until === '') {
+				return ''
+			}
+			if (until === '') {
+				return t('nextcloud-vue', 'From {date}', { date: from })
+			}
+			if (from === '') {
+				return t('nextcloud-vue', 'Until {date}', { date: until })
+			}
+			return `${from} – ${until}`
+		},
+
+		/**
+		 * The label of a person's actions menu.
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		moreActionsLabel(contact) {
+			return t('nextcloud-vue', 'More actions for {name}', { name: contact?.displayName || this.unknownLabel })
+		},
+
 		periodOf(contact) {
 			const from = contact?.validFrom || ''
 			const until = contact?.validUntil || ''

package/src/integrations/builtin/contacts/__tests__/CnContactsTabBoardRows.spec.js

@@ -0,0 +1,67 @@
+/**
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * CnContactsTab in the board look draws a person as DqZaakBetrokkenen
+ * "Partijen" does: no role badge under a group that already names the role
+ * (r26a showed a role id as a badge), no count beside the group heading, the
+ * contact details on one line, the period at the right in the board's short
+ * date ("Vanaf 3 okt"), and the remove action in a "…" menu.
+ *
+ * @spec openspec/changes/board-contacts-rows/specs/contacts/spec.md
+ */
+
+const { flushPromises, mount } = require('@vue/test-utils')
+const CnContactsTab = require('../CnContactsTab.vue').default
+const { formatBoardDate } = require('../../../../utils/boardDate.js')
+
+const ROWS = [{
+	id: 1,
+	contactUid: 'c1',
+	displayName: 'Sanne de Vries',
+	role: '3c0f5a00-0000-4000-a000-0000000c0001',
+	email: 'sanne@example.nl',
+	note: 'ingelogd met DigiD',
+	validFrom: '2026-10-03',
+}]
+
+function mountTab(look) {
+	return mount(CnContactsTab, {
+		propsData: { objectId: 'o1', register: 'r1', schema: 's1' },
+		global: { provide: { cnLook: look } },
+	})
+}
+
+describe('CnContactsTab board rows', () => {
+	beforeEach(() => {
+		global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve({ results: ROWS, total: 1 }) })
+	})
+
+	afterEach(() => {
+		delete global.fetch
+	})
+
+	it('draws the board row in the board look', async () => {
+		const w = mountTab('board')
+		await flushPromises()
+		const item = w.find('.cn-contacts-tab__item')
+		expect(item.find('.cn-contacts-tab__group-count').exists()).toBe(false)
+		expect(w.find('.cn-contacts-tab__group-count').exists()).toBe(false)
+		expect(item.text()).not.toContain('3c0f5a00')
+		expect(item.find('[data-testid="cn-contacts-tab-meta"]').text()).toBe('sanne@example.nl · ingelogd met DigiD')
+		expect(item.find('[data-testid="cn-contacts-tab-board-period"]').text()).toBe(`From ${formatBoardDate('2026-10-03')}`)
+		expect(item.find('.cn-contacts-tab__unlink').exists()).toBe(false)
+		expect(item.find('[data-testid="cn-contacts-tab-menu"]').exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('keeps the Nextcloud row in the Nextcloud look', async () => {
+		const w = mountTab('nextcloud')
+		await flushPromises()
+		const item = w.find('.cn-contacts-tab__item')
+		expect(w.find('.cn-contacts-tab__group-count').exists()).toBe(true)
+		expect(item.find('.cn-contacts-tab__unlink').exists()).toBe(true)
+		expect(item.find('[data-testid="cn-contacts-tab-meta"]').exists()).toBe(false)
+		w.unmount()
+	})
+})