@conduction/nextcloud-vue 2.121.0 → 2.123.0

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

@@ -321,6 +321,29 @@
 	font-weight: 600;
 }
 
+/* With the sidebar open the Filter button is pressed: the board draws it on
+   the light primary ground with a primary edge and the main ink, not as a
+   filled primary button (DqFilterBeheren). Its count badge stays the filled
+   primary pill. NcButton redefines the main text inside the button, so the ink is taken
+   on the bar; the theme's forced primary ink and edge read the button's own
+   properties.
+   @spec openspec/changes/board-index-sidebar/specs/board-index-sidebar/spec.md#requirement-the-pressed-filter-button-is-the-boards-light-toggle */
+.cn-look-board .cn-actions-bar {
+	--cn-filter-pressed-ink: var(--color-main-text);
+}
+
+.cn-look-board .cn-actions-bar__filter-button.button-vue[aria-pressed='true'] {
+	--nldesign-component-button-primary-action-color: var(--cn-filter-pressed-ink);
+	--nldesign-component-button-primary-action-border-color: var(--color-primary-element);
+	border-color: var(--color-primary-element);
+	background-color: var(--color-primary-element-light);
+	color: var(--cn-filter-pressed-ink);
+}
+
+.cn-look-board .cn-actions-bar__filter-button.button-vue[aria-pressed='true']:hover {
+	background-color: var(--color-primary-element-light-hover);
+}
+
 .cn-look-board .cn-actions-bar__filter-badge {
 	display: inline-flex;
 	align-items: center;
@@ -634,16 +657,36 @@
 	width: 18%;
 }
 
