@conduction/nextcloud-vue 2.56.0-beta.63 → 2.56.0-beta.65

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

@@ -60,7 +60,7 @@
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -184,7 +184,7 @@
 	min-height: 38px;
 	margin: 0;
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 19px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -226,20 +226,22 @@
 	padding: 1px 7px;
 	border: 0;
 	border-radius: 10px;
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	background: var(--color-border);
 	color: var(--cn-board-text-soft);
 	font-size: 12px;
 	font-weight: 600;
-	line-height: 1.4;
+	/* 16px tall on its 1px pad, as the boards draw it (DqTaken, DqWerkbord).
+	   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-board-count-is-16px-tall */
+	line-height: 14px;
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
-/* On the selected chip the count is a lighter bubble on the dark chip
-   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
-   text, the chip's own colour, which hid the bubble. */
+/* On the selected chip the count is the soft ink as a lighter bubble on the
+   dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
 	--nldesign-color-on-surface: var(--color-primary-element-text);
-	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
+	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
 
@@ -288,7 +290,7 @@
 	--nldesign-component-button-font-weight: 600;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -315,6 +317,8 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
+	/* A theme that forces the body ink onto every span reads it from here. */
+	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -423,7 +427,7 @@
 	height: 40px;
 	padding-block: 0;
 	padding-inline: 38px 12px !important;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 8px;
 	font-size: 14px;
 }
@@ -800,7 +804,7 @@
 	height: 34px !important;
 	min-height: 34px !important;
 	padding: 0 !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: 8px !important;
 	color: var(--cn-board-text-soft) !important;
 }

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

@@ -150,7 +150,7 @@
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;

package/src/css/look-board.css

@@ -24,14 +24,19 @@
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
 	--cn-board-control-radius: 8px;
+	/* A control's edge: 3:1 against every ground a control sits on (WCAG
+	   1.4.11). Nextcloud's border-dark is a hairline (#dbdbdb, 1.4:1); its
+	   max-contrast border is the control step, and a theme sets both. */
+	--cn-board-control-border: var(--color-border-maxcontrast);
 	/* Cards. */
 	--cn-board-card-radius: 12px;
 	--cn-board-card-padding: 20px 22px;
 	/* The side inset of a dashboard card: its title and its rows. */
 	--cn-board-dashboard-card-inset: 24px;
-	/* Hairline inside a card, and the soft secondary text. */
+	/* Hairline inside a card, and the soft secondary text: the boards' #3d4047,
+	   between the main text and the muted text, so it follows a theme's pair. */
 	--cn-board-hairline: var(--color-border);
