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-7768] unify inputs and selects across the app (#3845)

Browse Source 
* ACS-7768 Style inputs in create from template dialog

* ACS-7768 Used globally configured outline appearance for inputs

* ACS-7768 Style inputs for profile page

* ACS-7768 Style inputs for library metadata form

* ACS-7768 Style inputs for folder rules dialog

* ACS-7768 Style inputs for manage rules page

* ACS-7768 Set outline appearance for input, fix small issue

* ACS-7768 Addressed comment
This commit is contained in:
AleksanderSklorz
2024-05-17 12:20:06 +02:00
committed by GitHub
parent 1ba2b297a1
commit 6a5ef73283
15 changed files with 135 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/app/app.module.ts
View File

@@ -64,6 +64,7 @@ import { ShellModule, SHELL_APP_SERVICE, SHELL_AUTH_TOKEN } from '@alfresco/adf-
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { APP_ROUTES } from './app.routes';
import { MatIconRegistry } from '@angular/material/icon';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
registerLocaleData(localeFr);
registerLocaleData(localeDe);
@@ -122,6 +123,12 @@ registerLocaleData(localeSv);
name: 'app',
source: 'assets'
}
},
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'outline'
}
}
],
declarations: [AppComponent],

4
projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
View File

@@ -8,13 +8,13 @@
margin-top: -15px;
.adf-property-list {
padding: 8px;
padding: 15px 8px 8px;
background: unset;
}
.adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
display: inline-block;
width: 300px;
width: 100%;
.adf-textitem-clickable {
padding-top: 0;

4
projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
View File

@@ -7,7 +7,7 @@
class="aca-rule-composite-condition__form__row"
*ngFor="let control of conditionFormControls; let i = index">
<mat-form-field *ngIf="i === 0" appearance="outline" subscriptSizing="dynamic">
<mat-form-field *ngIf="i === 0" appearance="outline" subscriptSizing="dynamic" class="aca-rule-composite-condition-form-field">
<mat-select
[formControl]="invertedControl"
[disabled]="readOnly">
@@ -16,7 +16,7 @@
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="i > 0" appearance="outline" subscriptSizing="dynamic">
<mat-form-field *ngIf="i > 0" appearance="outline" subscriptSizing="dynamic" class="aca-rule-composite-condition-form-field">
<mat-select
[formControl]="booleanModeControl">
<mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>

4
projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
View File

@@ -40,6 +40,10 @@
& > :nth-child(2) {
flex: 1;
}
.aca-rule-composite-condition-form-field {
min-width: unset;
}
}
}
}

2
projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
View File

@@ -53,7 +53,7 @@
</aca-rule-action-list>
</div>
<div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
<div class="aca-rule-details__form__row aca-rule-details__form__options" *ngIf="showOptionsSection">
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
<aca-rule-options
formControlName="options"

19
projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
View File

@@ -6,6 +6,7 @@
padding: 8px 20px;
width: 100%;
box-sizing: border-box;
overflow-x: auto;
&.aca-rule-details__form__description {
padding-top: 0;
@@ -16,7 +17,6 @@
&__row {
display: flex;
align-items: baseline;
gap: 8px;
& > label,
@@ -28,6 +28,10 @@
padding: 0.75em 0;
}
& > label {
margin-top: 11px;
}
& > div {
flex-grow: 1;
}
@@ -41,6 +45,19 @@
min-height: 4em;
}
}
&.aca-rule-details__form__actions {
.aca-label {
margin-top: 14px;
}
}
&.aca-rule-details__form__triggers,
&.aca-rule-details__form__options {
.aca-label {
padding-top: 2px;
}
}
}
&:not(:nth-child(1)) {

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

@@ -2,12 +2,12 @@
<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">
<mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
<input
matInput
[cdkTrapFocusAutoCapture]="form.enabled"
[cdkTrapFocus]="form.enabled"
required
placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
formControlName="title"
[errorStateMatcher]="matcher"
/>
@@ -18,11 +18,13 @@
</mat-form-field>
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
<input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
<mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
<input matInput formControlName="id" />
</mat-form-field>
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
<mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
<mat-select formControlName="visibility">
<mat-option [value]="type.value" *ngFor="let type of libraryType">
{{ type.label | translate }}
</mat-option>
@@ -30,9 +32,9 @@
</mat-form-field>
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
<mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
<textarea
matInput
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
rows="3"
formControlName="description"
[errorStateMatcher]="matcher"

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

@@ -9,6 +9,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="auto">
<mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
<input
matInput
#searchInput
@@ -19,7 +20,6 @@
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)"
class="app-input-form-field-input"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
autocomplete="off"
/>
<div matSuffix class="app-suffix-search-icon-wrapper">

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

@@ -9,11 +9,6 @@
font-size: 24px;
cursor: pointer;
}
.app-clear-icon {
font-size: 18px;
margin: 3px;
}
}
.app-search-container {
@@ -30,7 +25,6 @@
.app-input-form-field {
letter-spacing: -0.7px;
font-size: 16px;
width: calc(100% - 56px);
&-input {
@@ -44,23 +38,12 @@
display: none;
}
}
/* stylelint-disable selector-class-pattern */
.mat-mdc-form-field-icon-suffix {
position: relative;
right: -14px;
}
}
.mat-mdc-form-field-flex {
background: #fff;
}
.mat-mdc-text-field-wrapper {
height: 44px;
padding-left: 0;
}
.app-input-form-field-readonly {
.mat-mdc-text-field-wrapper,
.mat-mdc-form-field-flex {
@@ -74,6 +57,7 @@
&-icon {
font-size: 24px;
padding-right: 0;
margin-top: -10px;
}
}
}

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

