New frontend UX design #246

Matthbo · 2024-12-12T14:11:53Z

Based on the FF!Reference design guide & angular components library

philipsens · 2024-12-13T15:04:59Z

frank-doc-frontend/src/app/components/collapse.directive.ts

+  collapseElement(): void {
+    this.collapse.style.overflowY = 'hidden';
+    this.collapse
+      .animate({ height: [`${this.collapse.clientHeight}px`, '0px'] }, this.animationSpeed)
+      .finished.then(() => {
+        this.collapse.style.height = '0px';
+        this.collapse.style.overflowY = '';
+        this.collapse.style.overflow = 'hidden';
+      });
+  }
+
+  expandElement(): void {
+    this.collapse.style.height = '';
+    this.collapse.style.overflowY = 'hidden';
+    this.collapse
+      .animate({ height: ['0px', `${this.collapse.clientHeight}px`] }, this.animationSpeed)
+      .finished.then(() => {
+        this.collapse.removeAttribute('style');
+      });
+  }


Why this way instead of adding and removing classes?
classList.add('collapsed') -> classList.remove('collapsed')

Is it possible to cancel the animation if it is uncollapsed/collapsed rapidly?

philipsens · 2024-12-13T15:07:22Z

frank-doc-frontend/src/app/components/header/header.component.html

+  </nav>
+  <div class="actions">
+    <button class="switch-theme-button" title="Dark/light Mode">
+      <app-icon-darkmode width="20" height="20" colour="#8A8A8A"></app-icon-darkmode>


It might be smart to create vars for colors, to make then reusable and easy to change.
This would also apply to the colors in the CSS itself.

philipsens · 2024-12-13T15:11:10Z

frank-doc-frontend/src/app/components/javadoc-transform.directive.ts

+  private templateRef: TemplateRef<TemplateContext> = inject(TemplateRef);
+  private viewContainerRef: ViewContainerRef = inject(ViewContainerRef);
+  private appService: AppService = inject(AppService);
+
+  private markdownLinkRegex = /\[(.*?)]\((.+?)\)/g; // old regex: /\[(.*?)\]\((.+?)\)/g
+  private tagsRegex = /<[^>]*>?/gm;
+  private linkRegex = /(?:{@link\s(.*?)})/g;


Suggested change

private templateRef: TemplateRef<TemplateContext> = inject(TemplateRef);

private viewContainerRef: ViewContainerRef = inject(ViewContainerRef);

private appService: AppService = inject(AppService);

private markdownLinkRegex = /\[(.*?)]$(.+?)$/g; // old regex: /\[(.*?)\]$(.+?)$/g

private tagsRegex = /<[^>]*>?/gm;

private linkRegex = /(?:{@link\s(.*?)})/g;

private readonly templateRef: TemplateRef<TemplateContext> = inject(TemplateRef);

private readonly viewContainerRef: ViewContainerRef = inject(ViewContainerRef);

private readonly appService: AppService = inject(AppService);

private readonly markdownLinkRegex = /\[(.*?)]$(.+?)$/g; // old regex: /\[(.*?)\]$(.+?)$/g

private readonly tagsRegex = /<[^>]*>?/gm;

private readonly linkRegex = /(?:{@link\s(.*?)})/g;

It could be good practice to make stuff like this readonly.

philipsens · 2024-12-13T15:52:32Z

frank-doc-frontend/src/app/views/details/details-element/details-element.component.ts

