From 0431b87dd8799202c7e2c54c47d9057a63e0c905 Mon Sep 17 00:00:00 2001 From: Filip Witosz <filip.witosz@gmail.com> Date: Tue, 12 Jan 2021 14:00:13 +0100 Subject: [PATCH 1/2] Fixes Colors are properly applied in order of the type (active, then basic forex). Bold indication of active item. Stopped rendering section if it has no children. --- src/components/Sidebar/index.tsx | 70 ++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 30 deletions(-) diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 542d8620..bb45bc03 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -1,5 +1,6 @@ import { Icon, IconName, MaybeElement } from '@blueprintjs/core'; import classnames from 'classnames'; +import { size } from 'lodash'; import map from 'lodash/map'; import { darken } from 'polished'; import React, { useState } from 'react'; @@ -154,8 +155,8 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` span.bp3-icon:not(.favorite) { color: ${({ theme }) => theme.sidebar?.icon?.activeColor || - theme.sidebar?.icon?.color || theme.sidebar?.item?.activeColor || + theme.sidebar?.icon?.color || theme.sidebar?.item?.color || 'inherit'}; } @@ -173,10 +174,10 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` span.bp3-icon:not(.favorite) { color: ${({ theme }) => theme.sidebar?.icon?.activeColor || - theme.sidebar?.icon?.color || theme.sidebar?.subItem?.activeColor || - theme.sidebar?.subItem?.color || theme.sidebar?.item?.activeColor || + theme.sidebar?.icon?.color || + theme.sidebar?.subItem?.color || theme.sidebar?.item?.color || 'inherit'}; } @@ -221,8 +222,8 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` span.bp3-icon:not(.favorite) { color: ${({ theme }) => theme.sidebar?.icon?.hoverColor || - theme.sidebar?.icon?.color || theme.sidebar?.item?.hoverColor || + theme.sidebar?.icon?.color || theme.sidebar?.item?.color || 'inherit'}; } @@ -264,8 +265,8 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` span.bp3-icon:not(.favorite) { color: ${({ theme }) => theme.sidebar?.icon?.hoverColor || - theme.sidebar?.icon?.color || theme.sidebar?.subItem?.hoverColor || + theme.sidebar?.icon?.color || theme.sidebar?.subItem?.color || 'inherit'}; } @@ -276,6 +277,10 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>` .sidebarSubItem { cursor: pointer; transition: all 0.2s ease-in-out; + + &.active { + font-weight: 500; + } } } `; @@ -290,8 +295,9 @@ const StyledDivider = styled.div<{ theme?: any }>` align-items: center; &:first-child { + letter-spacing: 1.5px; margin-top: 0; - padding: 1px; + padding: 0.5px; } background-color: ${({ theme }) => @@ -357,30 +363,34 @@ const QorusSidebar: React.FC<IQorusSidebarProps> = ({ role='qorus-sidebar-wrapper' > <Scroll horizontal={false} className='sidebarScroll'> - {map(menu, ({ title, items }, sectionId: string) => ( - <div - className='sidebarSection' - key={sectionId} - role='qorus-sidebar-section-title' - > - <StyledDivider>{!_isCollapsed ? title || '' : ''}</StyledDivider> - {map(items, (itemData, key) => ( - <SidebarItem - itemData={itemData} - key={key} - isCollapsed={_isCollapsed} - expandedSection={expandedSection} - onSectionToggle={handleSectionToggle} - bookmarks={bookmarks} - currentPath={path} - onFavoriteClick={handleFavoriteClick} - onUnfavoriteClick={handleUnfavoriteClick} - sectionName={sectionId} - hasFavorites={!!onBookmarksChange} - /> - ))} - </div> - ))} + {map(menu, ({ title, items }, sectionId: string) => + size(items) ? ( + <div + className='sidebarSection' + key={sectionId} + role='qorus-sidebar-section-title' + > + <StyledDivider> + {!_isCollapsed ? title || '' : ''} + </StyledDivider> + {map(items, (itemData, key) => ( + <SidebarItem + itemData={itemData} + key={key} + isCollapsed={_isCollapsed} + expandedSection={expandedSection} + onSectionToggle={handleSectionToggle} + bookmarks={bookmarks} + currentPath={path} + onFavoriteClick={handleFavoriteClick} + onUnfavoriteClick={handleUnfavoriteClick} + sectionName={sectionId} + hasFavorites={!!onBookmarksChange} + /> + ))} + </div> + ) : null + )} </Scroll> <div className='sidebarSection' id='menuCollapse'> <StyledDivider /> From 814fb0e4af7888d984e0a2319597afca7891d251 Mon Sep 17 00:00:00 2001 From: Filip Witosz <filip.witosz@gmail.com> Date: Tue, 12 Jan 2021 14:00:30 +0100 Subject: [PATCH 2/2] Version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9c0cea04..acfb03bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@qoretechnologies/reqore", - "version": "0.1.45", + "version": "0.1.46", "description": "ReQore is a UI library of components for Qorus connected apps", "main": "dist/index.js", "types": "dist/index.d.ts",