@@ -7,7 +7,8 @@
<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 app-input-form-field-readonly" [floatLabel]="'auto'">
<mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'" appearance="fill">
<mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
<input
matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
@@ -15,7 +16,6 @@
[type]="'text'"
[readonly]="true"
[value]="searchedWord"
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
/>
<div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">

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

@@ -36,12 +36,6 @@ $top-margin: 12px;
caret-color: var(--theme-text-color);
}
}
&:focus-within {
label {
display: none;
}
}
}
/* stylelint-disable-next-line */
@@ -86,6 +80,7 @@ $top-margin: 12px;
font-size: 16px;
letter-spacing: -0.7px;
margin-bottom: -8px;
margin-top: 23px;
/* stylelint-disable-next-line */
.mat-mdc-checkbox {

92
projects/aca-content/src/lib/components/view-profile/view-profile.component.html
View File

@@ -43,35 +43,56 @@
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
<input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
<mat-form-field *ngIf="!generalSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="text"
value=""
formControlName="jobTitle">
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
<input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
<mat-form-field *ngIf="!generalSectionButtonsToggle">
<input
matInput
type="text"
value=""
formControlName="location">
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
<input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
<mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
<mat-form-field *ngIf="!generalSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="tel"
name="Telephone"
value=""
formControlName="telephone">
<mat-error *ngIf="profileForm.get('telephone').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
<input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
<mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
<mat-form-field *ngIf="!generalSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="tel"
value=""
formControlName="mobile">
<mat-error *ngIf="profileForm.get('mobile').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</mat-form-field>
</div>
</div>
</div>
@@ -102,42 +123,67 @@
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName"
class="app-profile-general-dropdown-input-details app-selected">
<mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="text"
value=""
formControlName="companyName">
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
class="app-profile-general-dropdown-input-details app-selected">
<mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="text"
value=""
formControlName="companyAddress">
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
class="app-profile-general-dropdown-input-details app-selected">
<mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="text"
value=""
formControlName="companyPostCode">
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
<input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
class="app-profile-general-dropdown-input-details app-selected">
<mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
<mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="tel"
value=""
formControlName="companyTelephone">
<mat-error *ngIf="profileForm.get('companyTelephone').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</mat-form-field>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<div class="app-general-dropdown-details" >
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
class="app-profile-general-dropdown-input-details app-selected">
<mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
<mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
<input
matInput
type="text"
value=""
formControlName="companyEmail">
<mat-error *ngIf="profileForm.get('companyEmail').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</mat-form-field>
</div>
</div>
</div>

28
projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
View File

@@ -106,13 +106,6 @@ app-view-profile {
padding-right: 1px;
}
.app-selected:focus {
border: 2px solid var(--theme-blue-button-color);
border-radius: 6px;
outline: none;
box-shadow: 0 0 2px var(--theme-blue-button-color);
}
.app-general-edit:hover {
background: var(--theme-grey-hover-background-color);
}
@@ -127,6 +120,14 @@ app-view-profile {
.app-general-dropdown-details {
display: flex;
align-items: center;
min-height: 90.5px;
.app-general-dropdown-details-form-field {
position: relative;
top: 13px;
padding-bottom: 3px;
}
}
.app-profile-general-dropdown-heading {
@@ -141,14 +142,6 @@ app-view-profile {
letter-spacing: 0.5px;
}
.app-profile-general-dropdown-input-details {
width: 24%;
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color);
}
.app-profile-login-row {
margin: 2rem 0 0 2rem;
width: 70%;
@@ -185,9 +178,4 @@ app-view-profile {
border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem;
}
.app-error-message {
padding-top: 2rem;
padding-left: 0.5rem;
}
}

3
projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
View File

@@ -36,10 +36,11 @@ import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
@Component({
standalone: true,
imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatButtonModule, MatIconModule, MatDividerModule, MatFormFieldModule],
imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatButtonModule, MatIconModule, MatDividerModule, MatFormFieldModule, MatInputModule],
selector: 'app-view-profile',
templateUrl: './view-profile.component.html',
styleUrls: ['./view-profile.component.scss'],

6
projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html
View File

@@ -2,9 +2,9 @@
<div mat-dialog-content class="app-create-from-template-content">
<form [formGroup]="form" novalidate>
<mat-form-field class="app-create-from-template-field">
<mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}</mat-label>
<input
cdkFocusInitial
placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}"
matInput
formControlName="name"
required
@@ -16,8 +16,8 @@
</mat-form-field>
<mat-form-field class="app-create-from-template-field">
<mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}</mat-label>
<input
placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}"
matInput
formControlName="title"
/>
@@ -28,9 +28,9 @@
</mat-form-field>
<mat-form-field class="app-create-from-template-field">
<mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}</mat-label>
<textarea
matInput
placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}"
rows="2"
formControlName="description"
></textarea>