@conduction/nextcloud-vue 2.99.0 → 2.100.0

package/src/css/dialog.css

@@ -173,6 +173,54 @@
 	color: var(--color-main-text);
 }
 
+/* A Nextcloud text field or text area in a board dialog is the board's field:
+   its label above the control at 14px/600, the control 40px with a 1px grey
+   border and radius 8 (PlanItemDialog, DqWerkvoorraad). NcInputField draws
+   its border as a 65%-transparent shadow, which on the white dialog read as
+   an empty band, and floats its label inside the border. A field with
+   `labelOutside` keeps the app's own label and takes the same control. */
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label),
+.cn-dialog-board .dialog__content .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+/* The doubled class outranks NcInputField's raised-label rule (focused or
+   filled), which would pin the label's top as well and squash it. */
+.cn-dialog-board .dialog__content .input-field__input + .input-field__label.input-field__label,
+.cn-dialog-board .dialog__content .textarea__input + .textarea__label.textarea__label {
+	inset-block-start: auto;
+	inset-block-end: calc(100% + 4px);
+	inset-inline: 0 auto;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	color: var(--color-main-text);
+	font-size: var(--cn-field-label-size, 14px);
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-dialog-board .dialog__content .input-field__main-wrapper {
+	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
+}
+
+.cn-dialog-board .dialog__content .input-field__input,
+.cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
+.cn-dialog-board .dialog__content .textarea__input,
+.cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border-radius: 8px;
+	box-shadow: 0 0 0 1px var(--color-border-dark);
+	font-size: var(--cn-field-text-size, 15px);
+}
+
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
+	opacity: 1 !important;
+}
+
 /* Type-to-confirm: a labelled 40px field with a monospace value and a hint. */
 .cn-dialog__confirm-field {
 	display: flex;

package/src/css/look-board.css

@@ -302,6 +302,40 @@
 	color: inherit;
 }
 
+/* A caption's edit pencil ("Mijn zaaktypen") sits on the caption's line at
+   its end, 4px in: a 28px round muted button with a 16px icon that adds no
+   height (DqZijbalk). It is placed absolutely because a theme may force the
+   caption to `display: block` at id strength (thematiq's Zuiddrecht sheet),
+   which put the pencil on a line of its own. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption:has(.app-navigation-caption__actions) {
+	position: relative;
+	padding-inline-end: 36px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions {
+	--default-clickable-area: 28px;
+	position: absolute;
+	inset-block-start: -6px;
+	inset-inline-end: 4px;
+	margin: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions .button-vue {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	width: 28px;
+	min-width: 28px;
+	height: 28px;
+	min-height: 28px;
+	padding: 0;
+	border-radius: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions .button-vue svg {
+	width: 16px;
+	height: 16px;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry,
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry-link {
 	min-height: 42px;
@@ -316,7 +350,15 @@
 	color: var(--color-main-text);
 }
 
+/* The open entry sits on the tonal primary. NcAppNavigationItem paints an
+   active entry with a 16% (22% hovered) primary mix at `!important`, so the
+   board value needs `!important` too; the selector is the more specific one.
+   The link carries the same ground. */
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active:hover {
+	background-color: var(--color-primary-element-light) !important;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active .app-navigation-entry-link {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
@@ -362,9 +404,11 @@
 	font-weight: 700;
 }
 
+/* White on the error colour: --color-error-text is the error colour for text on
+   a light ground (#8A0000 under thematiq), not the text on an error pill. */
 .cn-look-board .cn-app-nav__count--attention {
 	background: var(--color-error);
-	color: var(--color-error-text, var(--color-primary-element-text));
+	color: var(--color-primary-element-text);
 }
 
 /* The footer: Help, then Advanced, whatever the declared order. */
@@ -951,6 +995,44 @@
 	--nldesign-color-on-surface: var(--cn-status-badge-ink);
 }
 
