Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New frontend UX design #246

Open
wants to merge 58 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
4f02d56
Update peer dependencies & use pnpm as package manager
Matthbo Oct 14, 2024
71cac5d
Remake app component
Matthbo Oct 14, 2024
540b23e
Add angular-component as file dependency & expand app layout
Matthbo Oct 15, 2024
d1ad591
Favicons, improve layout styling & basis for home page
Matthbo Oct 16, 2024
62a7860
Signals!
Matthbo Oct 17, 2024
3d0ca87
Improve home component layout and functionality
Matthbo Oct 18, 2024
42d0847
Working weighted search
Matthbo Oct 22, 2024
be0b5ac
Add basics of index page
Matthbo Oct 22, 2024
768a25e
Filter creation & assignments, index page improvements
Matthbo Oct 23, 2024
7725896
Improve ff-chips & index page styling
Matthbo Oct 24, 2024
ef874f5
Unfinished parts of filter menu on homepage
Matthbo Oct 25, 2024
184715f
Homepage filter improvements
Matthbo Oct 29, 2024
da699af
Add basics of details page
Matthbo Oct 29, 2024
136c907
Various pages are improved
Matthbo Oct 30, 2024
464b2f9
Improve routing, get element on details page
Matthbo Nov 1, 2024
9f91d4b
Add old url scheme, improve finding element & add component options
Matthbo Nov 4, 2024
2a6fd8a
A mess to try and get javadoc description properly working
Matthbo Nov 5, 2024
f429ee7
Trying to get structural directive working
Matthbo Nov 5, 2024
6932307
Better way of handling javadoc text
Matthbo Nov 6, 2024
987711f
Fix element description updating when navigating from previous element
Matthbo Nov 7, 2024
475c4df
Improve element description & component options styling
Matthbo Nov 8, 2024
eda02eb
sub option title styling
Matthbo Nov 8, 2024
0e35e09
fix overflow & word-wrapping on smaller screens
Matthbo Nov 22, 2024
6b609b1
Add collapse-directive to handle collapse & expand styling & animation
Matthbo Nov 22, 2024
750cf6e
Add collapse-directive to handle collapse & expand styling & animation
Matthbo Nov 25, 2024
c018154
Preparations to figure out toggling label filters
Matthbo Nov 25, 2024
20afcd1
Fix toggling labels
Matthbo Nov 26, 2024
c938aaa
Add proper filtering in home view
Matthbo Nov 27, 2024
547340f
Add list of selected filters for the user to see and remove
Matthbo Nov 28, 2024
9288aea
Improve selected filter close button styling
Matthbo Nov 28, 2024
8070628
Preparations of handling inherited properties
Matthbo Nov 28, 2024
63b50be
Forward implementation of inherited properties
Matthbo Nov 29, 2024
4f6786a
Display inherited properties
Matthbo Dec 3, 2024
6228e0c
Better displaying of component options
Matthbo Dec 4, 2024
36f5974
Improve styling for side-navigation
Matthbo Dec 4, 2024
9e1499c
Improve collapsables
Matthbo Dec 5, 2024
4c14ddf
Implement scroll to element for details right sidebar
Matthbo Dec 10, 2024
9a7fa5d
Detail page functional search
Matthbo Dec 10, 2024
704fd07
Improve details page search sidebar styling
Matthbo Dec 11, 2024
ba03d95
Various function and styling improvements
Matthbo Dec 11, 2024
bfc9627
More icons and style improvements
Matthbo Dec 12, 2024
ad7d5b2
Consistent colour & style of links on details page
Matthbo Dec 12, 2024
da2eef2
Add environment toggles for unfinished features
Matthbo Dec 12, 2024
be37408
Update pom & github checks
Matthbo Dec 12, 2024
1f5c850
Feedback smile button & copy syntax button
Matthbo Dec 12, 2024
b06261a
Improve directives based on feedback
Matthbo Dec 17, 2024
554156b
Improve details page & index page (now with colours)
Matthbo Dec 17, 2024
b3f7f28
Fix maven-build indentation
Matthbo Dec 17, 2024
649eeb4
Attempt to get pnpm working on github
Matthbo Dec 17, 2024
b16c782
Add variables for common styling colours
Matthbo Dec 18, 2024
7438235
Fix & improve various things
Matthbo Dec 18, 2024
0b54015
Fix angular-ci.yml
Matthbo Dec 18, 2024
5c4d4c5
Fix tests
Matthbo Dec 18, 2024
485ac19
refactor: simplify Maven build
philipsens Dec 18, 2024
9398a92
refactor: split testing doclet
philipsens Dec 18, 2024
92e5482
fix: pnpm in ci
philipsens Dec 18, 2024
dc4790d
Replace styleColours map for css variables
Matthbo Dec 19, 2024
954a5ac
Add easing on collapse-expand animation
Matthbo Dec 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Filter creation & assignments, index page improvements
  • Loading branch information
