Merge pull request #3813 from nextcloud/fix/3809/calendar-picker-style

Adjust `NcDatetimePicker` styling
nextcloud-libraries · Feb 23, 2023 · c269d6a · c269d6a
2 parents 4ed91f2 + 7f65ff4
commit c269d6a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/components/NcDatetimePicker/NcDatetimePicker.vue b/src/components/NcDatetimePicker/NcDatetimePicker.vue
@@ -140,13 +140,16 @@ export default {
 		@select-year="handleSelectYear"
 		@select-month="handleSelectMonth"
 		@update:value="$emit('update:value', value)">
-		<template v-if="showTimezoneSelect" #icon-calendar>
-			<NcPopover :open.sync="showTimezonePopover"
+		<template #icon-calendar>
+			<NcPopover v-if="showTimezoneSelect"
+				:open.sync="showTimezonePopover"
 				open-class="timezone-popover-wrapper">
 				<template #trigger>
-					<button class="datetime-picker-inline-icon icon-timezone icon"
+					<button class="datetime-picker-inline-icon"
 						:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
-						@mousedown.stop.prevent="() => {}" />
+						@mousedown.stop.prevent="() => {}">
+						<Web :size="20" />
+					</button>
 				</template>
 
 				<div class="timezone-popover-wrapper__title">
@@ -158,6 +161,7 @@ export default {
 					class="timezone-popover-wrapper__timezone-select"
 					@input="$emit('update:timezone-id', arguments[0])" />
 			</NcPopover>
+			<CalendarBlank v-else :size="20" />
 		</template>
 		<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
 			<slot :name="slot" v-bind="scope" />
@@ -170,6 +174,9 @@ import NcTimezonePicker from '../NcTimezonePicker/index.js'
 import NcPopover from '../NcPopover/index.js'
 import l10n from '../../mixins/l10n.js'
 
+import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
+import Web from 'vue-material-design-icons/Web.vue'
+
 import {
 	getFirstDay,
 	getDayNames,
@@ -194,9 +201,11 @@ export default {
 	name: 'NcDatetimePicker',
 
 	components: {
+		CalendarBlank,
 		DatePicker,
 		NcPopover,
 		NcTimezonePicker,
+		Web,
 	},
 
 	mixins: [l10n],
@@ -391,7 +400,8 @@ export default {
 	border: none;
 	background-color: transparent;
 	border-radius: 0;
-	padding: 6px !important;
+	padding: 0 !important;
+	margin: 0;
 
 	&--highlighted {
 		opacity: .7;

diff --git a/src/components/NcDatetimePicker/index.scss b/src/components/NcDatetimePicker/index.scss
@@ -15,9 +15,15 @@ $cell_height: 32px;
 		// input
 		.mx-input {
 			width: 100%;
-			border: 1px solid var(--color-border);
+			border: 2px solid var(--color-border-maxcontrast);
 			background-color: var(--color-main-background);
 			background-clip: content-box;
+
+			&:active:not(.disabled),
+			&:hover:not(.disabled),
+			&:focus:not(.disabled) {
+				border-color: var(--color-primary-element);
+			}
 		}
 
 		&:disabled,