Skip to content

Commit

Permalink
Merge pull request #964 from DSD-DBS/feat-redesign-breadcrumbs
Browse files Browse the repository at this point in the history 
feat: Redesign NavBar and Breadcrumbs
  • Loading branch information
@MoritzWeber0
MoritzWeber0 authored Sep 12, 2023
2 parents 74cbc7e + 032be1d commit 34b104e
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 150 deletions.
108 changes: 63 additions & 45 deletions frontend/src/app/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,16 @@ const routes: Routes = [
{
path: '',
component: SessionsComponent,
data: { breadcrumb: 'sessions' },
data: { breadcrumb: 'Sessions' },
},
{
path: 'session',
component: SessionComponent,
data: { breadcrumb: 'session' },
data: { breadcrumb: 'Session Viewer' },
},
{
path: 'projects',
data: { breadcrumb: 'projects' },
data: { breadcrumb: 'Projects' },
children: [
{
path: '',
Expand All @@ -69,14 +69,14 @@ const routes: Routes = [
},
{
path: 'create',
data: { breadcrumb: 'create' },
data: { breadcrumb: 'Create Project' },
component: CreateProjectComponent,
},
],
},
{
path: 'project',
data: { breadcrumb: 'projects', redirect: '/projects' },
data: { breadcrumb: 'Projects', redirect: '/projects' },
children: [
{
path: ':project',
Expand All @@ -88,74 +88,74 @@ const routes: Routes = [
children: [
{
path: '',
data: {
breadcrumb: 'overview',
redirect: (data: Data) => `/project/${data.project?.slug}`,
},
data: { breadcrumb: undefined },
component: ProjectDetailsComponent,
},
{
path: 'metadata',
data: {
breadcrumb: 'metadata',
breadcrumb: 'Configure Project',
redirect: (data: Data) =>
`/project/${data.project?.slug}/metadata`,
},
component: EditProjectMetadataComponent,
},
{
path: 'models',
data: { breadcrumb: 'models' },
children: [
{
path: 'create',
data: { breadcrumb: 'create' },
data: { breadcrumb: 'Create Model' },
component: CreateModelComponent,
},
],
},
{
path: 'model',
data: {
breadcrumb: 'models',
redirect: (data: Data) => `/project/${data.project?.slug}`,
},
children: [
{
path: ':model',
component: ModelWrapperComponent,
data: {
breadcrumb: (data: Data) => data.model?.name,
breadcrumb: (data: Data) => data.model?.slug,
redirect: (data: Data) =>
`/project/${data.project?.slug}`,
},
component: ModelWrapperComponent,

children: [
{
path: 'modelsources',
data: {
breadcrumb: 'model sources',
breadcrumb: 'Model Sources',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}/modelsources`,
},
component: ModelDetailComponent,
},
{
path: 'metadata',
data: { breadcrumb: 'metadata' },
data: {
breadcrumb: 'Configure Model',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}/metadata`,
},
component: ModelDescriptionComponent,
},
{
path: 'restrictions',
data: { breadcrumb: 'restrictions' },
data: {
breadcrumb: 'Restrictions',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}/restrictions`,
},
component: ModelRestrictionsComponent,
},
{
path: 'pipeline',
data: {
breadcrumb: 'pipelines',
breadcrumb: 'Pipelines',
redirect: (data: Data) =>
`/project/${data.project?.slug}`,
`/project/${data.project?.slug}/model/${data.model?.slug}/pipeline/${data.pipeline?.id}/runs`,
},
children: [
{
Expand Down Expand Up @@ -208,21 +208,29 @@ const routes: Routes = [
{
path: 'git-model',
data: {
breadcrumb: 'git models',
breadcrumb: 'Model Sources',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}`,
`/project/${data.project?.slug}/model/${data.model?.slug}/modelsources`,
},
children: [
{
path: 'create',
data: { breadcrumb: 'create' },
data: {
breadcrumb: 'Create Git Model',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}/git-model/create`,
},
component: ManageGitModelComponent,
},
{
path: ':git-model',
data: {
breadcrumb: (data: Data) =>
data.gitModel?.id || '...',
redirect: (data: Data) =>
data.gitModel?.id
? `/project/${data.project?.slug}/model/${data.model?.slug}/git-model/${data.gitModel?.id}`
: undefined,
},
component: ManageGitModelComponent,
},
Expand All @@ -231,29 +239,34 @@ const routes: Routes = [
{
path: 't4c-model',
data: {
breadcrumb: 't4c models',
breadcrumb: 'Model Sources',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}`,
`/project/${data.project?.slug}/model/${data.model?.slug}/modelsources`,
},
children: [
{
path: 'create',
data: { breadcrumb: 'create' },
data: {
breadcrumb: 'Create T4C Model',
redirect: (data: Data) =>
`/project/${data.project?.slug}/model/${data.model?.slug}/t4c-model/create`,
},
component: ManageT4CModelComponent,
},
{
path: ':t4c_model_id',
data: {
breadcrumb: (data: Data) =>
data.t4cModel?.id || '...',
redirect: (data: Data) =>
data.t4cModel?.id
? `/project/${data.project?.slug}/model/${data.model?.slug}/t4c-model/${data.t4cModel?.id}`
: undefined,
},
component: T4CModelWrapperComponent,
children: [
{
path: '',
data: {
breadcrumb: () => 'edit',
},
component: ManageT4CModelComponent,
},
],
Expand All @@ -270,22 +283,21 @@ const routes: Routes = [
},
{
path: 'sessions',
data: { breadcrumb: 'sessions' },
children: [
{
path: '',
component: SessionsComponent,
},
{
path: 'overview',
data: { breadcrumb: 'overview' },
data: { breadcrumb: 'Session Overview' },
component: SessionOverviewComponent,
},
],
},
{
path: 'settings',
data: { breadcrumb: 'settings' },
data: { breadcrumb: 'Settings' },
children: [
{
path: '',
Expand All @@ -298,22 +310,22 @@ const routes: Routes = [
children: [
{
path: 'users',
data: { breadcrumb: 'users' },
data: { breadcrumb: 'Users' },
component: UserSettingsComponent,
},
{
path: 'alerts',
data: { breadcrumb: 'alerts' },
data: { breadcrumb: 'Alerts' },
component: AlertSettingsComponent,
},
{
path: 'pipelines',
data: { breadcrumb: 'pipelines' },
data: { breadcrumb: 'Pipelines' },
component: PipelinesOverviewComponent,
},
{
path: 'tools',
data: { breadcrumb: 'tools' },
data: { breadcrumb: 'Tools' },
children: [
{
path: '',
Expand All @@ -322,18 +334,24 @@ const routes: Routes = [
},
{
path: 'create',
data: { breadcrumb: 'create' },
data: { breadcrumb: 'Create Tool' },
component: ToolDetailsComponent,
},
],
},
{
path: 'tool/:toolID',
data: { breadcrumb: 'tool', redirect: '/settings/core/tools' },
data: { breadcrumb: 'Tools', redirect: '/settings/core/tools' },
children: [
{
path: '',
data: { breadcrumb: (data: Data) => data.tool?.name },
data: {
breadcrumb: (data: Data) => data.tool?.name || '...',
redirect: (data: Data) =>
data.tool?.id
? `/settings/core/tools/${data.tool?.id}`
: undefined,
},
component: ToolDetailsComponent,
},
],
Expand All @@ -346,7 +364,7 @@ const routes: Routes = [
children: [
{
path: 'git',
data: { breadcrumb: 'git' },
data: { breadcrumb: 'Git Instances' },
children: [
{
path: '',
Expand All @@ -364,7 +382,7 @@ const routes: Routes = [
},
{
path: 't4c',
data: { breadcrumb: 'T4C' },
data: { breadcrumb: 'T4C Instances' },
children: [
{
path: '',
Expand Down Expand Up @@ -402,7 +420,7 @@ const routes: Routes = [
},
{
path: 'events',
data: { breadcrumb: 'events' },
data: { breadcrumb: 'Events' },
component: EventsComponent,
},
],
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/app/general/breadcrumbs/breadcrumbs.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@
~ SPDX-License-Identifier: Apache-2.0
-->

<ul>
<ul class="break-all">
/
<li *ngFor="let breadcrumb of breadcrumbService.breadcrumbs | async">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
<a class="rounded-lg hover:bg-zinc-300 p-1" [routerLink]="breadcrumb.url">{{
breadcrumb.label
}}</a>
</li>
</ul>
34 changes: 0 additions & 34 deletions frontend/src/app/general/header/header.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,6 @@
* SPDX-License-Identifier: Apache-2.0
*/

#toolbar {
display: flex;
background-color: #f5f5f5;
justify-content: space-between;
align-items: center;
min-height: 65px;
}

#title {
margin-left: 20px;
user-select: none;
}

#maintitle {
font-size: 1em;
}

#subtitle {
font-size: 1.5em;
}

.breadcrumbs {
margin-left: 20px;
}

#profile {
margin-left: 20px;
margin-right: 15px;
}

.right-aligned {
display: flex;
align-items: center;
}
::ng-deep.mat-menu-panel {
overflow: hidden !important;
}
Expand Down
Loading

0 comments on commit 34b104e

Please sign in to comment.