feat(editors): redesign editors

[st3iny]

Fix #3543

Screenshots

Simple Editor

Read-only	Edit mode	View Mode

Sidebar Editor

Header	Attachments	Read-only

Invitations

I moved the invitation response button below the date and time fields. They looked a bit awkward at the bottom.

Simple	Sidebar

TODO

• Sidebar redesign
• Attachments redesign
• Fix conflicts

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (dba8c91) 24.48% compared to head (3369fc8) 24.19%.
Report is 7 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #5675      +/-   ##
============================================
- Coverage     24.48%   24.19%   -0.29%     
  Complexity      423      423              
============================================
  Files           243      243              
  Lines         10954    11005      +51     
  Branches       1803     1825      +22     
============================================
- Hits           2682     2663      -19     
- Misses         8272     8342      +70     

Flag	Coverage Δ
javascript	15.11% <ø> (-0.31%)	⬇️
php	61.97% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[GretaD]

it looks like in the screenshots, and no errors were shown. 🥳

[GretaD]

ah, i have this warning while building:

WARNING in ./node_modules/moment/min/moment-with-locales.js 2159:16-50 Module not found: Error: Can't resolve './locale' in '/var/www/nextcloud/server/apps/calendar/node_modules/moment/min' @ ./node_modules/@nextcloud/moment/dist/index.mjs 1:0-50 2:0-65 6:0-8 9:58-72 9:73-81 15:0-17:2 @ ./src/filters/dateRangeFormat.js 22:0-39 36:13-19 39:16-22 40:14-20 43:13-19 47:13-19 @ ./src/services/windowTitleService.js 22:0-60 42:18-33 @ ./src/main.js 41:0-66 67:0-18

[st3iny]

ah, i have this warning while building:

WARNING in ./node_modules/moment/min/moment-with-locales.js 2159:16-50 Module not found: Error: Can't resolve './locale' in '/var/www/nextcloud/server/apps/calendar/node_modules/moment/min' @ ./node_modules/@nextcloud/moment/dist/index.mjs 1:0-50 2:0-65 6:0-8 9:58-72 9:73-81 15:0-17:2 @ ./src/filters/dateRangeFormat.js 22:0-39 36:13-19 39:16-22 40:14-20 43:13-19 47:13-19 @ ./src/services/windowTitleService.js 22:0-60 42:18-33 @ ./src/main.js 41:0-66 67:0-18

Yeah, that is likely related to a recent bump of nextcloud/moment #5699. I'll have a look next week but it should not be related to this PR.

I'll also fix js unit tests ASAP.

[st3iny]

The warning is unrelated (also on main) and will be fixed in #5722.

[st3iny]

Blocked until the nextcloud/vue 8 migration was merged.

[nimishavijay]

This is super super cool! :D really great :) Some minor comments:

• The title of the event could be more eye catching, so it could be bold and even in bigger font size
• All the icons on the left could be center aligned. Currently the icon of the details are slightly more to the left, the icon of the calendar on top is a bit to the right, and the icons in the top and bottom section in the sidebar are slightly misaligned. All these should ideally be center aligned :) (suggestion: add some left margin for the details elements in the card and the top section of the sidebar)
• There should also be an icon for the date time, it could be the event MDI icon

Nice-to-haves that are not in the original mockups:

• if there is no recurrence, the "No recurrence" wording can be changed to "Does not repeat" to keep it simple
• Use a edit icon for the edit button
• Use a done icon for the save button

Regarding the accept/reject/tentative buttons:

• You are right, placing it directly as the last row looks off. I am not sure about placing such bold buttons in the middle of the card either. How about placing it as the second-last row and making the edit button a tertiary button?
• Hide accept/decline/reject buttons in edit mode

Or alternatively no full width buttons, but all right justified

What do you think? Also pinging the rest of @nextcloud/designers for your thoughts on the accept buttons :)

[szaimen]

Or alternatively no full width buttons, but all right justified

I like this one. It is not so much in your face compared to the other one 😅

Feedback has been addressed. This PR is still waiting for the nc/vue upgrade.

[skjnldsv]

Oh, I just realized we don't have the illustrations on the sidebar anymore :(
I loved those!