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

[ACS-7768] unify inputs and selects across the app - revert (#9699)

Browse Source 
* Revert "[ACS-7768] unify inputs and selects across the app (#9687)"

This reverts commit 7cfb5ea64a.

* ACS-7768 Little correction
This commit is contained in:
AleksanderSklorz
2024-05-20 09:26:41 +02:00
committed by VitoAlbano
parent a410fbec7f
commit f22f55d30e
39 changed files with 487 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@@ -1,14 +1,24 @@
<label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty || isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
>
{{ property.label | translate }}
</label>
<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
<mat-form-field *ngIf="!property.multivalued" class="adf-dateitem-editable">
<mat-label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty || isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
<span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span
*ngIf="showProperty"
[attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
>{{ property.displayValue }}</span
>
{{ property.label | translate }}
</mat-label>
</span>
<div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
<div class="adf-dateitem-editable-controls">
<span
class="adf-datepicker-toggle"
@@ -18,18 +28,13 @@
role="button"
(keyup.enter)="showDatePicker()"
>
<span
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
*ngIf="showProperty; else elseEmptyValueBlock"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}</span
>
</span>
<mat-icon
*ngIf="showClearAction && isEditable"
*ngIf="showClearAction"
class="adf-date-reset-icon"
(click)="onDateClear()"
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
@@ -39,7 +44,6 @@
</mat-icon>
<mat-datetimepicker-toggle
*ngIf="isEditable"
[attr.tabindex]="-1"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"
@@ -49,11 +53,9 @@
</div>
<input
matInput
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
[disabled]="!isEditable"
[value]="valueDate"
(dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key"
@@ -67,12 +69,12 @@
[startAt]="valueDate"
>
</mat-datetimepicker>
</mat-form-field>
</div>
<ng-template #elseEmptyValueBlock>
{{ property.default | translate }}
</ng-template>
<mat-form-field *ngIf="property.multivalued"
<div *ngIf="property.multivalued"
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
<mat-chip-listbox #chipList class="adf-textitem-chip-list">
<mat-chip-option
@@ -83,15 +85,7 @@
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
</mat-chip-option>
</mat-chip-listbox>
<mat-label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty || isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
>
{{ property.label | translate }}
</mat-label>
<div
*ngIf="isEditable"
class="adf-property-field adf-dateitem-editable-controls"
@@ -101,7 +95,6 @@
(keyup.enter)="showDatePicker()"
>
<input
matInput
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
@@ -125,5 +118,5 @@
>
</mat-datetimepicker>
</div>
</mat-form-field>
</div>
</div>

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

@@ -9,33 +9,28 @@
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
margin-top: 10px;
&:not(.adf-property-readonly-value) {
#{$mat-text-field-disabled} {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
border: none;
background-color: inherit;
}
&.adf-property-value-editable {
display: flex;
align-items: center;
border-radius: 6px;
border-bottom: inherit;
margin-bottom: 18px;
}
#{$mat-select-arrow-wrapper} {
display: none;
}
}
&.adf-property-readonly-value {
padding: 0 0 0 12px;
}
}
#{$mat-form-field-wrapper} {
#{$mat-form-field-input-control} {
&.adf-invisible-date-input {
height: 0;
width: 0;
overflow: hidden;
opacity: 0;
border: none;
margin: 0;
padding: 0;
float: right;
}
}
.adf-invisible-date-input {
height: 2px;
width: 0;
overflow: hidden;
opacity: 0;
border: none;
margin: 0;
padding: 0;
float: right;
}
.adf-dateitem-chip-list-container.adf-property-field {
@@ -45,7 +40,8 @@
}
.adf-dateitem-editable {
width: 100%;
cursor: pointer;
padding: 0 12px;
/* stylelint-disable-next-line no-descending-specificity */
&-controls {
@@ -61,6 +57,8 @@
}
#{$mat-icon} {
width: 16px;
height: 16px;
opacity: 0.5;
&:hover {
@@ -73,6 +71,9 @@
}
.adf-date-reset-icon {
line-height: 10px;
position: relative;
top: 4px;
padding: 0 8px;
}
}

