From 5c7a1097619e96a519679a39d1eda8fb4c57e694 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Wed, 18 Dec 2024 16:26:08 +0530 Subject: [PATCH 1/5] fix icon shrink and use avatar for logo and icons --- .../modules/ui/layout/tab/components/Tab.tsx | 36 ++++++++++---- .../ui/layout/tab/components/TabList.tsx | 47 ++++++++----------- .../scroll/contexts/ScrollWrapperContexts.tsx | 5 -- 3 files changed, 48 insertions(+), 40 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index 9e7267779581..f7f5d256fb1c 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -1,10 +1,10 @@ +import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; import isPropValid from '@emotion/is-prop-valid'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { ReactElement } from 'react'; import { Link } from 'react-router-dom'; -import { IconComponent, Pill } from 'twenty-ui'; -import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; +import { Avatar, IconComponent, Pill } from 'twenty-ui'; type TabProps = { id: string; @@ -54,7 +54,7 @@ const StyledHover = styled.span` padding-left: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)}; font-weight: ${({ theme }) => theme.font.weight.medium}; - + width: 100%; &:hover { background: ${({ theme }) => theme.background.tertiary}; border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -63,9 +63,9 @@ const StyledHover = styled.span` background: ${({ theme }) => theme.background.quaternary}; } `; -const StyledLogo = styled.img` - height: 14px; - width: 14px; + +const StyledIconContainer = styled.div` + flex-shrink: 0; `; export const Tab = ({ @@ -81,6 +81,10 @@ export const Tab = ({ logo, }: TabProps) => { const theme = useTheme(); + const iconColor = active + ? theme.font.color.primary + : theme.font.color.secondary; + return ( - {logo && } - {Icon && } + + {logo && ( + + )} + {Icon && ( + + )} + {title} {pill && typeof pill === 'string' ? : pill} diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index f9fada64c8d8..857a55b16dee 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -7,7 +7,6 @@ import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope'; import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect'; import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard'; -import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { useEffect } from 'react'; import { Tab } from './Tab'; @@ -75,32 +74,26 @@ export const TabList = ({ componentInstanceId={tabListInstanceId} tabListIds={tabs.map((tab) => tab.id)} /> - - - {visibleTabs.map((tab) => ( - { - if (!behaveAsLinks) { - setActiveTabId(tab.id); - } - }} - /> - ))} - - + + {visibleTabs.map((tab) => ( + { + if (!behaveAsLinks) { + setActiveTabId(tab.id); + } + }} + /> + ))} + ); diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx index cf8da625820f..767db544cc3e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx @@ -14,7 +14,6 @@ export type ContextProviderName = | 'dropdownMenuItemsContainer' | 'showPageContainer' | 'showPageLeftContainer' - | 'tabList' | 'releases' | 'test' | 'showPageActivityContainer' @@ -43,8 +42,6 @@ export const ShowPageContainerScrollWrapperContext = createScrollWrapperContext('showPageContainer'); export const ShowPageLeftContainerScrollWrapperContext = createScrollWrapperContext('showPageLeftContainer'); -export const TabListScrollWrapperContext = - createScrollWrapperContext('tabList'); export const ReleasesScrollWrapperContext = createScrollWrapperContext('releases'); export const ShowPageActivityContainerScrollWrapperContext = @@ -75,8 +72,6 @@ export const getContextByProviderName = ( return ShowPageContainerScrollWrapperContext; case 'showPageLeftContainer': return ShowPageLeftContainerScrollWrapperContext; - case 'tabList': - return TabListScrollWrapperContext; case 'releases': return ReleasesScrollWrapperContext; case 'test': From 26b41e0e5befcc0c10fcb1b96bb9c96b1e3690fb Mon Sep 17 00:00:00 2001 From: ehconitin Date: Wed, 18 Dec 2024 16:36:36 +0530 Subject: [PATCH 2/5] grep review --- .../modules/ui/layout/tab/components/Tab.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index f7f5d256fb1c..d2df57d91d81 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -97,21 +97,22 @@ export const Tab = ({ > - {logo && ( + {logo ? ( - )} - {Icon && ( - + ) : ( + Icon && ( + + ) )} {title} From 9748aad914b3debf39bc9e7e98decfaeb926ec16 Mon Sep 17 00:00:00 2001 From: ehconitin Date: Wed, 18 Dec 2024 16:39:52 +0530 Subject: [PATCH 3/5] placeholder fix --- .../modules/ui/layout/tab/components/Tab.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index d2df57d91d81..68c7c7a62c4d 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -97,22 +97,21 @@ export const Tab = ({ > - {logo ? ( + {logo && ( + )} + {Icon && ( + - ) : ( - Icon && ( - - ) )} {title} From b8a32f39ea541f6d1823257a348917ff2adab96f Mon Sep 17 00:00:00 2001 From: ehconitin Date: Wed, 18 Dec 2024 17:48:34 +0530 Subject: [PATCH 4/5] add back scroll wrapper --- .../ui/layout/tab/components/TabList.tsx | 49 +++++++--------- .../scroll/contexts/ScrollWrapperContexts.tsx | 5 ++ ...rkflowEditActionFormServerlessFunction.tsx | 56 +++++++++++-------- 3 files changed, 58 insertions(+), 52 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index 857a55b16dee..e4938b2602cd 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -1,13 +1,12 @@ -import styled from '@emotion/styled'; -import * as React from 'react'; -import { IconComponent } from 'twenty-ui'; - +import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope'; - -import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect'; import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; +import styled from '@emotion/styled'; +import * as React from 'react'; import { useEffect } from 'react'; +import { IconComponent } from 'twenty-ui'; import { Tab } from './Tab'; export type SingleTabProps = { @@ -25,32 +24,22 @@ type TabListProps = { tabListInstanceId: string; tabs: SingleTabProps[]; loading?: boolean; - className?: string; behaveAsLinks?: boolean; }; -const StyledTabsContainer = styled.div` +const StyledContainer = styled.div` + border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; box-sizing: border-box; display: flex; gap: ${({ theme }) => theme.spacing(2)}; height: 40px; user-select: none; - margin-bottom: -1px; - overflow-y: scroll; - ::-webkit-scrollbar { - display: none; - } -`; - -const StyledContainer = styled.div` - border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; `; export const TabList = ({ tabs, tabListInstanceId, loading, - className, behaveAsLinks = true, }: TabListProps) => { const visibleTabs = tabs.filter((tab) => !tab.hide); @@ -68,13 +57,17 @@ export const TabList = ({ } return ( - - - tab.id)} - /> - + + tab.id)} + /> + + {visibleTabs.map((tab) => ( ))} - - - + + + ); }; diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx index 767db544cc3e..cf8da625820f 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx @@ -14,6 +14,7 @@ export type ContextProviderName = | 'dropdownMenuItemsContainer' | 'showPageContainer' | 'showPageLeftContainer' + | 'tabList' | 'releases' | 'test' | 'showPageActivityContainer' @@ -42,6 +43,8 @@ export const ShowPageContainerScrollWrapperContext = createScrollWrapperContext('showPageContainer'); export const ShowPageLeftContainerScrollWrapperContext = createScrollWrapperContext('showPageLeftContainer'); +export const TabListScrollWrapperContext = + createScrollWrapperContext('tabList'); export const ReleasesScrollWrapperContext = createScrollWrapperContext('releases'); export const ShowPageActivityContainerScrollWrapperContext = @@ -72,6 +75,8 @@ export const getContextByProviderName = ( return ShowPageContainerScrollWrapperContext; case 'showPageLeftContainer': return ShowPageLeftContainerScrollWrapperContext; + case 'tabList': + return TabListScrollWrapperContext; case 'releases': return ReleasesScrollWrapperContext; case 'test': diff --git a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx index eb4f888b1017..33a924b9a738 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx @@ -8,6 +8,22 @@ import { workflowIdState } from '@/workflow/states/workflowIdState'; import { WorkflowCodeAction } from '@/workflow/types/Workflow'; import { setNestedValue } from '@/workflow/utils/setNestedValue'; +import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionButton'; +import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult'; +import { INDEX_FILE_PATH } from '@/serverless-functions/constants/IndexFilePath'; +import { useTestServerlessFunction } from '@/serverless-functions/hooks/useTestServerlessFunction'; +import { getFunctionInputFromSourceCode } from '@/serverless-functions/utils/getFunctionInputFromSourceCode'; +import { getFunctionOutputSchema } from '@/serverless-functions/utils/getFunctionOutputSchema'; +import { mergeDefaultFunctionInputAndFunctionInput } from '@/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput'; +import { InputLabel } from '@/ui/input/components/InputLabel'; +import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter'; +import { TabList } from '@/ui/layout/tab/components/TabList'; +import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; +import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody'; +import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker'; +import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState'; +import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields'; +import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Monaco } from '@monaco-editor/react'; @@ -17,22 +33,6 @@ import { useEffect, useState } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { CodeEditor, IconCode, IconPlayerPlay, isDefined } from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; -import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody'; -import { TabList } from '@/ui/layout/tab/components/TabList'; -import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; -import { WorkflowVariablePicker } from '@/workflow/components/WorkflowVariablePicker'; -import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState'; -import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult'; -import { INDEX_FILE_PATH } from '@/serverless-functions/constants/IndexFilePath'; -import { InputLabel } from '@/ui/input/components/InputLabel'; -import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter'; -import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionButton'; -import { useTestServerlessFunction } from '@/serverless-functions/hooks/useTestServerlessFunction'; -import { getFunctionOutputSchema } from '@/serverless-functions/utils/getFunctionOutputSchema'; -import { getFunctionInputFromSourceCode } from '@/serverless-functions/utils/getFunctionInputFromSourceCode'; -import { mergeDefaultFunctionInputAndFunctionInput } from '@/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput'; -import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields'; -import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId'; const StyledContainer = styled.div` display: flex; @@ -45,10 +45,14 @@ const StyledCodeEditorContainer = styled.div` flex-direction: column; `; -const StyledTabList = styled(TabList)` - background: ${({ theme }) => theme.background.secondary}; +const StyledTabListContainer = styled.div` + align-items: center; padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; + border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; + box-sizing: border-box; + display: flex; + gap: ${({ theme }) => theme.spacing(2)}; + height: ${({ theme }) => theme.spacing(10)}; `; type WorkflowEditActionFormServerlessFunctionProps = { @@ -263,11 +267,15 @@ export const WorkflowEditActionFormServerlessFunction = ({ return ( !loading && ( - + + + { updateAction({ name: newName }); From 5763148cdb99b88ef02c7d8609a19d921ef5815e Mon Sep 17 00:00:00 2001 From: ehconitin Date: Wed, 18 Dec 2024 21:21:56 +0530 Subject: [PATCH 5/5] fix --- .../src/modules/ui/layout/tab/components/TabList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index e4938b2602cd..48709899466b 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -25,6 +25,7 @@ type TabListProps = { tabs: SingleTabProps[]; loading?: boolean; behaveAsLinks?: boolean; + className?: string; }; const StyledContainer = styled.div` @@ -41,6 +42,7 @@ export const TabList = ({ tabListInstanceId, loading, behaveAsLinks = true, + className, }: TabListProps) => { const visibleTabs = tabs.filter((tab) => !tab.hide); @@ -67,7 +69,7 @@ export const TabList = ({ contextProviderName="tabList" componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`} > - + {visibleTabs.map((tab) => (