I have fixed the scrolling the record container page on mobile making it
hidden.
This PR aims to fix#5745
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
# Context
Currently, the Twenty platform incorporates "positions" for rows on the
backend, which are functional within the Kanban view. However, this
advantageous feature has yet to be leveraged within list views.
# Feature Proposal
## Implement Row-Reordering via Drag-and-Drop on Frontend (#4846)
- This PR addresses the implementation of row reordering via
Drag-and-Drop on frontend. The objective is to enrich the list view
functionality by introducing a grip that dynamically appears upon
hovering over the left space preceding the checkbox container. This grip
empowers users to effortlessly reposition rows within the list.
#### Proposal Highlights:
- **Enhanced User Interaction**: Introduce a draggable grip to
facilitate intuitive row reordering, enhancing user experience and
productivity.
- **Preservation of Design Aesthetics**: By excluding the grip from the
first row and maintaining the left gap, we uphold design integrity while
providing enhanced functionality.
- **Consistency with Existing Features**: Align with existing
drag-and-drop functionalities within the platform, such as Favorites
re-ordering or Fields re-ordering in table options, ensuring a seamless
user experience.
## Implementation Strategy
### Grip Implementation:
- Add an extra column to the table (header + body) to accommodate the
grip cell, which displays the IconListViewGrip when its container is
hovered over.
- Ensure the preceding left-space is maintained by setting the
corresponding width for this column and removing padding from the table
container (while maintaining padding in other page elements and the
Kanban view for coherence).
### Row Drag and Drop:
- Implement row drag-and-drop functionality using draggableList and
draggableItem, based on the existing logic in the KanbanView for row
repositioning.
- Create a draggableTableBody and apply it to the current
RecordTableBody (including modal open triggering - if dragging while
sorting exists).
- Apply the draggableItem logic to RecordTableRow.
### Sorting Modal Implementation:
- Reuse the ConfirmationModel for the removeSortingModal.
- Create a new state to address the modal.
- Implement sorting removal logic in the corresponding modal file.
## Outcome
- The left-side margin is preserved.
- The grip appears upon hovering.
- Dragging a row gives it and maintains an aesthetic appearance.
- Dropping a row updates its position, and the table gets a new
configuration.
- If sorting is present, dropping a row activates a modal. Clicking on
the "Remove Sorting" button will deactivate any sorting (clicking on
"Cancel" will close the modal), and the table will revert to its default
configuration by position, allowing manual row reordering. Row
repositioning will not occur if sorting is not removed.
- The record table maintains its overall consistency.
- There are no conflicts with DragSelect functionality.
https://github.com/twentyhq/twenty/assets/92337535/73de96cc-4aac-41a9-b4ec-2b8d1c928d04
---------
Co-authored-by: Vasco Paisana <vasco.paisana@tecnico.ulisboa.pt>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This PR introduces a new side panel to edit records and the ability to
minimize the side panel.
The goal is leverage this sidepanel to be able to create records while
being in another show page.
I'm opening the PR for feedback since it involved refactoring and
therefore already touches a lot of files, even though it was quick to
implement.
<img width="1503" alt="Screenshot 2024-05-23 at 17 41 37"
src="https://github.com/twentyhq/twenty/assets/6399865/6f17e7a8-f4e9-4eb4-b392-c756db7198ac">
Some parts of the Frontend used theme constants exported from
`modules/ui` while other parts used theme constants exported from
`twenty-ui`.
This PR centralizes theme constants by removing them from `modules/ui`
completely.
[#4422](https://github.com/twentyhq/twenty/issues/4422)
Demo:
https://github.com/twentyhq/twenty/assets/155670906/f8027ab2-c579-45f7-9f08-f4441a346ae7
Within the demo, we show the various areas in which the Command/CTRL +
Click functionality works. The table cells within the People and
Companies tab open within both the current tab and new tab due to
unchanged functionality within RecordTableCell. We did this to ensure we
could get a PR within by the end of the week.
In this commit, we ONLY edited EntityChip.tsx. We did this by:
- Removing useNavigate() and handleLinkClick/onClick functionality
- Wrapping InnerEntityChip in an anchor tag
This allowed for Command/CTRL + Click functionality to work. Clickable
left cells on tables, left side menu, and data model navigation
files/areas DID NOT get updated.
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Update for #4836
- edit primary and secondary transparency opacities from 0.8 to 0.5
- remove forBackdropFilter from themes
- update components referencing transparency/primary and
transparency/secondary to have the following backdrop-filter: blur(12px)
saturate(200%) contrast(50%) brightness(130%)
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Various fixes
- Remote objects are read-only for now, we already hide and block most
of the write actions but the button that allows you to add a new record
in an empty collection was still visible.
- CreatedAt is not mandatory on remote objects (at least for now) so it
was breaking the show page, it now checks if createdAt exists and is not
null before trying to display the human readable format `Added x days
ago`
- The filters are overwritten in query-runner-args.factory.ts to handle
NUMBER field type, this was only working with filters like
```
{
"id": {
"in": [
1
]
}
```
but not with more depth such as
```
"and": [
{},
{
"id": {
"in": [
1
]
}
}
]
```
- Fixes CREATE FOREIGN TABLE raw query which was missing ",".
New strategy:
- add settings field on FieldMetadata. Contains a boolean isIdField and
for numbers, a precision
- if idField, the graphql scalar returned will be a GraphQL id. This
will allow the app to work even for ids that are not uuid
- remove globals dateScalar and numberScalar modes. These were not used
- set limit as Integer
- check manually in query runner mutations that we send a valid id
Todo left:
- remove WorkspaceBuildSchemaOptions since this is not used anymore.
Will do in another PR
---------
Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Weiko <corentin@twenty.com>
Refactored the code to introduce two different concepts:
- AuditLogs (immutable, raw data)
- TimelineActivities (user-friendly, transformed data)
Still some work needed:
- Add message, files, calendar events to timeline (~2 hours if done
naively)
- Refactor repository to try to abstract concept when we can (tbd, wait
for Twenty ORM)
- Introduce ability to display child timelines on parent timeline with
filtering (~2 days)
- Improve UI: add links to open note/task, improve diff display, etc
(half a day)
- Decide the path forward for Task vs Notes: either introduce a new
field type "Record Type" and start going into that direction ; or split
in two objects?
- Trigger updates when a field is changed (will be solved by real-time /
websockets: 2 weeks)
- Integrate behavioral events (1 day for POC, 1 week for
clean/documented)
<img width="1248" alt="Screenshot 2024-04-12 at 09 24 49"
src="https://github.com/twentyhq/twenty/assets/6399865/9428db1a-ab2b-492c-8b0b-d4d9a36e81fa">
Unfortunately, it is not possible in CSS to have an overflow:visible
over x-axis while having an overflow:hidden over y-axis, leading to the
following issue:
<img width="1512" alt="image"
src="https://github.com/twentyhq/twenty/assets/12035771/9b84cbbb-c6c4-4fd6-a630-a24f01eccf73">
I'm refactoring the RecordInlineCell and RecordTableCell to use
useFloating + createPortal to open the cell.
## Context
Fixes#4808
TL;DR
Introducing pure stateless modal component ("UI modal") for our auth
modal not to have default hotkeyScope overriding our create-profile
hotkeyScope
+ we dont want the shortcut to be available for all the modal content, only for the input that should not be using a hotkeyscope, so we are using onKeyDown for the specific issue on create profile.
Explanation
create-profile hotkey scope is set by PageChangeEffect; CreateProfile
component adds enter key shortcut; but this scope is overwritten by the
default scope by the Modal component that expects a hotkeyScope to reset
to (and defaults to the default hotkeyScope if none indicated).
In the auth flow we were using that Modal component to give a modal look
to the flow but it is not a modal per say, it's a set of pages contained
within a modal look.
By creating this UI component we are escaping that hotkeyScope
overriding that does not make sense in our context.
## How was it tested
Locally
Storybook
Re-enables no-console eslint rule in stories and tests files:
- In stories, use `action` from '@storybook/addon-actions' or `fn` from
'@storybook/test' instead of console.
- In tests, console methods can be mocked like this:
`global.console.error = jest.fn()`.
In this PR, I'm fixing two things on the ViewPicker in Create mode:
- if the Dropdown has no max height, it should not be scrollable (which
is causing issue with inner dropdowns being cut by overflow: hidden
- if the user has changed the icon, the type or the name of the view,
consider the create form as isDirty and prevent its value to be
overriden by re-renders (cache updates for example)
related to #4749.
Adjusted the max height for window so that it cuts the last option a
little.
I wanted to test the menu from the second pic in the issue with the
multi select option but could not figure out where it was in the
application.
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Split from https://github.com/twentyhq/twenty/pull/4518
- Setup `@ui/*` as an internal alias to reference `twenty-ui/src`.
- Configures twenty-front to understand the `@ui/*` alias on development
mode, so twenty-ui can be hot reloaded.
- When building on production mode, twenty-front needs twenty-ui to be
built beforehand (which is automatic with the `dependsOn` option).
- Configures twenty-front to understand the `@ui/*` alias when launching
tests, so there is no need to re-build twenty-ui for tests.
---------
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Split from https://github.com/twentyhq/twenty/pull/4518
Related to #4766
Mutualizes eslint config between projects.
I didn't include `twenty-server` in this PR as this was causing too many
lint errors.
Fix: (#4204)
The issue was that when that panel was opened its content would wrap
instead of maintaining its desired structure. I fixed this bug by adding
a minimum width to the panel's contents so that they would stay
correctly formatted throughout the opening transition.
---------
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
