fix(NcDateTimePicker): correctly import library CSS #7051

raimund-schluessler · 2025-06-16T21:35:28Z

☑️ Resolves

This adjusts the CSS import of the NcDateTimePicker vendor styles to not be scoped. I don't know if this is the proper way to handle this issue, so plead advise if not.

Fixes bug(NcDateTimePicker): append-to-body styling broken #7050 (comment).

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

⛑️ Tests are included or are not applicable
📘 Component documentation has been extended, updated or is not applicable
2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

raimund-schluessler · 2025-06-19T07:03:48Z

@susnux @ShGKme Could you have a look at this, please? This problem really prevents using NcDateTimePicker at all.

src/components/NcDateTimePicker/NcDateTimePicker.vue

raimund-schluessler · 2025-06-20T21:06:17Z

@susnux Is this (roughly) what you had in mind? It works in the Tasks app, but there are still issues:

appendToBody still broken
Nextcloud styles not correctly applied yet when appendToBody=true
styleguide does not build, since the CSS import fails vs. npm run build fails
@vuepic/vue-datepicker/dist/main.css defines CSS variables under :root. Importing that nested in a class is not valid, it seems. Is there a better solution than manually duplicating the variables (which seems terrible, because minor changes in the lib might break the CSS).

src/components/NcDateTimePicker/NcDateTimePicker.vue

ShGKme · 2025-06-20T21:21:25Z

styleguide does not build, since the CSS import fails vs. npm run build fails

Fixable by adding path.resolve(__dirname, 'node_modules') to sassOptions.includePaths[] in the webpack config.

src/components/NcDateTimePicker/NcDateTimePicker.vue

ShGKme · 2025-06-20T21:29:30Z

Is there a better solution than manually duplicating the variables (which seems terrible, because minor changes in the lib might break the CSS).

I'd consider changing CSS variables here a breaking change for the library as it is a public API for theming.

And anyway, it is less dangerous than overriding many other styles in this component.

raimund-schluessler · 2025-06-20T21:29:52Z

Ok, I think this now passes as a PoC. I will try to fix the remaining issues over the weekend if I have time.

ShGKme · 2025-06-20T21:34:51Z

Nextcloud styles not correctly applied yet when appendToBody=true

Could you elaborate, what you mean?

raimund-schluessler · 2025-06-20T21:39:06Z

Nextcloud styles not correctly applied yet when appendToBody=true

Could you elaborate, what you mean?

The style adjustments we do are not applied yet, if the picker is appended to body, because the css classes are not correct yet. You can see this at the buttons at the top or the highlight color.
Just needs some css class adjustments.

raimund-schluessler · 2025-06-21T05:47:59Z

The styles are adjusted now and work for appendToBody as well. But the time-picker elements are differently styled now than before and I couldn't yet figure out what is missing.

raimund-schluessler · 2025-06-21T05:53:10Z

The styles are adjusted now and work for appendToBody as well. But the time-picker elements are differently styled now than before and I couldn't yet figure out what is missing.

It seems the button server styles are not applied anymore, because they are overwritten by vuepic styles with higher priority now.

src/components/NcDateTimePicker/NcDateTimePicker.vue

julien-nc · 2025-06-23T17:15:21Z

The component can now be used. Picking a date works fine. But the clear button cannot be clicked.

raimund-schluessler · 2025-06-29T21:56:39Z

The styles are now in line with server and I hope to have fixed everything. Please review again.

raimund-schluessler · 2025-06-29T22:04:47Z

The component can now be used. Picking a date works fine. But the clear button cannot be clicked.

Fix is in #7103.

ShGKme · 2025-07-01T08:45:00Z

src/components/NcDateTimePicker/NcDateTimePicker.vue

