Settings Advanced Mode #7130

gitstart-app · 2024-09-18T18:09:53Z

Description

We implemented the Advanced Mode state and used this on a section of the settings sidebar
in DefaultLayout.tsx, was updated because of the 64 + 16(container size of IconTool + the margins)

https://jam.dev/c/29bcec70-0b7f-4afa-98e6-9755657cf09d

Refs

#6147

Fixes #6147

greptile-apps

PR Summary

This pull request implements an Advanced Mode feature for the settings sidebar in the Twenty application. Here's a summary of the key changes:

Added a new AdvancedSettingsToggle component at the bottom of the settings sidebar
Implemented a Developers section in the settings navigation, visible when Advanced Mode is enabled
Created a Recoil atom to manage the Advanced Mode state, persisting it in local storage
Updated the NavigationDrawer component to accommodate the new Advanced Mode toggle
Adjusted layout and styling in various components to ensure proper alignment and responsiveness

Key points:

New AdvancedSettingsToggle component with yellow-themed styling and icon
Animated Developers section appears when Advanced Mode is enabled
Recoil state management for Advanced Mode toggle
Layout adjustments in DefaultLayout and NavigationDrawer for consistency
Added IconTool to TablerIcons for use in the new feature

_{10 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-09-18T18:13:31Z

...wenty-front/src/modules/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState.ts

+import { localStorageEffect } from '~/utils/recoil-effects';
+
+export const isAdvancedModeEnabledState = atom<boolean>({
+  key: 'isAdvancedModeEnabledAtom',


style: Consider using a more descriptive key, e.g., 'isAdvancedModeEnabled'

ijreilly

good job using recoil state!
I think there are two UI issues though

the tool icon size compared to the line is not the same as on the figma I think
from the PR:
<img width="197" alt="Capture d’écran 2024-09-23 à 17 07 35" src="https://github.com/user-attachments/assets/3f1ba280-1afc-4fd4-81a6-caa37e546f

on the figma:

ad">

there is a glitch when untoggling the advanced mode:
https://github.com/user-attachments/assets/474616a1-b885-4ebf-a8e6-7c6e4056de8c

gitstart-twenty · 2024-09-23T17:06:33Z

Hello @ijreilly
for some reason the image is not loading for us, could you upload it again? we could not identify the difference you mentioned

ijreilly · 2024-09-24T08:19:48Z

@gitstart-twenty

icon is quite small and less centered than on the figma :

ijreilly · 2024-09-25T08:41:49Z

@gitstart-twenty there is still a glitch, at expand-time now:

369937339-474616a1-b885-4ebf-a8e6-7c6e4056de8c.mov

We are super exacting on the UI aiming at a super smooth platform :)

ijreilly · 2024-09-30T09:16:37Z

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

+`;
+
+const StyledIconTool = styled(IconTool)`
+  margin-right: 3px;


We usually don't hardcode the values for margins, and usually work in 4x values (4Px, 8px, etc.; sometimes 2px for gaps). Are you sure this respects the figma (I temporarily don't have dev mode access it seems so cannot check)? Or is this an attempt to center things (we should not rely on margin size for that)? Or if it's because it is taking into account a border (in that case, try using box-sizing)

ijreilly · 2024-09-30T09:17:28Z

packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.tsx

+      height: { duration: 0.4 },
+    },
+  },
+  exit: {


could be put in common with initial (exact same values if im not mistaken)

gitstart-twenty · 2024-09-30T23:32:53Z

Hello @ ijreilly
We are working on it!

ijreilly

Hey, two lasts notes:

Can we replace "Advanced:" with "Advanced" please?
toggle should be aligned to the right with the labels from the side bar (on the red line:)

thanks :)

gitstart-twenty · 2024-10-02T11:50:31Z

Hello @ijreilly. we pushed the changes 🤝

ijreilly

looking good !

github-actions · 2024-10-02T15:05:09Z

	Fails
🚫	`node` failed.

Log

