Skip to content

Commit 36d4858

Browse files
EvAlexEvAlex
authored
feat(diagram) view on mobile (#40) (#41)
* make toolbar responsive * responsiveness * scroll diagram with device tilt
1 parent d0a831f commit 36d4858

File tree

13 files changed

+479
-73
lines changed

13 files changed

+479
-73
lines changed

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
"license": "MIT",
99
"scripts": {
1010
"ng": "ng",
11-
"start": "ng serve --app efd --port 4200",
11+
"start": "ng serve --app efd --port 4200 --host 0.0.0.0",
1212
"start-website": "ng serve --app efd-website --port 4201",
1313
"build": "ng build",
1414
"test": "ng test",
1515
"lint": "ng lint",
1616
"e2e": "ng e2e",
17-
"deploy-website": "ts-node git-version.ts && ng build --app efd-website && firebase deploy"
17+
"deploy-website": "ts-node git-version.ts && ng build --app efd-website --sourcemaps false && firebase deploy"
1818
},
1919
"private": true,
2020
"dependencies": {

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,13 @@ main {
1818

1919
.toggle-fullscreen-btn {
2020
position: fixed;
21-
bottom: 28px;
22-
left: calc(25% - 80px);
21+
bottom: 32%;
22+
right: 32px;
23+
24+
@media (max-width: 570px) {
25+
left: calc(25% - 28px);
26+
bottom: 28px;
27+
}
2328
}
2429
}
2530

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/app.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import 'rxjs/add/operator/mergeMap';
1313
import 'rxjs/add/operator/takeUntil';
1414
import 'rxjs/add/operator/debounceTime';
1515
import 'rxjs/add/operator/debounce';
16+
import 'rxjs/add/operator/throttleTime';
1617
import 'rxjs/add/operator/combineLatest';
1718
import 'rxjs/add/observable/of';
1819
import 'rxjs/add/observable/timer';
20+
import 'rxjs/add/observable/fromEvent';
1921

2022
import 'hammerjs';
2123

@@ -34,6 +36,7 @@ import { MinimapComponent } from './components/minimap/minimap.component';
3436
import { ScrollbarWidthDirective } from './directives/scrollbar-width.directive';
3537
import { DownloadDataDirective } from './directives/download-data.directive';
3638
import { ExportDialogComponent } from './components/export-dialog/export-dialog.component';
39+
import { DevicemotionScrollDirective } from './directives/devicemotion-scroll.directive';
3740

3841
@NgModule({
3942
declarations: [
@@ -50,6 +53,7 @@ import { ExportDialogComponent } from './components/export-dialog/export-dialog.
5053
ScrollbarWidthDirective,
5154
DownloadDataDirective,
5255
ExportDialogComponent,
56+
DevicemotionScrollDirective,
5357
],
5458
entryComponents: [ExportDialogComponent],
5559
imports: [

‎EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.html‎

Lines changed: 86 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,77 @@
11
<ng-template #toolbar>
2-
<md-toolbar color="primary" [class.floating-toolbar]="toolbarCollapsed">
3-
<span class="spacer">Db Diagram</span>
2+
<md-toolbar class="main-toolbar" color="primary" [class.floating-toolbar]="toolbarCollapsed">
3+
4+
<span #toolbarTitle class="title">
5+
Db Diagram
6+
</span>
7+
8+
<span #toolbarControls class="controls">
49

5-
<ng-container *ngIf="!!model && modelLayout?.initialized">
6-
<button type="button" md-icon-button (click)="saveLayout()" mdTooltip="Save layout">
7-
<md-icon>save</md-icon>
8-
</button>
9-
<button type="button" md-icon-button (click)="restoreLayout()" mdTooltip="Load layout">
10-
<md-icon>folder_open</md-icon>
11-
</button>
12-
</ng-container>
13-
<button
14-
*ngIf="allowToolbarCollapse"
15-
type="button"
16-
md-icon-button
17-
(click)="toolbarCollapsed = !toolbarCollapsed"
18-
[mdTooltip]="toolbarCollapsed ? 'Expand' : 'Collapse'">
19-
<md-icon *ngIf="!toolbarCollapsed">expand_less</md-icon>
20-
<md-icon *ngIf="toolbarCollapsed">expand_more</md-icon>
21-
</button>
22-
<button type="button" md-icon-button [mdMenuTriggerFor]="appMenu">
23-
<md-icon>more_vert</md-icon>
24-
</button>
25-
26-
<md-menu #appMenu="mdMenu">
2710
<ng-container *ngIf="!!model && modelLayout?.initialized">
28-
<button md-menu-item (click)="showExportDialog()">
29-
<md-icon>file_download</md-icon> Export
11+
<button
12+
*ngIf="toolbarControls.parentElement.clientWidth >= responsiveBreakpoints.saveBtn"
13+
type="button"
14+
md-icon-button
15+
(click)="saveLayout()"
16+
mdTooltip="Save layout">
17+
<md-icon>save</md-icon>
18+
</button>
19+
<button
20+
*ngIf="toolbarControls.parentElement.clientWidth >= responsiveBreakpoints.restoreBtn"
21+
type="button"
22+
md-icon-button
23+
(click)="restoreLayout()"
24+
mdTooltip="Load layout">
25+
<md-icon>folder_open</md-icon>
3026
</button>
3127
</ng-container>
3228
<button
29+
*ngIf="allowToolbarCollapse"
3330
type="button"
34-
class="import-btn"
35-
md-menu-item>
36-
<md-icon>file_upload</md-icon> Import
37-
<input
38-
type="file"
39-
name="aligned-points"
40-
(change)="onImportFileUpload($event)">
31+
md-icon-button
32+
(click)="toolbarCollapsed = !toolbarCollapsed"
33+
[mdTooltip]="toolbarCollapsed ? 'Expand' : 'Collapse'">
34+
<md-icon *ngIf="!toolbarCollapsed">expand_less</md-icon>
35+
<md-icon *ngIf="toolbarCollapsed">expand_more</md-icon>
4136
</button>
42-
</md-menu>
37+
<button type="button" md-icon-button [mdMenuTriggerFor]="appMenu">
38+
<md-icon>more_vert</md-icon>
39+
</button>
40+
41+
<md-menu #appMenu="mdMenu" class="app-menu">
42+
<button
43+
*ngIf="toolbarControls.parentElement.clientWidth < responsiveBreakpoints.saveBtn"
44+
type="button"
45+
md-menu-item
46+
(click)="saveLayout()">
47+
<md-icon>save</md-icon> Save Layout
48+
</button>
49+
<button
50+
*ngIf="toolbarControls.parentElement.clientWidth < responsiveBreakpoints.restoreBtn"
51+
type="button"
52+
md-menu-item
53+
(click)="restoreLayout()">
54+
<md-icon>folder_open</md-icon> Restore Layout
55+
</button>
56+
<ng-container *ngIf="!!model && modelLayout?.initialized">
57+
<button md-menu-item (click)="showExportDialog()">
58+
<md-icon>file_download</md-icon> Export
59+
</button>
60+
</ng-container>
61+
<button
62+
type="button"
63+
class="import-btn"
64+
md-menu-item>
65+
<md-icon>file_upload</md-icon> Import
66+
<input
67+
type="file"
68+
name="aligned-points"
69+
(change)="onImportFileUpload($event)">
70+
</button>
71+
</md-menu>
72+
73+
</span>
74+
4375
</md-toolbar>
4476
</ng-template>
4577

@@ -53,7 +85,7 @@
5385

5486
<div class="spacer toolbar-content">
5587
<md-toolbar>
56-
<span class="spacer">Entities</span>
88+
<span class="title">Entities</span>
5789

5890
<button
5991
type="button"
@@ -80,23 +112,13 @@
80112
</md-nav-list>
81113

82114
<md-toolbar>
83-
<span class="spacer">Entity Settings</span>
115+
<span class="title">Entity Settings</span>
84116
</md-toolbar>
85117
<section>
86118
<h4>Properties Table Columns</h4>
87-
<div *ngFor="let column of modelLayout.entitiesTableSettings.columns">
88-
<md-slide-toggle
89-
[checked]="column.visible"
90-
(change)="column.toggleVisibility()"
91-
[disabled]="column.alwaysVisible">
92-
</md-slide-toggle>
93-
<md-input-container>
94-
<input
95-
type="text"
96-
mdInput
97-
[placeholder]="'Column title - ' + column.key"
98-
[(ngModel)]="column.name">
99-
</md-input-container>
119+
<div
120+
*ngFor="let column of modelLayout.entitiesTableSettings.columns"
121+
class="column-settings">
100122

101123
<span class="reorder-buttons-container">
102124
<button
@@ -114,6 +136,21 @@ <h4>Properties Table Columns</h4>
114136
<md-icon>arrow_drop_down</md-icon>
115137
</button>
116138
</span>
139+
140+
<md-slide-toggle
141+
[checked]="column.visible"
142+
(change)="column.toggleVisibility()"
143+
[disabled]="column.alwaysVisible">
144+
</md-slide-toggle>
145+
146+
<md-input-container>
147+
<input
148+
type="text"
149+
mdInput
150+
[placeholder]="'Column title - ' + column.key"
151+
[(ngModel)]="column.name">
152+
</md-input-container>
153+
117154
</div>
118155
</section>
119156
</div>

0 commit comments

Comments
 (0)