[ADF-1149] 'Remove' involved people of a task button is displayed behind the dialog (#2130)

* Removed mdl dialogs for comments and people
* Removed list-column CSS class from activiti-demo component to show tasks/process list and details in the same row on low resolution screens
This commit is contained in:
Deepak Paul
2017-07-26 14:18:49 +05:30
committed by Eugenio Romano
parent 64389a5577
commit 896149acd8
7 changed files with 34 additions and 110 deletions

View File

@@ -12,10 +12,6 @@
padding: 10px 10px 10px 10px;
}
.list-column {
width: 320px;
}
.mdl-layout__header {
z-index: 1;
}

View File

@@ -38,7 +38,7 @@
</adf-accordion-group>
</adf-accordion>
</div>
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column" *ngIf="taskFilter && !isStartTaskMode()">
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="taskFilter && !isStartTaskMode()">
<activiti-tasklist
[appId]="taskFilter?.appId"
[processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
@@ -74,9 +74,13 @@
(taskDeleted)="onTaskDeleted($event)">
</activiti-task-details>
<hr>
<activiti-task-attachments
[taskId]="currentTaskId">
</activiti-task-attachments>
<md-card>
<md-card-content>
<activiti-task-attachments
[taskId]="currentTaskId">
</activiti-task-attachments>
</md-card-content>
</md-card>
</div>
<div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartTaskMode()">
<activiti-start-task
@@ -116,7 +120,7 @@
</adf-accordion-group>
</adf-accordion>
</div>
<div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
<activiti-process-instance-list
*ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
[processDefinitionKey]="processFilter.filter.processDefinitionKey"
@@ -145,9 +149,13 @@
(taskClick)="onProcessDetailsTaskClick($event)">
</activiti-process-instance-details>
<hr>
<activiti-process-attachments
[processId]="currentProcessInstanceId">
</activiti-process-attachments>
<md-card>
<md-card-content>
<activiti-process-attachments
[processId]="currentProcessInstanceId">
</activiti-process-attachments>
</md-card-content>
</md-card>
</div>
<div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
<activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>

View File

@@ -5,9 +5,6 @@
[processInstance]="processInstanceDetails"
(showProcessDiagram)="onShowProcessDiagram($event)">
</adf-process-instance-header>
<div class="mdl-cell mdl-cell--4-col">
<button type="button" md-button md-raised-button (click)="showCommentsDialog()">{{'DETAILS.LABELS.COMMENTS'|translate}}</button>
</div>
<div class="mdl-cell mdl-cell--4-col">
<button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
</div>
@@ -22,14 +19,12 @@
<div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
<button type="button" (click)="cancelProcess()" class="mdl-button">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
</div>
<dialog class="mdl-dialog adf-comments-dialog" #dialogComments>
<div class="mdl-dialog__content">
<md-card>
<md-card-content>
<adf-process-instance-comments #activiticomments
[readOnly]="!isRunning()"
[processInstanceId]="processInstanceDetails.id">
</adf-process-instance-comments>
<br><br>
<button type="button" md-button md-raised-button (click)="closeCommentsDialog()">{{ 'DETAILS.BUTTON.CLOSE' | translate }}</button>
</div>
</dialog>
</md-card-content>
</md-card>
</div>

View File

@@ -43,9 +43,6 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
@ViewChild(ProcessInstanceTasksComponent)
tasksList: ProcessInstanceTasksComponent;
@ViewChild('dialogComments')
commentsDialog: any;
@Input()
showTitle: boolean = true;
@@ -109,19 +106,6 @@ export class ProcessInstanceDetailsComponent implements OnChanges {
}
}
public showCommentsDialog(): void {
if (!this.commentsDialog.nativeElement.showModal) {
dialogPolyfill.registerDialog(this.commentsDialog.nativeElement);
}
this.commentsDialog.nativeElement.showModal();
}
public closeCommentsDialog(): void {
if (this.commentsDialog) {
this.commentsDialog.nativeElement.close();
}
}
isRunning(): boolean {
return this.processInstanceDetails && !this.processInstanceDetails.ended;
}

View File