-/* The board's data cells sit 12px apart (PqTickets), the first one 18px from
-   the selection column; the selection and menu columns keep 16px. */
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon),
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon) {
+/* An index table pads every cell 16px at the sides (DqZaken). The plain-title
+   table (`rowTitle: "plain"`: PqTickets, OcPublicaties) sets its data cells
+   12px apart and its title column 18px from the selection column; the
+   selection and menu columns keep 16px. The title column is left out of the
+   12px rule, which would otherwise outrank the 18px one.
+   @spec openspec/changes/board-table-density/specs/board-table-density/spec.md#requirement-a-board-table-pads-its-cells-as-the-boards-draw-them */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon):not(.cn-table-head--title),
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon):not(.cn-table-col--title) {
 	padding-inline: 12px;
 }
 
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title,
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td.cn-table-col--title {
-	padding-inline-start: 18px;
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table th.cn-table-head--title,
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title {
+	padding-inline: 18px 12px;
+}
+
+/* A table that is not an index page's main list sits in a card and is the
+   compact one: 10px 12px in the header, 11px 12px in the cells
+   (DqInstellingen, DqVthInstellingen, DqZaaktype, DqTermijnen). The selection
+   column keeps its 16px, so it stays 60px wide. */
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table th {
+	padding: 10px 12px;
+}
+
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table td {
+	padding: 11px 12px;
+}
+
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table .cn-table-col--checkbox {
+	padding-inline: 16px;
 }
 
 .cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td > .cn-cell-renderer {
@@ -873,12 +916,15 @@
 }
 
 /* A page link is a <button>: Nextcloud's `button` rule sets it bold, the
-   boards set the links at the regular weight and only the current page at 600. */
+   boards set the links at the regular weight and only the current page at 600.
+   The boards size a link's content box at 34px, so a bordered link is 36px
+   and the borderless current page 34px (DqZaken "2", "Volgende", "1").
+   @spec openspec/changes/board-pagination-links/specs/board-pagination-links/spec.md#requirement-a-board-page-link-is-sized-as-the-boards-draw-it */
 .cn-look-board .cn-pagination--board .cn-pagination__board-link {
 	box-sizing: border-box;
-	min-width: 34px;
-	height: 34px;
-	min-height: 34px;
+	min-width: 36px;
+	height: 36px;
+	min-height: 36px;
 	margin: 0;
 	padding: 0 8px;
 	border: 1px solid var(--color-border);
@@ -903,7 +949,10 @@
 }
 
 .cn-look-board .cn-pagination--board .cn-pagination__board-link--current {
-	border-color: var(--color-primary-element);
+	min-width: 34px;
+	height: 34px;
+	min-height: 34px;
+	border: 0;
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-weight: 600;
@@ -1271,6 +1320,26 @@
 	display: none;
 }
 
+/* The index sidebar as the board draws it (IndexZijpaneel, DqFilterBeheren):
+   360px wide, the line under the title 14px muted, and a round close button.
+   The title and the tab row are the `.cn-index-sidebar-panel` rules.
+   NcAppSidebar renders as the root's direct child, so the rules reach it
+   through the root, as the toggle rule above does.
+   @spec openspec/changes/board-index-sidebar/specs/board-index-sidebar/spec.md#requirement-the-board-index-sidebar-draws-the-boards-side-panel */
+.cn-look-board:has(.cn-index-page) > .app-sidebar {
+	--app-sidebar-width: 360px;
+}
+
+.cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar-header__subname {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar__close {
+	border-radius: 50%;
+	color: var(--cn-board-text-soft);
+}
+
 /* The folder pane as a card (DqAfdelingen): 280px, a hairline border, 12px
    corners, with each folder's count in a grey pill. */
 .cn-look-board .cn-index-page__folder-pane {
@@ -1406,3 +1475,73 @@
 	border-bottom: none;
 	padding-block: 2px;
 }
+
+/* ---- The index side panel (CnIndexSidebar, board IndexZijpaneel) -------- */
+/* The panel's title is 20px bold without the schema icon, and its tabs are
+   one row of 40px labels, 14px weight 600 in the soft ink, the open one in
+   the deep primary ink and underlined 2px in the primary colour on the
+   strip's rule (DqFilterBeheren). NcAppSidebar stacks the icon over the
+   label in a 54px tile with a highlight bar; the board does neither. The
+   header rule repeats NcAppSidebar's own chain to outrank it.
+   @spec openspec/changes/board-index-sidebar-tabs/specs/board-index-sidebar-tabs/spec.md#requirement-the-board-index-side-panel-draws-the-boards-header-and-tab-row */
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__desc .app-sidebar-header__name-container .app-sidebar-header__mainname-container h2.app-sidebar-header__mainname {
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1.2;
+	min-height: 0;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__figure:has(> .cn-index-sidebar__header-icon) {
+	display: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__nav[role="tablist"] {
+	justify-content: flex-start;
+	gap: 4px;
+	margin: 0;
+	padding: 14px 12px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__highlight {
+	display: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"] {
+	flex: 0 0 auto;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+	box-sizing: border-box;
+	height: 40px;
+	min-height: 40px;
+	margin: 0 0 -1px;
+	padding: 0 10px;
+	border: 0;
+	border-bottom: 2px solid transparent;
+	border-radius: 0;
+	background: transparent;
+	color: var(--cn-board-text-soft);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"] * {
+	font-weight: inherit;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"]::after {
+	content: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"]:hover {
+	background: transparent;
+	border-bottom-color: var(--color-border-dark);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"][aria-selected="true"] {
+	background: transparent;
+	border-bottom-color: var(--color-primary-element);
+	color: var(--color-primary-element-light-text);
+}

package/src/css/look-board.css

@@ -187,8 +187,8 @@
 /* ---- Dashboard switch row --------------------------------------------- */
 /* The switch row under a board dashboard's header (DqMijnWerk, DqMijnTeam).
    The link pills take the deep primary ink of the boards' primary pills: the
-   light primary text mixed toward the main text, which only raises its
-   contrast on the light primary ground. A theme that forces the link ink onto
+   light primary text, the ink a theme pairs with the light primary ground
+   (DqMijnWerk #234a78 on #eaf0f7, 8:1). A theme that forces the link ink onto
    every `a` reads it from --nldesign-color-on-surface, so the pill hands it
    its own. The view switch is the board's segmented control: 14px labels, the
    others in the soft ink, the chosen one raised on white without an edge;
@@ -196,7 +196,7 @@
    @spec openspec/changes/board-dashboard-switch-row/specs/board-dashboard-switch-row/spec.md#requirement-the-link-pills-take-the-deep-primary-ink
    @spec openspec/changes/board-dashboard-switch-row/specs/board-dashboard-switch-row/spec.md#requirement-the-view-switch-is-the-boards-segmented-control */
 .cn-look-board .cn-dashboard-page__switch-row .cn-dashboard-page__view-link:not(.cn-look-nextcloud *) {
-	--cn-view-link-ink: color-mix(in srgb, var(--color-primary-element-light-text) 60%, var(--color-main-text));
+	--cn-view-link-ink: var(--color-primary-element-light-text);
 	--nldesign-color-on-surface: var(--cn-view-link-ink);
 	color: var(--cn-view-link-ink);
 }
@@ -221,6 +221,25 @@
 	}
 }
 
+/* ---- Period group ------------------------------------------------------- */
+/* The boards' compact segmented group (the period switch on DqDoorlooptijd
+   and DqTermijnen, Gemiddeld / Mediaan on DqProcesanalyse) pads a label 14px
+   on each side and draws the options not chosen in the soft ink; the chosen
+   one is raised on white in the main ink. An icon-only option stays square.
+   @spec openspec/changes/board-period-group-soft-ink/specs/board-period-group-soft-ink/spec.md#requirement-a-board-period-group-draws-the-options-not-chosen-in-the-soft-ink */
+.cn-look-board .cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option:not(.cn-look-nextcloud *) {
+	padding: 0 14px;
+	color: var(--cn-board-text-soft);
+}
+
+.cn-look-board .cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option--checked:not(.cn-look-nextcloud *) {
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option--icon-only:not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
 /* ---- Button weight ------------------------------------------------------ */
 /* The boards draw a labelled button at 600 (DqZaken "Downloaden", DqZaak's
    header, dialog footers, toolbar and row actions). An NcButton reads its
@@ -228,9 +247,15 @@
    look sets 600 on each button, so every NcButton on a board page draws the
    board's weight without a rule per surface. Breadcrumb buttons keep the
    crumb weight.
-   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600 */
+   The boards also draw a button's text at 14px, against Nextcloud's 15px.
+   NcButton reads its size from --default-font-size, so the look sets that
+   variable on the button: a surface that sets its own `font-size` (the next
+   step card's 15px) keeps it.
+   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600
+   @spec openspec/changes/board-control-text/specs/board-control-text/spec.md#requirement-a-board-button-draws-its-text-at-14px */
 .cn-look-board .button-vue:not(.cn-look-nextcloud *):not(.vue-crumb *) {
 	--font-weight-element: 600;
+	--default-font-size: 14px;
 }
 
 /* ---- A button with an icon and a label --------------------------------- */
@@ -393,6 +418,26 @@
 	background: var(--color-background-hover);
 }
 
+/* ---- A secondary button --------------------------------------------------- */
+/* The boards draw every secondary button neutral: the main background, a 1px
+   control border, the main text, the hover ground on hover (DqFlow "Testen
+   met een zaak", DqFunctionaliteiten "Documentatie", DqTaak "Afronden").
+   NcButton draws its secondary from the primary-light variables, on a 2px
+   bottom edge; the look points those variables at the neutral colours on the
+   button itself. The selector weighs (0,3,0): it outranks NcButton's border
+   (0,2,0), and a surface rule of the same weight later in the cascade (a
+   dialog's cancel) still decides for its surface.
+   @spec openspec/changes/board-secondary-neutral/specs/board-secondary-neutral/spec.md#requirement-a-board-secondary-button-is-neutral */
+.cn-look-board .button-vue.button-vue--secondary:where(:not(.cn-look-nextcloud *):not(.vue-crumb *)),
+.cn-look-board .button-vue.button-vue--vue-secondary:where(:not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--color-primary-element-light: var(--color-main-background);
+	--color-primary-element-light-hover: var(--color-background-hover);
+	--color-primary-element-light-text: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-main-text);
+	border: 1px solid var(--cn-board-control-border);
+	color: var(--color-main-text);
+}
+
 /* ---- Header action buttons (CnActionButtons) ----------------------------- */
 /* The board draws a page's secondary actions as neutral 40px buttons: the
    main background, a grey border, the main text at 600 (DqZaak "Bericht",
@@ -1611,6 +1656,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 0 var(--cn-board-dashboard-card-inset) 10px;
 }
 
+/* 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;
+}
+
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-stacked-bar,
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-week-strip {
 	box-sizing: border-box;
@@ -1656,6 +1706,29 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding-inline-end: var(--cn-board-dashboard-card-inset);
 }
 
+/* ---- A card of cards (DqDoorlooptijd "Naleving") ------------------------- */
+/* A sections widget laid out in columns on a dashboard card keeps the card's
+   side inset and 20px below. Each section is a small card: a hairline edge,
+   a 10px corner, 14px 16px of padding and its heading at 15px 700, 10px above
+   the content.
+   @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-board-card-of-cards-draws-the-boards-small-cards */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget--grid {
+	padding: 0 var(--cn-board-dashboard-card-inset) 20px;
+}
+
+.cn-look-board .cn-sections-widget--grid.cn-sections-widget--cards .cn-sections-widget__section:not(.cn-look-nextcloud *) {
+	padding: 14px 16px;
+	border: 1px solid var(--cn-board-hairline);
+	border-radius: 10px;
+}
+
+.cn-look-board .cn-sections-widget--grid.cn-sections-widget--cards .cn-sections-widget__heading:not(.cn-look-nextcloud *) {
+	margin: 0 0 10px;
+	font-size: 15px;
+	font-weight: 700;
+	line-height: normal;
+}
+
 /* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
 /* The days wrap inside the card instead of scrolling sideways: a row holds
    as many days of at least 120px as the card fits, and the rest go to the
@@ -1673,6 +1746,45 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 
 .cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__head {
 	flex-wrap: wrap;
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--cn-board-text-soft);
+}
+
+/* A board day is a tinted box without an edge, at least 132px high so a week
+   of empty days still reads as a week (DqMijnWerk "Termijnen deze week"): the
+   workspace grey, and today the light primary ground in its own ink. Forced
+   colours drop the grounds, so the box keeps an edge there. */
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day {
+	min-height: 132px;
+	padding: 12px;
+	border-color: transparent;
+	border-radius: 10px;
+	background: var(--nldesign-component-content-surface-background-color, var(--color-background-hover));
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day--today {
+	background: var(--color-primary-element-light);
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day--today .cn-week-strip__head {
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__today {
+	border-radius: 10px;
+	font-size: 11px;
+	line-height: 13px;
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__empty {
+	font-size: 13px;
+}
+
+@media (forced-colors: active) {
+	.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day {
+		border-color: CanvasText;
+	}
 }
 
 /* ---- A card of boxed stat tiles (DcRapportages "Vergaderingen en efficiëntie") -- */

package/src/utils/manifestTranslate.js

@@ -12,7 +12,9 @@
  *     for the language, then for its base (`en_GB` falls back to `en`);
  *  2. otherwise the host's `translate(text, vars)`, whose answer is the text
  *     itself when it has no translation;
- *  3. the text as written.
+ *  3. the library's own catalog (`library`), for the strings a library
+ *     component asks through `cnTranslate` and the app never translates;
+ *  4. the text as written.
  *
  * The fallback is per label, never per page. The manifest is read through a
  * getter on every call, so an edit to the working copy shows at once.
@@ -52,9 +54,10 @@ function fill(text, vars) {
  * @param {() => (object|null|undefined)} options.getManifest The live manifest (the editor's working copy while editing).
  * @param {() => string} options.getLanguage The language to show.
  * @param {(text: string, vars?: object) => string} [options.translate] The host's translate.
+ * @param {(text: string, vars?: object) => string} [options.library] The library's translate, asked when the host has no translation.
  * @return {Function} `(text, vars) => string`, with `lookup`, `fellBack` and `sourceLanguage` attached.
  */
-export function createManifestTranslate({ getManifest, getLanguage, translate }) {
+export function createManifestTranslate({ getManifest, getLanguage, translate, library }) {
 	const host = typeof translate === 'function' ? translate : (text) => text
 
 	const i18n = () => {
@@ -79,7 +82,13 @@ export function createManifestTranslate({ getManifest, getLanguage, translate })
 			}
 		}
 		const answer = host(text, vars)
-		const shown = typeof answer === 'string' && answer !== '' ? answer : fill(text, vars)
+		let shown = typeof answer === 'string' && answer !== '' ? answer : fill(text, vars)
+		if (shown === fill(text, vars) && typeof library === 'function') {
+			const own = library(text, vars)
+			if (typeof own === 'string' && own !== '') {
+				shown = own
+			}
+		}
 		return { text: shown, fellBack: !!block && !inSource && shown === fill(text, vars) }
 	}
 

package/src/utils/routeFilters.js

@@ -123,9 +123,9 @@ export function resolveQueryFilters(query, ctx) {
 	}
 	const out = {}
 	for (const [k, v] of Object.entries(query)) {
-		// `contentSearch` is the index page's own "search inside files" switch,
-		// not a filter on the records.
-		if (k.startsWith('_') || k === 'contentSearch') {
+		// `contentSearch` is the index page's own "search inside files" switch
+		// and `savedView` names the applied saved view: neither filters the records.
+		if (k.startsWith('_') || k === 'contentSearch' || k === 'savedView') {
 			continue
 		}
 		if (v === undefined || v === null || v === '') {