mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACS-6693] Migration to NG15 (#3959)
* [ACS-6693] Angular 15 migration initial point
* [ACS-6693] Angular 15 - update ADF dependencies from the ng15-start branch (#3712)
* [ACS-6693] Angular 15 - adding mat core (#3715)
* Stylelint fix
* Migration - added stylePrepocessor for material selectors
* Skip unit tests from branch release until errors are fixed
* [ACS-7285] - [ACA] Angular 15 - Left sidebar + table (#3719)
* [ACS-7286] Fix topbar user info issues (#3720)
* [ACS-6693] Bump peerDependencies in ACA libs
* [ACS-7330] edit rules dialog fixes (#3723)
* [ACS-6693] Fix peer dependencies in ACA packages
* [ACS-7328] Fix searchbar display (#3729)
* [ACS-7631] Fix broken filters (#3735)
* [ACS-7331] - Angular 15 - Edit aspects modal [ACA]
* [ACS-7449] Fix broken filter labels styling (#3745)
* [ACS-7351] ng15 Manage rules fixes (#3751)
* [ACS-7351] ng15 manage rules fixes
* [ACS-7351] cr fix
* [ACS-7351] cr fix
* [ACS-7370] - [ACA] Leave library dialog misses some padding (#3749)
* [ACS-6693] Bump ADF version
* [ACS-7372] - user profile page issues (#3757)
* [ACS-7372] - [ACA] User profile page issues
* [ACS-7415] - Move file dialog (#3755)
* [ACS-7452] - Small screen notification banner [ACS-7418] About page (#3760)
* [ACS-7452] - Small screen notification banner
* [ACS-7452] - Small screen notification banner [ACS-7418] About page
* [ACS-7511] Subfont for dialogs, make darker (#3765)
* [ACS-7448] Fix wrong notifications colors (#3761)
* [ACS-7448] Fix notifications colors, move them from adf to aca (#3771)
* [ACS-7375] - Share link dialog issues (#3774)
* [ACS-7517] - Notifications box (#3775)
* [ACS-7373] ng15 permission tab fixes (#3762)
* [ACS-7368] Fix unit tests for aca-content (#3779)
* [ACS-7410] - Locked files overflow issues (#3780)
* [ACS-7528] - Notification and user icons are a bit different (#3782)
* [ACS-7529] - Columns visibility dropdown has broken styles (#3783)
* [ACS-7537] - Share dialog (#3789)
* Use latest ADF alpha
* Post rebase unit test fix
* Disable stylelint
* Calendar button fix
* [ACS-7369] ng15 migration - fix e2es (#3796)
* [ACS-7369] e2e fixes
* [ACS-7369] cr fix
* [ACS-7331] - Angular 15 - View details sidebar (#3731)
* [ACS-7542] - Upload new version dialog (#3800)
* [ACS-7575] create library dialog e2e fix (#3803)
* [ACS-7534] folder dialog e2e fixes (#3804)
* [ACS-7574] Rules dialog edit (#3801)
* [ACS-7571] Comments (#3810)
* [ACS-7555] Added blue outline to focused checkboxes (#3813)
* [ACS-7582] File upload dialog, fix button weight label globally (#3814)
* [ACS-7531] - Search page (#3816)
* [ACS-7559] Conext menus icons (#3818)
* [ACS-6693] Bump ADF
* Temporary lint disable
* [ACS-7572] link rules dialog (#3817)
* [ACS-7533] - Advanced search chips dropdowns (#3821)
* [ACS-7560] Corrected background color for info snackbar (#3824)
* [ACS-7558] - Toolbar and buttons (#3833)
* [ACS-7573] folder rules fixes (#3836)
* [ACS-7573] folder rules fixes
* [ACS-7573] cr fix
* [ACS-7561] - Permissions page (#3840)
* [ACS-7768] unify inputs and selects across the app (#3845)
* 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
* Revert "[ACS-7768] unify inputs and selects across the app (#3845)" (#3850)
This reverts commit 6a5ef73283.
* [ACS-8043] fix js api dependencies (#3855)
* [ACS-8020] Fixed inputs for create from template dialog (#3857)
* [ACS-8027] Inputs for create rules (#3860)
* [ACS-8052] inputs for general info for libraries (#3863)
* [ACS-8052] Inputs for general info for libraries
* Fix after CR
* [ACS-8059] Inputs for view rules (#3865)
* [ACS-8026] Fixed Task form rendering (#3864)
* Updating to the latest package of 6.10 from ADF
* Updating to the latest ADF/JS-API - updating dependency rule
* Regenerated package lock
* [ACS-8082] fix search e2e (#3876)
* Using latest ADF with BC of ConfirmDialogComponent
* [ACS-8099] [ACA] Testing Angular 15 - Accessibility for search text area (#3883)
* [ACS-8100] [ACA] Testing Angular 15 - Accessibility for search facet and filter (#3887)
* [ACS-8158] Resolved issue where long tag names were not getting word wrapped in ACA. Fixed alignment issue with tag chip cross button (#3890)
* [ACS-8101] [ACA] Testing Angular 15 - Manage rule popup visual changes (#3891)
* [ACS-8191] Updated codebase to use variables from mat-selectors.scss file (#3889)
* [ACS-8191] Updated ACA codebase to use selectors from mat-selectors.scss file instead of hardcoded selectors
* [ACS-8191] Resolved configuration issue where running unit test on aca-shared failed due to not finding adf-core styles
* Update ADF dependencies (#3897)
* Upgrading ADF packages
* Use latest ADF
* Updated packages version
* Updated packages version
* Updated packages version
* Updated packages version
* Updated packages version
* Updated packages version
* Updated packages version
* [ACS-8253] viewer file name change position on navigation (#3914)
* Updated ADF version
* Use latest ADF
* Package lock fix
* Build fix
* Restore release branch build and unit tests
* E2Es fix
* Fix SonarCloud issues
* Stylelint fix
* Stylelint fix
* [ACS-8442] Remove additional checkbox label
* First batch of E2E fixes
* Bump ADF
* Second round of E2E locators fixes
* Locator fix
* [ACS-8443] Fix incorrect focus style for checkboxes
* E2Es locators fixes
* E2E locator fixes
* [ACS-6693] locator fix upload new version title
* E2E locator fix
* E2E locator fix
* [ACS-6693] locator fix upload new version file
---------
Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
Co-authored-by: Vito Albano <vito.albano@hyland.com>
Co-authored-by: tomson <nastalytomasz@gmail.com>
Co-authored-by: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Co-authored-by: Jacek Pluta <jacek.pluta@hyland.com>
Co-authored-by: dominikiwanekhyland <141320833+dominikiwanekhyland@users.noreply.github.com>
Co-authored-by: tomson <tomasz.nastaly@hyland.com>
Co-authored-by: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Co-authored-by: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com>
Co-authored-by: VitoAlbano <vito.albano.123@gmail.com>
Co-authored-by: Akash Rathod <41251473+akashrathod28@users.noreply.github.com>
Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>
This commit is contained in:
MichalKinas
GitHub
@@ -1,11 +1,13 @@
|
||||
<div mat-menu-item class="aca-user-info" [routerLink]="['/profile']" title="{{ 'APP.TOOLTIPS.MY_PROFILE' | translate }}">
|
||||
<ng-container *ngIf="user$ | async as user">
|
||||
<button class="aca-user-info-button">
|
||||
<div>{{ user.initials || 'U' }}</div>
|
||||
</button>
|
||||
<div class="aca-user-info-details">
|
||||
<div>{{ user.userName }}</div>
|
||||
<div>{{ user.email }}</div>
|
||||
<div class="aca-user-info-content">
|
||||
<button class="aca-user-info-button">
|
||||
<div>{{ user.initials || 'U' }}</div>
|
||||
</button>
|
||||
<div class="aca-user-info-details">
|
||||
<div>{{ user.userName }}</div>
|
||||
<div>{{ user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
height: 66px;
|
||||
align-items: center;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-button {
|
||||
border-radius: 90%;
|
||||
height: 32px;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<ng-container *ngSwitchCase="'menu'">
|
||||
<button mat-menu-item [id]="actionRef.id" [matMenuTriggerFor]="childMenu">
|
||||
<adf-icon [value]="actionRef.icon"></adf-icon>
|
||||
<span>{{ actionRef.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
|
||||
</button>
|
||||
|
||||
<mat-menu #childMenu="matMenu">
|
||||
@@ -24,7 +24,7 @@
|
||||
<ng-container *ngSwitchDefault>
|
||||
<button mat-menu-item color="primary" [id]="actionRef.id" (click)="runAction()">
|
||||
<adf-icon [value]="actionRef.icon"></adf-icon>
|
||||
<span>{{ actionRef.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { ContextMenuItemComponent } from './context-menu-item.component';
|
||||
import { AppExtensionService } from '@alfresco/aca-shared';
|
||||
@@ -62,7 +62,7 @@ describe('ContextMenuComponent', () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const buttonElement = fixture.nativeElement.querySelector('button');
|
||||
expect(buttonElement.querySelector('span').innerText.trim()).toBe(contextItem.title);
|
||||
expect(buttonElement.querySelector('[data-automation-id="action-button-label"]').innerText.trim()).toBe(contextItem.title);
|
||||
});
|
||||
|
||||
it('should not run action when entry has no click attribute defined', () => {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<ng-container *ngSwitchDefault>
|
||||
<button mat-menu-item [id]="entry.id" (click)="runAction(entry)">
|
||||
<adf-icon [value]="entry.icon"></adf-icon>
|
||||
<span>{{ entry.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<ng-container *ngSwitchCase="'menu'">
|
||||
<button mat-menu-item [id]="entry.id" [matMenuTriggerFor]="childMenu">
|
||||
<adf-icon [value]="entry.icon"></adf-icon>
|
||||
<span>{{ entry.title | translate }}</span>
|
||||
<span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
|
||||
</button>
|
||||
|
||||
<mat-menu #childMenu="matMenu">
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AppTestingModule } from '../../testing/app-testing.module';
|
||||
import { ContextMenuComponent } from './context-menu.component';
|
||||
import { ContextMenuOverlayRef } from './context-menu-overlay';
|
||||
@@ -89,9 +89,10 @@ describe('ContextMenuComponent', () => {
|
||||
await fixture.whenStable();
|
||||
|
||||
const contextMenuElements = document.body.querySelector('.aca-context-menu')?.querySelectorAll('button');
|
||||
const actionButtonLabel: HTMLElement = contextMenuElements?.[0].querySelector('[data-automation-id="action-button-label"]');
|
||||
|
||||
expect(contextMenuElements?.length).toBe(1);
|
||||
expect(contextMenuElements?.[0].querySelector('span')?.innerText).toBe(contextItem.title);
|
||||
expect(actionButtonLabel.innerText).toBe(contextItem.title);
|
||||
});
|
||||
|
||||
it('should run action with provided action id and correct payload', () => {
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-tab-group [selectedIndex]="activeTab" class="aca-details-tabs" animationDuration="0">
|
||||
<mat-tab-group [selectedIndex]="activeTab" class="aca-details-tabs" animationDuration="0" mat-stretch-tabs="false" mat-align-tabs="start">
|
||||
<mat-tab label="{{ 'APP.INFO_DRAWER.TABS.PROPERTIES' | translate }}">
|
||||
<ng-template matTabContent>
|
||||
<app-metadata-tab *ngIf="node && !isLoading; else loading" [node]="node"></app-metadata-tab>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
.adf-comments-tab-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.adf-comments-form-field {
|
||||
div:first-child {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -32,8 +32,12 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
|
||||
standalone: true,
|
||||
imports: [MatCardModule, NodeCommentsModule],
|
||||
selector: 'app-comments-tab',
|
||||
template: `<mat-card><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
template: `<mat-card class="adf-comments-tab-container" appearance="raised"
|
||||
><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments
|
||||
></mat-card>`,
|
||||
styles: ['app-comments-tab mat-card { padding: 16px }'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styleUrls: ['./comments-tab.component.scss']
|
||||
})
|
||||
export class CommentsTabComponent implements OnInit {
|
||||
@Input()
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<mat-card *ngIf="node">
|
||||
<mat-card appearance="raised" *ngIf="node">
|
||||
<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 class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[cdkTrapFocusAutoCapture]="form.enabled"
|
||||
@@ -18,18 +19,21 @@
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
|
||||
<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" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
|
||||
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
|
||||
<mat-option [value]="type.value" *ngFor="let type of libraryType">
|
||||
<mat-option [value]="type.value" [attr.data-automation-id]="'library-visibility-option-' + type.value" *ngFor="let type of libraryType">
|
||||
{{ type.label | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
|
||||
<mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
|
||||
|
||||
@@ -1,5 +1,51 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
app-library-metadata-form {
|
||||
.app-library-metadata-form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 1px solid;
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-form-field-disabled {
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 1px dotted var(--theme-text-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-flex {
|
||||
border-bottom: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-text-field--disabled.mdc-text-field--filled {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mat-mdc-card-content:first-child {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.app-library-metadata-form-field-label {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
.mdc-text-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdc-line-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,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]="'never'">
|
||||
<mat-form-field class="app-input-form-field" floatLabel="auto">
|
||||
<input
|
||||
matInput
|
||||
#searchInput
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
$top-margin: 12px;
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
.app-suffix-search-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 6px;
|
||||
margin: 14px 1px;
|
||||
float: left;
|
||||
@@ -17,17 +19,11 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
.app-search-container {
|
||||
margin-top: -$top-margin;
|
||||
padding-top: 2px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
font-size: 16px;
|
||||
padding-left: 15px;
|
||||
padding-left: 19px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 12px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-input-form-field-input + span {
|
||||
cursor: text;
|
||||
@@ -36,16 +32,44 @@ $top-margin: 12px;
|
||||
|
||||
.app-input-form-field {
|
||||
letter-spacing: -0.7px;
|
||||
font-size: 16px;
|
||||
width: calc(100% - 56px);
|
||||
|
||||
&-input {
|
||||
letter-spacing: -0.7px;
|
||||
}
|
||||
|
||||
#{$mat-line-ripple} {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-icon-suffix} {
|
||||
position: relative;
|
||||
right: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-flex} {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#{$mat-form-field-wrapper} {
|
||||
height: 44px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.app-input-form-field-readonly {
|
||||
#{$mat-form-field-wrapper},
|
||||
#{$mat-form-field-flex} {
|
||||
background-color: var(--theme-search-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-button {
|
||||
top: -2px;
|
||||
left: -8px;
|
||||
left: -12px;
|
||||
|
||||
&-icon {
|
||||
font-size: 24px;
|
||||
|
||||
@@ -7,18 +7,18 @@
|
||||
<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" [floatLabel]="'never'">
|
||||
<mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
|
||||
<input
|
||||
matInput
|
||||
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
|
||||
class="app-input-form-field-input"
|
||||
[type]="'text'"
|
||||
[disabled]="true"
|
||||
[readonly]="true"
|
||||
[value]="searchedWord"
|
||||
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
|
||||
/>
|
||||
|
||||
<div matSuffix class="app-suffix-search-icon-wrapper">
|
||||
<div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
$search-width: 594px;
|
||||
$search-height: 32px;
|
||||
$search-background: var(--theme-search-background-color);
|
||||
@@ -10,7 +12,7 @@ $top-margin: 12px;
|
||||
max-width: $search-width;
|
||||
height: $search-height + $top-margin;
|
||||
|
||||
.app-search-button {
|
||||
.app-search-button:is(button) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 0;
|
||||
@@ -19,6 +21,10 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
.app-input-form-field {
|
||||
.app-suffix-search-icon-wrapper.app-icon-arrow {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.app-suffix-search-icon-wrapper.app-close-button {
|
||||
height: 6px;
|
||||
|
||||
@@ -30,10 +36,6 @@ $top-margin: 12px;
|
||||
|
||||
&-input {
|
||||
caret-color: var(--theme-text-color);
|
||||
|
||||
&:disabled {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,12 +46,19 @@ $top-margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-options-menu {
|
||||
.app-search-options-menu#{$mat-menu-panel} {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
margin-top: 2px;
|
||||
background-color: var(--theme-dialog-background-color);
|
||||
width: $search-width;
|
||||
max-width: unset;
|
||||
border-radius: $search-border-radius;
|
||||
margin-top: 3px;
|
||||
|
||||
#{$mdc-list} {
|
||||
padding-top: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.aca-search-input {
|
||||
@@ -62,7 +71,7 @@ $top-margin: 12px;
|
||||
padding-bottom: 26px;
|
||||
|
||||
.app-search-container {
|
||||
margin: 0;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,23 +82,32 @@ $top-margin: 12px;
|
||||
.app-search-options {
|
||||
color: var(--theme-text-color);
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
padding: 20px 0;
|
||||
padding: 20px 10px;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.7px;
|
||||
margin-bottom: -8px;
|
||||
|
||||
#{$mat-checkbox} {
|
||||
#{$mdc-form-field} {
|
||||
#{$mat-checkbox-box} {
|
||||
#{$mat-checkbox-background} {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-options-checkbox label {
|
||||
max-width: 155px;
|
||||
font-size: 16px;
|
||||
padding-left: 6px;
|
||||
padding-top: 2px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
&-checkbox {
|
||||
padding: 3px 24px 3px 19px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.mat-checkbox-inner-container {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
padding: 3px 36px 3px 20px;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
label {
|
||||
|
||||
@@ -30,10 +30,26 @@ aca-search-results {
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
|
||||
.aca-content__advanced-filters {
|
||||
/* stylelint-disable-next-line */
|
||||
.mat-mdc-chip-action {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.mdc-evolution-chip__text-label {
|
||||
padding-top: 4px;
|
||||
color: var(--theme-selected-text-color);
|
||||
}
|
||||
|
||||
.adf-search-filter-chip,
|
||||
.adf-search-filter-chip-tabbed {
|
||||
background-color: var(--theme-dropdown-color);
|
||||
color: var(--theme-selected-text-color);
|
||||
height: 32px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -45,10 +61,10 @@ aca-search-results {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
|
||||
.adf-search-filter-chip-icon {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
.adf-search-filter-chip-icon {
|
||||
color: var(--theme-search-chip-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-filter-placeholder {
|
||||
color: var(--theme-selected-text-color);
|
||||
@@ -132,6 +148,8 @@ aca-search-results {
|
||||
}
|
||||
|
||||
&__reset-action {
|
||||
margin-top: 5px;
|
||||
margin-right: 2px;
|
||||
line-height: 33px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<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">
|
||||
<mat-list-item class="aca-sidenav__section__actions__item" *ngFor="let item of group.items; trackBy: trackByLinkId">
|
||||
<ng-container *ngIf="!item.component">
|
||||
<app-expand-menu [item]="item"></app-expand-menu>
|
||||
</ng-container>
|
||||
|
||||
@@ -96,11 +96,13 @@
|
||||
}
|
||||
|
||||
.aca-action-button {
|
||||
cursor: pointer;
|
||||
color: var(--theme-action-button-text-color);
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
border-radius: 0;
|
||||
line-height: 32px;
|
||||
justify-content: start;
|
||||
|
||||
&--active {
|
||||
color: var(--theme-sidenav-active-text-color);
|
||||
@@ -113,8 +115,18 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__actions:last-child {
|
||||
border-bottom: 0;
|
||||
&__actions {
|
||||
&__item:has(span) {
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
.aca-user-menu-button {
|
||||
border-radius: 90%;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
min-width: 32px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: var(--theme-about-panel-border-color);
|
||||
color: var(--theme-sidenav-user-menu-color);
|
||||
border: none;
|
||||
.aca-user-menu {
|
||||
.aca-user-menu-button {
|
||||
border-radius: 90%;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
padding: 0;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: var(--theme-about-panel-border-color);
|
||||
color: var(--theme-sidenav-user-menu-color);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
|
||||
import { Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ContentActionRef } from '@alfresco/adf-extensions';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
@@ -38,7 +38,8 @@ import { Store } from '@ngrx/store';
|
||||
selector: 'aca-user-menu',
|
||||
templateUrl: './user-menu.component.html',
|
||||
styleUrls: ['./user-menu.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'aca-user-menu' }
|
||||
})
|
||||
export class UserMenuComponent implements OnInit {
|
||||
private store = inject<Store<AppStore>>(Store<AppStore>);
|
||||
|
||||
@@ -73,6 +73,30 @@ app-view-profile {
|
||||
.app-general-edit-btn {
|
||||
width: 60%;
|
||||
text-align: end;
|
||||
|
||||
.app-general-edit {
|
||||
background: var(--theme-grey-text-background-color);
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.app-general-cancel-btn {
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: var(--theme-grey-text-background-color);
|
||||
padding-top: 0.25px;
|
||||
}
|
||||
|
||||
.app-general-save-btn {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
color: white;
|
||||
background-color: var(--theme-blue-button-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.app-divider {
|
||||
@@ -89,33 +113,10 @@ app-view-profile {
|
||||
box-shadow: 0 0 2px var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-general-edit {
|
||||
background: var(--theme-grey-text-background-color);
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.app-general-edit:hover {
|
||||
background: var(--theme-grey-hover-background-color);
|
||||
}
|
||||
|
||||
.app-general-cancel-btn {
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: var(--theme-grey-text-background-color);
|
||||
padding-top: 0.25px;
|
||||
}
|
||||
|
||||
.app-general-save-btn {
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
color: white;
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-general-dropdown-divider {
|
||||
border-top-color: var(--theme-grey-divider-color);
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
@@ -27,10 +27,10 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="app-create-from-template-field">
|
||||
<mat-form-field class="app-create-from-template-field app-create-from-template-field-description">
|
||||
<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>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
|
||||
app-create-from-template-dialog {
|
||||
overflow: visible;
|
||||
display: block;
|
||||
@@ -22,14 +24,48 @@ app-create-from-template-dialog {
|
||||
&-field {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 20px;
|
||||
&:first-of-type {
|
||||
margin-bottom: 9.5px;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin-bottom: 6.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin: 0 2px;
|
||||
overflow: hidden;
|
||||
|
||||
.app-create-from-template-field {
|
||||
.mdc-floating-label {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
&.mat-form-field-hide-placeholder {
|
||||
.mdc-floating-label {
|
||||
padding-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&.app-create-from-template-field-description {
|
||||
&.mat-form-field-hide-placeholder {
|
||||
.mdc-floating-label {
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-bottom: 3.5px;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error-wrapper {
|
||||
margin-left: -2px;
|
||||
font-size: 10.5px;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
|
||||
@@ -45,7 +45,6 @@ import {
|
||||
ViewNodeVersionAction
|
||||
} from '@alfresco/aca-shared/store';
|
||||
import {
|
||||
ConfirmDialogComponent,
|
||||
FolderDialogComponent,
|
||||
LibraryDialogComponent,
|
||||
NewVersionUploaderData,
|
||||
@@ -56,7 +55,7 @@ import {
|
||||
NodesApiService,
|
||||
ShareDialogComponent
|
||||
} from '@alfresco/adf-content-services';
|
||||
import { NotificationService, TranslationService } from '@alfresco/adf-core';
|
||||
import { NotificationService, TranslationService, ConfirmDialogComponent } from '@alfresco/adf-core';
|
||||
import { DeletedNodesPaging, Node, NodeEntry, PathInfo, SiteBodyCreate, SiteEntry } from '@alfresco/js-api';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
||||
|
||||
@@ -11,24 +11,19 @@ $mat-accent-palette: mat.define-palette($aca-accent-green, A200);
|
||||
$mat-warn-palette: mat.define-palette($aca-warn, A100);
|
||||
$app-typography: mat.define-typography-config(
|
||||
$font-family: 'Open Sans',
|
||||
$display-4: mat.define-typography-level(112px, 112px, 300),
|
||||
$display-3: mat.define-typography-level(56px, 56px, 400),
|
||||
$display-2: mat.define-typography-level(45px, 48px, 400),
|
||||
$display-1: mat.define-typography-level(34px, 40px, 400),
|
||||
$headline: mat.define-typography-level(24px, 32px, 400),
|
||||
$title: mat.define-typography-level(20px, 32px, 500),
|
||||
$subheading-2: mat.define-typography-level(16px, 28px, 400),
|
||||
$subheading-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$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, 400),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-1: 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.
|
||||
$input: mat.define-typography-level(inherit, 1.25, 400)
|
||||
$button: mat.define-typography-level(14px, 14px, 500)
|
||||
);
|
||||
|
||||
@include mat.core($app-typography);
|
||||
|
||||
$custom-theme: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
|
||||
@@ -1,17 +1,24 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
|
||||
@mixin adf-about-theme($theme) {
|
||||
adf-about {
|
||||
/* custom ADF About Component Theme */
|
||||
|
||||
#{$mat-data-table-header-cell} {
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
background-color: var(--theme-about-panel-background-color);
|
||||
overflow: auto;
|
||||
|
||||
.mat-accordion {
|
||||
#{$mat-accordion} {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
&.adf-about-panel {
|
||||
.mat-expansion-panel {
|
||||
#{$mat-expansion-panel} {
|
||||
box-shadow: none;
|
||||
border-radius: 12px;
|
||||
margin: 24px;
|
||||
@@ -21,7 +28,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-expansion-panel-header {
|
||||
#{$mat-expansion-panel-header} {
|
||||
height: 80px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@@ -1,52 +1,76 @@
|
||||
@import '../colors';
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@mixin ay11-theme() {
|
||||
.mat-icon-button,
|
||||
.mat-button,
|
||||
.mat-checkbox,
|
||||
.mat-raised-button {
|
||||
.mat-mdc-icon-button,
|
||||
.mat-mdc-button,
|
||||
.mat-mdc-checkbox,
|
||||
.mat-mdc-raised-button {
|
||||
&:focus-visible {
|
||||
@include rounded-outline;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
.mat-ripple,
|
||||
.mdc-icon-button__ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// TODO check if still applies
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-focus-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-checkbox-ripple {
|
||||
.mdc-checkbox__native-control:focus-visible {
|
||||
& ~ .mat-mdc-checkbox-ripple {
|
||||
@include rounded-outline;
|
||||
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
left: calc(50% - 11px);
|
||||
top: calc(50% - 11px);
|
||||
top: calc(50% - 10px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
& ~ .mdc-checkbox__background {
|
||||
opacity: 0.57;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-checkbox__ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mdc-menu-surface.mat-mdc-autocomplete-panel:is(div),
|
||||
.mdc-menu-surface.mat-mdc-select-panel:is(div) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
|
||||
fill: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-list-base .mat-list-option {
|
||||
.mat-list-item-content {
|
||||
.mat-mdc-list-base .mat-mdc-list-option {
|
||||
.mdc-list-item__content {
|
||||
@include rounded-border(transparent);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: white;
|
||||
|
||||
.mat-list-item-content {
|
||||
.mdc-list-item__content {
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-user-button.mat-button,
|
||||
.adf-search-user-button.mat-mdc-button,
|
||||
.app-search-button {
|
||||
line-height: 36px;
|
||||
|
||||
@@ -59,9 +83,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-menu-content {
|
||||
.mat-menu-item {
|
||||
.mat-menu-ripple {
|
||||
.mat-mdc-menu-content {
|
||||
.mat-mdc-menu-item {
|
||||
.mat-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -83,56 +107,59 @@
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mat-option {
|
||||
.mat-mdc-option {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-option-ripple {
|
||||
.mat-mdc-option-ripple {
|
||||
@include rounded-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-slide-toggle {
|
||||
.mat-slide-toggle-thumb {
|
||||
.mat-mdc-slide-toggle .mdc-form-field {
|
||||
.mdc-switch .mdc-switch__handle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
transform: translate(20%, 50%);
|
||||
background-color: #484a4d;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-bar {
|
||||
.mdc-switch .mdc-switch__track {
|
||||
border-radius: 15px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb-container {
|
||||
top: -5px;
|
||||
.mdc-switch__handle-track {
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.mat-slide-toggle-ripple {
|
||||
.mdc-switch__ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-slide-toggle-bar {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-primary.mat-checked:not(.mat-disabled) {
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-stroked-button,
|
||||
.mat-flat-button {
|
||||
.mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-form-field .mdc-switch {
|
||||
.mdc-switch__track::after {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mdc-switch__shadow {
|
||||
background-color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-tab:focus {
|
||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||
background: map-get($aca-primary-blue, 50);
|
||||
}
|
||||
|
||||
.mat-mdc-slide-toggle.cdk-keyboard-focused .mdc-form-field .mdc-switch .mdc-switch__track {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-mdc-outlined-button,
|
||||
.mat-mdc-unelevated-button {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-ripple.mat-ripple {
|
||||
.mat-mdc-button-ripple.mat-ripple {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
inset: -4px;
|
||||
}
|
||||
@@ -160,7 +187,7 @@
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
|
||||
.mat-button-base.mat-button {
|
||||
.mat-mdc-button-base.mat-mdc-button {
|
||||
outline: none;
|
||||
|
||||
@include rounded-border(transparent);
|
||||
@@ -182,22 +209,13 @@
|
||||
.adf-error-snackbar {
|
||||
background-color: #ba1b1b;
|
||||
|
||||
.mat-simple-snackbar,
|
||||
.mat-simple-snackbar-action {
|
||||
.mat-mdc-simple-snack-bar,
|
||||
.mat-mdc-snack-bar-action {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-info-snackbar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
|
||||
.mat-simple-snackbar,
|
||||
.mat-simple-snackbar-action {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-button-base {
|
||||
.mat-mdc-button-base {
|
||||
&.adf-filter-button {
|
||||
margin-left: -2px;
|
||||
}
|
||||
@@ -207,7 +225,7 @@
|
||||
&__perpage-block,
|
||||
&__actualinfo-block {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.mat-icon-button {
|
||||
.mat-mdc-icon-button {
|
||||
left: 3px;
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
@@ -1,33 +1,178 @@
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
@use '@angular/material' as mat;
|
||||
@import '@alfresco/adf-core/theming';
|
||||
@import '@alfresco/adf-core/lib/styles/mat-selectors';
|
||||
@import 'custom-theme';
|
||||
@import 'variables/variables';
|
||||
@include custom-theme($custom-theme);
|
||||
@include mat.core;
|
||||
|
||||
mat-toolbar {
|
||||
color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.adf-name-location-cell-location.adf-datatable-cell-value {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
.mat-tab-label {
|
||||
&.mat-tab-label-active {
|
||||
color: #212121;
|
||||
#{$mat-text-field-filled}:not(#{$mat-text-field-disabled}) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#{$mat-button} > #{$mat-icon} {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#{$mat-button} {
|
||||
#{$mat-button-label} {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
&#{$mat-primary} {
|
||||
#{$mat-button-label} {
|
||||
-webkit-font-smoothing: initial;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-button}:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#{$mat-form-field-error-wrapper}:is(div) {
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
|
||||
#{$mat-form-field-error} {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-checkbox} {
|
||||
#{$mat-checkbox-box}:has(div) {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
#{$mdc-form-field} {
|
||||
height: auto;
|
||||
|
||||
#{$mat-checkbox-box} {
|
||||
padding: 0;
|
||||
margin-right: 2px;
|
||||
|
||||
input {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#{$mat-checkbox-background} {
|
||||
top: 1px;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-checkbox-touch-target} {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-switch}:is(button)#{$mat-switch-selected}#{$mat-switch-checked} #{$mat-switch-handle-track} #{$mat-switch-handle}::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
mat-slide-toggle {
|
||||
#{$mat-switch-icons} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled #{$mat-switch-track}::before,
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled:active #{$mat-switch-track}::before,
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled:focus:not(:active) #{$mat-switch-track}::before,
|
||||
#{$mat-switch-unselected}#{$mat-switch}:enabled:hover:not(:focus:active) #{$mat-switch-track}::before {
|
||||
background: var(--adf-theme-foreground-disabled-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-list-item-primary-text} {
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
#{$mat-chip}#{$mat-evolution-chip}#{$mat-standard-chip} {
|
||||
height: auto;
|
||||
|
||||
#{$mat-evolution-chip-text-label} {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#{$mat-evolution-chip-action}#{$mat-chip-action} {
|
||||
#{$mat-evolution-chip-graphic}#{$mat-chip-graphic} {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mdc-dialog} {
|
||||
#{$mat-dialog-title} {
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-dialog-actions} {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#{$mat-slide-toggle} #{$mdc-form-field} {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
#{$mat-data-table-row}:last-child #{$mat-data-table-cell} {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#{$mat-dialog-content} {
|
||||
padding: 16px 0;
|
||||
color: var(--adf-theme-foreground-text-color-087);
|
||||
|
||||
--mdc-dialog-supporting-text-color: var(--theme-primary-text);
|
||||
}
|
||||
|
||||
#{$mat-dialog-surface} {
|
||||
padding: 24px 24px 8px;
|
||||
|
||||
#{$mat-button} {
|
||||
width: auto;
|
||||
|
||||
#{$mat-button-label} {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-label-wrapper .mat-form-field-label,
|
||||
.mat-tab-list .mat-tab-labels .mat-tab-label,
|
||||
.mat-checkbox-label,
|
||||
mat-toolbar.mat-toolbar.mat-toolbar-multiple-row,
|
||||
mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
#{$mat-floating-label},
|
||||
#{$mat-tab-list} #{$mat-tab-labels} #{$mat-tab-label},
|
||||
#{$mat-checkbox} label,
|
||||
mat-toolbar#{$mat-toolbar}#{$mat-toolbar-multiple-row},
|
||||
mat-toolbar#{$mat-toolbar}#{$mat-toolbar-single-row} {
|
||||
color: var(--theme-secondary-text);
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -50,7 +195,7 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
}
|
||||
|
||||
.adf-property-field {
|
||||
.adf-textitem-edit-icon.mat-icon {
|
||||
.adf-textitem-edit-icon#{$mat-icon} {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
}
|
||||
@@ -62,3 +207,122 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
|
||||
.adf-empty-content__icon {
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
.aca-details-tabs {
|
||||
#{$mat-tab-label-text} {
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
mat-snack-bar-container {
|
||||
#{$mat-button}#{$mat-unthemed} {
|
||||
--mdc-text-button-label-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-warning-snackbar,
|
||||
.adf-info-snackbar,
|
||||
.adf-error-snackbar {
|
||||
--mat-mdc-snack-bar-button-color: #fff;
|
||||
--mdc-snackbar-supporting-text-color: #fff;
|
||||
--mdc-text-button-label-text-color: #fff;
|
||||
}
|
||||
|
||||
.adf-warning-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
.adf-info-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-info-snackbar-background);
|
||||
}
|
||||
|
||||
.adf-error-snackbar {
|
||||
--mdc-snackbar-container-color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
#{$mat-calendar} {
|
||||
#{$mat-calendar-period-button}:is(button) {
|
||||
width: unset;
|
||||
height: unset;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-radio-button} #{$mat-radio}:is(div) {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
|
||||
#{$mdc-form-field} > label:is(label) {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#{$mat-tab-ripple} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#{$mat-form-field-infix} {
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
#{$mat-tab-labels} {
|
||||
border-bottom: 1px solid var(--adf-theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
#{$mat-tab-list} {
|
||||
#{$mat-tab-labels} {
|
||||
#{$mat-tab-label-active} {
|
||||
color: var($selected-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-tab-label}:not(#{$mat-tab-disabled})#{$mat-tab-label-active} #{$mat-tab-label-text} {
|
||||
color: var(--theme-sidenav-active-text-color);
|
||||
}
|
||||
|
||||
adf-dynamic-component {
|
||||
mat-icon#{$mat-icon}#{$mat-submenu-icon} {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-menu-item} #{$mat-icon-no-color},
|
||||
#{$mat-mdc-submenu-icon} {
|
||||
color: var(--theme-text-color);
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-trailing},
|
||||
#{$mat-notched-outline-notch},
|
||||
#{$mat-notched-outline-leading} {
|
||||
border-color: var(--adf-theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
#{$mat-menu-surface}#{$mat-autocomplete-panel}:is(div) {
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-list-item}#{$mat-list-item-disabled} {
|
||||
#{$mat-list-item-primary-text}:is(div) {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-tab-group}#{$mat-tab-group-stretch} > #{$mat-tab-header} {
|
||||
#{$mat-tab-label}:is(div) {
|
||||
flex-grow: unset;
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-datatable-row {
|
||||
.adf-datatable-checkbox {
|
||||
#{$mat-checkbox} label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,6 +42,7 @@ $search-chip-icon-color: #757575;
|
||||
$disabled-chip-background-color: #f5f5f5;
|
||||
$contrast-gray: mat.get-color-from-palette($foreground, 'secondary-tex');
|
||||
$search-highlight-background-color: #ffd180;
|
||||
$info-snackbar-background: #1f74db;
|
||||
|
||||
// CSS Variables
|
||||
$defaults: (
|
||||
@@ -67,6 +68,7 @@ $defaults: (
|
||||
--theme-grey-background-color: $grey-background,
|
||||
--theme-grey-hover-background-color: $grey-hover-background,
|
||||
--theme-blue-button-color: $blue-save-button-background,
|
||||
--theme-info-snackbar-background: $info-snackbar-background,
|
||||
--theme-heading-color: $black-heading,
|
||||
--theme-dropdown-color: $theme-dropdown-background,
|
||||
--theme-dropdown-background-hover: $theme-dropdown-background-hover,
|
||||
|
||||
Reference in New Issue
Block a user