inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-10-01 14:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-37563] Added grey background to fullscreen and standalone fullscreen forms (#11208)

Browse Source
This commit is contained in:
Alex Molodyh
2025-09-18 16:41:11 -07:00
committed by GitHub
parent 591934db0e
commit ef29bafc75
2 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
View File

@@ -7,7 +7,11 @@
class="adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container" class="adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container"
[style]="formStyle" [style]="formStyle"
> >
<div class="adf-cloud-form-content" [cdkTrapFocus]="displayConfiguration?.options?.trapFocus" cdkTrapFocusAutoCapture> <div
class="adf-cloud-form-content"
[class.adf-cloud-form-content-standalone-fullscreen]="displayMode === 'standalone' && displayConfiguration?.options?.fullscreen"
[cdkTrapFocus]="displayConfiguration?.options?.trapFocus"
cdkTrapFocusAutoCapture>
<adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayConfiguration?.options?.displayToolbar"> <adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayConfiguration?.options?.displayToolbar">
<div class="adf-cloud-form__form-title"> <div class="adf-cloud-form__form-title">
<span class="adf-cloud-form__display-name" [title]="form.taskName"> <span class="adf-cloud-form__display-name" [title]="form.taskName">
@@ -38,6 +42,7 @@
appearance="outlined" appearance="outlined"
class="adf-cloud-form-content-card" class="adf-cloud-form-content-card"
[class.adf-cloud-form-content-card-fullscreen]="displayMode === 'fullScreen'" [class.adf-cloud-form-content-card-fullscreen]="displayMode === 'fullScreen'"
[class.adf-cloud-form-content-card-fullscreen-toolbar]="displayMode === 'fullScreen' && displayConfiguration?.options?.displayToolbar"
> >
<div class="adf-cloud-form-content-card-container"> <div class="adf-cloud-form-content-card-container">
<mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon"> <mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">

34
lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
View File

@@ -10,7 +10,14 @@
} }
.adf-cloud-form { .adf-cloud-form {
&-content-standalone-fullscreen {
background-color: transparent;
border-radius: 14px;
}
&-container { &-container {
border-radius: 14px;
.adf-cloud-form-content { .adf-cloud-form-content {
@extend .adf-full-screen; @extend .adf-full-screen;
@@ -22,11 +29,22 @@
} }
&-fullscreen-container { &-fullscreen-container {
position: fixed;
top: 0;
left: 0;
z-index: 100000;
background-color: var(--adf-theme-mat-grey-color-a400);
display: block;
height: 100%;
width: 100vw;
overflow-y: auto;
border-radius: 0 0 14px;
.adf-cloud-form-content { .adf-cloud-form-content {
position: fixed; width: calc(100% - 80px);
top: 0; max-width: 1366px;
left: 0; height: auto;
z-index: 100000; margin: 40px auto;
} }
} }
@@ -34,9 +52,10 @@
@extend .adf-full-screen; @extend .adf-full-screen;
} }
&-toolbar { &-toolbar ::ng-deep {
#{ms.$mat-toolbar} { #{ms.$mat-toolbar} {
background-color: var(--adf-theme-background-card-color-087); background-color: var(--adf-theme-background-card-color-087);
border-radius: 14px 14px 0 0;
} }
} }
@@ -72,6 +91,7 @@
overflow-y: auto; overflow-y: auto;
position: static; position: static;
height: 70%; height: 70%;
border-radius: 14px;
&-fullscreen { &-fullscreen {
padding: 0; padding: 0;
@@ -79,6 +99,10 @@
width: 100%; width: 100%;
position: relative; position: relative;
&-toolbar {
border-radius: 0 0 14px 14px;
}
&-container { &-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;