-	--cn-board-text-soft: var(--color-main-text);
+	--cn-board-text-soft: color-mix(in srgb, var(--color-main-text) 45%, var(--color-text-maxcontrast));
 }
 
 /*
@@ -183,6 +188,37 @@
 	--font-weight-element: 600;
 }
 
+/* ---- A button with an icon and a label --------------------------------- */
+/* The boards draw it 14px in at both sides with 14px text and a 16px icon
+   8px from its label (DqZaakEmail "Notitie toevoegen", DqVthInstellingen
+   "Regel toevoegen"). NcButton pads its start 4px and its end 12px, and puts
+   a 20px icon in a 30px slot. The rules hold the condition in `:where()`, so
+   they weigh (0,3,0): enough to outrank NcButton's own (0,2,0), and less than
+   any surface rule (header, toolbar, follow pill, Meer chevron, tab strip),
+   which keeps its own value. The padding goes through NcButton's
+   `--button-padding`, so a surface that sets `padding` is never contested.
+   @spec openspec/changes/board-icon-label-button/specs/board-icon-label-button/spec.md#requirement-a-board-button-with-an-icon-and-a-label-is-padded-as-the-boards-draw-it */
+.cn-look-board .button-vue.button-vue:where(:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--button-padding: 14px;
+	font-size: 14px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__wrapper.button-vue__wrapper {
+	gap: 8px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon.button-vue__icon {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon svg {
+	width: 16px;
+	height: 16px;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -212,7 +248,7 @@
 	--nldesign-component-button-primary-action-font-weight: 600;
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
-	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -226,7 +262,7 @@
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
 	gap: 8px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -258,7 +294,7 @@
 	height: var(--cn-board-control-height);
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -266,8 +302,9 @@
 	font-weight: 600;
 }
 
-/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
-   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+/* Buttons 10px apart, each icon 16px (DqZaak's header, DqZaken's
+   "Downloaden"); NcButton draws a 20px icon in a 30px slot. The 8px to the
+   label is the board's icon-and-label gap above. */
 .cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
 	gap: 10px;
 }
@@ -277,7 +314,6 @@
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
@@ -312,7 +348,7 @@
    body ink onto every span (thematiq). */
 .cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
 	--nldesign-color-on-surface: var(--color-main-text);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -1109,6 +1145,15 @@
 	line-height: normal;
 }
 
+/* A neutral board tag ("Normaal", "Uit") is the soft text on the chip ground,
+   not the main text on the darker background a Nextcloud tag takes.
+   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-neutral-board-tag-is-soft-text-on-the-chip-ground */
+.cn-look-board .cn-status-badge--default:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	--cn-status-badge-ink: var(--cn-board-text-soft);
+	background-color: var(--color-background-hover);
+	color: var(--cn-status-badge-ink);
+}
+
 /* A pill paints its own pairing of ink and fill. A theme that forces the body
    ink onto every span (thematiq's text rule, `!important` at id level) reads
    that ink from --nldesign-color-on-surface when the surface sets it, so the

package/src/utils/actionsDispatcher.js

@@ -857,7 +857,10 @@ export function dispatchAction(action, context = {}) {
 				return
 			}
 
-			context.openModal(target, action.props ?? {})
+			// A prop that is exactly a token (`"objectId": "@objectId"`) resolves
+			// against the page's object; one the page cannot answer stays as written.
+			const props = context.tokenCtx ? resolveDeepTokens(action.props ?? {}, context.tokenCtx) : (action.props ?? {})
+			context.openModal(target, props)
 			break
 		}
 

package/src/utils/savedViewHelpers.js

@@ -284,15 +284,18 @@ export function schemaSlug(schema) {
  * it: three case indexes share their views, the organisations index does
  * not. `savedViewsScope` on a page overrides that, for pages that should
  * share views although they read different sources, or keep them apart
- * although they read the same one.
+ * although they read the same one. A page over a named source
+ * (`entitySource`) and no schema shares its views with the pages over that
+ * source.
  *
  * @param {object} page The page.
  * @param {string} [page.scope] The explicit `savedViewsScope`, when set.
  * @param {string} [page.register] The page's register.
  * @param {object|string} [page.schema] The page's schema, slug or object.
+ * @param {string} [page.source] The page's `entitySource`, when it reads one.
  * @return {string} The scope key, or the empty string for a page with no source.
  */
-export function savedViewScope({ scope, register, schema } = {}) {
+export function savedViewScope({ scope, register, schema, source } = {}) {
 	if (typeof scope === 'string' && scope !== '') {
 		return scope
 	}
@@ -300,9 +303,43 @@ export function savedViewScope({ scope, register, schema } = {}) {
 	if (typeof register === 'string' && register !== '' && slug !== '') {
 		return `${register}/${slug}`
 	}
+	if (typeof source === 'string' && source !== '') {
+		return `source:${source}`
+	}
 	return ''
 }
 
+/**
+ * Whether an index page offers saved views in its sidebar.
+ *
+ * `allowSavedViews` decides when it is set. Unset, every index page that has
+ * a sidebar and a source a view can be scoped to (a register and schema, a
+ * named source, or `savedViewsScope`) offers them, so managing views is
+ * there on every list without each page opting in.
+ *
+ * @param {object} config The page's index config, or CnIndexPage's props.
+ * @param {boolean|null} [config.allowSavedViews] The explicit choice, when made.
+ * @param {object} [config.sidebar] The sidebar config.
+ * @param {string} [config.savedViewsScope] The explicit scope.
+ * @param {string} [config.register] The register.
+ * @param {object|string} [config.schema] The schema.
+ * @param {string} [config.entitySource] The named source.
+ * @return {boolean}
+ */
+export function pageOffersSavedViews(config) {
+	if (!config || typeof config !== 'object') {
+		return false
+	}
+	if (typeof config.allowSavedViews === 'boolean') {
+		return config.allowSavedViews
+	}
+	const sidebar = config.sidebar
+	if (!sidebar || typeof sidebar !== 'object' || sidebar.enabled !== true || sidebar.show === false) {
+		return false
+	}
+	return savedViewScope({ scope: config.savedViewsScope, register: config.register, schema: config.schema, source: config.entitySource }) !== ''
+}
+
 /**
  * Whether a saved view belongs on a page.
  *