+	:deep(.dp__input) {
+		margin: 3px;
+		margin-inline-start: 0;
+		padding: 0 12px;
+		font-size: var(--default-font-size);
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+		border: 2px solid var(--color-border-maxcontrast);
+		outline: none;
+		border-radius: var(--border-radius-large);
+		text-overflow: ellipsis;
+		cursor: pointer;
+	}
+	:deep(.dp__btn),
+	:deep(.dp--time-overlay-btn),
+	:deep(.dp__action_button) {
 		margin: 0;
+		font-weight: bold;
+		border-radius: var(--border-radius-element);
+		padding: calc((var(--default-clickable-area) - 1lh) / 2) calc(3 * var(--default-grid-baseline));
+		font-size: var(--default-font-size);
+		width: auto;
+		min-height: var(--default-clickable-area);
+		cursor: pointer;
+		box-sizing: border-box;
+		color: var(--color-primary-element-light-text);
+		background-color: var(--color-primary-element-light);
+		border: none;
+	}
+	:deep(.dp--time-overlay-btn),
+	:deep(.dp__action_button) {
+		margin: 3px;
+		margin-inline-start: 0;
+	}
+	:deep(.dp__inc_dec_button) {
+		padding: calc((var(--default-clickable-area) - 20px) / 2);


Is it needed only after scoping or a new change?

This might not necessarily be related to scoping. I think it depends in which order the server and library styles are included, which might be arbitrary. If server styles come after the library styles, it works fine. But if not, the library styles overwrite the server styles (mainly the ones for button) and the style looks broken.

But it should not be needed, at least many of this styles are already configured by overwriting the variable of the library.
For example the font-size is already configured by --dp-font-size and should not be needed to again configure for all this classes here.

Well, if it's not done, then the style is off. But I am fine with any other solution you have.
I just want this issue to be solved and you see my solution here. Please, feel free to adjust it to your liking.

raimund-schluessler · 2025-07-05T18:26:56Z

Can we merge this for the next RC, please? It's really an annoying issue for apps.

susnux · 2025-07-10T19:04:47Z

src/components/NcDateTimePicker/NcDateTimePicker.vue

+	--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);
+	--dp-transition-timing: ease-out;
+	--dp-action-row-transtion: all 0.2s ease-in;
+	--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;


we should probably use our styles here

susnux

Pushed some fixes to simplify and also adjust some of the places to our styles.

Looks good in apps now:

src/components/NcDateTimePicker/NcDateTimePicker.vue

ShGKme · 2025-07-05T20:14:08Z

src/components/NcDateTimePicker/NcDateTimePicker.vue

-				:input-label="t('Timezone')" />
-		</template>
-	</VueDatePicker>
+	<span class="vue-date-time-picker__wrapper">


Nitpick, but it is not valid BEM structure - element cannot be a parent of its own block.

We do this also in other places 😅

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

* don't import Teleport * fix CSS import for styleguide * fix styles for appendToBody Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

- use BEM syntax Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

…lash with server rules Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

susnux · 2025-07-15T12:31:17Z

rebased
squashed some commits
migrate span to div

Antreesy

Tested. Not sure if related to this PR, but some format options are no longer valid

E.g. YYYY -> yyyy and DD - dd
https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md

raimund-schluessler added this to the 9.0.0-rc.3 milestone Jun 16, 2025

raimund-schluessler requested review from ShGKme and susnux June 16, 2025 21:35

raimund-schluessler added bug Something isn't working 3. to review Waiting for reviews feature: datepicker Related to the date/time picker component regression Regression of a previous working feature design Design, UX, interface and interaction design labels Jun 16, 2025

This was referenced Jun 16, 2025

bug(NcDateTimePicker): append-to-body styling broken #7050

Closed

fix: adjust to new datepicker api nextcloud/tasks#2884

Merged

raimund-schluessler requested a review from Antreesy June 16, 2025 22:01

ShGKme reviewed Jun 19, 2025

View reviewed changes

src/components/NcDateTimePicker/NcDateTimePicker.vue Outdated Show resolved Hide resolved

susnux mentioned this pull request Jun 19, 2025

fix(NcDateTimePicker): do not scope all imported styles #7066

Closed

ShGKme reviewed Jun 20, 2025

View reviewed changes

src/components/NcDateTimePicker/NcDateTimePicker.vue Outdated Show resolved Hide resolved

src/components/NcDateTimePicker/NcDateTimePicker.vue Show resolved Hide resolved

ShGKme reviewed Jun 20, 2025

View reviewed changes

src/components/NcDateTimePicker/NcDateTimePicker.vue Outdated Show resolved Hide resolved

susnux reviewed Jun 20, 2025

View reviewed changes

src/components/NcDateTimePicker/NcDateTimePicker.vue Outdated Show resolved Hide resolved

raimund-schluessler added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Jun 20, 2025

susnux reviewed Jun 21, 2025

View reviewed changes

src/components/NcDateTimePicker/NcDateTimePicker.vue Outdated Show resolved Hide resolved

