Skip to content

Commit ca97eac

Browse files
lilla28lilla28
authored
Merge pull request #162 from lilla28/js/reactive-table-fix
Reactive layout when resizing browser window
2 parents 9c1d29a + 539c464 commit ca97eac

File tree

9 files changed

+117
-103
lines changed

9 files changed

+117
-103
lines changed

‎Tryouts/Plugins/ApplicationPlugins/datagrid/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@angular/common": "^15.1.0",
1616
"@angular/compiler": "^15.1.0",
1717
"@angular/core": "^15.1.0",
18+
"@angular/flex-layout": "^15.0.0-beta.42",
1819
"@angular/forms": "^15.1.0",
1920
"@angular/material": "~15.1.4",
2021
"@angular/platform-browser": "^15.1.0",
@@ -38,4 +39,4 @@
3839
"karma-jasmine-html-reporter": "~2.0.0",
3940
"typescript": "~4.9.4"
4041
}
41-
}
42+
}

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/app/app.component.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<!-- Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -->
22

3-
<div class="grid">
4-
<div class="outer-wrapper">
5-
<router-outlet></router-outlet>
6-
</div>
3+
<div class="outer-wrapper">
4+
<router-outlet></router-outlet>
75
</div>
86

7+

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/app/app.component.scss‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
/* Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */
22

3-
.grid{
4-
display: grid;
5-
grid-template-columns: 1fr;
6-
grid-template-rows: 100vh 200 vh 100vh;
7-
background-color: #002b51;
8-
}
9-
103
.outer-wrapper{
114
display: flex;
125
justify-content: center;
13-
height: 100%;
6+
align-items: center;
7+
min-width:min-content;
8+
overflow: visible;
9+
overflow-x: auto;
10+
overflow-y: auto;
1411
}

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/app/main-view/datagrid/datagrid.component.html‎

Lines changed: 49 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,56 @@
11
<!-- Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -->
22
<div class="container">
33
<div class="header">
4-
<p></p>
5-
<div class="button-placing">
6-
<p></p>
7-
<button mat-raised-button (click)="onButtonClick()">Open Chart in new window</button>
8-
</div>
9-
<p></p>
4+
<div class="button-placing">
5+
<button mat-raised-button (click)="onButtonClick()">Open Chart in new window</button>
6+
</div>
107
</div>
118
<div class="body">
12-
<div class="mat-elevation-z8">
13-
14-
<mat-table [dataSource]="marketData" class="mat-elevation-z8">
15-
<ng-container matColumnDef="symbol">
16-
<mat-header-cell *matHeaderCellDef>Symbol</mat-header-cell>
17-
<mat-cell *matCellDef="let symbol"> {{symbol.symbol}} </mat-cell>
18-
</ng-container>
9+
<mat-table [dataSource]="marketData" class="mat-elevation-z8">
1910

20-
<ng-container matColumnDef="fullname">
21-
<mat-header-cell *matHeaderCellDef>Fullname</mat-header-cell>
22-
<mat-cell *matCellDef="let symbol"> {{symbol.fullname}} </mat-cell>
23-
</ng-container>
24-
25-
<ng-container matColumnDef="avarageProfit">
26-
<mat-header-cell *matHeaderCellDef>Avarage Profit</mat-header-cell>
27-
<mat-cell *matCellDef="let symbol"> {{symbol.avarageProfit}} </mat-cell>
28-
</ng-container>
29-
30-
<ng-container matColumnDef="amount">
31-
<mat-header-cell *matHeaderCellDef>Amount</mat-header-cell>
32-
<mat-cell *matCellDef="let symbol"> {{symbol.amount}} </mat-cell>
33-
</ng-container>
34-
35-
<ng-container matColumnDef="symbolRating">
36-
<mat-header-cell *matHeaderCellDef>Rating</mat-header-cell>
37-
<mat-cell *matCellDef="let symbol"> {{symbol.symbolRating}} </mat-cell>
38-
</ng-container>
39-
40-
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
41-
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></mat-row>
42-
43-
44-
<ng-container matColumnDef="select">
45-
46-
<mat-header-cell *matHeaderCellDef>
47-
<mat-checkbox (change)="$event ? toggleRow() : null"
48-
[checked]="selection.hasValue()"
49-
[indeterminate]="selection.hasValue()">
50-
</mat-checkbox>
51-
</mat-header-cell>
52-
53-
<mat-cell *matCellDef="let row">
54-
<mat-checkbox (click)="$event.stopPropagation()"
55-
(change)="$event ? selection.toggle(row) : null">
56-
</mat-checkbox>
57-
</mat-cell>
58-
59-
</ng-container>
60-
</mat-table>
61-
<mat-paginator #paginator
62-
[length]="marketData.data.length"
63-
[pageSize]="5"
64-
[pageSizeOptions]="[5, 10, 20]"
65-
(page)="getPaginatorData($event)">
66-
</mat-paginator>
67-
68-
</div>
11+
<ng-container matColumnDef="symbol">
12+
<mat-header-cell *matHeaderCellDef>Symbol</mat-header-cell>
13+
<mat-cell *matCellDef="let symbol">{{symbol.symbol}}</mat-cell>
14+
</ng-container>
15+
16+
<ng-container matColumnDef="fullname">
17+
<mat-header-cell *matHeaderCellDef>Fullname</mat-header-cell>
18+
<mat-cell *matCellDef="let symbol">{{symbol.fullname}}</mat-cell>
19+
</ng-container>
20+
21+
<ng-container matColumnDef="avarageProfit">
22+
<mat-header-cell *matHeaderCellDef>Avarage Profit</mat-header-cell>
23+
<mat-cell *matCellDef="let symbol">{{symbol.avarageProfit}}</mat-cell>
24+
</ng-container>
25+
26+
<ng-container matColumnDef="amount">
27+
<mat-header-cell *matHeaderCellDef>Amount</mat-header-cell>
28+
<mat-cell *matCellDef="let symbol">{{symbol.amount}}</mat-cell>
29+
</ng-container>
30+
31+
<ng-container matColumnDef="symbolRating">
32+
<mat-header-cell *matHeaderCellDef>Rating</mat-header-cell>
33+
<mat-cell *matCellDef="let symbol">{{symbol.symbolRating}}</mat-cell>
34+
</ng-container>
35+
36+
<ng-container matColumnDef="select">
37+
<mat-header-cell *matHeaderCellDef>
38+
<mat-checkbox (change)="$event ? toggleRow() : null" [checked]="selection.hasValue()"
39+
[indeterminate]="selection.hasValue()">
40+
</mat-checkbox>
41+
</mat-header-cell>
42+
43+
<mat-cell *matCellDef="let row">
44+
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null">
45+
</mat-checkbox>
46+
</mat-cell>
47+
</ng-container>
48+
49+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
50+
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></mat-row>
51+
</mat-table>
52+
53+
<mat-paginator #paginator [length]="marketData.data.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"
54+
(page)="getPaginatorData($event)"></mat-paginator>
6955
</div>
70-
</div>
56+
</div>

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/app/main-view/datagrid/datagrid.component.scss‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,39 @@
22