+  private generateElementSyntax(): void {
+    if (this.element) {
+      this.elementSyntax = `
+<${this.element.name} name=”my-${this.element.name.toLowerCase()}” />


Suggested change

<${this.element.name} name=”my-${this.element.name.toLowerCase()}” />

<${this.element.name} name="my-${this.element.name.toLowerCase()}" />

philipsens · 2024-12-13T15:58:28Z

frank-doc-frontend/src/app/views/home/home-component-list/home-component-list.component.html

+          getFirstLabel(component.item.labels),
+          component.item.name,
+        ]"
+        >-></ff-button


Suggested change

>-></ff-button

>→</ff-button

:D

This is a nice character to use instead of 2, but according to another comment you would rather have an html entity, I assume. I found this → (→) as possible option but maybe you can find a better one?

Oh, you are completely right. It might be best to even use a real icon for this.

philipsens · 2024-12-13T15:58:50Z

frank-doc-frontend/src/app/views/home/home-component-list/home-component-list.component.html

+      >
+    </div>
+  } @empty {
+    <p>No Frank!Elements found.</p>


Die naam D:

philipsens · 2024-12-13T15:59:37Z

frank-doc-frontend/src/app/views/home/home-filters/home-filters.component.html

+  @for (selectedFilter of selectedFilterGroup.value; track selectedFilter; let index = $index) {
+    <span class="selected-filter"
+      ><span>{{ selectedFilter }}</span
+      ><span class="close-button" (click)="removeSelectedFilterLabel(selectedFilterGroup.key, index)">x</span></span


Suggested change

>x×</span

Maybe?

Is these a difference character x and ×? I compared them and see no visual difference so what would be the benefit?

I thought the one looked more like a cross. (× vs x)

philipsens · 2024-12-13T16:02:32Z

frank-doc-frontend/src/app/views/home/home-filters/init-filter-toggle.directive.ts

+  private checkbox: CheckboxComponent = inject(CheckboxComponent);
+
+  ngOnChanges(): void {
+    this.checkbox.checked = this.selectedFilterLabels[this.initFilterName]?.includes(this.initLabelName) ?? false;


Suggested change

this.checkbox.checked = this.selectedFilterLabels[this.initFilterName]?.includes(this.initLabelName) ?? false;

this.checkbox.checked = !!this.selectedFilterLabels[this.initFilterName]?.includes(this.initLabelName);

philipsens · 2024-12-13T16:39:14Z

frank-doc-frontend/src/app/views/details/details-element/details-element.component.html

+  <div class="section syntax">
+    <h3>Syntax</h3>
+    <pre><button (click)="copyToClipboard(elementSyntax)">Copy</button><code [innerText]="elementSyntax"
+    >&lt;{{element.name}} name=”my-test-pipe” version=”1” /&gt;</code


Suggested change

><{{element.name}} name=”my-test-pipe” version=”1” /></code

><{{element.name}} name="my-test-pipe" version="1" /></code

philipsens · 2024-12-18T10:33:12Z

frank-doc-frontend/src/app/app.service.ts

+    if (!labels) return '-';
+    const labelGroups = Object.keys(labels);
+    if (labelGroups.length === 0) return '-';
+    return labelGroups[0];
  }

-  copyOf<T>(
-    baseAttributes: T[] | undefined,
-    mergeAttributes: T[] | undefined,
-    fieldName: keyof T
-  ): T[] | null {
-    if (baseAttributes && !mergeAttributes) return baseAttributes;
-    else if (mergeAttributes && !baseAttributes) return mergeAttributes;
-    else if (!baseAttributes && !mergeAttributes) return null;
+  getFirstLabel(labels?: Record<string, string[]>): string {
+    if (!labels) return '-';
+    const labelGroups = Object.keys(labels);
+    if (labelGroups.length === 0) return '-';


It might be clearer to what the '-' is if it was a constant.
if (!labels) return this.NO_RESULTS_CHARACTER; or something along those lines.

Matthbo added the frontend label Dec 12, 2024

Matthbo self-assigned this Dec 12, 2024

Matthbo linked an issue Dec 12, 2024 that may be closed by this pull request

Implement new frontend design & frankdoc format #235

Open

2 tasks

Matthbo marked this pull request as ready for review December 12, 2024 15:02

Matthbo requested review from philipsens and nielsm5 December 12, 2024 15:03

philipsens reviewed Dec 13, 2024

View reviewed changes

Matthbo added 21 commits December 17, 2024 18:20

Update peer dependencies & use pnpm as package manager

4f02d56

Remake app component

71cac5d

Add angular-component as file dependency & expand app layout

540b23e

Favicons, improve layout styling & basis for home page

d1ad591

Signals!

62a7860

Improve home component layout and functionality

3d0ca87

Working weighted search

42d0847

Add basics of index page

be0b5ac

Filter creation & assignments, index page improvements

768a25e

Improve ff-chips & index page styling

7725896

Unfinished parts of filter menu on homepage

ef874f5

Homepage filter improvements

184715f

Add basics of details page

da699af

Various pages are improved

136c907

Improve routing, get element on details page

464b2f9

Add old url scheme, improve finding element & add component options

9f91d4b

A mess to try and get javadoc description properly working

2a6fd8a

Trying to get structural directive working

f429ee7

Better way of handling javadoc text

6932307

Fix element description updating when navigating from previous element

987711f

Improve element description & component options styling

475c4df

Matthbo added 27 commits December 17, 2024 18:20

sub option title styling

eda02eb

fix overflow & word-wrapping on smaller screens

0e35e09

Add collapse-directive to handle collapse & expand styling & animation

6b609b1

Add collapse-directive to handle collapse & expand styling & animation

750cf6e

Preparations to figure out toggling label filters

c018154

Fix toggling labels

20afcd1

Add proper filtering in home view

c938aaa

Add list of selected filters for the user to see and remove

547340f

Improve selected filter close button styling

9288aea

Preparations of handling inherited properties

8070628

Forward implementation of inherited properties

63b50be

Display inherited properties

4f6786a

Better displaying of component options

6228e0c

Improve styling for side-navigation

36f5974

Improve collapsables

9e1499c

Implement scroll to element for details right sidebar

4c14ddf

Detail page functional search

9a7fa5d

Improve details page search sidebar styling

704fd07

Various function and styling improvements

ba03d95

More icons and style improvements

bfc9627

Consistent colour & style of links on details page

ad7d5b2

Add environment toggles for unfinished features

da2eef2

Update pom & github checks

be37408

Feedback smile button & copy syntax button

1f5c850

Improve directives based on feedback

b06261a

Improve details page & index page (now with colours)

554156b

Fix maven-build indentation

b3f7f28

Matthbo force-pushed the 235-implement-new-frontend-design-frankdoc-format branch from cc6bdca to b3f7f28 Compare December 17, 2024 17:26

Attempt to get pnpm working on github

649eeb4

philipsens reviewed Dec 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New frontend UX design #246

New frontend UX design #246

Matthbo commented Dec 12, 2024

philipsens Dec 13, 2024 •

edited

Loading

philipsens Dec 13, 2024 •

edited

Loading

philipsens Dec 13, 2024

philipsens Dec 13, 2024

philipsens Dec 13, 2024

Matthbo Dec 17, 2024

philipsens Dec 18, 2024

philipsens Dec 13, 2024

philipsens Dec 13, 2024

Matthbo Dec 17, 2024

philipsens Dec 18, 2024

philipsens Dec 13, 2024

philipsens Dec 13, 2024

philipsens Dec 18, 2024

	<${this.element.name} name=”my-${this.element.name.toLowerCase()}” />
	<${this.element.name} name="my-${this.element.name.toLowerCase()}" />

	><span class="close-button" (click)="removeSelectedFilterLabel(selectedFilterGroup.key, index)">x</span></span
	><span class="close-button" (click)="removeSelectedFilterLabel(selectedFilterGroup.key, index)">×</span></span

	this.checkbox.checked = this.selectedFilterLabels[this.initFilterName]?.includes(this.initLabelName) ?? false;
	this.checkbox.checked = !!this.selectedFilterLabels[this.initFilterName]?.includes(this.initLabelName);

	><{{element.name}} name=”my-test-pipe” version=”1” /></code
	><{{element.name}} name="my-test-pipe" version="1" /></code

New frontend UX design #246

Are you sure you want to change the base?

New frontend UX design #246

Conversation

Matthbo commented Dec 12, 2024

philipsens Dec 13, 2024 • edited Loading

Choose a reason for hiding this comment

philipsens Dec 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

philipsens Dec 13, 2024 •

edited

Loading

philipsens Dec 13, 2024 •

edited

Loading