Matthbo committed Dec 17, 2024
commit 768a25e3ac475655c203036d8cb41e098b89f39b
4 changes: 3 additions & 1 deletion frank-doc-frontend/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -20,11 +20,13 @@ module.exports = {
rules: {
'prefer-template': 'error',
'@typescript-eslint/explicit-function-return-type': 'error',
'unicorn/prevent-abbreviations': 'warn',
// 'unicorn/prevent-abbreviations': 'warn',
'unicorn/prevent-abbreviations': 'off', // doesn't work well with FrankDoc type name
'unicorn/no-array-reduce': 'off',
'unicorn/prefer-ternary': 'warn',
'unicorn/no-null': 'off',
'unicorn/prefer-dom-node-text-content': 'warn',
'unicorn/consistent-function-scoping': 'off', // doesn't work well with Signals
},
},
{
35 changes: 33 additions & 2 deletions frank-doc-frontend/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -3,8 +3,9 @@ import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { RouterOutlet } from '@angular/router';
import { AlertComponent } from '@frankframework/angular-components';
import { AppService } from './app.service';
import { AppService, Filter } from './app.service';
import { HttpErrorResponse } from '@angular/common/http';
import { Element, Label } from './frankdoc.types';

@Component({
selector: 'app-root',
@@ -14,7 +15,6 @@ import { HttpErrorResponse } from '@angular/common/http';
styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
// eslint-disable-next-line unicorn/consistent-function-scoping
protected version: Signal<string> = computed(() => this.appService.frankDoc()?.metadata.version ?? 'unknown');
protected error: string | null = null;

@@ -24,10 +24,41 @@ export class AppComponent implements OnInit {
this.appService.getFrankDoc().subscribe({
next: (data) => {
this.appService.frankDoc.set(data);
const filters = this.getFiltersFromLabels(data.labels);
this.assignFrankDocElementsToFilters(filters, data.elements);
this.appService.filters.set(filters);
},
error: (error: HttpErrorResponse) => {
this.error = `Couldn't retrieve FrankDoc file: ${error.statusText}`;
},
});
}

private getFiltersFromLabels(labels: Label[]): Filter[] {
return labels.map((filter) => ({
name: filter.label,
labels: filter.values.map((labelName) => ({
name: labelName,
elements: [],
})),
}));
}

private assignFrankDocElementsToFilters(filters: Filter[], elements: Record<string, Element>): void {
for (const element of Object.values(elements)) {
if (!element.labels) continue;

for (const elementFilterName in element.labels) {
const elementFilter = element.labels[elementFilterName];
const filter = filters.find((filter) => filter.name === elementFilterName);

if (!filter) continue;
for (const elementLabel of elementFilter) {
const label = filter.labels.find((label) => label.name === elementLabel);
if (!label) continue;
label.elements.push(element.name);
}
}
}
}
}
19 changes: 2 additions & 17 deletions frank-doc-frontend/src/app/app.service.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import { computed, Injectable, Signal, signal, WritableSignal } from '@angular/core';
import { Injectable, signal, WritableSignal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
// eslint-disable-next-line unicorn/prevent-abbreviations
import { FrankDoc } from './frankdoc.types';

export type ReferenceOptions = {
darkmode: boolean;
};

export type Filter = {
name: string;
labels: FilterLabels[];
@@ -24,18 +19,8 @@ export type FilterLabels = {
})
export class AppService {
readonly frankDoc: WritableSignal<FrankDoc | null> = signal(null);
readonly filters: WritableSignal<Filter[]> = signal([]);
readonly darkmode: WritableSignal<boolean> = signal(false);
readonly filters: Signal<Filter[]> = computed(
// eslint-disable-next-line unicorn/consistent-function-scoping
() =>
this.frankDoc()?.labels.map((category) => ({
name: category.label,
labels: category.values.map((labelName) => ({
name: labelName,
elements: [],
})),
})) ?? [],
);

constructor(private http: HttpClient) {}

1 change: 0 additions & 1 deletion frank-doc-frontend/src/app/frankdoc.types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// eslint-disable-next-line unicorn/prevent-abbreviations
export interface FrankDoc {
metadata: Metadata;
types: TypeElement[];
4 changes: 0 additions & 4 deletions frank-doc-frontend/src/app/views/home/home.component.ts
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import { ButtonComponent, SearchComponent } from '@frankframework/angular-compon
import { FormsModule } from '@angular/forms';
import { HomeComponentListComponent } from './home-component-list/home-component-list.component';
import { AppService } from '../../app.service';
// eslint-disable-next-line unicorn/prevent-abbreviations
import { FrankDoc, Element } from '../../frankdoc.types';
import Fuse, { FuseResult } from 'fuse.js';

@@ -17,15 +16,12 @@ import Fuse, { FuseResult } from 'fuse.js';
export class HomeComponent {
protected searchQuery = '';
protected readonly elements: Signal<FrankDoc['elements']> = computed(
// eslint-disable-next-line unicorn/consistent-function-scoping
() => this.appService.frankDoc()?.elements ?? {},
);
protected filteredElements: FuseResult<Element>[] = [];

// eslint-disable-next-line unicorn/consistent-function-scoping
private readonly elementsList: Signal<Element[]> = computed(() => Object.values(this.elements()));
private readonly fuse: Signal<Fuse<Element>> = computed(
// eslint-disable-next-line unicorn/consistent-function-scoping
() =>
new Fuse(this.elementsList(), {
keys: [
20 changes: 18 additions & 2 deletions frank-doc-frontend/src/app/views/index/index.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="page-container">
<div class="sidenav">
@for (filter of filters; track filter.name) {
<span class="filter">{{ filter.name }}</span>
@for (filter of filters(); track filter.name) {
<span class="filter-name">{{ filter.name }} ({{ filter.labels.length }})</span>
<ul>
@for (label of filter.labels; track label.name) {
<li>{{ label.name }} ({{ label.elements.length }})</li>
@@ -18,5 +18,21 @@ <h2>Index</h2>
here. Maybe some explanation on how the page works or how the items are organized. To fill some more space I'll
repeat this once again just so I don't have to lorum ipsum.
</p>

@for (filter of filters(); track filter.name) {
<div class="filter-container">
<h3>{{ filter.name }}</h3>
@for (label of filter.labels; track label.name) {
<div class="label-container">
<h4>{{ label.name }}</h4>
<div class="elements">
@for (element of label.elements; track element) {
<a [routerLink]="['/', label.name, element]"><ff-chip colour="#CD55EB">C</ff-chip> {{ element }}</a>
}
</div>
</div>
}
</div>
}
</div>
</div>
89 changes: 88 additions & 1 deletion frank-doc-frontend/src/app/views/index/index.component.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,99 @@
.page-container {
display: flex;
max-width: 100%;
margin: 0 50px;

.sidenav {
width: 286px;
}

.page {
flex: 1;
width: 100%;
flex: 1 1 auto;
}
}

.sidenav {
padding: 20px 0;
border-image: linear-gradient(180deg, #fff 0%, #EDEDED 5%) 1;
border-width: 0 1px 0 0;
border-style: solid;

.filter-name {
margin-bottom: 5px;
color: #1E1E1E;
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
}

ul {
padding: 0 13px;
list-style: none;
margin-bottom: 25px;

li {
margin: 5px 0;
color: #1E1E1E;
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
}
}
}


.page {
padding: 20px 50px;

h2 {
margin-bottom: 10px;
color: #1E1E1E;
font-size: 50px;
font-weight: 700;
line-height: 0.9;
}

.description {
max-width: 900px;
color: #626262;
font-size: 16px;
font-weight: 400;
}

.filter-container {
margin-top: 50px;

h3 {
color: #1E1E1E;
font-size: 32px;
font-weight: 600;
}

.label-container {
margin: 25px 0;

h4 {
margin-bottom: 15px;
color: #1E1E1E;
font-size: 24px;
font-weight: 600;
}

.elements {
display: flex;
flex-wrap: wrap;
column-gap: 50px;

a {
display: inline-block;
width: 225px;
color: #1E1E1E;
font-size: 16px;
text-transform: capitalize;
text-decoration: none;
}
}
}
}
}
16 changes: 6 additions & 10 deletions frank-doc-frontend/src/app/views/index/index.component.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { Component, computed, Signal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { AppService, Filter } from '../../app.service';
import { ChipComponent } from '@frankframework/angular-components';

@Component({
selector: 'app-index',
standalone: true,
imports: [],
imports: [RouterLink, ChipComponent],
templateUrl: './index.component.html',
styleUrl: './index.component.scss',
})
export class IndexComponent implements OnInit {
protected filters: Filter[] = this.appService.filters();
export class IndexComponent {
protected filters: Signal<Filter[]> = computed(() => this.appService.filters());
constructor(private appService: AppService) {}

ngOnInit(): void {
setTimeout(() => {
console.log(this.filters);
});
}
}
2 changes: 0 additions & 2 deletions frank-doc-frontend/src/environments/environment.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
export const environment = {
showDeprecatedElements: false,
showInheritance: true,
xsdUrl: 'xml/xsd/FrankConfig.xsd',
javadocBaseUrl: 'https://javadoc.frankframework.org',
frankDocUrl: 'js/frankdoc.json',