Default View Font Color and Reordering

[Bonapara]

Current Behavior

The default view font color is tertiary.
We cannot reorder the default view.

Desired Behavior

The text color should be primary, like other views' title color.
It should be possible to reorder this view.

Ensure this edit doesn't change the color of the non-movable item in the "Options > Fields" menu.

[greptile-apps]

To address the issue:

1. Change Default View Font Color:

   • Update the NavigationDrawerItem component in /packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx.
   • Modify the StyledItem styled component to set the default font color to primary.

   const StyledItem = styled('div', {
     shouldForwardProp: (prop) =>
       !['active', 'danger', 'soon'].includes(prop) && isPropValid(prop),
   })<StyledItemProps>`
     color: ${(props) => {
       if (props.active === true) {
         return props.theme.font.color.primary;
       }
       if (props.danger === true) {
         return props.theme.color.red;
       }
       if (props.soon === true) {
         return props.theme.font.color.light;
       }
       return props.theme.font.color.primary; // Change from secondary to primary
     }};
   `;

2. Enable Reordering of Default View:

   • Ensure the RecordTableHeaderCell component in /packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx allows reordering.
   • Verify that the disableColumnResize logic does not prevent reordering for the default view.

   const disableColumnResize =
     column.isLabelIdentifier && isMobile && scrollLeft > 0;

   • Adjust the condition if necessary to allow reordering.

Ensure these changes do not affect the non-movable item in the "Options > Fields" menu.

References

/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
/packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx
/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx
/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[adithej]

Hi @Bonapara

Is this the desired behavior you are looking for? Or are you expecting the default view eg: All Companies to be draggable as well?

Text color issue has been rectified

twenty-issue.mov

[Bonapara]

Hi @adithej, thanks for your work! I was indeed expecting the default view to be draggable too.

[adithej]

Thanks @Bonapara

I am working on it but not that sure I will be able to, but still being optimistic.
The default gets draggable but it goes back to the last position. I am not being able to find the root cause.

On ViewPickerListContent.tsx I have made these changes.

<DropdownMenuItemsContainer>
        <DraggableList
          onDragEnd={handleDragEnd}
          draggableItems={viewsOnCurrentObject.map(
            (view, index) => (
              <DraggableItem
                key={view.id}
                draggableId={view.id}
                index={index}
                isDragDisabled={viewsOnCurrentObject.length === 1}
                itemComponent={
                  <MenuItemDraggable
                    key={view.id}
                    iconButtons={indexView?.id === view.id ? 
                      [{
                        Icon: IconLock,
                      },]
                      :
                      [{
                        Icon: IconPencil,
                        onClick: (event: MouseEvent<HTMLButtonElement>) =>
                          handleEditViewButtonClick(event, view.id),
                      },]
                    .filter(isDefined)}
                    isIconDisplayedOnHoverOnly = {indexView?.id === view.id ? false : true}
                    onClick={() => handleViewSelect(view.id)}
                    LeftIcon={getIcon(view.icon)}
                    text={view.name}
                  />
                }
              />
            ),
          )}
        />
      </DropdownMenuItemsContainer>

And the handleDragEnd seems okay but I belive the state is not getting upaded.

const handleDragEnd = useCallback(
    (result: DropResult) => {
      if (!result.destination) return;
      
      moveArrayItem(viewsOnCurrentObject, {
        fromIndex: result.source.index,
        toIndex: result.destination.index,
      }).forEach((view, index) => {
        if (view.position !== index) {
          updateView({ ...view, position: index });
        }
      });
      // console.log("view before", viewsOnCurrentObject)
    },
    [updateView, viewsOnCurrentObject],
  );

It would be helpful if I could find any leads that may help me fix this

twenty-issue-2.mov

[Bonapara]

Perhaps Lucas Bordeaux has some thoughts for you!

[adithej]

Thanks @Bonapara and @lucasbordeau if you have some thoughts about it , will be wonderful.

[Faisal-imtiyaz123]

@adithej May you tell me if you are still working here?

[adithej]

No @Faisal-imtiyaz123 if you are interested please have a look

[Faisal-imtiyaz123]

@adithej Thanks for replying. Sure, I will take it up then

[Bonapara]

It was not implemented, or there was a regression. We should try to understand what happened @charlesBochet

[charlesBochet]

/oss.gg 300

[oss-gg]

Thanks for opening an issue! It's live on oss.gg!

[nikhiludayy]

/assign

[oss-gg]

@nikhiludayy, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[nikhiludayy]

/assign

[oss-gg]

Assigned to @nikhiludayy! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[oss-gg]

@nikhiludayy, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@nikhiludayy, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[charlesBochet]

/unassign

[oss-gg]

Issue unassigned.

[vamus092]

/assign

[oss-gg]

Assigned to @vamus092! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[oss-gg]

@vamus092, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@nikhiludayy, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[oss-gg]

@nikhiludayy, Just a little reminder: Please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12h, you will be unassigned automatically.

[Bonapara]

@vamus092 do you think you will be able to open a PR today?

[vamus092]

/unassign

[oss-gg]

Issue unassigned.

[nganphan123]

/assign

[oss-gg]

Assigned to @nganphan123! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[oss-gg]

@nganphan123, please open a draft PR linking this issue within 12 hours. If we can't detect a PR in 12 hours, you will be unassigned automatically.

[oss-gg]

@nganphan123 has not opened a PR for this issue within 48 hours. They have been unassigned from the issue; anyone can now take it up.