63
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@@ -1,34 +1,37 @@
<ng-container *ngIf="!property.isEmpty() || isEditable">
<div class="adf-property-field">
<mat-form-field class="adf-property-value" [ngClass]="{
<div
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label"
[ngClass]="{
'adf-property-value-editable': isEditable,
'adf-property-read-only': !isEditable
}">
<mat-label
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label adf-property-value-editable"
[ngClass]="{
'adf-property-readonly-value': isReadonlyProperty
}">
{{ property.label | translate }}
</mat-label>
<mat-select
[attr.data-automation-id]="'select-readonly-value-' + property.key"
[(value)]="value"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
panelClass="adf-select-filter"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate"
[disabled]="!isEditable">
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
<mat-option
*ngFor="let option of list$ | async"
[value]="option.key">
{{ option.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }}</div>
<div class="adf-property-field">
<div
*ngIf="!isEditable"
class="adf-property-value adf-property-read-only"
[attr.data-automation-id]="'select-readonly-value-' + property.key"
data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
</div>
<div *ngIf="isEditable">
<mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': isEditable}">
<mat-select
[(value)]="value"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
panelClass="adf-select-filter"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate">
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
<mat-option
*ngFor="let option of list$ | async"
[value]="option.key">
{{ option.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</ng-container>

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

@@ -24,6 +24,17 @@
#{$mat-form-field-wrapper} {
background-color: initial;
}
/* 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 8px 12px;
margin-top: 0;
border-radius: 6px;
#{$mat-select-value} {
color: var(--adf-metadata-action-button-clear-color);
}
}
}
#{$mat-form-field-subscript-wrapper} {
@@ -31,19 +42,9 @@
}
.adf-property-read-only {
padding: 6px 0;
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
color: var(--adf-metadata-property-panel-title-color);
#{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
border: none;
background-color: inherit;
}
#{$mat-select-arrow-wrapper} {
display: none;
}
}
}
.mdc-line-ripple {

1
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -5,6 +5,7 @@
[ngClass]="{
'adf-property-read-only': !isEditable
}"
[floatLabel]="'always'"
>
<mat-label
*ngIf="showProperty || isEditable"

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

@@ -55,17 +55,8 @@
color: var(--adf-theme-foreground-text-color-054);
}
.adf-property-read-only {
&:not(:has(.adf-property-readonly-value)) {
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
}
#{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
border: none;
background-color: inherit;
}
}
.adf-property-read-only:not(:has(.adf-property-readonly-value)) {
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
}
.adf-property-readonly-value {

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

@@ -6,11 +6,32 @@
border-color: var(--adf-card-view-border-color);
border-radius: var(--adf-card-view-border-radius);
.adf-property-label {
color: var(--adf-metadata-property-panel-text-color);
display: flex;
padding: 3px 0;
line-height: 20px;
&.adf-property-value-editable {
color: var(--adf-metadata-property-panel-title-color);
}
&.adf-property-readonly-value {
color: var(--adf-metadata-property-panel-label-color);
}
}
.adf-property-container {
margin-bottom: 12px;
}
.adf-property {
.adf-card-view-textitem {
.adf-property-field {
padding-top: 0;
}
}
.adf-property-field {
width: 100%;
@@ -20,6 +41,7 @@
#{mat-input-element} {
text-overflow: ellipsis;
color: var(--adf-metadata-property-panel-title-color);
padding: 6px 0;
line-height: 20px;
}
@@ -38,11 +60,59 @@
#{$mat-form-field-flex} {
padding-top: 0;
}
#{$mat-form-field-wrapper} {
background-color: inherit;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
#{$mat-form-field-label} {
padding: 0;
justify-content: center;
display: flex;
flex-direction: column;
height: 20px;
&.adf-property-field-label--empty {
transform: translateY(-1.3437em) scale(1);
}
}
}
}
.adf-property-value {
color: var(--adf-metadata-property-panel-title-color);
&.adf-property-value-editable {
color: var(--adf-metadata-property-panel-title-color);
background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px;
height: 32px;
padding-left: 10px;
#{$mat-input-element} {
color: var(--adf-metadata-action-button-clear-color);
padding: 5px 0 6px 12px;
margin: 5px 0 0;
}
}
&.adf-property-readonly-value {
color: var(--adf-metadata-property-panel-label-color);
#{$mat-input-element} {
color: var(--adf-metadata-property-panel-label-color);
}
}
&-has-error {
border: 1px solid var(--theme-warn-color);
}
&-input {
background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px;
padding: 6px 0;
margin: 0;

1
lib/core/src/lib/comments/comments.component.scss
View File

@@ -9,7 +9,6 @@ adf-comments {
.adf-comments-input-container {
width: 100%;
padding-bottom: 8px;
padding-top: 8px;
textarea {
resize: vertical;

29
lib/core/src/lib/login/components/login/login.component.scss
View File

@@ -183,6 +183,10 @@
.adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
color: var(--adf-theme-foreground-text-color);
font-size: var(--theme-subheading-2-font-size);
top: 9px;
position: relative;
left: 7px;
}
.adf-login-controls:has(div) {
@@ -200,6 +204,26 @@
padding-bottom: 16px;
font-size: var(--theme-subheading-2-font-size);
#{$mat-form-field-infix} {
min-height: 0;
padding-bottom: 3px;
padding-top: 20px;
.adf-login-form-input-label {
font-size: var(--theme-subheading-2-font-size);
}
#{$mat-floating-label-float-above} {
padding-bottom: 6px;
}
#{$mat-floating-label--required} {
&::after {
font-size: var(--theme-subheading-2-font-size);
}
}
}
& input:-webkit-autofill {
/* stylelint-disable */
-webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
@@ -211,17 +235,16 @@
.adf-login-validation {
background-color: transparent;
color: var(--adf-error-input-color);
color: var(--theme-warn-color);
font-size: var(--theme-caption-font-size);
}
.adf-login-error {
color: var(--adf-error-input-color);
color: var(--theme-warn-color);
position: absolute;
font-size: var(--theme-caption-font-size);
margin-top: -12px;
display: block;
padding-left: 12px;
}
.adf-full-width {

7
lib/core/src/lib/styles/_components-variables.scss
View File

@@ -89,13 +89,6 @@
--adf-danger-button-background: $adf-danger-button-background,
--adf-secondary-button-background: $adf-secondary-button-background,
--adf-input-text-color: $adf-input-text-color,
--adf-input-border-color: $adf-input-border-color,
--adf-focused-input-color: $adf-focused-input-color,
--adf-error-input-color: $adf-error-input-color,
--adf-hint-input-color: $adf-hint-input-color,
--adf-disabled-input-color: $adf-disabled-input-color,
--adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
);

11
lib/core/src/lib/styles/_mat-selectors.scss
View File

@@ -51,12 +51,7 @@ $mat-form--text-field-infix: '.mat-mdc-form-text-infix';
$mat-form-field-label: '.mat-mdc-floating-label';
$mat-form-field-invalid: '.mat-form-field-invalid';
$mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
$mat-form-field-label-always-float: '.mat-mdc-form-field-label-always-float';
$mat-form-field-input-control: '.mat-mdc-form-field-input-control';
$mat-text-field-outlined: '.mdc-text-field--outlined';
$mat-text-field-disabled: '.mdc-text-field--disabled';
$mat-text-field-focused: '.mdc-text-field--focused';
$mat-text-field-invalid: '.mdc-text-field--invalid';
$mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
$mat-dialog-actions: '.mat-mdc-dialog-actions';
$mat-dialog-container: '.mdc-dialog__container';
@@ -79,7 +74,6 @@ $mat-header-row: '.mat-mdc-header-row';
$mat-row: '.mat-mdc-row';
$mat-select: '.mat-mdc-select';
$mat-select-value: '.mat-select-value';
$mat-select-invalid: '.mat-mdc-select-invalid';
$mat-select-value-text: '.mat-mdc-select-value-text';
$mat-select-panel: '.mat-mdc-select-panel';
$mat-grid-tile: '.mat-grid-tile';
@@ -119,10 +113,6 @@ $mat-standard-chip: '.mat-mdc-standard-chip';
$mat-evolution-chip-action: '.mdc-evolution-chip__action';
$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
$mat-notched-outline: '.mdc-notched-outline';
$mat-notched-outline-notched: '.mdc-notched-outline--notched';
$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
$mat-select-trigger: '.mat-mdc-select-trigger';
$mat-select-arrow: '.mat-mdc-select-arrow';
@@ -136,4 +126,3 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
$mat-snackbar: '.mdc-snackbar';
$mat-snack-bar-container: '.mat-mdc-snack-bar-container';
$mat-snackbar-label: '.mdc-snackbar__label';
$mat-date-range-input-container: '.mat-date-range-input-container';

6
lib/core/src/lib/styles/_reference-variables.scss
View File

@@ -27,9 +27,3 @@ $adf-ref-header-icon-color: inherit;
$adf-ref-header-icon-border-radius: 50%;
$adf-danger-button-background: #ba1b1b;
$adf-secondary-button-background: #2121210d;
$adf-input-text-color: rgb(33, 33, 33);
$adf-input-border-color: rgba(33, 33, 33, 0.24);
$adf-focused-input-color: rgb(0, 133, 53);
$adf-error-input-color: rgb(186, 27, 27);
$adf-hint-input-color: rgba(33, 33, 33, 0.7);
$adf-disabled-input-color: rgba(33, 33, 33, 0.12);

155
lib/core/src/lib/styles/material.theme.scss
View File

@@ -68,159 +68,4 @@
}
}
}
#{$mat-form-field-appearance-outline} {
#{$mat-text-field-outlined} {
padding-top: 14px;
padding-left: 12px;
&#{$mat-text-field--no-label} {
#{$mat-form-field-infix} {
top: -9px;
}
#{$mat-form-field-icon-suffix} {
#{$mat-icon} {
padding-top: 12px;
}
}
}
#{$mat-notched-outline} {
padding-bottom: 2px;
&#{$mat-notched-outline-notched} {
#{$mat-notched-outline-notch} {
top: 15px;
position: absolute;
border: none;
left: 9px
}
}
&:not(#{$mat-notched-outline-notched}) {
#{$mat-notched-outline-notch} {
#{$mat-form-field-label} {
top: 30px;
left: -5px;
padding-left: 5px;
}
}
}
#{$mat-form-field-label} {
color: var(--adf-input-text-color);
}
}
#{$mat-form-field-icon-suffix} {
#{$mat-icon} {
padding-top: 0;
}
}
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
border-color: var(--adf-input-border-color);
}
&:not(#{$mat-text-field-disabled}) {
&:hover, &#{$mat-text-field-focused}, &#{$mat-text-field-invalid} {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
border-width: 2px;
}
}
&#{$mat-text-field-focused} {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
border-color: var(--adf-focused-input-color);
}
}
&:hover {
#{$mat-notched-outline} {
&:not(#{$mat-notched-outline-notched}) {
#{$mat-notched-outline-notch} {
#{$mat-form-field-label} {
top: 29px;
}
}
}
}
}
&#{$mat-text-field-invalid} {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
border-color: var(--adf-error-input-color);
}
}
}
&#{$mat-text-field-disabled} {
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
background-color: var(--adf-disabled-input-color);
}
#{$mat-notched-outline}:not(#{$mat-notched-outline-notched}) {
#{$mat-notched-outline-notch} {
background-color: var(--adf-disabled-input-color);
}
}
#{$mat-text-filed-input} {
color: var(--adf-input-text-color);
}
#{$mat-select-value-text} {
color: var(--adf-input-text-color);
}
}
#{$mat-select} {
#{$mat-select-arrow-wrapper} {
height: 0;
}
}
&:not(#{$mat-text-field--no-label}) {
#{$mat-select} {
#{$mat-select-arrow-wrapper} {
margin-top: -6px;
align-items: end;
}
}
}
}
#{$mat-form-field-hint-wrapper}, #{$mat-form-field-error-wrapper} {
padding-left: 9px;
margin-top: -5px;
}
#{$mat-form-field-hint-wrapper} {
color: var(--adf-hint-input-color);
}
#{$mat-form-field-error-wrapper} {
color: var(--adf-error-input-color);
}
&#{$mat-focused} {
#{$mat-select} {
#{$mat-select-arrow} {
color: var(--adf-focused-input-color);
}
}
}
&#{$mat-focused}#{$mat-select}, #{$mat-select} {
&#{$mat-select-invalid} {
#{$mat-select-arrow} {
color: var(--adf-error-input-color);
}
}
}
}
}