@conduction/nextcloud-vue 2.149.0 → 2.151.0

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

@@ -19,6 +19,13 @@
 	--cn-board-notice-ink: var(--color-warning-text, #7a4f00);
 	/* The done marker of the next-step card. */
 	--cn-board-success-tint: var(--color-success-light, #e7f3ea);
+	/* The ink on that tint: a completed plan row's state. */
+	--cn-board-success-ink: var(--color-success-text, #1e6b2a);
+	/* The ink on the light primary fill: an active plan row's state. */
+	--cn-board-primary-light-ink: var(--color-primary-element-light-text, #234a78);
+	/* The teal badge of a public history entry. */
+	--cn-board-teal-tint: var(--nldesign-color-teal-light, #e3f1f3);
+	--cn-board-teal-ink: var(--nldesign-color-teal-dark, #1d5e66);
 	/* Card h2 and side heading. */
 	--cn-board-heading-size: 17px;
 	--cn-board-side-heading-size: 15px;
@@ -582,6 +589,20 @@
 	font-size: 13px;
 }
 
+/* The initials beside a message: the resident's in the soft ink on the chip
+   ground, ours in the primary tint's ink on its light ground, as
+   DqZaakContact draws SV and PJ (r31: the initials read main ink).
+   @spec openspec/changes/board-conversation-avatar-tones/specs/board-conversation-avatar-tones/spec.md#requirement-a-messages-initials-take-their-sides-tone */
+.cn-look-board .cn-conversation-thread .cn-conversation-thread__avatar:not(.cn-look-nextcloud *) {
+	background: var(--color-background-dark);
+	color: var(--cn-board-text-soft);
+}
+
+.cn-look-board .cn-conversation-thread .cn-conversation-thread__message--us .cn-conversation-thread__avatar:not(.cn-look-nextcloud *) {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
 /* A message keeps 64px free on the side away from its avatar, so the two
    sides read as two columns; the line above it is 13px in the soft ink at the
    normal line height, and our bubble's text is in the main ink. Each names
@@ -849,6 +870,13 @@
 	font-weight: 500;
 }
 
+/* The mail card's header buttons (Mail koppelen, Mail opstellen) are the
+   board's 40px control (DqZaakEmail; probed on :8080: 34 live).
+   @spec openspec/changes/board-mail-header-buttons-40/specs/board-mail-header-buttons-40/spec.md#requirement-the-mail-cards-header-buttons-are-40px */
+.cn-look-board .cn-mail-tab__header-actions .button-vue:where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}
+
 /* The files table's checkbox column is the board's 42px (12px either side
    of the 18px box): DqZaakDocumenten and DqDocumentenBeheer both draw it so.
    The component's 36px pushed the file icon and name 6px left (r31: name 96
@@ -2428,3 +2456,112 @@
 .cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *):has(> .cn-widget-wrapper__header .cn-widget-wrapper__subtitle) > .cn-widget-wrapper__content:has(> .cn-object-data-widget__grid-wrap) {
 	padding-top: 14px;
 }
+
+/* Buttons in a side card stand as the boards draw them in a column: the full
+   width of the card with their label at the start (DqSociaalDomein
+   "Toestemming intrekken" and "Markeer voor aandacht"), a facts action at the
+   34px control height.
+   @spec openspec/changes/board-r31-side-buttons-checklist-boxes/specs/board-r31-side-buttons-checklist-boxes/spec.md#requirement-a-side-cards-button-spans-the-card-with-its-label-at-the-start */
+.cn-look-board .cn-detail-page__side .cn-facts-widget__actions:not(.cn-look-nextcloud *) > .button-vue {
+	--button-size: 34px;
+	--default-clickable-area: 34px;
+	flex: 1 1 100%;
+	height: 34px;
+	min-height: 34px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-facts-widget__actions:not(.cn-look-nextcloud *) > .button-vue .button-vue__wrapper,
+.cn-look-board .cn-attention-flag:not(.cn-look-nextcloud *) .button-vue .button-vue__wrapper {
+	justify-content: flex-start;
+}
+
+/* A checklist's boxes are the boards' 18px, an open one in the control
+   border grey and a ticked one in the primary colour (DqTaak "Checklist").
+   @spec openspec/changes/board-r31-side-buttons-checklist-boxes/specs/board-r31-side-buttons-checklist-boxes/spec.md#requirement-a-board-checklist-box-is-18px-and-grey-while-open */
+.cn-look-board .cn-checklist-widget__item .checkbox-radio-switch:not(.cn-look-nextcloud *) .checkbox-content__icon svg {
+	width: 18px;
+	height: 18px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-radio-switch:not(.checkbox-radio-switch--checked):not(.cn-look-nextcloud *) .checkbox-content__icon {
+	color: var(--color-border-maxcontrast);
+}
+
+/* In a side card the pill and its date stand 8px apart, as the boards draw
+   them (DqOrganisatie "Lopende zaken", "Open tickets"); the row's own 16px
+   is for a full-width list.
+   @spec openspec/changes/record-list-pill-variant-when/specs/record-list/spec.md#requirement-a-side-rows-pill-and-date-stand-8px-apart */
+.cn-look-board .cn-detail-page__side .cn-record-list__aside:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
+/* A plan in the board look, as DqZaak draws "Zaakplan": ruled rows 10px
+   high on each side, the name at 15px/500 over its muted line, the state a
+   13px/600 pill toned by state (r31: grey rows, 600 names, 400 pills).
+   @spec openspec/changes/board-plan-rows/specs/plan-widget/spec.md */
+.cn-look-board .cn-plan .cn-plan-row:not(.cn-look-nextcloud *) {
+	gap: 6px 16px;
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
+	background: transparent;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__name:not(.cn-look-nextcloud *) {
+	font-size: 15px;
+	font-weight: 500;
+	line-height: normal;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__meta:not(.cn-look-nextcloud *) {
+	line-height: normal;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__state:not(.cn-look-nextcloud *) {
+	padding: 3px 10px;
+	border-radius: 12px;
+	background: var(--color-background-dark);
+	color: var(--cn-board-text-soft);
+	font-size: 13px;
+	font-weight: 600;
+	line-height: normal;
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__state[data-state='completed']:not(.cn-look-nextcloud *) {
+	background: var(--cn-board-success-tint);
+	color: var(--cn-board-success-ink);
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__state[data-state='active']:not(.cn-look-nextcloud *) {
+	background: var(--color-primary-element-light);
+	color: var(--cn-board-primary-light-ink);
+}
+
+/* The history card's note composer and entries as DqZaakHistorie draws them
+   (r31 strict verdict): the note field three lines high on a 1.5 line with
+   10px 12px inside, the add button at the board's 40px, the title-row
+   buttons 12px apart, and an entry the requester sees marked with a 12px
+   teal pill.
+   @spec openspec/changes/board-history-composer/specs/timeline/spec.md */
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__draft:not(.cn-look-nextcloud *) {
+	min-height: calc(3 * 1.5em + 22px);
+	padding: 10px 12px;
+	line-height: 1.5;
+}
+
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__composer-foot .button-vue:where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}
+
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__header-actions:not(.cn-look-nextcloud *) {
+	gap: 12px;
+}
+
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__badge--public:not(.cn-look-nextcloud *) {
+	padding: 2px 8px;
+	border-radius: 10px;
+	background: var(--cn-board-teal-tint);
+	color: var(--cn-board-teal-ink);
+	font-size: 12px;
+	font-weight: 600;
+}

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

@@ -1514,17 +1514,19 @@
 	margin: 0;
 	font-size: 17px;
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: normal;
 	text-decoration: none;
 	white-space: normal;
 }
 
 .cn-look-board .cn-object-card--board .cn-object-card__record-meta {
 	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: normal;
 	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: normal;
 }
 
 /* The meta line, note and description are paragraphs: each hands the theme,
@@ -1532,11 +1534,13 @@
 .cn-look-board .cn-object-card--board .cn-object-card__record-note {
 	--nldesign-component-paragraph-font-size: 13px;
 	--nldesign-component-paragraph-font-weight: 600;
+	--nldesign-component-paragraph-line-height: normal;
 	--nldesign-component-paragraph-color: var(--cn-board-text-soft);
 	margin: 0;
 	color: var(--cn-board-text-soft);
 	font-size: 13px;
 	font-weight: 600;
+	line-height: normal;
 }
 
 .cn-look-board .cn-object-card--board .cn-object-card__record-note--purple {

package/src/css/look-board.css

@@ -317,6 +317,17 @@
 	font-size: 14px;
 }
 
+/* A link action is drawn as a button action: the board's 40px, no outer
+   margin (DqMijnWerk "Vandaag eerst": live links grew to the theme's 44px
+   link target and the button kept Nextcloud's 3px margin, 46px tall and
+   13px apart where the board draws 40 to 42 and 10).
+   @spec openspec/changes/board-banner-actions-as-drawn/specs/board-banner-actions-as-drawn/spec.md#requirement-a-board-banners-actions-are-drawn-alike */
+.cn-look-board .cn-banner-widget__action.cn-banner-widget__action:not(.cn-look-nextcloud *) {
+	height: var(--cn-board-control-height);
+	min-height: 0;
+	margin: 0;
+}
+
 .cn-look-board .cn-banner-widget__action--primary:not(.cn-look-nextcloud *) {
 	border: 0;
 }
@@ -346,7 +357,10 @@
 	min-height: var(--cn-board-control-height);
 }
 
-.cn-look-board .cn-workspace-filter-widget__form:not(.cn-look-nextcloud *) .button-vue {
+/* `.button-vue.button-vue`: NcButton sets its own padding on a button
+   without an icon (`.button-vue:has(.button-vue__icon:empty)`), as strong as
+   a single class here, and loads later. */
+.cn-look-board .cn-workspace-filter-widget__form:not(.cn-look-nextcloud *) .button-vue.button-vue {
 	--button-size: var(--cn-board-control-height);
 	--button-padding: 16px;
 }
@@ -760,7 +774,7 @@
 /* "CSV exporteren" beside "Rapport laden" is the neutral secondary at the
    40px control height, 14px in (DqTermijnen).
    @spec openspec/changes/workspace-filter-export-table/specs/workspace-filter-export-table/spec.md#requirement-a-workspace-filter-input-can-export-the-table-it-loads */
-.cn-look-board .cn-workspace-filter-widget__form:not(.cn-look-nextcloud *) .button-vue.cn-workspace-filter-widget__export {
+.cn-look-board .cn-workspace-filter-widget__form:not(.cn-look-nextcloud *) .button-vue.button-vue.cn-workspace-filter-widget__export {
 	--button-size: var(--cn-board-control-height);
 	--button-padding: 14px;
 }
@@ -813,6 +827,29 @@
 	background: var(--color-background-hover);
 }
 
+/* ---- A card table's head controls -------------------------------------- */
+/* The head of a card's table (CnTasksWidget, CnRecordListWidget) draws its
+   sort control as the bare label, square, and the funnel after it 4px on as a
+   22px button with a 4px radius, as CnDataTable's board head does
+   (DqZaakTaken). Nextcloud's `button` rule gave the label an 8px radius and a
+   3px end margin (7px to the funnel) and NcActions its 8px trigger radius;
+   the extra class outranks both. */
+.cn-look-board .cn-tasks-widget__head .cn-tasks-widget__head-sort:not(.cn-look-nextcloud *),
+.cn-look-board .cn-record-list__head .cn-record-list__sort:not(.cn-look-nextcloud *) {
+	margin: 0;
+	border-radius: 0;
+}
+
+.cn-look-board .cn-tasks-widget__head .cn-tasks-widget__head-filter .button-vue:not(.cn-look-nextcloud *),
+.cn-look-board .cn-record-list__head .cn-record-list__head-filter .button-vue:not(.cn-look-nextcloud *) {
+	--button-size: 22px;
+	width: 22px;
+	min-width: 22px;
+	height: 22px;
+	min-height: 22px;
+	border-radius: 4px;
+}
+
 /* ---- The buildiq square ------------------------------------------------ */
 /* The board square's size. Its orange is set in patches.css, beside the
    brand orange it replaces, since this sheet names no colour literal. */
@@ -2593,6 +2630,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	color: var(--color-main-text);
 	font-size: 15px;
 	font-weight: 600;
+	line-height: normal;
 }
 
 /* A row whose one action is outlined (`rowAction.variant: "outlined"`,
@@ -2621,9 +2659,13 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	background: var(--color-background-hover);
 }
 
+/* Title and meta lines at the font's normal line height: a two-line row is
+   60px, as every Dq dashboard board draws it (r31: 69 at Nextcloud's 1.5).
+   @spec openspec/changes/board-dashboard-rows-normal-leading/specs/board-dashboard-rows-normal-leading/spec.md#requirement-a-board-dashboard-row-is-set-at-the-normal-line-height */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__meta {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
+	line-height: normal;
 }
 
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__trailing {
@@ -2680,6 +2722,25 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	border-top: 1px solid var(--color-border);
 }
 
+/* Note rows (DqDagAfsluiten "Nog open van vandaag"): the kind pill 12px
+   from the title, the record button and the closing buttons at the board's
+   40px, and the closing pair at the two ends of their line (Annuleren left,
+   Dag afsluiten right).
+   @spec openspec/changes/board-record-notes-controls/specs/board-record-notes-controls/spec.md#requirement-board-note-rows-draw-the-boards-controls */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-notes__head {
+	gap: 8px 12px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-notes__fields .button-vue,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-notes__all-actions .button-vue {
+	--button-size: var(--cn-board-control-height);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-notes__all-actions {
+	flex: 1 1 100%;
+	justify-content: space-between;
+}
+
 /* 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 {
@@ -2766,6 +2827,21 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 0 var(--cn-board-dashboard-card-inset) 10px;
 }
 
+/* The stacked bar's legend in the board's type: the label 14px and the
+   count 22px, both at the font's normal line height, 2px apart: a 46px item
+   (DqMijnWerk "Mijn 14 zaken per stap"; live drew 14.25/22.5px at 1.5 and
+   1.2, a 50.4px item).
+   @spec openspec/changes/board-stacked-bar-legend-type/specs/board-stacked-bar-legend-type/spec.md#requirement-a-board-stacked-bar-legend-is-set-in-the-boards-type */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-stacked-bar:not(.cn-stacked-bar--compact) .cn-stacked-bar__label {
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-stacked-bar:not(.cn-stacked-bar--compact) .cn-stacked-bar__count {
+	font-size: 22px;
+	line-height: normal;
+}
+
 /* DqMijnWerk "Mijn archiefbeoordelingen": its rows and its empty line. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-decision-list {
 	padding: 0 var(--cn-board-dashboard-card-inset) 20px;

package/src/integrations/builtin/calendar/eventStatus.js

@@ -25,9 +25,43 @@ export function eventStatusLabel(ev) {
 	if (status === 'cancelled') {
 		return t('nextcloud-vue', 'Cancelled')
 	}
+	const answer = inviteeAnswer(ev)
+	if (answer === 'needs-action') {
+		return t('nextcloud-vue', 'Invited')
+	}
+	if (answer === 'accepted') {
+		return t('nextcloud-vue', 'Accepted')
+	}
+	if (answer === 'declined') {
+		return t('nextcloud-vue', 'Declined')
+	}
+	if (answer === 'tentative') {
+		return t('nextcloud-vue', 'Tentative')
+	}
 	return ''
 }
 
+/**
+ * Where the invitees stand when the event itself has no status: a decline
+ * first, then anyone still to answer, then a tentative answer, else accepted
+ * when all accepted; '' without invitees that answered or were asked.
+ *
+ * @param {object} ev The event.
+ * @return {string} `declined`, `needs-action`, `tentative`, `accepted` or ''.
+ * @spec openspec/changes/calendar-invitee-answer/specs/calendar-integration/spec.md#requirement-an-appointment-without-a-status-shows-where-its-invitees-stand
+ */
+export function inviteeAnswer(ev) {
+	const answers = (Array.isArray(ev?.attendees) ? ev.attendees : [])
+		.map((att) => (att && typeof att === 'object' ? String(att.partstat || '').toLowerCase() : ''))
+		.filter(Boolean)
+	for (const answer of ['declined', 'needs-action', 'tentative']) {
+		if (answers.includes(answer)) {
+			return answer
+		}
+	}
+	return answers.length > 0 && answers.every((answer) => answer === 'accepted') ? 'accepted' : ''
+}
+
 /**
  * The badge tone of the event's status.
  *
@@ -45,7 +79,14 @@ export function eventStatusVariant(ev) {
 	if (status === 'cancelled') {
 		return 'error'
 	}
-	return 'default'
+	const answer = inviteeAnswer(ev)
+	if (answer === 'accepted') {
+		return 'success'
+	}
+	if (answer === 'declined') {
+		return 'error'
+	}
+	return answer === '' ? 'default' : 'info'
 }
 
 /**

package/src/utils/fillTemplate.js

@@ -60,6 +60,22 @@ export function formatLongDate(value, now = new Date(), withYear = false) {
 	}
 }
 
+/**
+ * How many entries a list holds; with a key, the entries of that list in each
+ * of its entries summed (`{sections|count:items}`: the questions of every
+ * section of a checklist).
+ *
+ * @param {Array} list The list.
+ * @param {string} key The key of each entry's own list, or '' to count the entries.
+ * @return {number} The count.
+ */
+function countEntries(list, key) {
+	if (key === '') {
+		return list.length
+	}
+	return list.reduce((sum, entry) => sum + (entry && Array.isArray(entry[key]) ? entry[key].length : 0), 0)
+}
+
 /**
  * Format one token value.
  *
@@ -76,7 +92,7 @@ export function formatLongDate(value, now = new Date(), withYear = false) {
 function formatValue(value, format, now, arg = '', object = null, config = null, formatters = null) {
 	// `{list|count}`: how many entries a list holds, nothing for an empty one.
 	if (format === 'count') {
-		const count = Array.isArray(value) ? value.length : Number(value)
+		const count = Array.isArray(value) ? countEntries(value, arg) : Number(value)
 		return Number.isFinite(count) && count > 0 ? String(count) : ''
 	}
 	if (value === null || value === undefined || value === '' || typeof value === 'object') {
@@ -160,7 +176,8 @@ function formatValue(value, format, now, arg = '', object = null, config = null,
  * ("vandaag, 09.42"), `{path|ago}` says how long ago it was ("10 min
  * geleden", "vanochtend", "vrijdag"), and `{path|days}` is the
  * whole days since that date ("has waited {createdAt|days} days"),
- * `{path|count}` is how many entries a list holds (nothing for an empty one),
+ * `{path|count}` is how many entries a list holds (nothing for an empty one;
+ * `{path|count:key}` sums the `key` list of each entry),
  * `{path|lower}` writes the value in lower case ("Step 2: {statusLabel|lower}"
  * reads "Step 2: in progress" mid-sentence), and any other name is one of
  * the app's formatters, passed as `context.formatters` (`{id|caseAddress}`).