Skip to content

Commit 39ed93a

Browse files
ionutkosteeaionutkosteea
committed
Add responsive design capabilities.
1 parent 16f487b commit 39ed93a

File tree

54 files changed

+1267
-911
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1267
-911
lines changed

‎angular-app/ngx-fittable-docs/angular.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@
2525
"src/assets"
2626
],
2727
"styles": [
28-
"src/styles.css"
28+
"src/styles.css",
29+
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
30+
"node_modules/primeng/resources/primeng.min.css",
31+
"node_modules/primeicons/primeicons.css"
2932
],
3033
"scripts": [],
3134
"preserveSymlinks": true
@@ -35,8 +38,8 @@
3538
"budgets": [
3639
{
3740
"type": "initial",
38-
"maximumWarning": "500kb",
39-
"maximumError": "1mb"
41+
"maximumWarning": "2mb",
42+
"maximumError": "5mb"
4043
},
4144
{
4245
"type": "anyComponentStyle",

‎angular-app/ngx-fittable-docs/package-lock.json

+296-52
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular-app/ngx-fittable-docs/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@
2222
"@angular/platform-browser": "^16.0.3",
2323
"@angular/platform-browser-dynamic": "^16.0.3",
2424
"@angular/router": "^16.0.3",
25-
"fittable-angular": "^3.0.0",
25+
"fittable-angular": "^3.1.0",
2626
"npm": "^9.6.6",
27+
"primeicons": "^6.0.1",
28+
"primeng": "^16.0.2",
2729
"rxjs": "~7.8.0",
2830
"tslib": "^2.3.0",
2931
"zone.js": "~0.13.0"
@@ -44,4 +46,4 @@
4446
"karma-jasmine-html-reporter": "~2.0.0",
4547
"typescript": "~5.0.2"
4648
}
47-
}
49+
}

‎angular-app/ngx-fittable-docs/src/app/app.component.css