+/* ---- Info notes (NcNoteCard type="info") -------------------------------- */
+/* The board's info note is a light-blue rounded box: no edge bar, 12px 14px
+   of padding, radius 8, an 18px icon 10px before the text, 14px text in the
+   deep primary ink at 1.5, and a bold heading line (DqBesluit and 13 other
+   boards). NcNoteCard paints its ground and ink with `!important`, and a
+   theme forces the body ink onto every p and span (thematiq), so the ground,
+   the ink and the paragraph colour carry `!important` here too, scoped to
+   the board look; the ink also goes to --nldesign-color-on-surface. */
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	--note-card-icon-size: 18px;
+	--note-theme: var(--color-primary-element-light-text);
+	gap: 10px;
+	padding: 12px 14px;
+	border-inline-start: 0;
+	border-radius: 8px;
+	background-color: var(--color-primary-element-light) !important;
+	color: var(--color-primary-element-light-text) !important;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) p {
+	color: var(--color-primary-element-light-text) !important;
+	font-size: inherit;
+	line-height: inherit;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) .notecard__heading {
+	font-size: inherit;
+	font-weight: 700 !important;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) .notecard__icon {
+	padding-top: 1px;
+	color: var(--color-primary-element-light-text);
+}
+
 /* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
 /* The board sets every waiting time ("3 dagen", "4 uur") in weight 600; a
    late one is red through its variant class. */

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.122.0",
+	"version": "2.123.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -97,6 +97,8 @@
 							"type": { "type": "string", "enum": ["info", "config-fields", "choice", "run-action", "summary", "component"], "description": "Built-in step renderer." },
 							"title": { "type": "string" },
 							"body": { "type": "string", "description": "info: explanatory copy." },
+							"note": { "type": "string", "minLength": 1, "description": "choice: a footnote under the options, translated like body." },
+							"footnote": { "type": "string", "minLength": 1, "description": "choice: the same footnote under another name; note wins when both are set." },
 							"required": { "type": "boolean", "default": false, "description": "When true the step gates the app until done." },
 							"schema": { "description": "config-fields: a JSON Schema ref (string) or inline object rendered via fieldsFromSchema." },
 							"configKey": { "type": "string", "description": "choice: app-config key the selection is written to." },
@@ -4024,6 +4026,14 @@
 									"type": "boolean",
 									"description": "false removes Request a feature, Report a bug and Documentation, for an app that offers them in its own help menu."
 								},
+								"showMarkUnread": {
+									"type": "boolean",
+									"description": "false removes the built-in Mark as unread entry."
+								},
+								"showOpenSidebar": {
+									"type": "boolean",
+									"description": "false removes the built-in Open sidebar entry of the board look."
+								},
 								"label": {
 									"type": "string",
 									"minLength": 1,
@@ -4333,6 +4343,20 @@
 							"minLength": 1,
 							"description": "type='detail', board look: the meta line on row 2 of the header, after the breadcrumb and a middle dot (screens-detail-page-parity). A field template such as `\"via {channel}\"`: every `{path}` is read from the record, and a line with an empty value is dropped. Maps to CnDetailPage `headerMeta`. type='index' | 'dashboard' | 'settings' (page-header-breadcrumb): the note after the breadcrumb and a middle dot under the title; on an index page `{total}` and `{shown}` are the list's counts."
 						},
+						"headerMetaCounts": {
+							"type": "object",
+							"description": "type='index': the other lists headerMeta counts, by name. Each is read as one list total and fills `{count:<name>}` in headerMeta (\"{total} contracten bij {count:suppliers} leveranciers\"); while a count loads or when it fails, the note is left out.",
+							"additionalProperties": {
+								"type": "object",
+								"required": ["register", "schema"],
+								"additionalProperties": false,
+								"properties": {
+									"register": { "type": "string", "minLength": 1 },
+									"schema": { "type": "string", "minLength": 1 },
+									"filter": { "type": "object" }
+								}
+							}
+						},
 						"tabsLabel": {
 							"type": "string",
 							"minLength": 1,