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:
@ -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':
|
||||
|
||||
@ -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}
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export type ObjectOptionsContentId =
|
||||
| 'viewSettings'
|
||||
| 'viewSettingsOpenIn'
|
||||
| 'layout'
|
||||
| 'layoutOpenIn'
|
||||
| 'fields'
|
||||
| 'hiddenFields'
|
||||
| 'recordGroups'
|
||||
|
||||
Reference in New Issue
Block a user