feat(workflows): ui review

kaleidos-ventures · Sep 29, 2023 · 3e90c35 · 3e90c35
1 parent ee5255d
commit 3e90c35
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 30 deletions.
diff --git a/.../app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.html b/.../app/modules/project/feature-kanban/components/kanban-header/kanban-header.component.html
@@ -21,7 +21,12 @@
   <tg-ui-breadcrumb
     *ngIf="workflows.length > 1"
     [hideLastCrumb]="editStatusFormOpened"
-    [crumbs]="[t('commons.kanban'), t('kanban.workflows'), workflow.name]"
+    [crumbs]="[
+      t('commons.kanban'),
+      t('kanban.workflows').charAt(0).toLocaleUpperCase() +
+        t('kanban.workflows').slice(1),
+      workflow.name
+    ]"
     [accent]="true">
   </tg-ui-breadcrumb>
 

diff --git a/...pt/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.css b/...pt/apps/taiga/src/app/modules/project/feature-kanban/project-feature-kanban.component.css
@@ -38,6 +38,5 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 tg-kanban-header {
-  margin-block-end: var(--spacing-20);
   min-block-size: var(--spacing-40);
 }
diff --git a/...ature-navigation/components/project-navigation-menu/project-navigation-menu.component.css b/...ature-navigation/components/project-navigation-menu/project-navigation-menu.component.css
@@ -192,7 +192,6 @@ ul {
   margin-block: 0;
   margin-inline-end: var(--spacing-8);
   margin-inline-start: var(--spacing-16);
-  padding-block: var(--spacing-4);
   padding-inline-start: var(--spacing-8);
 }
 
@@ -201,8 +200,9 @@ ul {
   @mixin ellipsis;
 
   block-size: var(--spacing-28);
-  display: inline-block;
+  display: flex;
   inline-size: 100%;
+  padding-block: 0;
 
   &:hover {
     background: var(--color-gray90);

diff --git a/...aiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.html b/...aiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.html
@@ -10,7 +10,7 @@
     [@mainNavContainer]="menuState"
     class="main-nav-container-inner">
     <!-- visibility: hidden prevent focus in the project menu when the setting menu is visible -->
-
+    {{ showProjectSettings }}
     <tg-project-navigation-menu
       [collapsed]="collapsed"
       [class.collapsed]="collapsed"

diff --git a/.../taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts b/.../taiga/src/app/modules/project/feature-navigation/project-feature-navigation.component.ts
@@ -16,18 +16,20 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   HostBinding,
   HostListener,
   inject,
   Input,
   OnInit,
-  DestroyRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   ActivatedRoute,
   ActivatedRouteSnapshot,
@@ -37,10 +39,8 @@ import { RxState } from '@rx-angular/state';
 import { Project } from '@taiga/data';
 import { Subject } from 'rxjs';
 import { LocalStorageService } from '~/app/shared/local-storage/local-storage.service';
-import { ProjectNavigationSettingsComponent } from './components/project-navigation-settings/project-navigation-settings.component';
-import { CommonModule } from '@angular/common';
 import { ProjectNavigationMenuComponent } from './components/project-navigation-menu/project-navigation-menu.component';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ProjectNavigationSettingsComponent } from './components/project-navigation-settings/project-navigation-settings.component';
 
 const collapseMenuAnimation = '200ms ease-out';
 const openMenuAnimation = '200ms ease-in';
@@ -258,6 +258,7 @@ export class ProjectNavigationComponent implements OnInit, AfterViewInit {
   }
 
   public openSettings() {
+    console.log(1);
     this.showProjectSettings = true;
     void this.router.navigate([
       'project',

diff --git a/.../apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts b/.../apps/taiga/src/app/modules/project/feature-shell/project-feature-shell-routing.module.ts
@@ -28,6 +28,13 @@ const routes: Routes = [
             '~/app/modules/project/feature-overview/project-feature-overview.module'
           ).then((m) => m.ProjectFeatureOverviewModule),
       },
+      {
+        path: ':slug',
+        loadChildren: () =>
+          import(
+            '~/app/modules/project/feature-overview/project-feature-overview.module'
+          ).then((m) => m.ProjectFeatureOverviewModule),
+      },
       {
         path: 'overview',
         loadChildren: () =>
@@ -56,39 +63,31 @@ const routes: Routes = [
           ).then((m) => m.ProjectFeatureViewSetterModule),
         canDeactivate: [CanDeactivateGuard],
       },
-      {
-        path: ':slug',
-        loadChildren: () =>
-          import(
-            '~/app/modules/project/feature-overview/project-feature-overview.module'
-          ).then((m) => m.ProjectFeatureOverviewModule),
-      },
       {
         path: ':slug/kanban',
         redirectTo: ':slug/kanban/main',
         pathMatch: 'full',
       },
       {
-        path: ':slug/new-workflow',
+        path: ':slug/kanban/:workflow',
         loadChildren: () =>
           import(
-            '~/app/modules/project/feature-new-workflow/project-feature-new-workflow.module'
-          ).then((m) => m.ProjectFeatureNewWorkflowModule),
+            '~/app/modules/project/feature-view-setter/project-feature-view-setter.module'
+          ).then((m) => m.ProjectFeatureViewSetterModule),
         canDeactivate: [CanDeactivateGuard],
         data: {
-          newKanban: true,
+          kanban: true,
         },
       },
       {
-        path: ':slug/kanban/:workflow',
+        path: ':slug/new-workflow',
         loadChildren: () =>
           import(
-            '~/app/modules/project/feature-view-setter/project-feature-view-setter.module'
-          ).then((m) => m.ProjectFeatureViewSetterModule),
+            '~/app/modules/project/feature-new-workflow/project-feature-new-workflow.module'
+          ).then((m) => m.ProjectFeatureNewWorkflowModule),
         canDeactivate: [CanDeactivateGuard],
         data: {
-          kanban: true,
-          reuseComponent: false,
+          newKanban: true,
         },
       },
       {

diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.css
@@ -16,7 +16,12 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .crumb {
-  padding: var(--spacing4);
+  padding: var(--spacing-4);
+}
+
+.crumb-divider {
+  block-size: var(--spacing-8);
+  inline-size: var(--spacing-8);
 }
 
 .accent {

diff --git a/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html b/javascript/libs/ui/src/lib/breadcrumb/breadcrumb.component.html
@@ -27,11 +27,10 @@
         [class.accent]="isLast && accent">
         {{ crumb }}
       </span>
-      <span
+      <tui-svg
         class="crumb-divider"
-        *ngIf="!(hideLastCrumb && i === crumbs.length - 2) && !isLast">
-        &gt;
-      </span>
+        *ngIf="!(hideLastCrumb && i === crumbs.length - 2) && !isLast"
+        src="chevron-right"></tui-svg>
     </ng-container>
   </ng-container>
   <ng-container *ngIf="type === 'collapsed'">