fix(css): bring back reminder bell

[Jerome-Herbinet]

Please check commit.

Only tested with my browser's dev tools (CSS inspector).

Supposed to work properly with:

• regular light theme
• regular dark theme
• high contrast light theme
• high contrast dark theme
• automatic (default) theme base on browser's one

⚠️ Not tested (no test environment) ; real test from reviewers required

Light theme	Dark theme

[SebastianKrupinski]

Hi @Jerome-Herbinet

Thank you for the PR. But we are going to need some context here. What is the issue, where is the issue?

[Jerome-Herbinet]

Hi @Jerome-Herbinet

Thank you for the PR. But we are going to need some context here. What is the issue, where is the issue?

Hi @SebastianKrupinski this is a draft, so work is under progress 🙂

[SebastianKrupinski]

Please don't embed images in to the css like this.

[Jerome-Herbinet]

OK, can you tell me how I can get the bell properly ?

[Jerome-Herbinet]

What method / syntax ?

[Jerome-Herbinet]

@SebastianKrupinski my goal is to dynamically change the color of the icon ; if it's not possible, tell where to insert it in the HTML code with the right syntax and then, we'll target it for color changing with different CSS properties.

[SebastianKrupinski]

That code lives in the full calendar event sources / mount

Here is a recent PR that altered the colors, and design

https://github.com/nextcloud/calendar/pull/8149/changes

Those are the files that control the look and display of the events

[Jerome-Herbinet]

Honestly, I'm going to need some help. Could someone handle the icon call properly while I take care of the CSS part?

[Jerome-Herbinet]

@nextcloud/designers I need a co-author to insert / call properly the bell icon in the HTML DOM (if inserting it as I did in CSS is not permitted).

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[nimishavijay]

@Jerome-Herbinet I am indeed interested to know if there is an existing issue/discussion about this, and what problem it is solving. I'd be wary of adding the bell icon in every view as often there is not enough space (like in month view). This would be more suited to day or agenda view, but I'm interested to know what you think!

[Jerome-Herbinet]

@Jerome-Herbinet I am indeed interested to know if there is an existing issue/discussion about this, and what problem it is solving. I'd be wary of adding the bell icon in every view as often there is not enough space (like in month view). This would be more suited to day or agenda view, but I'm interested to know what you think!

@nimishavijay please test this in CSS custom (theming) on any Nextcloud instance ; this is last version I use. It displays reminder properly in the following views :

• day
• week
• list

It doesn't appear in the month and year views because there is not enough space.

The only problem I encounter is the bell icon calling method (as said by @SebastianKrupinski) ; for that I need someone to co-edit this PR.

.fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) .fc-event.fc-event-nc-alarms .fc-event-main-frame {
  width: calc(100% - 15px);
  margin-left: 15px;
}

.fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) .fc-event.fc-event-nc-alarms .icon-event-reminder {
  position: absolute;
  top: 2px;
  left: 0;
  display: inline-block;
  min-width: 14px;
  min-height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) .fc-event.fc-event-nc-alarms.fc-daygrid-event .icon-event-reminder {
  top: 3px;
}

.fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) .fc-list-table td {
  padding-left: 20px;
}

.fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) .fc-list-table .fc-event.fc-event-nc-alarms .icon-event-reminder {
  top: 11px;
  left: 3px;
}

.fc-view:not(.fc-dayGridMonth-view):not(.fc-multiMonthYear-view) .fc-list-table td {
  padding-left: 20px;
}

:root {
  --icon-reminder-light: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z'/%3E%3C/svg%3E");
  --icon-reminder-dark:  url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z'/%3E%3C/svg%3E");
}

body[data-themes^="light"] .icon-event-reminder {
  background-image: var(--icon-reminder-light);
}

body[data-themes^="dark"] .icon-event-reminder {
  background-image: var(--icon-reminder-dark);
}

@media (prefers-color-scheme: dark) {
  body[data-themes^="default"] .icon-event-reminder {
    background-image: var(--icon-reminder-dark);
  }
}

@media (prefers-color-scheme: light) {
  body[data-themes^="default"] .icon-event-reminder {
    background-image: var(--icon-reminder-light);
  }
}

[Jerome-Herbinet]

Just updated the code (one more commit, then squash) to fit the last version shown in #8328 (comment) ; icon call method issue remaining (help needed from one of you @SebastianKrupinski @nimishavijay)

screenshot in description have also been updated ; I remind that the styles impact the following views :

• day
• week
• list

But, it doesn't appear in the month and year views because there is not enough space.

In any case, commits must be tested by reviewers (I don't have real test environment).