inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6693] Angular 15 migration initial point

Browse Source
This commit is contained in:
MichalKinas
2024-03-13 09:19:19 +01:00
parent 7982c1e7e7
commit 698b53d522
15 changed files with 101 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts
View File

@@ -32,7 +32,7 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
standalone: true,
imports: [MatCardModule, NodeCommentsModule],
selector: 'app-comments-tab',
template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
template: `<mat-card appearance="raised"><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
encapsulation: ViewEncapsulation.None
})
export class CommentsTabComponent implements OnInit {

2
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
View File

@@ -1,4 +1,4 @@
<mat-card *ngIf="node">
<mat-card appearance="raised" *ngIf="node">
<mat-card-content>
<form [formGroup]="form" autocomplete="off">
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">

2
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
View File

@@ -8,7 +8,7 @@
>
<mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
<mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
<input
matInput
#searchInput

13
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
View File

@@ -24,11 +24,6 @@ $top-margin: 12px;
box-sizing: border-box;
margin-bottom: 12px;
/* stylelint-disable-next-line selector-class-pattern */
.mat-form-field-underline {
display: none;
}
.app-input-form-field-input + span {
cursor: text;
pointer-events: auto;
@@ -41,6 +36,14 @@ $top-margin: 12px;
&-input {
letter-spacing: -0.7px;
}
/* stylelint-disable selector-class-pattern */
.mdc-line-ripple {
&::before,
&::after {
display: none;
}
}
}
.app-search-button {

2
projects/aca-content/src/lib/components/search/search-input/search-input.component.html
View File

@@ -7,7 +7,7 @@
<button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
<mat-form-field class="app-input-form-field" [floatLabel]="'auto'">
<input
matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"

6
projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
View File

@@ -85,12 +85,6 @@ $top-margin: 12px;
&-checkbox {
padding: 3px 24px 3px 19px;
/* stylelint-disable-next-line selector-class-pattern */
.mat-checkbox-inner-container {
height: 18px;
width: 18px;
}
/* stylelint-disable-next-line no-descending-specificity */
label {
padding: 0 0 0 11px;

23
projects/aca-content/src/lib/ui/custom-theme.scss
View File

@@ -11,24 +11,19 @@ $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
$mat-warn-palette: mat.define-palette($aca-warn, A100);
$app-typography: mat.define-typography-config(
$font-family: 'Open Sans',
$display-4: mat.define-typography-level(112px, 112px, 300),
$display-3: mat.define-typography-level(56px, 56px, 400),
$display-2: mat.define-typography-level(45px, 48px, 400),
$display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat.define-typography-level(24px, 32px, 400),
$title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat.define-typography-level(15px, 24px, 400),
$headline-1: mat.define-typography-level(112px, 112px, 300),
$headline-2: mat.define-typography-level(56px, 56px, 400),
$headline-3: mat.define-typography-level(45px, 48px, 400),
$headline-4: mat.define-typography-level(34px, 40px, 400),
$headline-5: mat.define-typography-level(24px, 32px, 400),
$headline-6: mat.define-typography-level(20px, 32px, 400),
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
$body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size.
$input: mat.define-typography-level(inherit, 1.25, 400)
$button: mat.define-typography-level(14px, 14px, 500)
);
@include mat.core($app-typography);
$custom-theme: mat.define-light-theme(
(
color: (

65
projects/aca-content/src/lib/ui/overrides/ay11.scss
View File

@@ -1,23 +1,24 @@
/* stylelint-disable selector-class-pattern */
@mixin ay11-theme() {
.mat-icon-button,
.mat-button,
.mat-checkbox,
.mat-raised-button {
.mat-mdc-icon-button,
.mat-mdc-button,
.mat-mdc-checkbox,
.mat-mdc-raised-button {
&:focus-visible {
@include rounded-outline;
}
.mat-ripple-element {
.mat-ripple {
display: none;
}
// TODO check if still applies
&.cdk-keyboard-focused {
.mat-button-focus-overlay {
display: none;
}
.mat-checkbox-ripple {
.mat-mdc-checkbox-ripple {
@include rounded-outline;
height: 22px;
@@ -28,25 +29,29 @@
}
}
.mat-mdc-form-field-focus-overlay {
background-color: transparent;
}
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
fill: var(--theme-blue-button-color);
}
.mat-list-base .mat-list-option {
.mat-list-item-content {
.mat-mdc-list-base .mat-mdc-list-option {
.mdc-list-item__content {
@include rounded-border(transparent);
}
&:focus-visible {
background-color: white;
.mat-list-item-content {
.mdc-list-item__content {
@include rounded-border;
}
}
}
.adf-search-user-button.mat-button,
.adf-search-user-button.mat-mdc-button,
.app-search-button {
line-height: 36px;
@@ -59,9 +64,9 @@
}
}
.mat-menu-content {
.mat-menu-item {
.mat-menu-ripple {
.mat-mdc-menu-content {
.mat-mdc-menu-item {
.mat-ripple {
display: none;
}
@@ -83,15 +88,17 @@
padding: 2px;
}
.mat-option {
.mat-mdc-option {
&.cdk-keyboard-focused {
.mat-option-ripple {
.mat-mdc-option-ripple {
@include rounded-outline;
}
}
}
.mat-slide-toggle {
// TODO investigate after app is run
.mat-mdc-slide-toggle {
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-thumb {
width: 15px;
height: 15px;
@@ -99,40 +106,46 @@
background-color: #484a4d;
}
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-bar {
border-radius: 15px;
height: 20px;
}
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-thumb-container {
top: -5px;
}
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-ripple {
display: none;
}
&.cdk-keyboard-focused {
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-bar {
outline: 2px solid var(--theme-blue-button-color);
}
}
&.mat-primary.mat-checked:not(.mat-disabled) {
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-bar {
background-color: var(--theme-blue-button-color);
}
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
.mat-slide-toggle-thumb {
background-color: white;
}
}
}
.mat-stroked-button,
.mat-flat-button {
.mat-mdc-outlined-button,
.mat-mdc-unelevated-button {
&.cdk-keyboard-focused {
.mat-button-ripple.mat-ripple {
.mat-mdc-button-ripple.mat-ripple {
outline: 2px solid var(--theme-blue-button-color);
inset: -4px;
}
@@ -160,7 +173,7 @@
box-sizing: border-box;
border: 2px solid transparent;
.mat-button-base.mat-button {
.mat-mdc-button-base.mat-mdc-button {
outline: none;
@include rounded-border(transparent);
@@ -182,8 +195,8 @@
.adf-error-snackbar {
background-color: #ba1b1b;
.mat-simple-snackbar,
.mat-simple-snackbar-action {
.mat-mdc-simple-snack-bar,
.mat-mdc-snack-bar-action {
color: white;
}
}
@@ -191,13 +204,13 @@
.adf-info-snackbar {
background-color: var(--theme-blue-button-color);
.mat-simple-snackbar,
.mat-simple-snackbar-action {
.mat-mdc-simple-snack-bar,
.mat-mdc-snack-bar-action {
color: white;
}
}
.mat-button-base {
.mat-mdc-button-base {
&.adf-filter-button {
margin-left: -2px;
}
@@ -207,7 +220,7 @@
&__perpage-block,
&__actualinfo-block {
/* stylelint-disable-next-line no-descending-specificity */
.mat-icon-button {
.mat-mdc-icon-button {
left: 3px;
&:focus-visible {

16
projects/aca-content/src/lib/ui/theme.scss
View File

@@ -13,19 +13,17 @@ mat-toolbar {
color: var(--theme-secondary-text);
}
.mat-tab-list {
.mat-tab-labels {
.mat-tab-label {
&.mat-tab-label-active {
color: #212121;
}
.mat-mdc-tab-list {
.mat-mdc-tab-labels {
.mdc-tab--active {
color: #212121;
}
}
}
.mat-form-field-label-wrapper .mat-form-field-label,
.mat-tab-list .mat-tab-labels .mat-tab-label,
.mat-checkbox-label,
.mdc-floating-label,
.mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab,
.mat-mdc-checkbox label,
mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
mat-toolbar.mat-toolbar.mat-toolbar-single-row {
color: var(--theme-secondary-text);