renaming layout and changing icons (#10781)

Updating icons and renaming View Settings to Layout

Fixes : https://github.com/twentyhq/core-team-issues/issues/486
Fixes : https://github.com/twentyhq/core-team-issues/issues/484
Fixes : https://github.com/twentyhq/core-team-issues/issues/488
This commit is contained in:
Guillim
2025-03-12 17:49:28 +01:00
committed by GitHub
parent 3eb1aa1b5a
commit 7a4f082fc5
6 changed files with 28 additions and 21 deletions

View File

@ -1,22 +1,22 @@
import { ObjectOptionsDropdownFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent';
import { ObjectOptionsDropdownHiddenFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent';
import { ObjectOptionsDropdownHiddenRecordGroupsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent';
import { ObjectOptionsDropdownLayoutContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent';
import { ObjectOptionsDropdownLayoutOpenInContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent';
import { ObjectOptionsDropdownMenuContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent';
import { ObjectOptionsDropdownRecordGroupFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent';
import { ObjectOptionsDropdownRecordGroupsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent';
import { ObjectOptionsDropdownRecordGroupSortContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent';
import { ObjectOptionsDropdownViewSettingsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent';
import { ObjectOptionsDropdownViewSettingsOpenInContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
export const ObjectOptionsDropdownContent = () => {
const { currentContentId } = useOptionsDropdown();
switch (currentContentId) {
case 'viewSettings':
return <ObjectOptionsDropdownViewSettingsContent />;
case 'viewSettingsOpenIn':
return <ObjectOptionsDropdownViewSettingsOpenInContent />;
case 'layout':
return <ObjectOptionsDropdownLayoutContent />;
case 'layoutOpenIn':
return <ObjectOptionsDropdownLayoutOpenInContent />;
case 'fields':
return <ObjectOptionsDropdownFieldsContent />;
case 'hiddenFields':

View File

@ -18,7 +18,7 @@ import { ViewType } from '@/views/types/ViewType';
import { useLingui } from '@lingui/react/macro';
import { useRecoilValue } from 'recoil';
export const ObjectOptionsDropdownViewSettingsContent = () => {
export const ObjectOptionsDropdownLayoutContent = () => {
const { t } = useLingui();
const { currentView } = useGetCurrentViewOnly();
@ -42,11 +42,11 @@ export const ObjectOptionsDropdownViewSettingsContent = () => {
return (
<>
<DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
{t`View settings`}
{t`Layout`}
</DropdownMenuHeader>
<DropdownMenuItemsContainer>
<MenuItem
onClick={() => onContentChange('viewSettingsOpenIn')}
onClick={() => onContentChange('layoutOpenIn')}
LeftIcon={
recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL
? IconLayoutSidebarRight
@ -60,6 +60,7 @@ export const ObjectOptionsDropdownViewSettingsContent = () => {
}
hasSubMenu
/>
{viewType === ViewType.Kanban && (
<MenuItemToggle
LeftIcon={IconBaselineDensitySmall}

View File

@ -15,7 +15,7 @@ import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
import { t } from '@lingui/core/macro';
import { useRecoilValue } from 'recoil';
export const ObjectOptionsDropdownViewSettingsOpenInContent = () => {
export const ObjectOptionsDropdownLayoutOpenInContent = () => {
const { onContentChange } = useOptionsDropdown();
const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
const { currentView } = useGetCurrentViewOnly();
@ -25,7 +25,7 @@ export const ObjectOptionsDropdownViewSettingsOpenInContent = () => {
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onClick={() => onContentChange('viewSettings')}
onClick={() => onContentChange('layout')}
>
{t`Open in`}
</DropdownMenuHeader>

View File

@ -1,11 +1,13 @@
import { Key } from 'ts-key-enum';
import { capitalize, isDefined } from 'twenty-shared';
import {
AppTooltip,
IconCopy,
IconLayout,
IconLayoutKanban,
IconLayoutList,
IconList,
IconTag,
IconListDetails,
IconTable,
IconTrash,
MenuItem,
useIcons,
@ -24,11 +26,11 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { ViewType } from '@/views/types/ViewType';
import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDeleteViewFromCurrentState';
import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared';
export const ObjectOptionsDropdownMenuContent = () => {
const { t } = useLingui();
@ -74,6 +76,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
deleteViewFromCurrentState();
closeDropdown();
};
const theme = useTheme();
const { enqueueSnackBar } = useSnackBar();
@ -85,9 +88,12 @@ export const ObjectOptionsDropdownMenuContent = () => {
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem
onClick={() => onContentChange('viewSettings')}
LeftIcon={IconLayout}
text={t`View settings`}
onClick={() => onContentChange('layout')}
LeftIcon={
currentView?.type === ViewType.Table ? IconTable : IconLayoutKanban
}
text={t`Layout`}
contextualText={`${capitalize(currentView?.type ?? '')}`}
hasSubMenu
/>
</DropdownMenuItemsContainer>
@ -96,7 +102,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem
onClick={() => onContentChange('fields')}
LeftIcon={IconTag}
LeftIcon={IconListDetails}
text={t`Fields`}
contextualText={`${visibleBoardFields.length} shown`}
hasSubMenu

View File

@ -123,7 +123,7 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
export const Default = createStory(null);
export const ViewSettings = createStory('viewSettings');
export const Layout = createStory('layout');
export const Fields = createStory('fields');

View File

@ -1,6 +1,6 @@
export type ObjectOptionsContentId =
| 'viewSettings'
| 'viewSettingsOpenIn'
| 'layout'
| 'layoutOpenIn'
| 'fields'
| 'hiddenFields'
| 'recordGroups'