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 { WebScriptModule } from 'ng2-alfresco-webscript';
import { FlexLayoutModule } from '@angular/flex-layout';
import { Editor3DModule } from 'ng2-3d-editor';
import { ChartsModule } from 'ng2-charts';
import { AppComponent } from './app.component';
@ -100,7 +101,8 @@ if (process.env.ENV === 'production') {
CustomEditorsModule,
Editor3DModule.forRoot(),
ChartsModule,
ThemePickerModule
ThemePickerModule,
FlexLayoutModule
],
declarations: [
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 id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
<div class="page-content">
<div class="activiti-demo-grid">
<div class="activiti-demo-grid-item activiti-demo-tasks-menu">
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="activiti-demo-grid-item activiti-demo-tasks-menu" fxFlex.gt-md="225px">
<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()">
<md-icon>add</md-icon>
@ -23,7 +23,7 @@
</adf-accordion-group>
</adf-accordion>
</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()">
<activiti-tasklist
[appId]="taskFilter?.appId"
@ -59,7 +59,7 @@
[supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
</adf-pagination>
</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
[debugMode]="true"
[taskId]="currentTaskId"
@ -90,7 +90,7 @@
</md-card-content>
</md-card>
</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
[appId]="appId"
(success)="onStartTaskSuccess($event)"
@ -103,8 +103,8 @@
<md-tab id="processes-header" href="#processes"
label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
<div class="page-content">
<div class="activiti-demo-grid">
<div class="activiti-demo-grid-item activiti-demo-processes-menu">
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="activiti-demo-grid-item activiti-demo-processes-menu" fxFlex.gt-md="225px">
<div class="activiti-demo-list-buttons">
<button
color="primary"
@ -128,7 +128,7 @@
</adf-accordion-group>
</adf-accordion>
</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()">
<activiti-process-instance-list
*ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
@ -148,7 +148,7 @@
-->
</activiti-process-instance-list>
</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
[processInstanceId]="currentProcessInstanceId"
(processCancelled)="processCancelled()"
@ -176,7 +176,7 @@
</md-card-content>
</md-card>
</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()">
<adf-start-process
[appId]="appId"
@ -189,8 +189,8 @@
</md-tab>
<md-tab id="report-header" href="#report"
label="{{'PS-TAB.REPORTS-TAB' | translate}}">
<div class="activiti-demo-grid">
<div class="activiti-demo-grid-item activiti-demo-reports-menu">
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="activiti-demo-grid-item activiti-demo-reports-menu" fxFlex.gt-md="300px">
<span><h5>Report List</h5></span>
<hr>
<analytics-report-list
@ -200,7 +200,7 @@
#analyticsreportlist>
</analytics-report-list>
</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
*ngIf="report"
[appId]="appId"

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

@ -8,13 +8,11 @@
}
.activiti-demo-grid {
display: flex;
align-items: stretch;
.activiti-demo-grid-item {
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);
padding: 10px 10px 10px 10px;
padding: 10px;
}
.activiti-demo-list-buttons {
@ -25,25 +23,51 @@
width: 100%;
}
.activiti-demo-tasks-menu,
.activiti-demo-processes-menu,
.activiti-demo-reports-menu {
min-width: 170px;
}
.activiti-demo-tasks-list.small-pagination,
.activiti-demo-processes-list.small-pagination {
.adf-pagination {
.activiti-demo-tasks-list,
.activiti-demo-processes-list {
min-width: 510px;
padding: 0;
}
flex-wrap: wrap;
padding-bottom: 24px;
padding-top: 8px;
.activiti-demo-tasks-details,
.activiti-demo-tasks-start,
.activiti-demo-processes-details,
.activiti-demo-processes-start,
.activiti-demo-reports-details {
flex-grow: 1;
min-width: 680px;
&__block {
border-right: none;
}
&__range-block.adf-pagination__block:first-child {
order: 1;
width: 60%;
flex: 0 0 auto;
box-sizing: border-box;
padding-left: 2px;
justify-content: flex-start;
}
&__perpage-block {
order: 3;
width: 60%;
box-sizing: border-box;
padding-left: 2px;
justify-content: flex-start;
}
&__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 {
@ -71,4 +95,14 @@
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-cli": "4.2.5",
"@angular/core": "4.2.5",
"@angular/flex-layout": "^2.0.0-beta.9",
"@angular/forms": "4.2.5",
"@angular/http": "4.2.5",
"@angular/material": "2.0.0-beta.8",