mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)
* [ACS-6081] Reduce references to internal Angular material CSS classes * [ACS-6081] rollback default scrollable value [ci:force] * [ACS-6081] linting * [ACS-6081] fix e2es * [ACS-6081] cr fix * [ACS-6081] remove adf-cli logger from e2es
This commit is contained in:
Mykyta Maliarchuk
committed by
GitHub
GitHub
parent
7468111d19
commit
7c95b53c8b
@@ -6,7 +6,7 @@
|
||||
<h1>{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content scrollable">
|
||||
<div class="aca-page-layout-content aca-scrollable">
|
||||
<adf-about>
|
||||
<adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
|
||||
<ng-template>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
|
||||
<ng-container *ngIf="((ruleSetsLoading$ | async) && (inheritedRuleSets$ | async).length === 0) || (actionsLoading$ | async); else onLoaded">
|
||||
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
@@ -27,6 +27,7 @@
|
||||
|
||||
<mat-slide-toggle
|
||||
data-automation-id="manage-rules-inheritance-toggle-button"
|
||||
class="aca-manage-rules__actions-bar__toggle"
|
||||
[checked]="isInheritanceEnabled"
|
||||
(change)="onInheritanceToggleChange($event)"
|
||||
[disabled]="isInheritanceToggleDisabled"
|
||||
@@ -34,7 +35,7 @@
|
||||
{{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.INHERIT_RULES' | translate }}
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-divider vertical class="vertical-divider"></mat-divider>
|
||||
<mat-divider vertical class="aca-manage-rules__actions-bar__vertical-divider"></mat-divider>
|
||||
|
||||
<div class="aca-manage-rules__actions-bar__buttons">
|
||||
<button
|
||||
|
||||
@@ -19,12 +19,12 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-label {
|
||||
&__toggle {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vertical-divider {
|
||||
&__vertical-divider {
|
||||
height: 50%;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
@@ -4,8 +4,9 @@
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
|
||||
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem .mat-form-field .mat-form-field-infix {
|
||||
width: 280px;
|
||||
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
|
||||
&.childCompositeCondition {
|
||||
&.aca-childCompositeCondition {
|
||||
padding: 8px 16px;
|
||||
background-color: hsl(0deg, 0%, 100%);
|
||||
|
||||
&.secondaryBackground {
|
||||
&.aca-secondaryBackground {
|
||||
background-color: hsl(0deg, 0%, 95%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,10 +62,10 @@ import { RuleSimpleConditionUiComponent } from './rule-simple-condition.ui-compo
|
||||
]
|
||||
})
|
||||
export class RuleCompositeConditionUiComponent implements ControlValueAccessor, OnDestroy, OnChanges {
|
||||
@HostBinding('class.secondaryBackground')
|
||||
@HostBinding('class.aca-secondaryBackground')
|
||||
@Input()
|
||||
secondaryBackground = false;
|
||||
@HostBinding('class.childCompositeCondition')
|
||||
@HostBinding('class.aca-childCompositeCondition')
|
||||
@Input()
|
||||
childCondition = false;
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ hidden: isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
|
||||
<mat-select formControlName="comparator" data-automation-id="comparator-select">
|
||||
<mat-option
|
||||
*ngFor="let comparator of selectedFieldComparators"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
&__comparator-input {
|
||||
&.hidden {
|
||||
&.aca-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
.aca-edit-rule-dialog-container {
|
||||
--edit-rule-dialog-padding: 8px 20px;
|
||||
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-edit-rule-dialog {
|
||||
margin: -24px;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin: -43px -24px 0;
|
||||
padding: var(--edit-rule-dialog-padding);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
@@ -29,7 +27,7 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 0;
|
||||
margin: 0 -24px;
|
||||
padding: 0;
|
||||
|
||||
&__spinner {
|
||||
@@ -41,7 +39,7 @@
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin: 0;
|
||||
margin: 0 -24px -43px;
|
||||
padding: var(--edit-rule-dialog-padding);
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<mat-checkbox
|
||||
formControlName="isAsynchronous"
|
||||
(change)="toggleErrorScriptDropdown($event)"
|
||||
class="aca-rule-options__checkbox"
|
||||
data-automation-id="rule-option-checkbox-asynchronous">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
|
||||
</mat-checkbox>
|
||||
@@ -10,7 +11,7 @@
|
||||
<mat-form-field
|
||||
data-automation-id="rule-option-form-field-errorScript"
|
||||
floatLabel="always"
|
||||
[ngClass]="{ 'hide-error-script-dropdown': hideErrorScriptDropdown }">
|
||||
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
|
||||
|
||||
<mat-select
|
||||
formControlName="errorScript"
|
||||
@@ -31,6 +32,7 @@
|
||||
<div class="aca-rule-options__option" *ngIf="!readOnly || isInheritableChecked">
|
||||
<mat-checkbox
|
||||
formControlName="isInheritable"
|
||||
class="aca-rule-options__checkbox"
|
||||
data-automation-id="rule-option-checkbox-inheritable">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_INHERITABLE' | translate }}
|
||||
</mat-checkbox>
|
||||
@@ -39,6 +41,7 @@
|
||||
<div class="aca-rule-options__option" *ngIf="!readOnly">
|
||||
<mat-checkbox
|
||||
formControlName="isDisabled"
|
||||
class="aca-rule-options__checkbox"
|
||||
data-automation-id="rule-option-checkbox-disabled">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.read-only .mat-checkbox-inner-container {
|
||||
&.aca-read-only &__checkbox label > span:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-error-script-dropdown {
|
||||
.aca-hide-error-script-dropdown {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,11 +45,11 @@ describe('RuleOptionsUiComponent', () => {
|
||||
const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
|
||||
if (isVisible) {
|
||||
expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).not.toContain(
|
||||
'hide-error-script-dropdown'
|
||||
'aca-hide-error-script-dropdown'
|
||||
);
|
||||
} else {
|
||||
expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).toContain(
|
||||
'hide-error-script-dropdown'
|
||||
'aca-hide-error-script-dropdown'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -74,7 +74,7 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges,
|
||||
@Input()
|
||||
errorScriptConstraint: ActionParameterConstraint;
|
||||
|
||||
@HostBinding('class.read-only')
|
||||
@HostBinding('class.aca-read-only')
|
||||
readOnly = false;
|
||||
|
||||
onChange: (options: RuleOptions) => void = () => undefined;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<form class="aca-rule-details__form" [ngClass]="{ 'read-only': readOnly }" [formGroup]="form">
|
||||
<form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">
|
||||
|
||||
<ng-container *ngIf="!preview">
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__name">
|
||||
<label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never'>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<input
|
||||
id="rule-details-name-input"
|
||||
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
|
||||
@@ -17,8 +17,9 @@
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__description">
|
||||
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
|
||||
<div>
|
||||
<mat-form-field floatLabel='never'>
|
||||
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
|
||||
<textarea
|
||||
class="aca-rule-details__form__row__field__textarea"
|
||||
id="rule-details-description-textarea"
|
||||
matInput formControlName="description" data-automation-id="rule-details-description-textarea"
|
||||
[placeholder]="descriptionPlaceHolder | translate">
|
||||
@@ -29,20 +30,20 @@
|
||||
</ng-container>
|
||||
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__triggers">
|
||||
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
|
||||
<div>
|
||||
<aca-rule-triggers formControlName="triggers" data-automation-id="rule-details-triggers-component"></aca-rule-triggers>
|
||||
<mat-error class="rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
|
||||
<mat-error class="aca-rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__conditions">
|
||||
<aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
|
||||
<mat-error class="rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
|
||||
<mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__row aca-rule-details__form__actions">
|
||||
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
|
||||
<aca-rule-action-list
|
||||
formControlName="actions"
|
||||
[actionDefinitions]="actionDefinitions"
|
||||
@@ -53,7 +54,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
|
||||
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
|
||||
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
|
||||
<aca-rule-options
|
||||
formControlName="options"
|
||||
data-automation-id="rule-details-options-component"
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
gap: 8px;
|
||||
|
||||
& > label,
|
||||
& > .label {
|
||||
& > .aca-label {
|
||||
font-weight: bold;
|
||||
width: 20%;
|
||||
min-width: 100px;
|
||||
@@ -35,15 +35,16 @@
|
||||
|
||||
& > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
font-size: inherit;
|
||||
&__field {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-top: -11px;
|
||||
font-size: inherit;
|
||||
|
||||
.mat-form-field-infix {
|
||||
border: none;
|
||||
}
|
||||
&__textarea {
|
||||
min-height: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -55,17 +56,13 @@
|
||||
&__conditions {
|
||||
width: 100%;
|
||||
|
||||
& > .rule-details-error {
|
||||
& > .aca-rule-details-error {
|
||||
margin-left: 16px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 4em;
|
||||
}
|
||||
|
||||
.rule-details-error {
|
||||
.aca-rule-details-error {
|
||||
font-size: 75%;
|
||||
height: 1em;
|
||||
}
|
||||
@@ -76,7 +73,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.read-only,
|
||||
&.aca-read-only,
|
||||
.mat-form-field-disabled {
|
||||
.mat-form-field-underline,
|
||||
.mat-select-arrow-wrapper {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<div
|
||||
*ngIf="item.type === 'load-more-rules'; else loadMoreRuleSets"
|
||||
tabindex="0"
|
||||
class="aca-rule-list-grouping__non-rule-item load-more"
|
||||
class="aca-rule-list-grouping__non-rule-item aca-load-more"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="onClickLoadMoreRules(item.ruleSet)"
|
||||
(keyup.enter)="onClickLoadMoreRules(item.ruleSet)">
|
||||
@@ -27,7 +27,7 @@
|
||||
<div
|
||||
*ngIf="item.type === 'load-more-rule-sets'; else loadingRules"
|
||||
tabindex="0"
|
||||
class="aca-rule-list-grouping__non-rule-item load-more"
|
||||
class="aca-rule-list-grouping__non-rule-item aca-load-more"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
|
||||
(click)="onClickLoadMoreRuleSets()"
|
||||
(keyup.enter)="onClickLoadMoreRuleSets()">
|
||||
@@ -40,7 +40,7 @@
|
||||
tabindex="0"
|
||||
class="aca-rule-list-grouping__non-rule-item"
|
||||
matRipple matRippleColor="hsla(0,0%,0%,0.05)">
|
||||
<mat-spinner mode="indeterminate" [diameter]="16"></mat-spinner>
|
||||
<mat-spinner mode="indeterminate" [diameter]="16" class="aca-spinner"></mat-spinner>
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.LOADING_RULES' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
text-align: center;
|
||||
padding: 0.5em 0;
|
||||
|
||||
&.load-more {
|
||||
&.aca-load-more {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
.mat-spinner {
|
||||
.aca-spinner {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--theme-selected-button-bg-color);
|
||||
&.aca-selected {
|
||||
background: var(--adf-theme-background-selected-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ export class RuleListItemUiComponent {
|
||||
@Input()
|
||||
rule: Rule;
|
||||
@Input()
|
||||
@HostBinding('class.selected')
|
||||
@HostBinding('class.aca-selected')
|
||||
isSelected: boolean;
|
||||
@Input()
|
||||
showEnabledToggle = false;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
*ngIf="inheritedRuleSetGroupingItems.length > 0"
|
||||
class="aca-rule-list__item"
|
||||
data-automation-id="rule-list-item"
|
||||
[ngClass]="{ expanded: inheritedRuleSetsExpanded }">
|
||||
[ngClass]="{ 'aca-expanded': inheritedRuleSetsExpanded }">
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<span class="aca-rule-list__item__header__title">
|
||||
{{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
|
||||
<mat-icon [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
|
||||
<mat-icon class="aca-rule-list__item__header__title__mat-icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
|
||||
info
|
||||
</mat-icon>
|
||||
</span>
|
||||
@@ -38,7 +38,7 @@
|
||||
*ngIf="mainRuleSetGroupingItems.length > 0 || isMainRuleSetLinked"
|
||||
class="aca-rule-list__item"
|
||||
data-automation-id="rule-list-item"
|
||||
[ngClass]="{ expanded: mainRuleSetExpanded }">
|
||||
[ngClass]="{ 'aca-expanded': mainRuleSetExpanded }">
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
|
||||
@@ -35,13 +35,13 @@
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.mat-icon {
|
||||
&__mat-icon {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
&.aca-expanded {
|
||||
.aca-rule-list__item__header {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.TITLE' | translate }}
|
||||
</div>
|
||||
<button mat-icon-button mat-dialog-close class="aca-rule-set-picker__header__close" tabindex="-1">
|
||||
<mat-icon>close</mat-icon>
|
||||
<mat-icon class="aca-rule-set-picker__header__close__icon">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
(siteChange)="setFolderLoading(true)">
|
||||
</adf-content-node-selector-panel>
|
||||
|
||||
<div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ justify: rulesLoading$ | async }">
|
||||
<div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ 'aca-justify': rulesLoading$ | async }">
|
||||
<ng-container *ngIf="rulesLoading$ | async; else rulesLoaded">
|
||||
<mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.aca-rule-set-picker-container {
|
||||
--rule-set-picker-padding: 8px 20px;
|
||||
|
||||
.mat-dialog-container {
|
||||
& > * {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
&__close {
|
||||
& mat-icon {
|
||||
&__icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -50,7 +50,7 @@
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.justify {
|
||||
&.aca-justify {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<ng-container *ngIf="nodeId">
|
||||
<adf-alfresco-viewer
|
||||
[ngClass]="{
|
||||
'right_side--hide': !showRightSide
|
||||
'aca-right_side--hide': !showRightSide
|
||||
}"
|
||||
[nodeId]="nodeId"
|
||||
[allowNavigate]="navigateMultiple"
|
||||
|
||||
@@ -18,10 +18,10 @@
|
||||
}
|
||||
|
||||
// todo: remove this when viewer supports extensions
|
||||
.adf-viewer-toolbar .mat-toolbar > button:last-child {
|
||||
.adf-viewer-toolbar > * > button:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-alfresco-viewer.right_side--hide .adf-viewer__sidebar__right {
|
||||
.adf-alfresco-viewer.aca-right_side--hide .adf-viewer__sidebar__right {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="acs-details-container">
|
||||
<div class="acs-details-title">
|
||||
<div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
|
||||
<span class="acs-details-breadcrumb-library"> {{ node.name }} </span>
|
||||
<div class="aca-details-container">
|
||||
<div class="aca-details-title">
|
||||
<div class="aca-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
|
||||
<span class="aca-details-breadcrumb-library"> {{ node.name }} </span>
|
||||
-
|
||||
<span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
|
||||
<span class="aca-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="aca-close-details-button"
|
||||
|
||||
@@ -18,7 +18,7 @@ app-details-manager {
|
||||
}
|
||||
}
|
||||
|
||||
.acs-details-container {
|
||||
.aca-details-container {
|
||||
background-color: var(--theme-card-background-color);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -31,27 +31,27 @@ app-details-manager {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mat-tab-labels {
|
||||
mat-tab-header {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.acs-details-title {
|
||||
.aca-details-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.acs-details-breadcrumb {
|
||||
.aca-details-breadcrumb {
|
||||
font-size: 18px;
|
||||
margin-left: 20px;
|
||||
|
||||
.acs-details-breadcrumb-library {
|
||||
&-library {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.acs-details-breadcrumb-item {
|
||||
&-item {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
aca-locked-by {
|
||||
.aca-locked-by {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
.locked_by--name {
|
||||
&--name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content" *ngIf="!(showLoader$ | async)">
|
||||
<div class="aca-main-content" *ngIf="!(showLoader$ | async)">
|
||||
<adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<mat-card *ngIf="node">
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" autocomplete="off">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<input
|
||||
matInput
|
||||
[cdkTrapFocusAutoCapture]="form.enabled"
|
||||
@@ -17,11 +17,11 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper">
|
||||
<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-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper">
|
||||
<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-option [value]="type.value" *ngFor="let type of libraryType">
|
||||
{{ type.label | translate }}
|
||||
@@ -29,7 +29,7 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper">
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
|
||||
|
||||
@@ -1,24 +1,5 @@
|
||||
app-library-metadata-form {
|
||||
.mat-form-field {
|
||||
.app-library-metadata-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-form-field-infix {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
|
||||
.mat-form-field-label-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.mat-form-field-label {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
(click)="searchSubmit(searchTerm)"
|
||||
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
|
||||
>
|
||||
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
||||
<mat-icon class="app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="app-input-form-field" [floatLabel]="'never'">
|
||||
<input
|
||||
@@ -18,6 +18,7 @@
|
||||
[(ngModel)]="searchTerm"
|
||||
(ngModelChange)="inputChange($event)"
|
||||
(keyup.enter)="searchSubmit($event)"
|
||||
class="app-input-form-field-input"
|
||||
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
@@ -5,7 +5,7 @@ $top-margin: 12px;
|
||||
margin: 14px 1px;
|
||||
float: left;
|
||||
|
||||
.mat-icon {
|
||||
mat-icon {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -24,10 +24,6 @@ $top-margin: 12px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
@@ -37,7 +33,7 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
// fixes pointer event on FF
|
||||
&.searchMenuTrigger .mat-form-field-label-wrapper {
|
||||
&.app-search-menu-trigger .mat-form-field-label-wrapper {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@@ -45,16 +41,16 @@ $top-margin: 12px;
|
||||
letter-spacing: -0.7px;
|
||||
width: calc(100% - 56px);
|
||||
|
||||
.mat-input-element {
|
||||
&-input {
|
||||
letter-spacing: -0.7px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-button.mat-icon-button {
|
||||
.app-search-button {
|
||||
top: -2px;
|
||||
left: -8px;
|
||||
|
||||
.mat-icon {
|
||||
&-icon {
|
||||
font-size: 24px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="app-search-container searchMenuTrigger"
|
||||
<div class="app-search-container app-search-menu-trigger"
|
||||
[matMenuTriggerFor]="searchOptionsMenu"
|
||||
(menuOpened)="onMenuOpened()"
|
||||
(menuClosed)="syncInputValues()"
|
||||
@@ -11,6 +11,7 @@
|
||||
<input
|
||||
matInput
|
||||
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
|
||||
class="app-input-form-field-input"
|
||||
[type]="'text'"
|
||||
[disabled]="true"
|
||||
[value]="searchedWord"
|
||||
@@ -21,8 +22,8 @@
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-icon" (click)="exitSearch()">
|
||||
<mat-icon>close</mat-icon>
|
||||
<button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-button" (click)="exitSearch()">
|
||||
<mat-icon class="app-close-icon">close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@@ -39,8 +40,9 @@
|
||||
</app-search-input-control>
|
||||
<mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
|
||||
|
||||
<div id="search-options">
|
||||
<div id="search-options" class="app-search-options">
|
||||
<mat-checkbox
|
||||
class="app-search-options-checkbox"
|
||||
*ngFor="let option of searchOptions"
|
||||
id="{{ option.id }}"
|
||||
[(ngModel)]="option.value"
|
||||
|
||||
@@ -10,10 +10,6 @@ $top-margin: 12px;
|
||||
max-width: $search-width;
|
||||
height: $search-height + $top-margin;
|
||||
|
||||
&.mat-menu-trigger {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-search-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -23,18 +19,16 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
.app-input-form-field {
|
||||
.app-close-icon {
|
||||
.app-suffix-search-icon-wrapper.app-close-button {
|
||||
height: 6px;
|
||||
|
||||
&.app-suffix-search-icon-wrapper {
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.app-close-icon {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-input-element {
|
||||
&-input {
|
||||
caret-color: var(--theme-text-color);
|
||||
|
||||
&:disabled {
|
||||
@@ -43,30 +37,19 @@ $top-margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-focused label.mat-form-field-label {
|
||||
display: none;
|
||||
&:focus-within {
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-options-menu {
|
||||
&.mat-menu-panel {
|
||||
background-color: var(--theme-dialog-background-color);
|
||||
width: $search-width;
|
||||
max-width: unset;
|
||||
border-radius: $search-border-radius;
|
||||
margin-top: $top-margin;
|
||||
}
|
||||
|
||||
.mat-menu-content:not(:empty) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
.mat-checkbox-frame {
|
||||
border-color: var(--theme-text-color);
|
||||
}
|
||||
background-color: var(--theme-dialog-background-color);
|
||||
width: $search-width;
|
||||
max-width: unset;
|
||||
border-radius: $search-border-radius;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.aca-search-input {
|
||||
@@ -77,20 +60,25 @@ mat-checkbox {
|
||||
height: $search-height;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 26px;
|
||||
|
||||
.app-search-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-control {
|
||||
margin-top: -$top-margin;
|
||||
}
|
||||
|
||||
#search-options {
|
||||
.app-search-options {
|
||||
color: var(--theme-text-color);
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
padding: 20px 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.7px;
|
||||
margin-bottom: -8px;
|
||||
|
||||
mat-checkbox {
|
||||
&-checkbox {
|
||||
padding: 3px 24px 3px 19px;
|
||||
|
||||
.mat-checkbox-inner-container {
|
||||
@@ -105,7 +93,7 @@ mat-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox-layout {
|
||||
.app-search-options-checkbox label {
|
||||
max-width: 155px;
|
||||
}
|
||||
}
|
||||
@@ -128,9 +116,7 @@ mat-checkbox {
|
||||
}
|
||||
|
||||
.app-search-options-menu {
|
||||
&.mat-menu-panel {
|
||||
width: $search-width-small;
|
||||
}
|
||||
width: $search-width-small;
|
||||
}
|
||||
|
||||
#search-options {
|
||||
@@ -144,7 +130,7 @@ mat-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox-layout {
|
||||
label {
|
||||
max-width: 105px;
|
||||
}
|
||||
}
|
||||
@@ -162,13 +148,10 @@ mat-checkbox {
|
||||
}
|
||||
|
||||
.app-search-options-menu {
|
||||
&.mat-menu-panel {
|
||||
width: $search-width-xsmall;
|
||||
margin-top: 9px;
|
||||
}
|
||||
width: $search-width-xsmall;
|
||||
}
|
||||
|
||||
#search-options .mat-checkbox-layout {
|
||||
#search-options label {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<div class="adf-search-results">
|
||||
<div class="adf-search-results__content">
|
||||
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
|
||||
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
|
||||
<div class="content__side--left">
|
||||
<div class="adf-search-results__content-header aca-content" *ngIf="data?.list.entries.length">
|
||||
<div class="aca-content__side--left">
|
||||
<div class="adf-search-results--info-text" *ngIf="totalResults !== 1">
|
||||
{{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_RESULTS' | translate: { number: totalResults } }}
|
||||
</div>
|
||||
|
||||
@@ -28,11 +28,7 @@ aca-search-results {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.text--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content {
|
||||
.aca-content {
|
||||
@include flex-row;
|
||||
|
||||
flex: unset;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="search-file-name">
|
||||
<span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="link">
|
||||
<span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="aca-link">
|
||||
{{ name$ | async }}
|
||||
</span>
|
||||
<span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold link">
|
||||
<span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold aca-link">
|
||||
{{ name$ | async }}
|
||||
</span>
|
||||
<span>{{ title$ | async }}</span>
|
||||
</div>
|
||||
<div class="result-location">
|
||||
<div class="aca-result-location">
|
||||
<aca-location-link [context]="context" [showLocation]="true"></aca-location-link>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.aca-search-results-row {
|
||||
.result-location {
|
||||
.aca-result-location {
|
||||
height: 15px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
.aca-link {
|
||||
text-decoration: none;
|
||||
color: var(--theme-text-bold-color);
|
||||
}
|
||||
@@ -14,13 +14,13 @@
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.aca-link:hover,
|
||||
.aca-location-link .adf-datatable-cell-value:hover {
|
||||
color: var(--theme-primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.adf-is-selected .link:not(:hover),
|
||||
.adf-is-selected .aca-link:not(:hover),
|
||||
.adf-is-selected .adf-datatable-cell-value:not(:hover) {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<div class="adf-search-results">
|
||||
<div class="adf-search-results__content">
|
||||
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar>
|
||||
|
||||
@@ -30,16 +30,9 @@ aca-search-results {
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
|
||||
.adf-search-filter-chip,
|
||||
.adf-search-filter-chip-tabbed {
|
||||
&[disabled] {
|
||||
&.mat-chip {
|
||||
background-color: var(--theme-disabled-chip-background-color);
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-chip {
|
||||
.aca-content__advanced-filters {
|
||||
.adf-search-filter-chip,
|
||||
.adf-search-filter-chip-tabbed {
|
||||
background-color: var(--theme-dropdown-color);
|
||||
color: var(--theme-selected-text-color);
|
||||
|
||||
@@ -48,6 +41,11 @@ aca-search-results {
|
||||
background-color: var(--theme-grey-background-hover);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: var(--theme-disabled-chip-background-color);
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<ng-container *ngIf="!item.children">
|
||||
<div class="item">
|
||||
<div class="aca-expansion-panel-item">
|
||||
<button
|
||||
acaActiveLink="action-button--active"
|
||||
acaActiveLink="aca-action-button--active"
|
||||
[action]="item"
|
||||
[attr.aria-label]="item.title | translate"
|
||||
[id]="item.id"
|
||||
[attr.data-automation-id]="item.id"
|
||||
[attr.title]="item.description | translate"
|
||||
mat-button
|
||||
class="action-button full-width"
|
||||
class="aca-action-button aca-full-width"
|
||||
>
|
||||
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
|
||||
<span class="action-button__label">{{ item.title | translate }}</span>
|
||||
@@ -18,41 +18,43 @@
|
||||
|
||||
<ng-container *ngIf="item.children && item.children.length">
|
||||
<mat-expansion-panel
|
||||
class="aca-expansion-panel"
|
||||
[expanded]="true"
|
||||
[acaExpansionPanel]="item"
|
||||
[@.disabled]="true"
|
||||
>
|
||||
<mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
|
||||
<mat-panel-title>
|
||||
<div class="item">
|
||||
<mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group" class="aca-expansion-panel-header">
|
||||
<mat-panel-title class="aca-expansion-panel-header-title">
|
||||
<div class="aca-expansion-panel-item">
|
||||
<span
|
||||
[attr.aria-label]="item.title | translate"
|
||||
[id]="item.id"
|
||||
[attr.title]="item.description | translate"
|
||||
[attr.data-automation-id]="item.id"
|
||||
class="action-button full-width"
|
||||
class="aca-action-button aca-full-width"
|
||||
>
|
||||
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
|
||||
<span class="action-button__label">{{ item.title | translate }}</span>
|
||||
<span class="aca-action-button__label">{{ item.title | translate }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div *ngFor="let child of item.children; trackBy: trackById" class="item">
|
||||
<button
|
||||
acaActiveLink="action-button--active"
|
||||
[action]="child"
|
||||
[attr.aria-label]="child.title | translate"
|
||||
[id]="child.id"
|
||||
[attr.data-automation-id]="child.id"
|
||||
[attr.title]="child.description | translate"
|
||||
mat-button
|
||||
class="action-button full-width"
|
||||
>
|
||||
<adf-icon *ngIf="child.icon" [value]="child.icon"></adf-icon>
|
||||
<span class="action-button__label">{{ child.title | translate }}</span>
|
||||
</button>
|
||||
<div class="aca-expansion-panel-body">
|
||||
<div *ngFor="let child of item.children; trackBy: trackById" class="aca-expansion-panel-item">
|
||||
<button
|
||||
acaActiveLink="aca-action-button--active"
|
||||
[action]="child"
|
||||
[attr.aria-label]="child.title | translate"
|
||||
[id]="child.id"
|
||||
[attr.data-automation-id]="child.id"
|
||||
[attr.title]="child.description | translate"
|
||||
mat-button
|
||||
class="aca-action-button aca-full-width"
|
||||
>
|
||||
<adf-icon *ngIf="child.icon" [value]="child.icon"></adf-icon>
|
||||
<span class="aca-action-button__label">{{ child.title | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</ng-container>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="sidenav-header">
|
||||
<div class="sidenav-header-title">
|
||||
<div class="sidenav-header-title-logo"
|
||||
<div class="aca-sidenav-header">
|
||||
<div class="aca-sidenav-header-title">
|
||||
<div class="aca-sidenav-header-title-logo"
|
||||
tabindex=0
|
||||
(click)="toggleNavBar.emit()"
|
||||
(keypress)="toggleNavBar.emit()">
|
||||
@@ -10,7 +10,7 @@
|
||||
alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}" />
|
||||
</div>
|
||||
|
||||
<div class="sidenav-header-title-text" [routerLink]="landingPage">
|
||||
<div class="aca-sidenav-header-title-text" [routerLink]="landingPage">
|
||||
{{ appName$ | async | translate }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="sidenav">
|
||||
<div class="aca-sidenav">
|
||||
<app-sidenav-header (toggleNavBar)="toggleClick()"></app-sidenav-header>
|
||||
|
||||
<div class="section-sub-actions">
|
||||
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="section">
|
||||
<div class="aca-sidenav__section">
|
||||
<div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
|
||||
<mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
|
||||
<ng-container *ngIf="!item.component">
|
||||
<app-expand-menu [item]="item"></app-expand-menu>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.sidenav {
|
||||
.aca-sidenav {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
@@ -38,14 +38,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.section-sub-actions {
|
||||
&__section {
|
||||
overflow-y: auto;
|
||||
|
||||
.mat-expansion-panel {
|
||||
.aca-expansion-panel {
|
||||
width: 100%;
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
@@ -56,80 +52,69 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&-header-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.mat-button {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
border: none;
|
||||
span::after {
|
||||
transform: rotate(226deg);
|
||||
}
|
||||
|
||||
.action-button__label {
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&-body {
|
||||
padding: 0 0 16px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
|
||||
.mat-button {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
|
||||
.mat-button-wrapper {
|
||||
display: flex;
|
||||
.aca-action-button__label {
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-indicator {
|
||||
.aca-expansion-panel-header:hover {
|
||||
background: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
&-item {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
&:hover .aca-action-button__label {
|
||||
color: var(--theme-selected-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-indicator::after {
|
||||
transform: rotate(226deg);
|
||||
&-body {
|
||||
margin: 0 -24px 16px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
|
||||
button {
|
||||
line-height: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header:hover {
|
||||
background: var(--adf-theme-background-hover-color);
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
&:hover .action-button__label {
|
||||
color: var(--theme-selected-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
.aca-action-button {
|
||||
color: var(--theme-action-button-text-color);
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
border-radius: 0;
|
||||
line-height: 32px;
|
||||
|
||||
&--active {
|
||||
color: var(--theme-selected-text-color);
|
||||
background: var(--theme-selected-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.full-width {
|
||||
.aca-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-button--active {
|
||||
color: var(--theme-selected-text-color);
|
||||
background: var(--theme-selected-background-color);
|
||||
&__actions:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div class="aca-page-layout-content">
|
||||
<div class="main-content">
|
||||
<div class="aca-main-content">
|
||||
<adf-document-list
|
||||
#documentList
|
||||
acaDocumentList
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<h2 mat-dialog-title [innerHTML]="title"></h2>
|
||||
<div mat-dialog-content>
|
||||
<h2 mat-dialog-title [innerHTML]="title" class="app-create-from-template-title"></h2>
|
||||
<div mat-dialog-content class="app-create-from-template-content">
|
||||
<form [formGroup]="form" novalidate>
|
||||
<mat-form-field class="app-create-from-template-field">
|
||||
<input
|
||||
@@ -41,12 +41,12 @@
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<div mat-dialog-actions class="app-create-from-template-footer">
|
||||
<button mat-button mat-dialog-close data-automation-id="create-from-template-dialog-cancel-button">
|
||||
{{ 'NODE_FROM_TEMPLATE.CANCEL' | translate }}
|
||||
</button>
|
||||
<button
|
||||
class="create"
|
||||
class="app-create-from-template-footer-create-button"
|
||||
[disabled]="form.invalid"
|
||||
mat-button
|
||||
(click)="onSubmit()"
|
||||
|
||||
@@ -4,54 +4,56 @@ app-create-from-template-dialog {
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
|
||||
.mat-dialog-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.app-create-from-template {
|
||||
&-title {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.app-create-from-template-field {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-dialog-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
padding: 8px 22px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-secondary-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.create[disabled] {
|
||||
opacity: 0.6;
|
||||
&-field {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.create:enabled {
|
||||
color: var(--theme-accent-color);
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
padding: 8px 22px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-secondary-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&-create-button[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&-create-button:enabled {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .mat-icon {
|
||||
[dir='rtl'] mat-icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
.adf-pagination__actualinfo-block {
|
||||
padding-right: 12px;
|
||||
|
||||
.mat-menu-trigger {
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
@import 'variables/variables';
|
||||
@include custom-theme($custom-theme);
|
||||
|
||||
.mat-toolbar {
|
||||
mat-toolbar {
|
||||
color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
|
||||
}
|
||||
|
||||
@@ -48,11 +48,6 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
}
|
||||
}
|
||||
|
||||
.mat-chip.mat-standard-chip {
|
||||
background-color: #efefef;
|
||||
color: var(--theme-contrast-gray);
|
||||
}
|
||||
|
||||
.adf-property-field {
|
||||
.adf-textitem-edit-icon.mat-icon {
|
||||
color: var(--theme-contrast-gray);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<ng-container *ngIf="nodeId">
|
||||
<adf-alfresco-viewer
|
||||
[ngClass]="{
|
||||
'right_side--hide': !showRightSide
|
||||
'aca-right_side--hide': !showRightSide
|
||||
}"
|
||||
[maxRetries]="'viewer.maxRetries' | adfAppConfig"
|
||||
[nodeId]="nodeId"
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
}
|
||||
|
||||
// todo: remove this when viewer supports extensions
|
||||
.adf-viewer-toolbar .mat-toolbar > button:last-child {
|
||||
.adf-viewer-toolbar > * > button:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-alfresco-viewer.right_side--hide .adf-viewer__sidebar__right {
|
||||
.adf-alfresco-viewer.aca-right_side--hide .adf-viewer__sidebar__right {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user