feat(workflows): list workflows in main navigation bar

kaleidos-ventures · Sep 12, 2023 · 8497c99 · 8497c99
1 parent 21d4750
commit 8497c99
Show file tree

Hide file tree

Showing 10 changed files with 394 additions and 234 deletions.
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
@@ -9,6 +9,7 @@ Copyright (c) 2023-present Kaleidos INC
 /* WORKSPACE */
 
 @import url("tools/typography.css");
+@import url("taiga-ui/mixins/wrapper.css");
 
 :host {
   --menu-size: 200px;
@@ -133,15 +134,15 @@ ul {
   color: var(--color-gray40);
   display: flex;
   font-weight: var(--font-weight-regular);
-  padding: var(--spacing-4);
+  padding: var(--spacing-8);
   transition: padding var(--transition);
 }
 
 @define-mixin menu-option-icon {
   aspect-ratio: 1/1;
   block-size: var(--spacing-24);
   inline-size: var(--spacing-24);
-  margin-inline-end: var(--spacing-16);
+  margin-inline-end: var(--spacing-8);
 }
 
 .menu-option-icon {
@@ -152,11 +153,22 @@ ul {
   @mixin menu-option-item;
 
   &:hover,
+  &.active-section,
   &.active-dialog {
     background: var(--color-gray90);
     color: var(--color-primary);
     font-weight: var(--font-weight-regular);
   }
+
+  &:focus-visible {
+    outline: solid 2px var(--color-secondary50);
+  }
+
+  &.menu-option-item-kanban {
+    appearance: none;
+    background: none;
+    border: 0;
+  }
 }
 
 .menu-option {
@@ -169,125 +181,57 @@ ul {
       font-weight: var(--font-weight-medium);
     }
   }
-
-  & .menu-option-icon {
-    aspect-ratio: 1/1;
-    block-size: var(--spacing-24);
-    inline-size: var(--spacing-24);
-    margin-inline-end: var(--spacing-16);
-  }
 }
 
-.menu-option-scrum {
-  & .scrum-button {
-    @mixin menu-option-item;
-
-    align-items: center;
-    appearance: none;
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    inline-size: 100%;
-
-    &:focus-visible {
-      outline: solid 2px var(--color-secondary);
-    }
+/* Submenu of a menu option */
 
-    &:hover,
-    &.active-dialog {
-      background: var(--color-gray90);
-      color: var(--color-primary);
-    }
+.submenu {
+  padding-block: var(--spacing-8);
+}
 
-    & .scrum-button-icon {
-      @mixin menu-option-icon;
-    }
+.submenu-option {
+  border-inline-start: 1px solid var(--color-gray90);
+  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);
+}
 
-    & .chevron {
-      block-size: var(--spacing-16);
-      color: var(--color-primary);
-      inline-size: var(--spacing-16);
-      margin-inline-start: auto;
-      transform: rotate(180deg);
-      transition: all 0.2s linear;
-
-      &.active {
-        transform: rotate(0);
-        transition: all 0.2s linear;
-      }
-    }
-  }
+.submenu-option-item {
+  @mixin menu-option-item;
 
-  &.scrum-active {
-    & .scrum-button {
-      color: var(--color-white);
+  block-size: var(--spacing-28);
 
-      &:hover {
-        color: var(--color-primary);
-      }
-    }
+  &:hover {
+    background: var(--color-gray90);
+    color: var(--color-gray20);
   }
-}
-
-.menu-child-scrum {
-  background: var(--color-gray90);
-  padding: var(--spacing-8);
 
-  & .menu-child-option {
-    &:last-child {
-      margin-block-end: 0;
-    }
+  &:active,
+  &.submenu-option-item-active {
+    background: var(--color-secondary90);
+    color: var(--color-white);
   }
 
-  & .menu-child-option-item {
-    @mixin menu-option-item;
-
-    padding-inline-start: var(--spacing-16);
-
-    &:hover,
-    &.active {
-      color: var(--color-primary);
-    }
-
-    &:hover {
-      background: var(--color-gray80);
-    }
-
-    &.active {
-      background: var(--color-secondary80);
-    }
+  &:focus-visible {
+    outline: solid 2px var(--color-secondary50);
   }
 }
 
-.secondary-menu {
-  & .menu-option-item {
-    &:hover {
-      color: var(--color-white);
-
-      & .arrow {
-        opacity: 1;
-      }
-    }
-
-    &:focus {
-      color: var(--color-gray40);
-
-      & .arrow {
-        opacity: 1;
-      }
-    }
-  }
+.menu-option-kanban {
+  position: relative;
+}
 
-  & .arrow {
-    block-size: 1rem;
-    color: var(--color-gray60);
-    inline-size: 1rem;
-    margin-inline-start: auto;
-    opacity: 0;
-  }
+/* Create workflow button */
+.create-workflow {
+  inset-block-start: var(--spacing-4);
+  inset-inline-end: var(--spacing-4);
+  position: absolute;
 }
 
+/* Bottom area */
+
 .bottom-menu {
   & .project-settings {
     background: transparent;
@@ -378,8 +322,7 @@ ul {
   }
 
   & .menu-option-item,
-  & .bottom-menu-option-item,
-  & .scrum-button {
+  & .bottom-menu-option-item {
     padding-inline-start: var(--spacing-4);
     transition: padding var(--transition);
     transition-delay: var(--transition-delay);
@@ -391,19 +334,18 @@ ul {
     }
   }
 
-  & .menu-option-icon,
-  & .scrum-button-icon {
+  & .menu-option-item-kanban {
+    &:hover {
+      inline-size: auto;
+    }
+  }
+
+  & .menu-option-icon {
     margin-inline-end: 0;
     transition: margin var(--transition);
     transition-delay: var(--transition-delay);
   }
 
-  & .menu-option-scrum {
-    & .scrum-button-icon {
-      margin-inline-end: 0;
-    }
-  }
-
   & .button-collapse {
     justify-content: start;
     padding: 0;
@@ -420,40 +362,25 @@ ul {
 
 /* FLOATING DIALOG */
 
-.dialog-scrum {
-  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3);
-
-  & .child-menu-option {
-    margin-block-end: 0;
-  }
+.dialog-kanban {
+  background: var(--color-gray100);
+  color: var(--color-white);
+  inline-size: 170px;
 
-  & .child-menu-option-item {
+  & .dialog-kanban-title {
+    align-items: center;
     block-size: var(--spacing-32);
-    border-radius: 3px;
-    display: block;
-    font-weight: var(--font-weight-regular);
-    padding: var(--spacing-8);
-
-    &:hover {
-      background: var(--color-gray80);
-      color: var(--color-primary);
-    }
-
-    &.active {
-      background: var(--color-secondary80);
-    }
-  }
-
-  & .child-menu-option-scrum {
-    block-size: auto;
     color: var(--color-white);
-    display: block;
-    margin-block-end: var(--spacing-8);
-    padding: 0;
+    display: flex;
+    padding-block: 0;
+    padding-inline: var(--spacing-12) var(--spacing-2);
 
-    &:hover {
-      background: none;
-      color: var(--color-white);
+    & .dialog-kanban-text {
+      @mixin ellipsis;
+
+      font-size: var(--font-size-medium);
+      font-weight: var(--font-weight-regular);
+      text-decoration: none;
     }
   }
 }
@@ -502,8 +429,14 @@ ul {
     padding-inline-start: var(--spacing-24);
   }
 
-  & .dialog-scrum {
-    color: var(--color-gray-40);
-    padding: var(--spacing-8);
+  & .dialog-kanban {
+    & .submenu {
+      background: var(--color-gray100);
+      margin: 0;
+    }
+
+    & .submenu-option {
+      margin-inline-start: var(--spacing-4);
+    }
   }
 }