Feat/split navigation names (#910)

* feat(ui): improve breaking of navigation name * feat(ui): improve layout Taken from #909 by hirth-abi * feat(ui): improve layout (small screens)
springwolf · Aug 16, 2024 · e7eec92 · e7eec92
1 parent 701babf
commit e7eec92
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 24 deletions.
diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css b/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css
@@ -1,4 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
+.table-row > *:first-child {
+  vertical-align: middle;
+}
+
 :host ::ng-deep .mdc-evolution-chip-set__chips {
   max-width: 100%;
 }

diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.css b/springwolf-ui/src/app/components/new/schema/schema.component.css
@@ -12,7 +12,7 @@
 }
 
 .example {
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .attribute {

diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.css b/springwolf-ui/src/app/components/new/schemas/schemas.component.css
@@ -1,4 +1,11 @@
 /* SPDX-License-Identifier: Apache-2.0 */
+.table-row > *:first-child {
+  vertical-align: middle;
+}
+.table-row > *:last-child {
+  word-break: break-word;
+}
+
 .type-badge {
   display: inline;
   background-color: #e0e0e0;

diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css
@@ -27,8 +27,8 @@ a {
   font-size: smaller;
 
   border-radius: 0.3em;
-  padding: 0 0.1em;
-  margin: 0 0 auto 0;
+  padding: 0 0.2em;
+  margin: 0.2em 0.3em auto 0.3em;
 }
 .sidenav .badge.send-badge {
   color: var(--springwolf-badge-color-send);

diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html
@@ -11,7 +11,7 @@
           <mat-icon *ngIf="link.icon" fontIcon="{{ link.icon }}" />
           <b>
             <a [href]="link.href">
-              {{ link.name }}
+              @for (linkEl of link.name; track linkEl) {{{linkEl}}&#x200B;}
             </a>
           </b>
         </span>
@@ -24,7 +24,8 @@
           >
             <span>
               <a [href]="child.href">
-                {{ child.name }}
+                @for (linkEl of child.name; track linkEl)
+                {{{linkEl}}&#x200B;}
               </a>
               @for (childTag of child.tags; track childTag) {
               <span class="badge {{ childTag }}-badge">{{ childTag }}</span>
@@ -41,7 +42,10 @@
                 }"
               >
                 <span>
-                  <a [href]="subchild.href"> {{ subchild.name }}</a>
+                  <a [href]="subchild.href">
+                    @for (linkEl of subchild.name; track linkEl)
+                    {{{linkEl}}&#x200B;}
+                  </a>
 
                   @for (subChildTag of subchild.tags; track subChildTag) {
                   <span class="badge {{ subChildTag }}-badge">{{

diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts
@@ -14,7 +14,7 @@ import { AsyncApiMapperService } from "../../../service/asyncapi/asyncapi-mapper
 import { Location } from "@angular/common";
 
 interface NavigationEntry {
-  name: string;
+  name: string[];
   icon?: string;
   href: string | undefined;
   selected?: boolean;
@@ -47,37 +47,37 @@ export class SidenavComponent implements OnInit, AfterViewInit {
       const newNavigation: NavigationEntry[] = [];
 
       newNavigation.push({
-        name: "Info",
+        name: ["Info"],
         icon: "info",
         href: AsyncApiMapperService.BASE_URL + "info",
       });
 
       const servers: NavigationEntry[] = Array.from(
         asyncapi.servers.keys()
       ).map((key) => ({
-        name: key,
+        name: this.splitForWordBreaking(key),
         href:
           AsyncApiMapperService.BASE_URL +
           asyncapi.servers.get(key)!.anchorIdentifier,
         tags: [asyncapi.servers.get(key)!.protocol],
       }));
       newNavigation.push({
-        name: "Servers",
+        name: ["Servers"],
         icon: "dns",
         href: AsyncApiMapperService.BASE_URL + "servers",
         children: servers,
       });
 
       const channels = {
-        name: "Channels & Operations",
+        name: ["Channels & Operations"],
         icon: "swap_vert",
         href: AsyncApiMapperService.BASE_URL + "channels",
         children: [] as NavigationEntry[],
       };
       asyncapi.channels.forEach((value) => {
         let children = value.operations.map((operation) => {
           return {
-            name: operation.operation.message.title,
+            name: this.splitForWordBreaking(operation.operation.message.title),
             href: AsyncApiMapperService.BASE_URL + operation.anchorIdentifier,
             tags: [operation.operation.operationType],
           };
@@ -87,7 +87,7 @@ export class SidenavComponent implements OnInit, AfterViewInit {
           .flatMap((tags) => tags);
 
         const channel = {
-          name: value.name,
+          name: this.splitForWordBreaking(value.name),
           href: AsyncApiMapperService.BASE_URL + value.anchorIdentifier,
           tags: Array.from(new Set(tags)).sort(),
           children: children,
@@ -98,14 +98,14 @@ export class SidenavComponent implements OnInit, AfterViewInit {
       newNavigation.push(channels);
 
       const schemas = {
-        name: "Schemas",
+        name: ["Schemas"],
         icon: "schema",
         href: AsyncApiMapperService.BASE_URL + "schemas",
         children: [] as NavigationEntry[],
       };
       asyncapi.components.schemas.forEach((value) => {
         schemas.children.push({
-          name: value.title,
+          name: this.splitForWordBreaking(value.title),
           href: AsyncApiMapperService.BASE_URL + "" + value.anchorIdentifier,
         });
       });
@@ -117,6 +117,11 @@ export class SidenavComponent implements OnInit, AfterViewInit {
     });
   }
 
+  private splitForWordBreaking = (text: string) => {
+    // Split by set of characters, but keep separators
+    return text.split(/(?<=[.,-_/])/);
+  };
+
   ngAfterViewInit() {
     this.scrollableElement.nativeElement.addEventListener(
       "scroll",

diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.css b/springwolf-ui/src/app/components/schemas/schema/schema.component.css
@@ -1,6 +1,7 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 .schema {
   font-weight: 500;
+  width: 100%;
 }
 
 .key {
@@ -23,6 +24,7 @@
 .example {
   color: #6b6b6b;
   font-style: italic;
+  word-break: break-word;
 }
 
 .description {

diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.html b/springwolf-ui/src/app/components/schemas/schema/schema.component.html
@@ -3,16 +3,15 @@
   <app-json [data]="schema().example?.rawValue"></app-json>
 </div>
 <p>Properties</p>
+<!--  Primitive types  -->
+<ng-container
+  *ngIf="schema().type !== 'object'"
+  [ngTemplateOutlet]="valueContent"
+  [ngTemplateOutletContext]="{ value: schema() }"
+>
+</ng-container>
 <table class="schema">
   <tbody>
-    <!--  Primitive types  -->
-    <tr *ngIf="schema().type !== 'object'">
-      <ng-container
-        [ngTemplateOutlet]="valueContent"
-        [ngTemplateOutletContext]="{ value: schema() }"
-      >
-      </ng-container>
-    </tr>
     <!--  Objects  -->
     <tr *ngFor="let property of schema().properties || {} | keyvalue">
       <td class="key">

diff --git a/springwolf-ui/src/main.css b/springwolf-ui/src/main.css
@@ -8,7 +8,8 @@ body {
 }
 
 a {
-  word-break: break-all;
+  overflow-wrap: break-word;
+  word-break: break-word;
   max-width: 100%;
 }
 
@@ -227,6 +228,10 @@ a {
   }
 }
 
+.mat-icon {
+  vertical-align: middle;
+}
+
 html {
   --springwolf-badge-color-send: black;
   --springwolf-badge-color-background-send: #ffd580;