Migration from QPPNG 2.x to 3.x

Quark Publishing Platform NextGen 3.0 is based on Angular 14.2.6 and is compatible with Node 16.17.1. This requires migration of Quark Publishing Platform NextGen 2.0 projects that are on Angular 8 and NodeJS 10.22.0.

For migration, see Angular Documentation

Sample output of dependencies inside package.json

  "dependencies": {
    "@angular/animations": "14.2.6",
    "@angular/cdk": "14.2.5",
    "@angular/material": "14.2.5",
    "@angular/common": "14.2.6",
    "@angular/compiler": "14.2.6",
    "@angular/core": "14.2.6",
    "@angular/forms": "14.2.6",
    "@angular/platform-browser": "14.2.6",
    "@angular/platform-browser-dynamic": "14.2.6",
    "@angular/router": "14.2.6",
    "@quark/platform-components-ng": "^3.0.0",
    "@quark/qwc": "^3.0.0",
    "moment": "2.29.4",
    "rxjs": "6.6.7",
    "tslib": "2.4.0",
    "zone.js": "0.11.4"
  }

CSS inclusion

Use relative path from node_modules instead of ~

Example:

Before

@import “~@quark/qwc/styles/qwc”;

Now

@import “../node_modules/@quark/qwc/styles/qwc”;

Updated CSS Variables

Quark Publishing Platform NextGen 3.0 uses CSS variables to provide flexibility and to allow you to customize the web page style.
The CSS variables used in Quark Publishing Platform NextGen 3.0 are defined in the :root selector.

Here is the list of updated CSS variables used in Quark Publishing Platform NextGen 3.0:

Common SCSS variables replaced with these CSS variables

$primary -> --q-primary-color
$primary-dark -> --q-primary-dark-color
$selection-color -> --q-selection-color
$color-selection -> --q-color-selection
$plain -> --q-plain-color
$lightstroke -> --q-lightstroke-color
$hint -> --q-hint-color
$color-allow -> --q-allow-color
$color-deny -> --q-deny-color
$color-border -> --q-border-color
$color-font -> --q-text-color
$color-heading -> --q-heading-text-color
$color-disabled -> --q-disabled-color
$color-hover -> --q-hover-color
$color-active -> --q-active-color
$color-warning -> --q-warning-color
$stroke-color -> --q-stroke-color
$tabs-text-color -> --q-tabs-text-active-color

Button CSS Variables

$button-primary-color -> --q-button-primary-bg-color
$button-primary-font-color -> --q-button-primary-text-color
$button-primary-hover -> --q-button-primary-bg-hover-color
$button-disabled-color -> --q-button-disabled-bg-color
$button-disabled-font-color -> --q-button-disabled-text-color
$button-plain-font-color -> --q-button-plain-text-color
$button-plain -> --q-button-plain-bg-color
$button-plain-border-color -> --q-button-plain-border-color
$button-dark-color -> --q-button-dark-color
$button-dark-hover -> --q-button-dark-hover-color
$button-badge-color-> --q-button-badge-color
$button-cancel-font-color -> --q-button-cancel-text-color

Header CSS Variables

#0f2841 -> --q-header-backgound-color
$header-font-color -> --q-header-text-color
$appshell-header-color -> --q-appshell-header-color

Changes in Classes and Interfaces

The attributes majorVersion and minorVersion in classes and interfaces have been replaced by the object VersionInfo that contains the attributes majorVersion, minorVersion and branchId.

Some of the affected classes are as follows:

ParentRelationInfo
AssetReIndexInfo
QppLinkInputData
QppLinkData
AssetFormRequest

Awesome, share it: