From 4d5c4451416c560a3f7bcf0a4359e40f113b34f6 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 22 Jul 2021 18:52:45 +0500
Subject: [PATCH] GH-633 - Updating active indicator for boards (#766)

* GH-663 - Updating active indicator for boards

* Passed active view ID to sidebar component

* Updating view selected state

Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Hossein <hahmadia@users.noreply.github.com>
---
 webapp/src/components/sidebar/sidebar.tsx     |  2 ++
 .../components/sidebar/sidebarBoardItem.scss  | 22 +++++++++++++++++++
 .../components/sidebar/sidebarBoardItem.tsx   |  5 +++--
 webapp/src/components/workspace.tsx           |  1 +
 webapp/src/theme.ts                           |  5 +++++
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx
index c25f06321..804e65fd7 100644
--- a/webapp/src/components/sidebar/sidebar.tsx
+++ b/webapp/src/components/sidebar/sidebar.tsx
@@ -21,6 +21,7 @@ type Props = {
     workspace?: IWorkspace
     workspaceTree: WorkspaceTree,
     activeBoardId?: string
+    activeViewId?: string
 }
 
 const Sidebar = React.memo((props: Props) => {
@@ -96,6 +97,7 @@ const Sidebar = React.memo((props: Props) => {
                                 views={views}
                                 board={board}
                                 activeBoardId={props.activeBoardId}
+                                activeViewId={props.activeViewId}
                                 nextBoardId={nextBoardId}
                             />
                         )
diff --git a/webapp/src/components/sidebar/sidebarBoardItem.scss b/webapp/src/components/sidebar/sidebarBoardItem.scss
index b8b85b7e9..b815ac109 100644
--- a/webapp/src/components/sidebar/sidebarBoardItem.scss
+++ b/webapp/src/components/sidebar/sidebarBoardItem.scss
@@ -18,6 +18,28 @@
             font-weight: 400;
         }
 
+        &.active {
+            background: rgba(var(--sidebar-fg), 0.1);
+            position: relative;
+            color: white;
+
+            .Icon {
+                stroke: rgba(var(--sidebar-fg), 1);
+            }
+
+            &:not(.subitem) {
+                &:before {
+                    content: '';
+                    background: var(--sidebar-text-active-border);
+                    width: 2px;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+
         &.no-views {
             color: rgba(var(--sidebar-fg), 0.4);
 
diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx
index e07fa7560..ffc6fc005 100644
--- a/webapp/src/components/sidebar/sidebarBoardItem.tsx
+++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx
@@ -24,6 +24,7 @@ type Props = {
     views: readonly BoardView[]
     board: Board
     activeBoardId?: string
+    activeViewId?: string
     nextBoardId?: string
 }
 
@@ -95,7 +96,7 @@ const SidebarBoardItem = React.memo((props: Props) => {
     return (
         <div className='SidebarBoardItem'>
             <div
-                className={'octo-sidebar-item ' + (collapsed ? 'collapsed' : 'expanded')}
+                className={`octo-sidebar-item ' ${collapsed ? 'collapsed' : 'expanded'} ${board.id === props.activeBoardId ? 'active' : ''}`}
                 onClick={() => showBoard(board.id)}
             >
                 <IconButton
@@ -163,7 +164,7 @@ const SidebarBoardItem = React.memo((props: Props) => {
             {!collapsed && boardViews.map((view) => (
                 <div
                     key={view.id}
-                    className='octo-sidebar-item subitem'
+                    className={`octo-sidebar-item subitem ${view.id === props.activeViewId ? 'active' : ''}`}
                     onClick={() => showView(view.id, board.id)}
                 >
                     {iconForViewType(view.viewType)}
diff --git a/webapp/src/components/workspace.tsx b/webapp/src/components/workspace.tsx
index e2bb1919b..2d01842c1 100644
--- a/webapp/src/components/workspace.tsx
+++ b/webapp/src/components/workspace.tsx
@@ -52,6 +52,7 @@ const Workspace = React.memo((props: Props) => {
                     workspace={workspace}
                     workspaceTree={workspaceTree}
                     activeBoardId={boardTree?.board.id}
+                    activeViewId={boardTree?.activeView.id}
                 />
             }
             <div className='mainFrame'>
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
index b0778aaa4..34239f59b 100644
--- a/webapp/src/theme.ts
+++ b/webapp/src/theme.ts
@@ -13,6 +13,7 @@ export type Theme = {
     buttonFg: string,
     sidebarBg: string,
     sidebarFg: string,
+    sidebarTextActiveBorder: string,
     sidebarWhiteLogo: string,
 
     link: string,
@@ -41,6 +42,7 @@ export const defaultTheme = {
     buttonFg: '255, 255, 255',
     sidebarBg: '20, 93, 191',
     sidebarFg: '255, 255, 255',
+    sidebarTextActiveBorder: '#579eff',
     sidebarWhiteLogo: 'true',
 
     link: '#0000ee',
@@ -69,6 +71,7 @@ export const darkTheme = {
     buttonFg: '255, 255, 255',
     sidebarBg: '75, 73, 67',
     sidebarFg: '255, 255, 255',
+    sidebarTextActiveBorder: '#66b9a7',
     sidebarWhiteLogo: 'true',
 
     link: '#0090ff',
@@ -97,6 +100,7 @@ export const lightTheme = {
     buttonFg: '255, 255, 255',
     sidebarBg: '247, 246, 243',
     sidebarFg: '55, 53, 47',
+    sidebarTextActiveBorder: '#579eff',
     sidebarWhiteLogo: 'false',
 }
 
@@ -122,6 +126,7 @@ export function setTheme(theme: Theme | null): Theme {
     document.documentElement.style.setProperty('--button-fg', consolidatedTheme.buttonFg)
     document.documentElement.style.setProperty('--sidebar-bg', consolidatedTheme.sidebarBg)
     document.documentElement.style.setProperty('--sidebar-fg', consolidatedTheme.sidebarFg)
+    document.documentElement.style.setProperty('--sidebar-text-active-border', consolidatedTheme.sidebarTextActiveBorder)
     document.documentElement.style.setProperty('--sidebar-white-logo', consolidatedTheme.sidebarWhiteLogo)
 
     document.documentElement.style.setProperty('--link-color', consolidatedTheme.link)