+31-53
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,50 @@
1-
.main {
2-
position: relative;
3-
height: 100%;
4-
max-width: 1680px;
1+
.content {
2+
display: grid;
3+
grid-template-columns: auto 1fr;
4+
grid-template-rows: auto 1fr;
5+
gap: 8px;
6+
height: 100vh;
57
}
68

7-
.top {
8-
position: fixed;
9-
left: 0px;
10-
top: 0px;
11-
width: 100%;
12-
height: 50px;
13-
background-color: white;
14-
z-index: 5;
15-
border-bottom: 2px solid rgba(96, 96, 96, 0.1);
16-
box-sizing: border-box;
9+
.header {
10+
grid-column: 1 / span 2;
11+
}
12+
13+
.hamburger {
14+
margin-right: 8px;
15+
display: none;
1716
}
1817

1918
.logo {
20-
position: absolute;
21-
left: 4px;
22-
top: 10px;
23-
width: fit-content;
24-
color: #606060;
25-
display: inline-table;
26-
vertical-align: middle;
27-
font-size: 26px;
19+
font-size: 24px;
2820
font-weight: bolder;
2921
font-style: italic;
30-
padding-left: 6px;
3122
}
3223

33-
.top-right-bar {
34-
position: absolute;
35-
right: 15px;
36-
top: 15px;
37-
height: 20px;
24+
.navigation {
25+
display: block;
26+
width: 300px;
3827
}
3928

40-
.top-button {
41-
width: 20px;
42-
height: 20px;
43-
margin-left: 6px;
44-
cursor: pointer;
29+
.navigation-tree {
30+
overflow: auto;
31+
scroll-behavior: smooth;
4532
}
4633

47-
.contact:hover {
48-
background-color: rgba(96, 96, 96, 0.1);
49-
}
5034

51-
.navigation {
52-
position: fixed;
53-
left: 0px;
54-
top: 50px;
55-
width: 240px;
56-
height: calc(100% - 50px);
35+
.topic {
5736
overflow: auto;
58-
scroll-behavior: smooth;
59-
border-right: 2px solid rgba(96, 96, 96, 0.1);
60-
padding-top: 10px;
61-
padding-left: 4px;
62-
padding-right: 4px;
37+
max-width: 1080px;
6338
box-sizing: border-box;
39+
padding: 8px;
6440
}
6541

66-
.content {
67-
margin-top: 50px;
68-
margin-left: 240px;
69-
height: calc(100% - 50px);
70-
overflow: auto;
71-
box-sizing: border-box;
42+
@media screen and (max-width: 1080px) {
43+
.hamburger {
44+
display: block;
45+
}
46+
47+
.navigation {
48+
width: 0;
49+
}
7250
}

‎angular-app/ngx-fittable-docs/src/app/app.component.html

+78-61
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,96 @@
1-
<div class="main">
2-
<header class="top">
3-
<div class="logo">#Fittable</div>
4-
<aside class="top-right-bar">
5-
<img class="top-button" src="../assets//icons//npmjs.svg" alt="npmjs" title="npmjs" (click)="onNpmJs()" />
6-
<img class="top-button" src="../assets//icons//github.svg" alt="GitHub" title="GitHub" (click)="onGitHub()" />
7-
<img class="top-button" src="../assets//icons//e-mail.svg" alt="Contact" title="mailto:ionut.kosteea@gmail.com"
8-
(click)="onContact()" />
9-
</aside>
1+
<div class="content">
2+
<header class="header">
3+
<p-toolbar>
4+
<div class="p-toolbar-group-start">
5+
<p-button class="hamburger" icon="pi pi-bars" (onClick)="onHamburgerClick()"></p-button>
6+
<div class="logo">#Fittable</div>
7+
</div>
8+
<aside class="p-toolbar-group-end">
9+
<p-button styleClass="p-button-rounded p-button-secondary p-button-outlined" title="npmjs" (click)="onNpmJs()">
10+
<img alt="npmjs" src="../assets/icons/npmjs.svg" />
11+
</p-button>
12+
<p-button styleClass="p-button-rounded p-button-secondary p-button-outlined" title="GitHub"
13+
(click)="onGitHub()">
14+
<img alt="GitHub" src="../assets/icons/github.svg" />
15+
</p-button>
16+
<p-button styleClass="p-button-rounded p-button-secondary p-button-outlined"
17+
title="mailto:ionut.kosteea@gmail.com" (click)="onContact()">
18+
<img alt="Contact" src="../assets/icons/e-mail.svg" />
19+
</p-button>
20+
</aside>
21+
</p-toolbar>
1022
</header>
11-
<nav class="navigation">
12-
<navigation-tree [clickedLeaf$]="activeContent$"></navigation-tree>
23+
<nav class="navigation-tree navigation">
24+
<navigation-tree [treeSelection$]="activeTopic$"></navigation-tree>
1325
</nav>
14-
<main #content class="content">
15-
<section *ngIf="activeContent==='Introduction'">
26+
<main #topic class="topic">
27+
<section *ngIf="activeTopic==='Introduction'">
1628
<introduction></introduction>
1729
</section>
18-
<section *ngIf="activeContent==='Playground'">
30+
<section *ngIf="activeTopic==='Playground'">
1931
<playground></playground>
2032
</section>
21-
<section *ngIf="activeContent==='Architecture'">
33+
<section *ngIf="activeTopic==='Architecture'">
2234
<architecture></architecture>
2335
</section>
24-
<section *ngIf="activeContent==='Installation'">
36+
<section *ngIf="activeTopic==='Installation'">
2537
<installation></installation>
2638
</section>
27-
<section *ngIf="activeContent==='Row height'"><row-height></row-height></section>
28-
<section *ngIf="activeContent==='Column width'"><column-width></column-width></section>
29-
<section *ngIf="activeContent==='Cell value'"><cell-value></cell-value></section>
30-
<section *ngIf="activeContent==='Cell style'"><cell-style></cell-style></section>
31-
<section *ngIf="activeContent==='Cell merge'"><cell-merge></cell-merge></section>
32-
<section *ngIf="activeContent==='Table DTO'"><table-dto></table-dto></section>
33-
<section *ngIf="activeContent==='Custom table'"><custom-table></custom-table></section>
34-
<section *ngIf="activeContent==='Update style'"><update-style></update-style></section>
35-
<section *ngIf="activeContent==='Paint format'"><paint-format></paint-format></section>
36-
<section *ngIf="activeContent==='Resize rows'"><resize-rows></resize-rows></section>
37-
<section *ngIf="activeContent==='Insert rows above'"><insert-rows-above></insert-rows-above></section>
38-
<section *ngIf="activeContent==='Insert rows below'"><insert-rows-below></insert-rows-below></section>
39-
<section *ngIf="activeContent==='Remove rows'"><remove-rows></remove-rows></section>
40-
<section *ngIf="activeContent==='Resize columns'"><resize-columns></resize-columns></section>
41-
<section *ngIf="activeContent==='Insert columns left'"><insert-columns-left></insert-columns-left></section>
42-
<section *ngIf="activeContent==='Insert columns right'"><insert-columns-right></insert-columns-right></section>
43-
<section *ngIf="activeContent==='Remove columns'"><remove-columns></remove-columns></section>
44-
<section *ngIf="activeContent==='Clear cells'"><clear-cells></clear-cells></section>
45-
<section *ngIf="activeContent==='Cell values'"><cell-values></cell-values></section>
46-
<section *ngIf="activeContent==='Remove cells'"><remove-cells></remove-cells></section>
47-
<section *ngIf="activeContent==='Cut / Paste cells'"><cut-paste-cells></cut-paste-cells></section>
48-
<section *ngIf="activeContent==='Copy / Paste cells'"><copy-paste-cells></copy-paste-cells></section>
49-
<section *ngIf="activeContent==='Merge cells'"><merge-cells></merge-cells></section>
50-
<section *ngIf="activeContent==='Unmerge cells'"><unmerge-cells></unmerge-cells></section>
51-
<section *ngIf="activeContent==='Operation DTO'"><operation-dto></operation-dto></section>
52-
<section *ngIf="activeContent==='Custom operation'"><custom-operation></custom-operation></section>
53-
<section *ngIf="activeContent==='Table interoperability'"><table-interoperability></table-interoperability>
39+
<section *ngIf="activeTopic==='Row height'"><row-height></row-height></section>
40+
<section *ngIf="activeTopic==='Column width'"><column-width></column-width></section>
41+
<section *ngIf="activeTopic==='Cell value'"><cell-value></cell-value></section>
42+
<section *ngIf="activeTopic==='Cell style'"><cell-style></cell-style></section>
43+
<section *ngIf="activeTopic==='Cell merge'"><cell-merge></cell-merge></section>
44+
<section *ngIf="activeTopic==='Table DTO'"><table-dto></table-dto></section>
45+
<section *ngIf="activeTopic==='Custom table'"><custom-table></custom-table></section>
46+
<section *ngIf="activeTopic==='Update style'"><update-style></update-style></section>
47+
<section *ngIf="activeTopic==='Paint format'"><paint-format></paint-format></section>
48+
<section *ngIf="activeTopic==='Resize rows'"><resize-rows></resize-rows></section>
49+
<section *ngIf="activeTopic==='Insert rows above'"><insert-rows-above></insert-rows-above></section>
50+
<section *ngIf="activeTopic==='Insert rows below'"><insert-rows-below></insert-rows-below></section>
51+
<section *ngIf="activeTopic==='Remove rows'"><remove-rows></remove-rows></section>
52+
<section *ngIf="activeTopic==='Resize columns'"><resize-columns></resize-columns></section>
53+
<section *ngIf="activeTopic==='Insert columns left'"><insert-columns-left></insert-columns-left></section>
54+
<section *ngIf="activeTopic==='Insert columns right'"><insert-columns-right></insert-columns-right></section>
55+
<section *ngIf="activeTopic==='Remove columns'"><remove-columns></remove-columns></section>
56+
<section *ngIf="activeTopic==='Clear cells'"><clear-cells></clear-cells></section>
57+
<section *ngIf="activeTopic==='Cell values'"><cell-values></cell-values></section>
58+
<section *ngIf="activeTopic==='Remove cells'"><remove-cells></remove-cells></section>
59+
<section *ngIf="activeTopic==='Cut / Paste cells'"><cut-paste-cells></cut-paste-cells></section>
60+
<section *ngIf="activeTopic==='Copy / Paste cells'"><copy-paste-cells></copy-paste-cells></section>
61+
<section *ngIf="activeTopic==='Merge cells'"><merge-cells></merge-cells></section>
62+
<section *ngIf="activeTopic==='Unmerge cells'"><unmerge-cells></unmerge-cells></section>
63+
<section *ngIf="activeTopic==='Operation DTO'"><operation-dto></operation-dto></section>
64+
<section *ngIf="activeTopic==='Custom operation'"><custom-operation></custom-operation></section>
65+
<section *ngIf="activeTopic==='Table interoperability'"><table-interoperability></table-interoperability>
5466
</section>
55-
<section *ngIf="activeContent==='Row header'"><row-header></row-header></section>
56-
<section *ngIf="activeContent==='Column header'"><column-header></column-header></section>
57-
<section *ngIf="activeContent==='Row heights'"><row-heights></row-heights></section>
58-
<section *ngIf="activeContent==='Column widths'"><column-widths></column-widths></section>
59-
<section *ngIf="activeContent==='Column filters (1/2)'"><column-filters></column-filters></section>
60-
<section *ngIf="activeContent==='Column filters (2/2)'"><column-filter-executor></column-filter-executor>
67+
<section *ngIf="activeTopic==='Row header'"><row-header></row-header></section>
68+
<section *ngIf="activeTopic==='Column header'"><column-header></column-header></section>
69+
<section *ngIf="activeTopic==='Row heights'"><row-heights></row-heights></section>
70+
<section *ngIf="activeTopic==='Column widths'"><column-widths></column-widths></section>
71+
<section *ngIf="activeTopic==='Column filters (1/2)'"><column-filters></column-filters></section>
72+
<section *ngIf="activeTopic==='Column filters (2/2)'"><column-filter-executor></column-filter-executor>
6173
</section>
62-
<section *ngIf="activeContent==='Table scroller'"><table-scroller></table-scroller></section>
63-
<section *ngIf="activeContent==='Cell selection'"><cell-selection></cell-selection></section>
64-
<section *ngIf="activeContent==='Cell editor'"><cell-editor></cell-editor></section>
65-
<section *ngIf="activeContent==='Language dictionary'"><language-dictionary></language-dictionary></section>
66-
<section *ngIf="activeContent==='Image registry'"><image-registry></image-registry></section>
67-
<section *ngIf="activeContent==='Theme switcher'"><theme-switcher></theme-switcher></section>
68-
<section *ngIf="activeContent==='Settings bar'"><settings-bar></settings-bar></section>
69-
<section *ngIf="activeContent==='Toolbar'">
74+
<section *ngIf="activeTopic==='Table scroller'"><table-scroller></table-scroller></section>
75+
<section *ngIf="activeTopic==='Cell selection'"><cell-selection></cell-selection></section>
76+
<section *ngIf="activeTopic==='Cell editor'"><cell-editor></cell-editor></section>
77+
<section *ngIf="activeTopic==='Language dictionary'"><language-dictionary></language-dictionary></section>
78+
<section *ngIf="activeTopic==='Image registry'"><image-registry></image-registry></section>
79+
<section *ngIf="activeTopic==='Theme switcher'"><theme-switcher></theme-switcher></section>
80+
<section *ngIf="activeTopic==='Settings bar'"><settings-bar></settings-bar></section>
81+
<section *ngIf="activeTopic==='Toolbar'">
7082
<toolbar></toolbar>
7183
</section>
72-
<section *ngIf="activeContent==='Context menu'"><context-menu></context-menu></section>
73-
<section *ngIf="activeContent==='Statusbar'">
84+
<section *ngIf="activeTopic==='Context menu'"><context-menu></context-menu></section>
85+
<section *ngIf="activeTopic==='Statusbar'">
7486
<statusbar></statusbar>
7587
</section>
76-
<section *ngIf="activeContent==='Custom view model'"><custom-view-model></custom-view-model></section>
77-
<section *ngIf="activeContent==='Custom view'"><custom-view></custom-view></section>
88+
<section *ngIf="activeTopic==='Custom view model'"><custom-view-model></custom-view-model></section>
89+
<section *ngIf="activeTopic==='Custom view'"><custom-view></custom-view></section>
7890
</main>
91+
<p-sidebar [(visible)]="showSidebar" [style]="{width:'300px'}">
92+
<div class="navigation-tree">
93+
<navigation-tree [treeSelection$]="activeTopic$"></navigation-tree>
94+
</div>
95+
</p-sidebar>
7996
</div>

‎angular-app/ngx-fittable-docs/src/app/app.component.ts

+14-7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
OnInit,
77
ViewChild,
88
} from '@angular/core';
9+
import { TreeNode } from 'primeng/api';
910

1011
import { TopicTitle } from './common/topic-title.model';
1112

@@ -15,21 +16,27 @@ import { TopicTitle } from './common/topic-title.model';
1516
styleUrls: ['./app.component.css'],
1617
})
1718
export class AppComponent implements OnInit, OnDestroy {
18-
public readonly activeContent$: Subject<TopicTitle> = new Subject();
19-
public activeContent: TopicTitle = 'Introduction';
19+
public readonly activeTopic$: Subject<TreeNode<TopicTitle>> = new Subject();
20+
public activeTopic: TopicTitle = 'Introduction';
21+
public showSidebar = false;
2022
private subscription?: Subscription;
2123

22-
@ViewChild('content') htmlContent!: ElementRef;
24+
@ViewChild('topic') htmlTopic!: ElementRef;
2325

2426
public ngOnInit(): void {
25-
this.subscription = this.activeContent$.subscribe(
26-
(content: TopicTitle): void => {
27-
this.activeContent = content;
28-
this.htmlContent.nativeElement.scrollTop = 0;
27+
this.subscription = this.activeTopic$.subscribe(
28+
(title: TreeNode<TopicTitle>): void => {
29+
this.activeTopic = title.label as TopicTitle;
30+
this.htmlTopic.nativeElement.scrollTop = 0;
31+
if (this.showSidebar) this.showSidebar = false;
2932
}
3033
);
3134
}
3235

36+
public onHamburgerClick(): void {
37+
this.showSidebar = !this.showSidebar;
38+
}
39+
3340
public onNpmJs(): void {
3441
window.open('https://www.npmjs.com/package/fittable-angular', '_blank');
3542
}

‎angular-app/ngx-fittable-docs/src/app/app.module.ts

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4+
5+
import { ToolbarModule } from 'primeng/toolbar';
6+
import { ButtonModule } from 'primeng/button';
7+
import { TreeModule } from 'primeng/tree';
8+
import { SidebarModule } from 'primeng/sidebar';
39

410
import { FittableModule } from 'fittable-angular';
511

@@ -115,7 +121,15 @@ import { CustomStatusbarComponent } from './topics/table-designer/custom-view/cu
115121
CustomToolbarComponent,
116122
CustomStatusbarComponent,
117123
],
118-
imports: [BrowserModule, FittableModule],
124+
imports: [
125+
BrowserModule,
126+
BrowserAnimationsModule,
127+
ToolbarModule,
128+
ButtonModule,
129+
TreeModule,
130+
SidebarModule,
131+
FittableModule,
132+
],
119133
providers: [],
120134
bootstrap: [AppComponent],
121135
})

0 commit comments

Comments
 (0)