Merge pull request #1691 from nextcloud/refactor/remove-date-picker-hack

date-picker changes
nextcloud · Jul 1, 2021 · 5e8d119 · 5e8d119
2 parents b0eefd8 + 59ca08a
commit 5e8d119
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 37 deletions.
diff --git a/src/js/assets/scss/hacks.scss b/src/js/assets/scss/hacks.scss
@@ -6,24 +6,16 @@
 	}
 }
 
-.mx-datepicker-main, .mx-datepicker-popup {
-	right: 0 !important;
-	left: auto !important;
-}
-
+// fill full input with background color
 .mx-input {
 	background-clip: initial !important;
 }
 
-
-// make date-picker usable
-@media only screen and (min-width: 750px) {
-	.edit #app-sidebar-vue {
-		// force sidebar min-width to 480px, to show the full date picker, when user is allowed to edit poll
-		min-width: 480px;
-	}
+.mx-datepicker-main svg {
+	fill: var(--color-primary-element);
 }
 
+// force scrolling of sidebar-tabs content
 .app-sidebar-tabs {
 	overflow-y: hidden;
 }
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
@@ -30,21 +30,7 @@
 		<template #input>
 			<ButtonDiv :title="t('polls', 'Add new date option')" />
 		</template>
-		<template #footer>
-			<div v-if="dateOption.isValid" class="selection">
-				<div>
-					{{ dateOption.text }}
-				</div>
-				<Spacer />
-				<button v-if="dateOption.option.duration >= 0 && !added" class="primary" @click="addOption">
-					{{ t('polls', 'Add') }}
-				</button>
-				<div v-if="added" v-tooltip.auto="t('polls', 'Added')" class="icon-polls-yes" />
-			</div>
-			<div v-else>
-				{{ t('polls', 'Pick a day.') }}
-			</div>
-		</template>
+
 		<template #header>
 			<CheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
 				{{ t('polls', 'Select range') }}
@@ -56,11 +42,27 @@
 				<button v-if="useTime" @click="removeTime">
 					{{ t('polls', 'Remove time') }}
 				</button>
-				<button v-else @click="addTime">
+				<button v-else :disabled="!dateOption.isValid" @click="addTime">
 					{{ t('polls', 'Add time') }}
 				</button>
 			</div>
 		</template>
+
+		<template #footer>
+			<div v-if="dateOption.isValid" class="selection">
+				<div>
+					{{ dateOption.text }}
+				</div>
+				<Spacer />
+				<button v-if="dateOption.option.duration >= 0 && !added" class="primary" @click="addOption">
+					{{ t('polls', 'Add') }}
+				</button>
+				<div v-if="added" v-tooltip.auto="t('polls', 'Added')" class="icon-polls-yes" />
+			</div>
+			<div v-else>
+				{{ t('polls', 'Pick a day.') }}
+			</div>
+		</template>
 	</DateTimePicker>
 </template>
 
@@ -85,19 +87,12 @@ export default {
 	data() {
 		return {
 			pickerSelection: null,
-			firstPick: true,
 			changed: false,
-			imcomplete: true,
-			lastPickedOption: null,
 			pickerOpen: false,
 			useRange: false,
 			useTime: false,
 			showTimePanel: false,
-			keepRange: true,
-			preservedTimeFrom: moment(),
-			preservedTimeTo: moment(),
-			lastPickedDate: moment(0),
-			timeValues: moment(),
+			lastPickedDate: moment(null),
 			added: false,
 		}
 	},
@@ -181,6 +176,7 @@ export default {
 				minuteStep: 5,
 				type: this.useTime ? 'datetime' : 'date',
 				range: this.useRange,
+				key: this.useRange ? 'range-on' : 'range-off',
 				showSecond: false,
 				showTimePanel: this.showTimePanel,
 				valueType: 'timestamp',
@@ -323,7 +319,7 @@ export default {
 
 .range {
 	flex: 1;
-	text-align: left;
+	justify-content: flex-end;
 	margin: 8px;
 }