Recurrence selection is small and fiddley

nextcloud / calendar

📆 Calendar app for Nextcloud

https://apps.nextcloud.com/apps/calendar

GNU Affero General Public License v3.0

968 stars 236 forks source link

Recurrence selection is small and fiddley #4618

Open miaulalala opened 1 year ago

miaulalala commented 1 year ago

Steps to reproduce

Open the recurrence multiselect:

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

JohannesGGE commented 11 months ago

Like shown in https://github.com/nextcloud/calendar/pull/5336 this might be part of a bigger redesign of the hole sidebar.

nimishavijay commented 11 months ago

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

jancborchardt commented 8 months ago

@nimishavijay sounds good! Can you add a mockup for that to https://github.com/nextcloud/calendar/issues/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 commented 8 months ago

@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 commented 7 months ago

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:

cc @nextcloud/designers :)