mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-7768] unify inputs and selects across the app (#9687)
* Changed ng version before material migration * migration for material' * Fixed most of unit tests failing * [affected:*][ci:force] Fixing rebase * [affected:*][ci:force] attempt to fix mat-selectors importing * [affected:*][ci:force] Fixing the styles - check * AAE-21392 Fix dropdown form widget style (#9605) * ACS-7768 Applied new styles for inputs * ACS-7768 Align icon * ACS-7768 Input colors based on input state * ACS-7768 Corrected spaces * ACS-7768 Styles for selectboxes * ACS-7768 Fixed label jumping on hovering * ACS-7768 Style inputs for add permission panel, user role column and comments, styles for inputs without label * ACS-7768 Style inputs in search filters * ACS-7768 Set appearance for inputs globally to outline * ACS-7768 Style inputs for share dialog and login page * ACS-7768 Style inputs in properties panel * ACS-7768 Fixed white background when disabled field * ACS-7768 Moved setting outline appearance for inputs to ACA, fix issue for inputs in permission container * Revert "[affected:*][ci:force] Fixing the styles - check" This reverts commit80d971f7ab. * Revert "[affected:*][ci:force] attempt to fix mat-selectors importing" This reverts commit821d9e1864. * Revert "[affected:*][ci:force] Fixing rebase" This reverts commit378c6c2000. * Revert "Fixed most of unit tests failing" This reverts commit44948e0a28. * ACS-7768 Reverted unwanted changes --------- Co-authored-by: Vito Albano <vito.albano@hyland.com> Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
This commit is contained in:
AleksanderSklorz
GitHub
@@ -1,15 +1,15 @@
|
||||
<div class="adf-categories-management">
|
||||
<div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
|
||||
<mat-form-field *ngIf="categoryNameControlVisible" class="adf-category-name-field">
|
||||
<mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
|
||||
<input #categoryNameInput
|
||||
matInput
|
||||
autocomplete="off"
|
||||
[formControl]="categoryNameControl"
|
||||
(keyup.enter)="addCategory()"
|
||||
placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
|
||||
adf-auto-focus
|
||||
/>
|
||||
<mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
|
||||
<span
|
||||
*ngFor="let category of categories"
|
||||
|
||||
@@ -1,18 +1,6 @@
|
||||
.adf-categories-management {
|
||||
.adf-category-name-field {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
color: var(--adf-metadata-property-panel-text-color);
|
||||
background: var(--adf-metadata-buttons-background-color);
|
||||
height: 32px;
|
||||
border-radius: 12px;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
padding: 7px 8px 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-assigned-categories {
|
||||
|
||||
@@ -9,22 +9,6 @@ $panel-properties-height: 56px !default;
|
||||
border: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
border-radius: 12px;
|
||||
margin: 12px;
|
||||
|
||||
.adf-property-list .adf-property .adf-property-field {
|
||||
.adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
|
||||
margin-top: 10px;
|
||||
height: 32px;
|
||||
|
||||
&:is(textarea) {
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 19px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-metadata-properties-header {
|
||||
@@ -39,15 +23,6 @@ $panel-properties-height: 56px !default;
|
||||
|
||||
#{$mat-expansion-panel-body} {
|
||||
padding-top: 16px;
|
||||
|
||||
input {
|
||||
border-color: transparent;
|
||||
width: 100%;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-edit-icon-buttons {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<div class="adf-content-node-selector-content">
|
||||
<mat-form-field floatPlaceholder="never"
|
||||
appearance="outline"
|
||||
class="adf-content-node-selector-content-input"
|
||||
subscriptSizing="dynamic"
|
||||
*ngIf="showSearch">
|
||||
|
||||
@@ -31,13 +31,13 @@
|
||||
[style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
|
||||
data-automation-id="adf-slide-toggle-checked"
|
||||
class="adf-share-link__date-time-container">
|
||||
<mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
|
||||
<mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
|
||||
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
|
||||
<mat-datepicker-toggle
|
||||
[disabled]="time.disabled"
|
||||
[for]="datePicker"
|
||||
matSuffix
|
||||
class="adf-share-link__icon adf-share-link__calender-icon">
|
||||
class="adf-share-link__icon">
|
||||
</mat-datepicker-toggle>
|
||||
<mat-datepicker
|
||||
#datePicker
|
||||
@@ -75,16 +75,16 @@
|
||||
<mat-form-field
|
||||
subscriptSizing="dynamic"
|
||||
floatLabel="always"
|
||||
class="adf-full-width adf-share-link__form--field"
|
||||
class="adf-full-width"
|
||||
data-automation-id="adf-content-share-public-link-field"
|
||||
[ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
|
||||
<mat-label>{{ 'SHARE.PUBLIC-LINK' | translate }}</mat-label>
|
||||
<input
|
||||
#sharedLinkInput
|
||||
data-automation-id="adf-share-link"
|
||||
class="adf-share-link__input"
|
||||
matInput
|
||||
cdkFocusInitial
|
||||
placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
|
||||
[attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
|
||||
formControlName="sharedUrl"
|
||||
readonly="readonly">
|
||||
|
||||
@@ -34,15 +34,6 @@
|
||||
|
||||
&__form {
|
||||
padding-top: 8px;
|
||||
|
||||
#{$mat-form-field-infix}:has(.adf-share-link__input) {
|
||||
border-top: 0.9375em solid transparent;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&--field {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__public-content {
|
||||
@@ -64,12 +55,12 @@
|
||||
margin: 8px 0;
|
||||
|
||||
&-sharable {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&--sharable-container {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
&--header {
|
||||
@@ -116,23 +107,30 @@
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&__calender-icon {
|
||||
top: 12px;
|
||||
position: relative;
|
||||
right: -6px;
|
||||
|
||||
svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__date-time-container {
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
&__border-color {
|
||||
border: 1px solid var(--theme-warn-color-a700);
|
||||
&.adf-full-width {
|
||||
&#{$mat-form-field} {
|
||||
&#{$mat-form-field-label-always-float} {
|
||||
&#{$mat-form-field-appearance-outline} {
|
||||
#{$mat-text-field-outlined}, #{$mat-text-field-outlined}:hover {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border-color: var(--theme-warn-color-a700);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-notch} {
|
||||
border-left: none;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<mat-dialog-content class="adf-folder-dialog-content">
|
||||
<form [formGroup]="form" (submit)="submit()">
|
||||
<mat-form-field class="adf-full-width" appearance="outline">
|
||||
<mat-form-field class="adf-full-width">
|
||||
<mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
|
||||
<input
|
||||
id="adf-folder-name-input"
|
||||
@@ -15,7 +15,7 @@
|
||||
adf-auto-focus
|
||||
/>
|
||||
|
||||
<mat-hint *ngIf="form.controls['name'].dirty">
|
||||
<mat-error *ngIf="form.controls['name'].dirty">
|
||||
<span *ngIf="form.controls['name'].errors?.required">
|
||||
{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
|
||||
</span>
|
||||
@@ -23,10 +23,10 @@
|
||||
<span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
|
||||
{{ form.controls['name'].errors?.message | translate }}
|
||||
</span>
|
||||
</mat-hint>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="adf-full-width" appearance="outline">
|
||||
<mat-form-field class="adf-full-width">
|
||||
<mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
|
||||
<input
|
||||
id="adf-folder-title-input"
|
||||
@@ -36,7 +36,7 @@
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="adf-full-width" appearance="outline">
|
||||
<mat-form-field class="adf-full-width">
|
||||
<mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
|
||||
<textarea
|
||||
id="adf-folder-description-input"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<mat-dialog-content class="adf-library-dialog-content">
|
||||
<form novalidate [formGroup]="form" (submit)="submit()">
|
||||
<mat-form-field class="adf-library-dialog-form-field" appearance="outline">
|
||||
<mat-form-field class="adf-library-dialog-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
|
||||
<input
|
||||
required
|
||||
@@ -28,7 +28,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="adf-library-dialog-form-field" appearance="outline">
|
||||
<mat-form-field class="adf-library-dialog-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
|
||||
<input
|
||||
required
|
||||
@@ -46,7 +46,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="adf-library-dialog-form-field" appearance="outline">
|
||||
<mat-form-field class="adf-library-dialog-form-field">
|
||||
<mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
|
||||
@@ -433,10 +433,7 @@
|
||||
"WEEKS": "In the last {{value}} weeks",
|
||||
"MONTHS": "In the last {{value}} months"
|
||||
},
|
||||
"BETWEEN_PLACEHOLDERS": {
|
||||
"START_DATE": "Start Date",
|
||||
"END_DATE": "End Date"
|
||||
},
|
||||
"BETWEEN_PLACEHOLDER": "Start Date - End Date",
|
||||
"ERROR": {
|
||||
"IN_LAST": "Value required",
|
||||
"START_DATE": {
|
||||
|
||||
@@ -88,5 +88,4 @@ import { MatBadgeModule } from '@angular/material/badge';
|
||||
MatBadgeModule
|
||||
]
|
||||
})
|
||||
export class MaterialModule {
|
||||
}
|
||||
export class MaterialModule {}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
|
||||
<mat-form-field class="adf-permission-search-input">
|
||||
<mat-label>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
id="searchInput"
|
||||
[formControl]="searchInput"
|
||||
type="text"
|
||||
title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
|
||||
placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
|
||||
[value]="searchedWord"
|
||||
/>
|
||||
|
||||
|
||||
@@ -10,6 +10,10 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
min-height: 85px;
|
||||
}
|
||||
|
||||
.adf-delete-permission-column {
|
||||
min-width: 80px;
|
||||
|
||||
|
||||
@@ -45,13 +45,8 @@ import { RoleModel } from '../../models/role.model';
|
||||
`
|
||||
.adf-role-selector-field.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
max-width: 200px;
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<mat-form-field class="adf-chip-list" appearance="outline">
|
||||
<mat-form-field class="adf-chip-list">
|
||||
<mat-label>{{ placeholder | translate }}</mat-label>
|
||||
<mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
|
||||
<mat-chip-row
|
||||
class="adf-option-chips adf-autocomplete-added-option-chips"
|
||||
@@ -16,7 +17,6 @@
|
||||
</button>
|
||||
</mat-chip-row>
|
||||
<input
|
||||
placeholder="{{ placeholder | translate }}"
|
||||
aria-controls="adf-search-chip-autocomplete"
|
||||
#optionInput
|
||||
[formControl]="formCtrl"
|
||||
|
||||
@@ -4,28 +4,24 @@
|
||||
adf-search-chip-autocomplete-input {
|
||||
.adf-chip-list {
|
||||
width: 100%;
|
||||
|
||||
mat-chip-grid {
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.adf-search-properties-file-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-chip-list:has(#{$mat-notched-outline}) {
|
||||
margin-top: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#{$mat-form--text-field-infix} {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.adf-chip-list#{$mat-form-field} {
|
||||
#{$mat-form-field-infix} {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-properties-file-input {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.adf-autocomplete-added-option-chips.adf-option-chips {
|
||||
border: 1px solid var(--theme-text-color);
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -28,12 +28,19 @@
|
||||
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
|
||||
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
|
||||
</mat-radio-button>
|
||||
<mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
|
||||
<mat-form-field class="adf-search-date-range-form-field">
|
||||
<mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDER' | translate }}</mat-label>
|
||||
<mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
|
||||
<input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
|
||||
data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
|
||||
<input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
|
||||
data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
|
||||
<input
|
||||
matStartDate
|
||||
data-automation-id="date-range-between-start-input"
|
||||
[formControl]="betweenStartDateFormControl"
|
||||
(change)="dateChanged($event, betweenStartDateFormControl)">
|
||||
<input
|
||||
matEndDate
|
||||
data-automation-id="date-range-between-end-input"
|
||||
[formControl]="betweenEndDateFormControl"
|
||||
(change)="dateChanged($event, betweenEndDateFormControl)">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
@import 'styles/mat-selectors';
|
||||
|
||||
adf-search-date-range {
|
||||
#{$mat-icon-button}:is(button),
|
||||
#{$mat-icon-button}#{$mat-button-base} {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.adf-search-date-range-container {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
.adf-search-date-range-form-field-select {
|
||||
width: 180px;
|
||||
@@ -23,10 +18,11 @@ adf-search-date-range {
|
||||
|
||||
&-date {
|
||||
margin-top: 8px;
|
||||
}
|
||||
align-items: flex-start;
|
||||
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
height: unset;
|
||||
mat-radio-button {
|
||||
margin-top: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-date-range-input-field {
|
||||
@@ -36,12 +32,9 @@ adf-search-date-range {
|
||||
.adf-search-date-range-form-field {
|
||||
padding-left: 10px;
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
|
||||
#{$mat-form-field-flex} {
|
||||
#{$mat-form-field-infix} {
|
||||
padding: 0.375em 0 4px;
|
||||
}
|
||||
#{$mat-date-range-input-container} {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,19 +22,18 @@ import { MatMenuTrigger } from '@angular/material/menu';
|
||||
import { SearchWidgetContainerComponent } from '../../search-widget-container/search-widget-container.component';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-widget-chip',
|
||||
templateUrl: './search-widget-chip.component.html',
|
||||
styles: [
|
||||
`
|
||||
.adf-search-widget-extra-width.adf-search-filter-chip-menu-panel {
|
||||
max-width: 500px;
|
||||
}
|
||||
`
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
selector: 'adf-search-widget-chip',
|
||||
templateUrl: './search-widget-chip.component.html',
|
||||
styles: [
|
||||
`
|
||||
.adf-search-widget-extra-width.adf-search-filter-chip-menu-panel {
|
||||
max-width: 500px;
|
||||
}
|
||||
`
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SearchWidgetChipComponent {
|
||||
|
||||
export class SearchWidgetChipComponent {
|
||||
@Input()
|
||||
category: SearchCategory;
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="adf-search-input-container">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-form-field>
|
||||
<mat-label *ngIf="label">{{ label | translate }}</mat-label>
|
||||
<input matInput [placeholder]="placeholder | translate" [value]="value" (change)="onSearchInputChanged($event)" />
|
||||
</mat-form-field>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<div class="adf-search-logical-filter-container">
|
||||
<div *ngFor="let field of fields" class="adf-search-input">
|
||||
<mat-form-field *ngFor="let field of fields" class="adf-search-input">
|
||||
<mat-label data-automation-id="adf-search-input-label">{{('SEARCH.LOGICAL_SEARCH.' + field + '_LABEL') | translate}}</mat-label>
|
||||
<input type="text"
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
[(ngModel)]="searchCondition[LogicalSearchFields[field]]"
|
||||
placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
|
||||
[attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"
|
||||
(change)="onInputChange()"/>
|
||||
</div>
|
||||
<mat-hint>{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -7,15 +7,5 @@
|
||||
&:last-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 25px;
|
||||
border: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,17 +20,20 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<input
|
||||
[formControl]="form.controls.fileSize"
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
(input)="narrowDownAllowedCharacters($event)"
|
||||
(keydown)="preventIncorrectNumberCharacters($event)"
|
||||
id="adf-search-properties-file-size"
|
||||
[placeholder]="'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate"
|
||||
(blur)="clearNumberFieldWhenInvalid($event)"
|
||||
data-automation-id="adf-search-properties-file-size-input" />
|
||||
<mat-form-field subscriptSizing="dynamic" class="adf-search-properties-file-size">
|
||||
<mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="form.controls.fileSize"
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
(input)="narrowDownAllowedCharacters($event)"
|
||||
(keydown)="preventIncorrectNumberCharacters($event)"
|
||||
id="adf-search-properties-file-size"
|
||||
(blur)="clearNumberFieldWhenInvalid($event)"
|
||||
data-automation-id="adf-search-properties-file-size-input" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="adf-search-properties-file-size-unit" subscriptSizing="dynamic">
|
||||
<mat-select
|
||||
[formControl]="form.controls.fileSizeUnit"
|
||||
|
||||
@@ -7,115 +7,16 @@ adf-search-properties {
|
||||
.adf-search-properties-file-size-label {
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#{$mat-text-field--no-label} {
|
||||
#{$mat-form-field-infix} {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
display: inline-block;
|
||||
}
|
||||
.adf-search-properties-file-size {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#{$mat-form-field-infix} {
|
||||
height: 37.5px;
|
||||
min-height: 37.5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#{$mat-select-trigger} {
|
||||
height: 17.5px;
|
||||
}
|
||||
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
#{$mat-form-field-underline} {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-select-arrow} {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#{$mat-form-field} {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
adf-search-chip-autocomplete-input {
|
||||
display: block;
|
||||
|
||||
#{$mat-text-field-outlined} {
|
||||
&-start,
|
||||
&-end {
|
||||
border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
}
|
||||
|
||||
&-start {
|
||||
border-left: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
}
|
||||
|
||||
&-end {
|
||||
border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-focused} {
|
||||
#{$mat-text-field-outlined} {
|
||||
outline: 2px auto -webkit-focus-ring-color;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-appearance-outline} {
|
||||
#{$mat-text-field-outlined-thick} {
|
||||
#{$mat-text-field-outlined} {
|
||||
&-start,
|
||||
&-end {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-leading} {
|
||||
border-color: var(--adf-theme-foreground-text-color-027);
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-trailing} {
|
||||
border-color: var(--adf-theme-foreground-text-color-027);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
.mat-form-field-infix.mat-form-field-infix {
|
||||
height: 25px;
|
||||
border: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.adf-search-properties-file-size-operator,
|
||||
.adf-search-properties-file-size-unit {
|
||||
#{$mat-form-field-infix} {
|
||||
border: 1px solid var(--adf-theme-mat-grey-color-a400);
|
||||
border-radius: 5px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
&#{$mat-focused} {
|
||||
#{$mat-form-field-infix} {
|
||||
outline: 2px auto -webkit-focus-ring-color;
|
||||
.adf-search-properties-file-size-operator {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<mat-form-field
|
||||
class="adf-search-text-form-field"
|
||||
appearance="outline">
|
||||
subscriptSizing="dynamic">
|
||||
<mat-label>{{ settings?.placeholder | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
|
||||
@@ -1,34 +1,8 @@
|
||||
@import 'styles/mat-selectors';
|
||||
|
||||
.adf-search-text {
|
||||
padding: 0;
|
||||
|
||||
#{$mat-form-field-wrapper} {
|
||||
margin-top: -5px;
|
||||
padding: 0;
|
||||
|
||||
#{$mat-form-field-infix} {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-notched-outline} {
|
||||
#{$mat-notched-outline-trailing},
|
||||
#{$mat-notched-outline-notch} {
|
||||
border-top: 0 solid;
|
||||
border-left: 0 solid;
|
||||
border-right: 0 solid;
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-secondary-text-color);
|
||||
|
||||
#{$mat-floating-label} {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-leading} {
|
||||
display: none;
|
||||
}
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.adf-search-text-form-field {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div id="site-dropdown-container" class="adf-site-dropdown-container">
|
||||
<mat-form-field class="adf-sites-dropdown-form-field" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
|
||||
<mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
|
||||
<mat-select
|
||||
adf-infinite-select-scroll
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="adf-tags-creation">
|
||||
<div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
|
||||
<mat-form-field *ngIf="tagNameControlVisible" class="adf-tag-name-field">
|
||||
<mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
|
||||
<input
|
||||
#tagNameInput
|
||||
class="adf-tag-search-field"
|
||||
@@ -8,10 +9,9 @@
|
||||
[formControl]="tagNameControl"
|
||||
(keyup.enter)="addTag()"
|
||||
adf-auto-focus
|
||||
placeholder="{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}"
|
||||
/>
|
||||
<mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">{{ tagNameErrorMessageKey | translate }} </mat-error>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<p class="adf-no-tags-message" *ngIf="showEmptyTagMessage">
|
||||
{{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
|
||||
</p>
|
||||
|
||||
@@ -29,13 +29,7 @@ adf-tags-creator {
|
||||
.adf-tag-name-field[hidden] {
|
||||
padding-top: 10px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.adf-tag-search-field {
|
||||
background: var(--adf-metadata-buttons-background-color);
|
||||
height: 32px;
|
||||
border-radius: 12px;
|
||||
padding: 0 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-create-tag-label {
|
||||
|
||||
@@ -1,24 +1,14 @@
|
||||
<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 }">
|
||||
<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
|
||||
<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>
|
||||
<div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
|
||||
{{ property.label | translate }}
|
||||
</mat-label>
|
||||
<div class="adf-dateitem-editable-controls">
|
||||
<span
|
||||
class="adf-datepicker-toggle"
|
||||
@@ -28,13 +18,18 @@
|
||||
role="button"
|
||||
(keyup.enter)="showDatePicker()"
|
||||
>
|
||||
<span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
|
||||
<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">
|
||||
{{ property.displayValue }}</span
|
||||
>
|
||||
</span>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="showClearAction"
|
||||
*ngIf="showClearAction && isEditable"
|
||||
class="adf-date-reset-icon"
|
||||
(click)="onDateClear()"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
|
||||
@@ -44,6 +39,7 @@
|
||||
</mat-icon>
|
||||
|
||||
<mat-datetimepicker-toggle
|
||||
*ngIf="isEditable"
|
||||
[attr.tabindex]="-1"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.data-automation-id]="'datepickertoggle-' + property.key"
|
||||
@@ -53,9 +49,11 @@
|
||||
</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"
|
||||
@@ -69,12 +67,12 @@
|
||||
[startAt]="valueDate"
|
||||
>
|
||||
</mat-datetimepicker>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<ng-template #elseEmptyValueBlock>
|
||||
{{ property.default | translate }}
|
||||
</ng-template>
|
||||
|
||||
<div *ngIf="property.multivalued"
|
||||
<mat-form-field *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
|
||||
@@ -85,7 +83,15 @@
|
||||
<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"
|
||||
@@ -95,6 +101,7 @@
|
||||
(keyup.enter)="showDatePicker()"
|
||||
>
|
||||
<input
|
||||
matInput
|
||||
class="adf-invisible-date-input"
|
||||
[attr.tabIndex]="-1"
|
||||
[matDatetimepicker]="datetimePicker"
|
||||
@@ -118,5 +125,5 @@
|
||||
>
|
||||
</mat-datetimepicker>
|
||||
</div>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -9,28 +9,33 @@
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
margin-top: 10px;
|
||||
|
||||
&.adf-property-value-editable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border-bottom: inherit;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
&: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-readonly-value {
|
||||
padding: 0 0 0 12px;
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-invisible-date-input {
|
||||
height: 2px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
#{$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-dateitem-chip-list-container.adf-property-field {
|
||||
@@ -40,8 +45,7 @@
|
||||
}
|
||||
|
||||
.adf-dateitem-editable {
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
&-controls {
|
||||
@@ -57,8 +61,6 @@
|
||||
}
|
||||
|
||||
#{$mat-icon} {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
@@ -71,9 +73,6 @@
|
||||
}
|
||||
|
||||
.adf-date-reset-icon {
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,37 +1,34 @@
|
||||
<ng-container *ngIf="!property.isEmpty() || isEditable">
|
||||
<div
|
||||
[attr.data-automation-id]="'card-select-label-' + property.key"
|
||||
class="adf-property-label"
|
||||
[ngClass]="{
|
||||
'adf-property-value-editable': isEditable,
|
||||
'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>
|
||||
<mat-form-field class="adf-property-value" [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>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -24,17 +24,6 @@
|
||||
#{$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} {
|
||||
@@ -42,9 +31,19 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
[ngClass]="{
|
||||
'adf-property-read-only': !isEditable
|
||||
}"
|
||||
[floatLabel]="'always'"
|
||||
>
|
||||
<mat-label
|
||||
*ngIf="showProperty || isEditable"
|
||||
|
||||
@@ -55,8 +55,17 @@
|
||||
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);
|
||||
.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-readonly-value {
|
||||
|
||||
@@ -6,32 +6,11 @@
|
||||
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%;
|
||||
|
||||
@@ -41,7 +20,6 @@
|
||||
|
||||
#{mat-input-element} {
|
||||
text-overflow: ellipsis;
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
padding: 6px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
@@ -60,59 +38,11 @@
|
||||
#{$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;
|
||||
|
||||
@@ -9,6 +9,7 @@ adf-comments {
|
||||
.adf-comments-input-container {
|
||||
width: 100%;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
|
||||
@@ -183,10 +183,6 @@
|
||||
|
||||
.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) {
|
||||
@@ -204,26 +200,6 @@
|
||||
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;
|
||||
@@ -235,16 +211,17 @@
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: var(--theme-warn-color);
|
||||
color: var(--adf-error-input-color);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: var(--theme-warn-color);
|
||||
color: var(--adf-error-input-color);
|
||||
position: absolute;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
|
||||
@@ -89,6 +89,13 @@
|
||||
--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)
|
||||
);
|
||||
|
||||
|
||||
@@ -51,7 +51,12 @@ $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';
|
||||
@@ -74,6 +79,7 @@ $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';
|
||||
@@ -113,6 +119,10 @@ $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';
|
||||
@@ -126,3 +136,4 @@ $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';
|
||||
|
||||
@@ -27,3 +27,9 @@ $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);
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
$alfresco-typography: mat.define-typography-config(
|
||||
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
|
||||
$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, 500),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$body-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.define-typography-level(12px, 20px, 400),
|
||||
$button: mat.define-typography-level(14px, 14px, 500),
|
||||
$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, 500),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$body-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: 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.
|
||||
);
|
||||
|
||||
@@ -68,4 +68,159 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user