mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
Improvement/aae 30909 enhance user experience with tab navigation within the form (#10844)
* AAE-30909 tab-header fixed at the top * AAE-30909 fixing widh and scrolling issues in workspace and studio-hxp
This commit is contained in:
Soumyajit Chakraborty
GitHub
parent
adeb82c137
commit
acf9e3e11c
@ -3,8 +3,10 @@
|
||||
<div *ngIf="formDefinition.hasTabs()">
|
||||
<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
|
||||
<mat-tab-group>
|
||||
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
|
||||
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
|
||||
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate ">
|
||||
<div class="adf-form-tab-content">
|
||||
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }" />
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,40 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.alfresco-tabs-widget {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
.adf-form-tab-group {
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-body} {
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-header} {
|
||||
z-index: 10;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
position: sticky;
|
||||
/* stylelint-disable-next-line value-no-vendor-prefix */
|
||||
position: -webkit-sticky; /* macOS/iOS Safari */
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
margin-left: 0 !important;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#{ms.$mat-tab-body-wrapper} {
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-card-content:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.adf-container-widget {
|
||||
.adf-grid-list {
|
||||
display: grid;
|
||||
@ -116,12 +150,18 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& #{ms.$mat-tab-header} {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
& #{ms.$mat-card-header-text} {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& #{ms.$mat-tab-body-content} {
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
& #{mat-tab-label-text} {
|
||||
|
||||
@ -6,8 +6,11 @@ $mat-tab-label-active: '.mdc-tab--active';
|
||||
$mat-tab-label-container: '.mat-mdc-tab-label-container';
|
||||
$mat-tab-label-text: '.mdc-tab__text-label';
|
||||
$mat-tab-body: '.mat-mdc-tab-body';
|
||||
$mat-tab-header: '.mat-mdc-tab-header';
|
||||
$mat-tab-body-content: '.mat-mdc-tab-body-content';
|
||||
$mat-tab-ink-bar: '.mdc-tab-indicator';
|
||||
$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper';
|
||||
$mat-tab-body-content: '.mat-mdc-card-content';
|
||||
$mat-chip: '.mat-mdc-chip';
|
||||
$mat-chip-list: '.mat-mdc-chip-list';
|
||||
$mat-checkbox: '.mat-mdc-checkbox';
|
||||
|
||||
@ -4,94 +4,107 @@
|
||||
|
||||
<div
|
||||
*ngIf="hasForm()"
|
||||
class="adf-cloud-form-container adf-cloud-form-{{displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline'}}-container"
|
||||
[style]="formStyle">
|
||||
<div class="adf-cloud-form-content"
|
||||
[cdkTrapFocus]="displayConfiguration?.options?.trapFocus"
|
||||
cdkTrapFocusAutoCapture>
|
||||
class="adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container"
|
||||
[style]="formStyle"
|
||||
>
|
||||
<div class="adf-cloud-form-content" [cdkTrapFocus]="displayConfiguration?.options?.trapFocus" cdkTrapFocusAutoCapture>
|
||||
<adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayConfiguration?.options?.displayToolbar">
|
||||
<div class="adf-cloud-form__form-title">
|
||||
<span class="adf-cloud-form__display-name" [title]="form.taskName">
|
||||
{{ form.taskName }}
|
||||
<ng-container *ngIf="!form.taskName">
|
||||
{{ 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<adf-toolbar class="adf-cloud-form-toolbar" *ngIf="displayConfiguration?.options?.displayToolbar">
|
||||
<div class="adf-cloud-form__form-title">
|
||||
<span class="adf-cloud-form__display-name" [title]="form.taskName">
|
||||
{{form.taskName}}
|
||||
<ng-container *ngIf="!form.taskName">
|
||||
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
|
||||
</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<adf-toolbar-divider *ngIf="displayConfiguration?.options?.displayCloseButton" />
|
||||
<button
|
||||
*ngIf="displayConfiguration?.options?.displayCloseButton"
|
||||
class="adf-cloud-form-close-button"
|
||||
data-automation-id="adf-toolbar-right-back"
|
||||
[attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
|
||||
[attr.data-automation-id]="'adf-cloud-form-close-button'"
|
||||
[title]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
|
||||
mat-icon-button
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
|
||||
(click)="switchToDisplayMode()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<mat-card
|
||||
appearance="outlined"
|
||||
class="adf-cloud-form-content-card"
|
||||
[class.adf-cloud-form-content-card-fullscreen]="displayMode === 'fullScreen'"
|
||||
<adf-toolbar-divider *ngIf="displayConfiguration?.options?.displayCloseButton" />
|
||||
<button
|
||||
*ngIf="displayConfiguration?.options?.displayCloseButton"
|
||||
class="adf-cloud-form-close-button"
|
||||
data-automation-id="adf-toolbar-right-back"
|
||||
[attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
|
||||
[attr.data-automation-id]="'adf-cloud-form-close-button'"
|
||||
[title]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
|
||||
mat-icon-button
|
||||
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
|
||||
(click)="switchToDisplayMode()"
|
||||
>
|
||||
<div class="adf-cloud-form-content-card-container">
|
||||
<mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
|
||||
<mat-card-title>
|
||||
<h4>
|
||||
<div *ngIf="showValidationIcon" class="adf-form-validation-button">
|
||||
<i id="adf-valid-form-icon" class="material-icons"
|
||||
*ngIf="form.isValid; else no_valid_form">check_circle</i>
|
||||
<ng-template #no_valid_form>
|
||||
<i id="adf-invalid-form-icon" class="material-icons adf-invalid-color">error</i>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngIf="!displayConfiguration?.options?.fullscreen && findDisplayConfiguration('fullScreen')" class="adf-cloud-form-fullscreen-button">
|
||||
<button mat-icon-button (click)="switchToDisplayMode('fullScreen')" [attr.data-automation-id]="'adf-cloud-form-fullscreen-button'">
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [title]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
|
||||
<button mat-icon-button (click)="onRefreshClicked()" [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName"
|
||||
>{{form.taskName}}
|
||||
<ng-container *ngIf="!form.taskName">
|
||||
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
|
||||
</ng-container>
|
||||
</span>
|
||||
</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="adf-form-container-card-content">
|
||||
<adf-form-renderer [formDefinition]="form" [readOnly]="readOnly" />
|
||||
</mat-card-content>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<mat-card
|
||||
appearance="outlined"
|
||||
class="adf-cloud-form-content-card"
|
||||
[class.adf-cloud-form-content-card-fullscreen]="displayMode === 'fullScreen'"
|
||||
>
|
||||
<div class="adf-cloud-form-content-card-container">
|
||||
<mat-card-header *ngIf="showTitle || showRefreshButton || showValidationIcon">
|
||||
<mat-card-title>
|
||||
<h4>
|
||||
<div *ngIf="showValidationIcon" class="adf-form-validation-button">
|
||||
<i id="adf-valid-form-icon" class="material-icons" *ngIf="form.isValid; else no_valid_form">check_circle</i>
|
||||
<ng-template #no_valid_form>
|
||||
<i id="adf-invalid-form-icon" class="material-icons adf-invalid-color">error</i>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="!displayConfiguration?.options?.fullscreen && findDisplayConfiguration('fullScreen')"
|
||||
class="adf-cloud-form-fullscreen-button"
|
||||
>
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="switchToDisplayMode('fullScreen')"
|
||||
[attr.data-automation-id]="'adf-cloud-form-fullscreen-button'"
|
||||
>
|
||||
<mat-icon>fullscreen</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="showRefreshButton" class="adf-cloud-form-reload-button" [title]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
|
||||
<button mat-icon-button (click)="onRefreshClicked()" [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName"
|
||||
>{{ form.taskName }}
|
||||
<ng-container *ngIf="!form.taskName">
|
||||
{{ 'FORM.FORM_RENDERER.NAMELESS_TASK' | translate }}
|
||||
</ng-container>
|
||||
</span>
|
||||
</h4>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="adf-form-container-card-content">
|
||||
<adf-form-renderer [formDefinition]="form" [readOnly]="readOnly" />
|
||||
</mat-card-content>
|
||||
<div class="adf-cloud-form-content-card-actions">
|
||||
<mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
|
||||
<mat-checkbox id="adf-form-open-next-task" *ngIf="showNextTaskCheckbox" [checked]="isNextTaskCheckboxChecked" (change)="onNextTaskCheckboxCheckedChanged($event)">{{'ADF_CLOUD_TASK_FORM.OPEN_NEXT_TASK.LABEL' | translate}}</mat-checkbox>
|
||||
<mat-checkbox
|
||||
id="adf-form-open-next-task"
|
||||
*ngIf="showNextTaskCheckbox"
|
||||
[checked]="isNextTaskCheckboxChecked"
|
||||
(change)="onNextTaskCheckboxCheckedChanged($event)"
|
||||
>{{ 'ADF_CLOUD_TASK_FORM.OPEN_NEXT_TASK.LABEL' | translate }}</mat-checkbox
|
||||
>
|
||||
<span class="adf-card-actions-spacer"></span>
|
||||
<ng-content select="adf-cloud-form-custom-outcomes" />
|
||||
<ng-container *ngFor="let outcome of form.outcomes">
|
||||
<button
|
||||
*ngIf="outcome.isVisible"
|
||||
[id]="'adf-form-'+ outcome.name | formatSpace"
|
||||
[id]="'adf-form-' + outcome.name | formatSpace"
|
||||
[color]="getColorForOutcome(outcome.name)"
|
||||
mat-button
|
||||
[disabled]="!isOutcomeButtonEnabled(outcome)"
|
||||
[class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
|
||||
(click)="onOutcomeClicked(outcome)"
|
||||
>
|
||||
{{outcome.name | translate | uppercase }}
|
||||
{{ outcome.name | translate | uppercase }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.adf-card-actions-spacer {
|
||||
@ -72,13 +73,14 @@
|
||||
|
||||
&-content-card {
|
||||
overflow-y: auto;
|
||||
position: static;
|
||||
|
||||
&-fullscreen {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.adf-cloud-form-content-card-container {
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@ -89,6 +91,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: -webkit-fill-available;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&-sidebars {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user