@@ -25,20 +25,6 @@
text-transform: uppercase;
}
.people-dialog {
position: fixed;
top: 50%;
transform: translate(0, -50%);
width: 40%;
}
.comments-dialog {
position: fixed;
top: 50%;
transform: translate(0, -50%);
width: 40%;
}
adf-comments >>> adf-comment-list {
max-height: 400px;
adf-people >>> .assignment-top-container{
background-color: #fff;
}

View File

@@ -19,12 +19,6 @@
(claim)="onClaimTask($event)">
</adf-task-header>
<div *ngIf="showHeaderContent" class="mdl-grid">
<div *ngIf="showInvolvePeople" class="mdl-cell mdl-cell--4-col">
<button type="button" md-button md-raised-button (click)="showPeopleDialog()">{{'TASK_DETAILS.LABELS.INVOLVED_PEOPLE'|translate}}</button>
</div>
<div *ngIf="showComments" class="mdl-cell mdl-cell--4-col">
<button type="button" md-button md-raised-button (click)="showCommentsDialog()">{{'TASK_DETAILS.LABELS.COMMENTS'|translate}}</button>
</div>
<div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
<adf-checklist #activitichecklist
[readOnly]="readOnlyForm"
@@ -67,26 +61,19 @@
<button type="button" class="mdl-button" (click)="closeErrorDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
</div>
</dialog>
<dialog class="mdl-dialog people-dialog" #dialogPeople>
<div class="mdl-dialog__content">
<adf-people
[iconImageUrl]="peopleIconImageUrl"
[people]="taskPeople"
[readOnly]="readOnlyForm"
[taskId]="taskDetails.id">
</adf-people>
<br><br>
<button type="button" md-button md-raised-button (click)="closePeopleDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
</div>
</dialog>
<dialog class="mdl-dialog comments-dialog" #dialogComments>
<div class="mdl-dialog__content">
<br /><br />
<adf-people *ngIf="showInvolvePeople"
[iconImageUrl]="peopleIconImageUrl"
[people]="taskPeople"
[readOnly]="readOnlyForm"
[taskId]="taskDetails.id">
</adf-people>
<md-card *ngIf="showComments">
<md-card-content>
<adf-comments #activiticomments
[readOnly]="readOnlyForm"
[taskId]="taskDetails.id">
</adf-comments>
<br><br>
<button type="button" md-button md-raised-button (click)="closeCommentsDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
</div>
</dialog>
</md-card-content>
</md-card>
</div>

View File

@@ -27,7 +27,7 @@ import { Component,
ViewChild
} from '@angular/core';
import { ContentLinkModel, FormModel, FormOutcomeEvent, FormService } from 'ng2-activiti-form';
import { AlfrescoAuthenticationService, AlfrescoTranslationService, CardViewUpdateService, LogService, UpdateNotification, ClickNotification } from 'ng2-alfresco-core';
import { AlfrescoAuthenticationService, AlfrescoTranslationService, CardViewUpdateService, ClickNotification, LogService, UpdateNotification } from 'ng2-alfresco-core';
import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
import { TaskDetailsModel } from '../models/task-details.model';
import { User } from '../models/user.model';
@@ -55,12 +55,6 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
@ViewChild('errorDialog')
errorDialog: DebugElement;
@ViewChild('dialogPeople')
peopleDialog: any;
@ViewChild('dialogComments')
commentsDialog: any;
@Input()
debugMode: boolean = false;
@@ -323,32 +317,6 @@ export class TaskDetailsComponent implements OnInit, OnChanges {
this.errorDialog.nativeElement.close();
}
public showPeopleDialog(): void {
if (!this.peopleDialog.nativeElement.showModal) {
dialogPolyfill.registerDialog(this.peopleDialog.nativeElement);
}
this.peopleDialog.nativeElement.showModal();
}
public closePeopleDialog(): void {
if (this.peopleDialog) {
this.peopleDialog.nativeElement.close();
}
}
public showCommentsDialog(): void {
if (!this.commentsDialog.nativeElement.showModal) {
dialogPolyfill.registerDialog(this.commentsDialog.nativeElement);
}
this.commentsDialog.nativeElement.showModal();
}
public closeCommentsDialog(): void {
if (this.commentsDialog) {
this.commentsDialog.nativeElement.close();
}
}
onClaimTask(taskId: string): void {
this.loadDetails(taskId);
}