inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix minimal responsiveness of demo app's activiti section (#2324)

Browse Source
This commit is contained in:
Popovics András 2017-09-12 14:10:16 +01:00 committed by Eugenio Romano
parent beb34b251a
commit 1f4b1231c6
4 changed files with 71 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell-ng2/app/app.module.ts
View File

@ -35,6 +35,7 @@ import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
import { ViewerModule } from 'ng2-alfresco-viewer'; import { ViewerModule } from 'ng2-alfresco-viewer';
import { WebScriptModule } from 'ng2-alfresco-webscript'; import { WebScriptModule } from 'ng2-alfresco-webscript';
import { FlexLayoutModule } from '@angular/flex-layout';
import { Editor3DModule } from 'ng2-3d-editor'; import { Editor3DModule } from 'ng2-3d-editor';
import { ChartsModule } from 'ng2-charts'; import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
@ -100,7 +101,8 @@ if (process.env.ENV === 'production') {
CustomEditorsModule, CustomEditorsModule,
Editor3DModule.forRoot(), Editor3DModule.forRoot(),
ChartsModule, ChartsModule,
ThemePickerModule ThemePickerModule,
FlexLayoutModule
], ],
declarations: [ declarations: [
AppComponent, AppComponent,

26
demo-shell-ng2/app/components/activiti/activiti-demo.component.html
View File

@ -1,8 +1,8 @@
<md-tab-group [(selectedIndex)]="activeTab"> <md-tab-group [(selectedIndex)]="activeTab">
<md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}"> <md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
<div class="page-content"> <div class="page-content">
<div class="activiti-demo-grid"> <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="activiti-demo-grid-item activiti-demo-tasks-menu"> <div class="activiti-demo-grid-item activiti-demo-tasks-menu" fxFlex.gt-md="225px">
<div class="activiti-demo-list-buttons"> <div class="activiti-demo-list-buttons">
<button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()"> <button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
<md-icon>add</md-icon> <md-icon>add</md-icon>
@ -23,7 +23,7 @@
</adf-accordion-group> </adf-accordion-group>
</adf-accordion> </adf-accordion>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-tasks-list" <div class="activiti-demo-grid-item activiti-demo-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
*ngIf="taskFilter && !isStartTaskMode()"> *ngIf="taskFilter && !isStartTaskMode()">
<activiti-tasklist <activiti-tasklist
[appId]="taskFilter?.appId" [appId]="taskFilter?.appId"
@ -59,7 +59,7 @@
[supportedPageSizes]="[2, 4, 6, 8, 10, 12]"> [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
</adf-pagination> </adf-pagination>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()"> <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
<activiti-task-details #activitidetails <activiti-task-details #activitidetails
[debugMode]="true" [debugMode]="true"
[taskId]="currentTaskId" [taskId]="currentTaskId"
@ -90,7 +90,7 @@
</md-card-content> </md-card-content>
</md-card> </md-card>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()"> <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
<adf-start-task <adf-start-task
[appId]="appId" [appId]="appId"
(success)="onStartTaskSuccess($event)" (success)="onStartTaskSuccess($event)"
@ -103,8 +103,8 @@
<md-tab id="processes-header" href="#processes" <md-tab id="processes-header" href="#processes"
label="{{'PS-TAB.PROCESSES-TAB' | translate}}"> label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
<div class="page-content"> <div class="page-content">
<div class="activiti-demo-grid"> <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="activiti-demo-grid-item activiti-demo-processes-menu"> <div class="activiti-demo-grid-item activiti-demo-processes-menu" fxFlex.gt-md="225px">
<div class="activiti-demo-list-buttons"> <div class="activiti-demo-list-buttons">
<button <button
color="primary" color="primary"
@ -128,7 +128,7 @@
</adf-accordion-group> </adf-accordion-group>
</adf-accordion> </adf-accordion>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
*ngIf="processFilter && !isStartProcessMode()"> *ngIf="processFilter && !isStartProcessMode()">
<activiti-process-instance-list <activiti-process-instance-list
*ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId" *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
@ -148,7 +148,7 @@
--> -->
</activiti-process-instance-list> </activiti-process-instance-list>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()"> <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
<activiti-process-instance-details <activiti-process-instance-details
[processInstanceId]="currentProcessInstanceId" [processInstanceId]="currentProcessInstanceId"
(processCancelled)="processCancelled()" (processCancelled)="processCancelled()"
@ -176,7 +176,7 @@
</md-card-content> </md-card-content>
</md-card> </md-card>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-processes-start" <div class="activiti-demo-grid-item activiti-demo-processes-start" fxFlex.gt-md="1 1 auto"
*ngIf="isStartProcessMode()"> *ngIf="isStartProcessMode()">
<adf-start-process <adf-start-process
[appId]="appId" [appId]="appId"
@ -189,8 +189,8 @@
</md-tab> </md-tab>
<md-tab id="report-header" href="#report" <md-tab id="report-header" href="#report"
label="{{'PS-TAB.REPORTS-TAB' | translate}}"> label="{{'PS-TAB.REPORTS-TAB' | translate}}">
<div class="activiti-demo-grid"> <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="activiti-demo-grid-item activiti-demo-reports-menu"> <div class="activiti-demo-grid-item activiti-demo-reports-menu" fxFlex.gt-md="300px">
<span><h5>Report List</h5></span> <span><h5>Report List</h5></span>
<hr> <hr>
<analytics-report-list <analytics-report-list
@ -200,7 +200,7 @@
#analyticsreportlist> #analyticsreportlist>
</analytics-report-list> </analytics-report-list>
</div> </div>
<div class="activiti-demo-grid-item activiti-demo-reports-details"> <div class="activiti-demo-grid-item activiti-demo-reports-details" fxFlex.gt-md="1 1 auto">
<activiti-analytics <activiti-analytics
*ngIf="report" *ngIf="report"
[appId]="appId" [appId]="appId"

70
demo-shell-ng2/app/components/activiti/activiti-demo.component.scss
View File

@ -8,13 +8,11 @@
} }
.activiti-demo-grid { .activiti-demo-grid {
display: flex;
align-items: stretch;
.activiti-demo-grid-item { .activiti-demo-grid-item {
margin: 4px; margin: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
padding: 10px 10px 10px 10px; padding: 10px;
} }
.activiti-demo-list-buttons { .activiti-demo-list-buttons {
@ -25,25 +23,51 @@
width: 100%; width: 100%;
} }
.activiti-demo-tasks-menu, .activiti-demo-tasks-list.small-pagination,
.activiti-demo-processes-menu, .activiti-demo-processes-list.small-pagination {
.activiti-demo-reports-menu { .adf-pagination {
min-width: 170px;
flex-wrap: wrap;
padding-bottom: 24px;
padding-top: 8px;
&__block {
border-right: none;
} }
.activiti-demo-tasks-list, &__range-block.adf-pagination__block:first-child {
.activiti-demo-processes-list { order: 1;
min-width: 510px; width: 60%;
padding: 0; flex: 0 0 auto;
box-sizing: border-box;
padding-left: 2px;
justify-content: flex-start;
} }
.activiti-demo-tasks-details, &__perpage-block {
.activiti-demo-tasks-start, order: 3;
.activiti-demo-processes-details, width: 60%;
.activiti-demo-processes-start, box-sizing: border-box;
.activiti-demo-reports-details { padding-left: 2px;
flex-grow: 1; justify-content: flex-start;
min-width: 680px; }
&__actualinfo-block {
order: 2;
width: 40%;
box-sizing: border-box;
padding-right: 2px;
justify-content: flex-end;
}
&__controls-block {
order: 4;
width: 40%;
box-sizing: border-box;
padding-right: 2px;
justify-content: flex-end;
}
}
} }
.activiti-demo-list { .activiti-demo-list {
@ -71,4 +95,14 @@
font-size: 14px; font-size: 14px;
} }
} }
@media screen and (max-width: 1279px) {
container-widget .grid-list {
flex-direction: column;
.grid-list-item {
width: 100% !important;
}
}
}
} }

1
demo-shell-ng2/package.json
View File

@ -61,6 +61,7 @@
"@angular/compiler": "4.2.5", "@angular/compiler": "4.2.5",
"@angular/compiler-cli": "4.2.5", "@angular/compiler-cli": "4.2.5",
"@angular/core": "4.2.5", "@angular/core": "4.2.5",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "4.2.5", "@angular/forms": "4.2.5",
"@angular/http": "4.2.5", "@angular/http": "4.2.5",
"@angular/material": "2.0.0-beta.8", "@angular/material": "2.0.0-beta.8",