Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recurrence selection is small and fiddley #4618

Open
miaulalala opened this issue Oct 13, 2022 · 5 comments · May be fixed by #5336
Open

Recurrence selection is small and fiddley #4618

miaulalala opened this issue Oct 13, 2022 · 5 comments · May be fixed by #5336
Assignees
Labels
1. to develop Accepted and waiting to be taken care of bug design Related to design, interface, interaction design, UX, etc. feature: accessibility

Comments

@miaulalala
Copy link
Contributor

Steps to reproduce

Open the recurrence multiselect:

image

There is ample space to increase the width of the recurrence multiselect.

cc @nextcloud/designers

Expected behavior

The multiselect dropdown is wide enought o be usable comfortably

Actual behaviour

The multiselect is squeezed into the corner and even with a mouse the usage is fiddly.

Calendar app version

v4.0.0-rc.1

CalDAV-clients used

Web

Browser

Chrome

Client operating system

Ubuntu

Server operating system

c.nc

Web server

No response

Database engine version

No response

PHP engine version

No response

Nextcloud version

No response

Updated from an older installed version or fresh install

No response

List of activated apps

No response

Nextcloud configuration

No response

Web server error log

No response

Log file

No response

Browser log

No response

Additional info

No response

@miaulalala miaulalala added bug design Related to design, interface, interaction design, UX, etc. 0. to triage Pending approval or rejection feature: accessibility labels Oct 13, 2022
@JohannesGGE JohannesGGE self-assigned this Jun 21, 2023
@JohannesGGE JohannesGGE added 2. developing Work in progress and removed 0. to triage Pending approval or rejection labels Jun 21, 2023
@JohannesGGE
Copy link
Contributor

Like shown in #5336 this might be part of a bigger redesign of the hole sidebar.

@JohannesGGE JohannesGGE removed their assignment Oct 23, 2023
@JohannesGGE JohannesGGE added 1. to develop Accepted and waiting to be taken care of and removed 2. developing Work in progress labels Oct 23, 2023
@nimishavijay nimishavijay self-assigned this Oct 24, 2023
@nimishavijay
Copy link
Member

Could we think about redesigning the whole thing? Google calendar for example has some predefined options, and a custom recurrence selector which opens a separate modal
image

@jancborchardt
Copy link
Member

@nimishavijay sounds good! Can you add a mockup for that to #3543 ?

@miaulalala and it seems the issue is less about the width of the multiselect but rather the height of the dropdown that opens, not showing all the options. Increasing that could be a possible easy fix?

@miaulalala
Copy link
Contributor Author

@miaulalala and it seems the issue is less about the width of the multiselect but rather the height of the dropdown that opens, not showing all the options. Increasing that could be a possible easy fix?

it's a bit of both. but increasing the height is good. I think it would also help if the dropdown opened upwards, not downwards, since it's the last item in the list.

@nimishavijay
Copy link
Member

Increasing the height could be a quick fix, and in the long term it could go in a modal as it this quite a complicated task. Would be a follow up to #3543

  • Clicking on the + button or edit button for recurrence in the sidebar would open this modal
  • If no recurrence is set, the modal opens with the weekly recurrence selected (similar to google's modal)

In the modal itself

  • Use vue components for everything
  • For weekly recurrence by day and monthly recurrence by date, use circular buttons
  • The end date selection (never, on date, after) is not a dropdown but radio buttons
    • Inline date picker for "on date" option
    • Inline number input for "after" option
  • There is a done button to confirm the settings
  • Summary of the recurrence (Repeats daily, Repeats monthly until 12/12/2024, etc) is shown on the left of the done button

Mockups:

Frame 46
Frame 41
Frame 42
Frame 43
Frame 44
Frame 45

cc @nextcloud/designers :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop Accepted and waiting to be taken care of bug design Related to design, interface, interaction design, UX, etc. feature: accessibility
Projects
Status: 📄 To do
Status: 🏗️ At engineering
Development

Successfully merging a pull request may close this issue.

4 participants