[IMP] Spreadsheet: Mobile-tte (pouet pouet 🛵) #6174
Closed
+3,491
−2,289
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
rrahir
force-pushed
the
master-mobile-viewport-rar
branch
6 times, most recently
from
bd82c3e to
ad2d9d3
Compare
rrahir
force-pushed
the
master-mobile-viewport-rar
branch
11 times, most recently
from
de803cb to
af5122b
Compare
rrahir
force-pushed
the
master-mobile-viewport-rar
branch
12 times, most recently
from
9983c5e to
4ebeaa8
Compare
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Currently, a user can scroll the viewport with touch events but this collides with the selection. With this commit, we differentiate the two situations: - a pointerdown event will select a cell in desktop mode - a click event will select a cell in mobile mode Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
the gridcomposer makes sense when trying to input values from a keyboard, which should not occur in mobile mode (at least for now). Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
The drag&drop behaviour is complicated to setup in mobile mode and will be deactivated for the time being. At least until we find a sort of reliable "longpress" behaviour. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
The current bottombar responds well on small screens but it lacks some features. The idea is to have the topbar composer as well as the Menu bar available on the bottom bar in a form of dynamic display to gain some space for the viewport. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
je sais plus pourquoi; faudra que je le revert pour voir ce que a implique Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Currently, we detect the resize of the document viewport to trigger a resizing in the plugins,which in turn changes the dom dimensions, and it' s a loop of calls/get between the DOM and Model which ends up converging. However, this process is kind of slow because we need to wait for an animation frame at every iteration. This revision adds a "snappy" way to handle the resizing by capturing the top bar and bottom bar dimensions and instantly updating the size in the model to the final value that we are looking for. There is only one catch, and a pretty big one, the instant jump of size takes (of course) place before the drawing of the canvas, which means that we have one drawing frame where the visible part of the canvas does not match the part that is drawn. When the latter is smaller than the visible part, the undrawn part of the canvas is black -> it looks like a glitch. That being said, we could take some measures to draw some white background that spills outside of the visible part to account for those cases. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Extract the Menu logic in a given component to use it outside of a popover. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
For the same reason as the bottom bar, we cannot properly distinguish a click from a "longpress" to decide wheter we select or want to move the figure around. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
The resize, along with the move of figures, is not easily feasible at the moment. We will try to reintroduce it properly in the future. For the time being, we focus on consultation and light cell edition. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
The "hover" behaviour makes no sense in mobile, instead, seeing how it's used, we can decide to have the "hoveredCells" visible on click in mobile mode. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
the usability of the sidepanel is relative in mobile mode is we consider the possibility to select ranges. We'd need a way to "hide" the sidepanel during the selection. As a first approach, we only hide it ans we will see how it can be improved afterwards. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
in mobile, allow the start of edition but have it captured by the bottom bar composer Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Some actions heavily rely on the sidepanel (edit pivot, edit table, ...) But since the latter is currently deactivated in small viewports, it doesn't make sense to display them to the end user. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
finding the regular symbols and operators is quite troublesome on a mobile virtual keyboard. this revision adds some symbol shortcuts. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Currently; a quick touch move to the bottom of the screen while navigating in the bottombar will simply reload the page. It's quite annoying and if a user wanted to reload, he's start up from the top of the page, not the bottom. This revision deactivates the ability to reload the page by scrolling in the bottom bar. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
in mobile, we rely on the click event to select a cell but this event needs to be defaultPrevented for visual reasons (to specify and explain later...) Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
"La chute de l'empereur" Task: 2756003 Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
For some reason, some mobile browsers (chrome) close their virtual keyboard when we touch the selection and clear it. Some other browsers (safari) seem to require that we clear the selection when clicking on the composer to work properly. While this highlights some weird issue of selection synchronisation that we live with since pretty much the beginning of the composer, we are only trying to 'make it work' before refactoring the synchronisation flow in a later work. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
For some reason, webkit seems to render the bottom bar composer assistant differently than the other renderers, it is clipped due to the "overflow:hidden" rule set on the parents. Fun thing, if you resize the document viewport, then the clipping disappears. Since it only breaks on webkit and it's not the first time we have to battle against it, I will assume it is a bug and will not take days investigate it. The assistant is not a vital part of the experience and can simply be deactivated on Safari mobile. Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
pushed a commit
that referenced
this pull request
Jun 5, 2025
Part-of: #6174 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
robodoo
added a commit
that referenced
this pull request
Jun 5, 2025
This pull request (finally) introduces a mobile edition mode for Spreadsheet! The main points tackled were: ### Grid manipulations The main issues were: - the impossibility to properly navigate in the spreadsheet without messing the selection, - a nightmare to select ranges for a formula - the structure did not tolerate narrow viewports and it was a pain to find the information you were looking for - Drag-and-drop elements (figures for instance) would conflict with the ability to scroll the viewport The first three points were addressed by defining a new flow for specific mobile/touchscreen-only devices. All drag-and-drop features were deactivated at this time and will come back in the future once we develop some tools to detect longtouches. ### Air out the top bar: The top bar is too cluttered on a narrow screen and the edition of cells from a top bar composer is counter intuitive as the virtual keyboard is placed at the bottom of a screen device. We introduce a dedicated bottom bar for this specific situation that will allow to: - edit cell contents - navigate through the menu bar (which is extracted from the top bar) - navigate through the different sheets (standard bottom bar) This arrangement leaves the grid at the center of the screen, where the user attention is focused. ## Current limitations Some features were disabled because their current behaviour/implementation is quite complicated to adapt to the mobile experience. These are: - drag and dropping elements in the grid/bottom bar - resizing headers - every feature that requires the use of a side panel (pivot/figure edition, find & replace, data validation) They will come in time but we first set our focus on two main uses: - grid consultation - light cell edition closes #6174 Task: [2756003](https://www.odoo.com/odoo/2328/tasks/2756003) Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request (finally) introduces a mobile edition mode for Spreadsheet!
The main points tackled were:
Grid manipulations
The main issues were:
the selection,
the information you were looking for
ability to scroll the viewport
The first three points were addressed by defining a new flow for specific
mobile/touchscreen-only devices.
All drag-and-drop features were deactivated at this time and will come back
in the future once we develop some tools to detect longtouches.
Air out the top bar:
The top bar is too cluttered on a narrow screen and the edition of cells
from a top bar composer is counter intuitive as the virtual keyboard is
placed at the bottom of a screen device. We introduce a dedicated bottom
bar for this specific situation that will allow to:
This arrangement leaves the grid at the center of the screen, where the
user attention is focused.
Current limitations
Some features were disabled because their current behaviour/implementation
is quite complicated to adapt to the mobile experience.
These are:
find & replace, data validation)
They will come in time but we first set our focus on two main uses:
Task: 2756003