inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[affected:*][ci:force] Upgrading material selector class

Browse Source
This commit is contained in:
Vito Albano
2024-03-08 20:24:03 +00:00
committed by VitoAlbano
parent 75b805381c
commit d5f462bb48
36 changed files with 413 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

@@ -29,7 +29,6 @@
}
&-property-value {
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
.mat-chip-list {
padding-top: 6px;

8
lib/core/src/lib/card-view/components/card-view-boolitem/card-view-boolitem.component.ts
View File

@@ -25,10 +25,10 @@ import { BaseCardView } from '../base-card-view';
templateUrl: './card-view-boolitem.component.html',
styles: [
`
.adf-property-value {
padding: 15px 0;
}
`
.adf-property-value {
padding: 15px 0;
}
`
]
})

2
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

@@ -13,11 +13,13 @@
}
.adf-property-value-editable {
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
mat-select {
padding: 6px 0 6px 12px;
margin-top: 0;
border-radius: 6px;
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
.mat-select-value {
color: var(--adf-metadata-action-button-clear-color);
}

3
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@@ -32,6 +32,7 @@
}
.adf-textitem-chip-list-container {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label {
margin-top: 6px;
}
@@ -46,7 +47,7 @@
}
.adf-property-field {
.mat-input-element {
.mat-mdc-input-element {
color: var(--theme-primary-color);
cursor: pointer;
}

16
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

@@ -26,12 +26,14 @@
.adf-property {
.adf-property-field {
width: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-underline {
display: none;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-input-element {
.mat-mdc-input-element {
text-overflow: ellipsis;
color: var(--adf-metadata-property-panel-title-color);
padding: 6px 0;
@@ -39,7 +41,7 @@
}
.adf-card-view__key-value-pairs__row {
.mat-input-element {
.mat-mdc-input-element {
margin-top: 0;
padding-left: 12px;
}
@@ -49,10 +51,12 @@
border-top-width: 0;
padding: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-flex {
padding-top: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-wrapper {
padding-bottom: 0;
@@ -65,11 +69,11 @@
display: flex;
flex-direction: column;
height: 20px;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
&.mat-form-field-empty {
transform: translateY(-1.3437em) scale(1);
}
}
}
}
}
@@ -82,7 +86,7 @@
background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px;
&.mat-input-element {
&.mat-mdc-input-element {
color: var(--adf-metadata-action-button-clear-color);
padding: 6px 0 6px 12px;
margin: 5px 0 0;
@@ -92,7 +96,7 @@
&.adf-property-readonly-value {
color: var(--adf-metadata-property-panel-label-color);
&.mat-input-element {
&.mat-mdc-input-element {
color: var(--adf-metadata-property-panel-label-color);
}
}

2
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@@ -568,7 +568,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
}
/* [Accessibility] Material checkbox labels */
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
.adf-checkbox-sr-only .mat-mdc-checkbox label {
position: absolute;

4
lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html
View File

@@ -8,7 +8,7 @@
[class.adf-dynamic-chip-list-full-width]="limitChipsDisplayed && !calculationsDone"
role="listbox"
[attr.aria-label]="'METADATA.BASIC.TAGS' | translate">
<mat-chip
<mat-chip-option
class="adf-dynamic-chip-list-chip"
*ngFor="let chip of chipsToDisplay; let idx = index"
(removed)="removedChip.emit(chip.id)">
@@ -20,7 +20,7 @@
matChipRemove>
cancel
</mat-icon>
</mat-chip>
</mat-chip-option>
</mat-chip-listbox>
<button
data-automation-id="adf-dynamic-chip-list-view-more-button"

1
lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
View File

@@ -23,6 +23,7 @@
}
&.adf-dynamic-chip-list-paginated {
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
mat-chip-list {
width: 100%;

11
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@@ -90,7 +90,7 @@
mat-form-field {
width: 100%;
}
/* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of input that may no longer apply for the MDC version. */
.mat-input-placeholder {
top: 1.8em;
@@ -103,7 +103,7 @@
background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
color: var(--theme-primary-color);
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-prefix {
color: var(--theme-primary-color);
@@ -134,11 +134,13 @@
& .mat-mdc-card-header-text {
margin: 0 !important;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mat-tab-body-content {
overflow: hidden;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mdc-tab__text-label {
@@ -153,6 +155,7 @@
& .mat-ink-bar {
height: 4px;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
& .mat-mdc-text-field-wrapper {
@@ -224,7 +227,7 @@
height: 36px;
border-radius: 5px;
}
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
& .mdc-button__label {
width: 58px;
@@ -242,7 +245,7 @@
flex: 1;
}
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
&-left-label-input-container .mat-form-field-label-wrapper {
top: auto;

6
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
View File

@@ -1,12 +1,11 @@
/* stylelint-disable selector-class-pattern */
.adf {
&-date-time-widget {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-mdc-form-field-text-suffix {
top: 26px;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label-wrapper {
top: 20px;
@@ -14,12 +13,11 @@
}
&-left-label-input-datepicker {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-mdc-form-field-text-suffix {
top: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-mdc-form-field-infix {
width: 100%;

5
lib/core/src/lib/form/components/widgets/form.theme.scss
View File

@@ -34,12 +34,11 @@ ul > li > form-field > .adf-focus {
}
&-invalid {
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
.mat-mdc-checkbox {
padding-bottom: 12px;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-underline {
background-color: var(--theme-warn-color);
@@ -54,7 +53,7 @@ ul > li > form-field > .adf-focus {
.adf-file {
border-color: var(--theme-warn-color);
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-prefix {
color: var(--adf-theme-foreground-secondary-text-color);

2
lib/core/src/lib/form/components/widgets/text/text.widget.scss
View File

@@ -2,7 +2,7 @@
.adf {
&-text-widget {
width: 100%;
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-label-wrapper {
top: 20px;

2
lib/core/src/lib/identity-user-info/identity-user-info.component.html
View File

@@ -27,7 +27,7 @@
>
<mat-card class="adf-userinfo-card adf-identity-userinfo-card">
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="mat-title" id="identity-username">{{ identityUser | fullName }}</div>
<div class="mat-headline-6" id="identity-username">{{ identityUser | fullName }}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">

7
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@@ -4,7 +4,7 @@
display: block;
margin: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mdc-tab__text-label {
min-width: 0;
@@ -30,13 +30,12 @@
}
.adf-info-drawer-tabs {
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mat-tab-body-content > * {
margin-bottom: 20px;
display: block;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
& .mat-tab-body-content > *:last-child {
margin-bottom: 0;
@@ -58,7 +57,7 @@
padding: 10px;
overflow-y: hidden;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mat-tab-body-content {
/* stylelint-disable */

218
lib/core/src/lib/login/components/login.component.html Normal file
View File

@@ -0,0 +1,218 @@
<div class="adf-login-content" [style.background-image]="getBackgroundUrlImageUrl()">
<div class="adf-ie11FixerParent">
<div class="adf-ie11FixerChild">
<mat-card appearance="outlined" class="adf-login-card-wide">
<form
id="adf-login-form"
[formGroup]="form"
autocomplete="off"
(submit)="onSubmit(form.value)">
<mat-card-header class="adf-login-card-header-text">
<mat-card-title>
<div class="adf-alfresco-logo">
<!--HEADER TEMPLATE-->
<ng-template
*ngIf="headerTemplate"
ngFor
[ngForOf]="[data]"
[ngForTemplate]="headerTemplate">
</ng-template>
<img
*ngIf="!headerTemplate"
id="adf-login-img-logo"
class="adf-img-logo"
[src]="logoImageUrl"
alt="{{'LOGIN.LOGO' | translate }}">
</div>
</mat-card-title>
</mat-card-header>
<mat-card-content class="adf-login-controls">
<!--ERRORS AREA-->
<div class="adf-error-container">
<div
*ngIf="isError"
id="login-error"
data-automation-id="login-error"
class="adf-error adf-error-message">
<mat-icon class="adf-error-icon">warning</mat-icon>
<span class="adf-login-error-message">
{{errorMsg | translate }}
</span>
</div>
</div>
<div *ngIf="!ssoLogin">
<!--USERNAME FIELD-->
<div
class="adf-login__field"
[ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
<input
matInput
type="text"
class="adf-full-width"
formControlName="username"
id="username"
data-automation-id="username"
placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
autocapitalize="none"
(blur)="trimUsername($event)">
</mat-form-field>
<span
*ngIf="formError['username']"
class="adf-login-validation"
for="username">
<span
id="username-error"
class="adf-login-error"
data-automation-id="username-error">
{{formError['username'] | translate}}
</span>
</span>
</div>
<!--PASSWORD FIELD-->
<div class="adf-login__field">
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
<input
matInput
placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
[type]="isPasswordShow ? 'text' : 'password'"
formControlName="password"
id="password"
data-automation-id="password">
<button
matSuffix
mat-icon-button
type="button"
[attr.aria-label]="(isPasswordShow ? 'LOGIN.ARIA-LABEL.HIDE-PASSWORD' : 'LOGIN.ARIA-LABEL.SHOW-PASSWORD') | translate"
(click)="toggleShowPassword($event)"
(keyup.enter)="toggleShowPassword($event)"
[attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
<mat-icon class="adf-login-form-password-icon adf-login-password-icon">
{{ isPasswordShow ? 'visibility' : 'visibility_off' }}
</mat-icon>
</button>
</mat-form-field>
<span
class="adf-login-validation"
for="password"
*ngIf="formError['password']">
<span
id="password-required"
class="adf-login-error"
data-automation-id="password-required">
{{formError['password'] | translate}}
</span>
</span>
</div>
<!--CUSTOM CONTENT-->
<ng-content></ng-content>
<br>
<button
type="submit"
id="login-button"
class="adf-login-button"
mat-raised-button
color="accent"
[class.adf-isChecking]="actualLoginStep === LoginSteps.Checking"
[class.adf-isWelcome]="actualLoginStep === LoginSteps.Welcome"
data-automation-id="login-button"
[disabled]="!form.valid"
[attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
<span
*ngIf="actualLoginStep === LoginSteps.Landing"
class="adf-login-button-label">
{{'LOGIN.BUTTON.LOGIN' | translate }}
</span>
<div
*ngIf="actualLoginStep === LoginSteps.Checking"
class="adf-interactive-login-label">
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.CHECKING' | translate}}
</span>
<div class="adf-login-spinner-container">
<mat-spinner
id="checking-spinner"
class="adf-login-checking-spinner"
[strokeWidth]="4"
[diameter]="25">
</mat-spinner>
</div>
</div>
<div
*ngIf="actualLoginStep === LoginSteps.Welcome"
class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
<mat-icon class="adf-welcome-icon">done</mat-icon>
</div>
</button>
<div *ngIf="showRememberMe" class="adf-login__remember-me">
<mat-checkbox
id="adf-login-remember"
color="primary"
class="adf-login-remember-me"
[checked]="rememberMe"
(change)="rememberMe = !rememberMe">
<div class="adf-login-remember-me-label">
{{ 'LOGIN.LABEL.REMEMBER' | translate }}
</div>
</mat-checkbox>
</div>
</div>
<div *ngIf="ssoLogin">
<button
type="button"
(click)="implicitLogin()"
id="login-button-sso"
[attr.aria-label]="'LOGIN.BUTTON.SSO' | translate"
class="adf-login-button"
mat-raised-button color="primary"
data-automation-id="login-button-sso">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.SSO' | translate }}</span>
</button>
</div>
</mat-card-content>
<mat-card-actions *ngIf="footerTemplate || showLoginActions">
<div class="adf-login-action-container">
<!--FOOTER TEMPLATE-->
<ng-template
*ngIf="footerTemplate"
ngFor
[ngForOf]="[data]"
[ngForTemplate]="footerTemplate">
</ng-template>
<div class="adf-login-action" *ngIf="!footerTemplate && showLoginActions">
<div id="adf-login-action-left" class="adf-login-action-left">
<a href="{{needHelpLink}}">{{'LOGIN.ACTION.HELP' | translate }}</a>
</div>
<div id="adf-login-action-right" class="adf-login-action-right">
<a href="{{registerLink}}">{{'LOGIN.ACTION.REGISTER' | translate }}</a>
</div>
</div>
</div>
</mat-card-actions>
</form>
</mat-card>
<div class="adf-copyright" data-automation-id="login-copyright">
{{ copyrightText }}
</div>
</div>
</div>
</div>

6
lib/core/src/lib/search-text/search-text-input.component.scss
View File

@@ -20,13 +20,11 @@
}
&-input-form-field-divider {
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-underline {
background-color: var(--adf-theme-primary-50);
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mdc-line-ripple {
background-color: var(--adf-theme-primary-50);