susnux reviewed Jun 21, 2025

View reviewed changes

src/components/NcDateTimePicker/NcDateTimePicker.vue Show resolved Hide resolved

raimund-schluessler added this to the 9.0.0-rc.4 milestone Jun 29, 2025

raimund-schluessler force-pushed the fix/noid/datepicker-style-import branch from 657ef9f to 98a2b34 Compare June 29, 2025 21:54

raimund-schluessler requested review from ShGKme and susnux June 29, 2025 21:56

raimund-schluessler mentioned this pull request Jun 29, 2025

fix(NcDateTimePicker): make clearable work #7103

Merged

3 tasks

raimund-schluessler added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Jun 29, 2025

raimund-schluessler changed the title ~~fix(NcDateTimePicker): do not scope imported CSS~~ fix(NcDateTimePicker): correctly import library CSS Jun 30, 2025

ShGKme reviewed Jul 1, 2025

View reviewed changes

raimund-schluessler requested a review from ShGKme July 2, 2025 16:47

susnux reviewed Jul 10, 2025

View reviewed changes

susnux approved these changes Jul 15, 2025

View reviewed changes

ShGKme approved these changes Jul 15, 2025

View reviewed changes

raimund-schluessler and others added 6 commits July 15, 2025 14:24

fix(NcDateTimePicker): do not scope imported CSS

6b0d4d2

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

fix(NcDateTimePicker): fix appendToBody

8ae7435

* don't import Teleport * fix CSS import for styleguide * fix styles for appendToBody Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

fix(NcDateTimePicker): align button and input style to server

776e0f1

- use BEM syntax Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

refactor(NcDateTimePicker): use our themed buttons for confirmation

14ca5c1

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

fix(NcDateTimePicker): use our css variable to theme the picker

4786b58

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

fix(NcIconSvgWrapper): increase specificity of inline styles to fix c…

3762252

…lash with server rules Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

susnux force-pushed the fix/noid/datepicker-style-import branch from 6b6c4e2 to 3762252 Compare July 15, 2025 12:30

Antreesy approved these changes Jul 15, 2025

View reviewed changes

susnux merged commit 590b0c8 into main Jul 15, 2025
25 checks passed

susnux deleted the fix/noid/datepicker-style-import branch July 15, 2025 12:41

susnux mentioned this pull request Jul 15, 2025

chore: prepare v9.0.0-rc.4 #7155

Merged

Antreesy mentioned this pull request Jul 15, 2025

chore: copy diff from stable8 changelog #7156

Merged

ShGKme mentioned this pull request Aug 20, 2025

fix(NcEmojiPicker): scope styles #7334

Merged

3 tasks

fix(NcDateTimePicker): correctly import library CSS #7051

fix(NcDateTimePicker): correctly import library CSS #7051

Uh oh!

Conversation

raimund-schluessler commented Jun 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☑️ Resolves

🖼️ Screenshots

🏁 Checklist

Uh oh!

raimund-schluessler commented Jun 19, 2025

Uh oh!

Uh oh!

raimund-schluessler commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ShGKme commented Jun 20, 2025

Uh oh!

Uh oh!

ShGKme commented Jun 20, 2025

Uh oh!

raimund-schluessler commented Jun 20, 2025

Uh oh!

ShGKme commented Jun 20, 2025

Uh oh!

raimund-schluessler commented Jun 20, 2025

Uh oh!

raimund-schluessler commented Jun 21, 2025

Uh oh!

raimund-schluessler commented Jun 21, 2025

Uh oh!

Uh oh!

Uh oh!

julien-nc commented Jun 23, 2025

Uh oh!

raimund-schluessler commented Jun 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

raimund-schluessler commented Jun 29, 2025

Uh oh!

ShGKme Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

raimund-schluessler Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

susnux Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

raimund-schluessler Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

raimund-schluessler commented Jul 5, 2025

Uh oh!

susnux Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

susnux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ShGKme Jul 5, 2025

Choose a reason for hiding this comment

Uh oh!

susnux Jul 15, 2025

Choose a reason for hiding this comment

Uh oh!

susnux commented Jul 15, 2025

Uh oh!

Antreesy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

raimund-schluessler commented Jun 16, 2025 •

edited

Loading

raimund-schluessler commented Jun 20, 2025 •

edited

Loading

raimund-schluessler commented Jun 29, 2025 •

edited

Loading

Antreesy left a comment •

edited

Loading