33
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
44

5-
.mat-mdc-table{
6-
background-color: white;
7-
align-items: center;
8-
align-content: center;
9-
align-self: center;
10-
width: 1150px;
5+
6+
.mat-mdc-table
7+
.mat-elevation-z8 {
8+
overflow-x: auto;
9+
min-width: fit-content;
1110
}
1211

1312
.mat-mdc-header-row{
14-
align-items: center;
13+
align-items: center;;
1514
align-content: center;
1615
justify-content: center;
1716
background-color: rgb(10, 142, 199);
1817
font-weight: bold;
1918
}
2019

21-
.mat-header-row{
22-
color: red($color: #000000);
20+
.mat-mdc-header-cell{
21+
font-weight: bold;
2322
}
2423

2524
.mat-row{
26-
align-items: center;
27-
align-content: center;
28-
justify-content: center;
25+
height: auto;
2926
}
3027

31-
.mat-mdc-cell{
28+
.mat-mdc-row-cell{
29+
align-items: center;;
3230
align-content: center;
33-
align-items: center;
34-
}
35-
36-
.mat-mdc-paginator{
37-
background-color: white;
31+
justify-content: center;
32+
display: flex;
3833
}
3934

40-
.mat-column-select {
41-
overflow: initial;
42-
}
4335

4436
.button-placing{
4537
align-items: self-end;
38+
justify-content: end;
39+
display: flex;
4640
}

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/app/main-view/main-view.component.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
/* Morgan Stanley makes this available to you under the Apache License, Version 2.0 (the "License"). You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. See the NOTICE file distributed with this work for additional information regarding copyright ownership. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */
22

3-
mat-toolbar {
3+
.row-layout-row{
4+
width: 750px;
5+
overflow: visible;
6+
@media (max-width: 768px) {
7+
width: 100%;
8+
}
9+
}
10+
11+
.mat-toolbar {
412
background-color: rgb(0, 43, 81);
513
color: white;
6-
justify-content: center;
714
font-size: 35px;
15+
align-items: center;
16+
justify-content: center;
17+
display: flex;
18+
19+
@media (max-width: 768px) {
20+
font-size: 30px;
21+
}
822
}

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/app/main-view/main-view.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { MatButtonModule } from '@angular/material/button';
3232
MatButtonModule,
3333
MatPaginatorModule,
3434
MatSortModule,
35-
MatProgressSpinnerModule
35+
MatProgressSpinnerModule,
3636
]
3737
})
3838
export class MainViewModule{

‎Tryouts/Plugins/ApplicationPlugins/datagrid/src/styles.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,5 @@
33
@import 'material-icons/iconfont/material-icons.css';
44

55
html, body {
6-
margin: 0;
7-
padding: 0;
8-
height: 100%;
96
background-color: rgb(0, 43, 81);
107
}

‎Tryouts/package-lock.json‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)