�[31mError: �[39m SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
�[90m    at parseJSONFromBytes (node:internal/deps/undici/undici:5584:19)�[39m
�[90m    at successSteps (node:internal/deps/undici/undici:5555:27)�[39m
�[90m    at fullyReadBody (node:internal/deps/undici/undici:1665:9)�[39m
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)�[39m
�[90m    at async specConsumeBody (node:internal/deps/undici/undici:5564:7)�[39m
danger-results://tmp/danger-results-8cf9d199.json

Generated by 🚫 dangerJS against 6f28044

This PR moved the settings navigation to the left and bottom #7130 Updating the logic to: -remove logic that move the existing -add the setting icon to absolute <img width="264" alt="Capture d’écran 2024-10-07 à 18 04 05" src="https://github.com/user-attachments/assets/b848a5dd-50e9-48c2-bb50-1dcffa9481ac"> <img width="264" alt="Capture d’écran 2024-10-07 à 18 04 11" src="https://github.com/user-attachments/assets/3812929c-dce0-410b-8caa-3ea1210af958">

### Description - We implemented the Advanced Mode state and used this on a section of the settings sidebar - in DefaultLayout.tsx, was updated because of the 64 + 16(container size of IconTool + the margins) ### <https://jam.dev/c/29bcec70-0b7f-4afa-98e6-9755657cf09d> ### Refs twentyhq#6147 Fixes twentyhq#6147 --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: gitstart-twenty <[email protected]>

This PR moved the settings navigation to the left and bottom twentyhq#7130 Updating the logic to: -remove logic that move the existing -add the setting icon to absolute <img width="264" alt="Capture d’écran 2024-10-07 à 18 04 05" src="https://github.com/user-attachments/assets/b848a5dd-50e9-48c2-bb50-1dcffa9481ac"> <img width="264" alt="Capture d’écran 2024-10-07 à 18 04 11" src="https://github.com/user-attachments/assets/3812929c-dce0-410b-8caa-3ea1210af958">

Settings Advanced Mode

1b618e9

greptile-apps bot reviewed Sep 18, 2024

View reviewed changes

gitstart-twenty requested a review from ijreilly September 18, 2024 18:19

gitstart-twenty added the -PR: awaiting review label Sep 18, 2024

charlesBochet assigned ijreilly Sep 18, 2024

ijreilly reviewed Sep 23, 2024

View reviewed changes

ijreilly added -PR: awaiting author and removed -PR: awaiting review labels Sep 23, 2024

gitstart-twenty added 2 commits September 24, 2024 21:00

Merge branch 'main' into TWNTY-6147

c4c9a7a

fix animation and update icon size

b0a6a53

gitstart-twenty added -PR: awaiting review and removed -PR: awaiting author labels Sep 24, 2024

ijreilly added -PR: awaiting author and removed -PR: awaiting review labels Sep 25, 2024

gitstart-twenty added 2 commits September 26, 2024 21:04

Merge branch 'main' into TWNTY-6147

00dc483

add a hook to handle height animation

cd329d1

gitstart-twenty added -PR: awaiting review and removed -PR: awaiting author labels Sep 26, 2024

gitstart-twenty requested a review from ijreilly September 26, 2024 21:15

add TODO comment back

d71bbb2

ijreilly reviewed Sep 30, 2024

View reviewed changes

gitstart-twenty and others added 3 commits October 1, 2024 19:54

Merge branch 'main' into TWNTY-6147

200e095

fix icon margin and refactor animation configuration

0b9d85a

add TODO comment back

7841eb0

gitstart-twenty requested a review from ijreilly October 1, 2024 20:43

ijreilly reviewed Oct 2, 2024

View reviewed changes

ijreilly added -PR: awaiting author and removed -PR: awaiting review labels Oct 2, 2024

gitstart-twenty added 2 commits October 2, 2024 11:44

Merge branch 'main' into TWNTY-6147

492b08d

update text and alignment of the advanced toggle

6f28044

gitstart-twenty added -PR: awaiting review and removed -PR: awaiting author labels Oct 2, 2024

ijreilly approved these changes Oct 2, 2024

View reviewed changes

ijreilly merged commit 23001ac into main Oct 2, 2024
7 of 12 checks passed

ijreilly deleted the TWNTY-6147 branch October 2, 2024 15:04

thomtrp mentioned this pull request Oct 7, 2024

Fix settings navigation advanced design #7472

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Settings Advanced Mode #7130

Settings Advanced Mode #7130

gitstart-app bot commented Sep 18, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Sep 18, 2024

ijreilly left a comment

gitstart-twenty commented Sep 23, 2024

ijreilly commented Sep 24, 2024 •

edited

Loading

ijreilly commented Sep 25, 2024

ijreilly Sep 30, 2024

ijreilly Sep 30, 2024

gitstart-twenty commented Sep 30, 2024

ijreilly left a comment

gitstart-twenty commented Oct 2, 2024

ijreilly left a comment

github-actions bot commented Oct 2, 2024

Settings Advanced Mode #7130

Settings Advanced Mode #7130

Conversation

gitstart-app bot commented Sep 18, 2024 • edited Loading

Description

https://jam.dev/c/29bcec70-0b7f-4afa-98e6-9755657cf09d

Refs

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Sep 18, 2024

Choose a reason for hiding this comment

ijreilly left a comment

Choose a reason for hiding this comment

gitstart-twenty commented Sep 23, 2024

ijreilly commented Sep 24, 2024 • edited Loading

ijreilly commented Sep 25, 2024

ijreilly Sep 30, 2024

Choose a reason for hiding this comment

ijreilly Sep 30, 2024

Choose a reason for hiding this comment

gitstart-twenty commented Sep 30, 2024

ijreilly left a comment

Choose a reason for hiding this comment

gitstart-twenty commented Oct 2, 2024

ijreilly left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 2, 2024

Log

gitstart-app bot commented Sep 18, 2024 •

edited

Loading

ijreilly commented Sep 24, 2024 •

edited

Loading