enh: Polish inline editing fields

Signed-off-by: Enjeck C <patrathewhiz@gmail.com>

Author: enjeck

src/shared/components/ncTable/partials/RichEditor.vue

@@ -115,7 +115,12 @@ export default {
 <style lang="scss" scoped>
 .rich-editor-edit-mode {
 	position: relative;
-	border: 1px solid var(--color-border-maxcontrast);
+	border: 2px solid var(--color-border-maxcontrast);
+	min-height: 24px;
+
+	:deep(.smart-picker-menu-container) {
+		display: none;
+	}
 }
 
 .loading-indicator {

src/shared/components/ncTable/partials/TableCellEditor.vue

@@ -4,14 +4,14 @@
 -->
 <template>
 	<div class="cell-editor" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
-		<div v-if="!isEditing" @click="handleStartEditing">
+		<div v-show="!isEditing" class="cell-display-mode" @click="handleStartEditing">
 			<NcEditor v-if="value && value.trim()"
 				:can-edit="false"
 				:text="value"
 				:show-border="false"
 				:show-readonly-bar="false" />
 		</div>
-		<RichEditor v-else
+		<RichEditor v-show="isEditing"
 			ref="richEditor"
 			:value="value"
 			:loading="localLoading"
@@ -109,11 +109,24 @@ export default {
 <style lang="scss" scoped>
 .cell-editor {
 	width: 100%;
+	position: relative;
 }
 
-.cell-editor > div {
+.cell-display-mode {
 	cursor: pointer;
 	min-height: 24px;
+	border: 2px solid transparent;
+	position: relative;
+
+	:deep(.content-wrapper) {
+		padding-left: 22px;
+	}
+}
+
+.cell-display-mode,
+:deep(.rich-editor-edit-mode) {
+	width: 100%;
+	min-height: 24px;
 }
 
 :deep(.text-editor__wrapper div.ProseMirror) {

src/shared/components/ncTable/partials/TableCellStars.vue

@@ -4,76 +4,54 @@
 -->
 <template>
 	<div class="cell-stars" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
-		<div v-if="!isEditing" @click="startEditing">
-			<div class="stars-display">
-				{{ getValue }}
-			</div>
-		</div>
-		<div v-else
-			ref="editingContainer"
-			class="inline-editing-container"
-			tabindex="0"
-			@keydown.enter="saveChanges"
-			@keydown.escape="cancelEdit">
-			<div class="align-center" :class="{ 'is-loading': localLoading }">
-				<div class="clickable-stars">
-					<span v-for="star in 5"
-						:key="star"
-						class="star"
-						:class="{ 'filled': star <= editValue, 'clickable': !localLoading && canEditCell() }"
-						:aria-label="t('tables', 'Set {star} stars', { star })"
-						@click="setStar(star)">
-						{{ star <= editValue ? '★' : '☆' }}
-					</span>
-				</div>
-				<div v-if="localLoading" class="icon-loading-small icon-loading-inline" />
+		<div class="inline-editing-container">
+			<div class="interactive-stars"
+				@mouseleave="hoverValue = null">
+				<span v-for="star in 5"
+					:key="star"
+					class="star"
+					:class="{
+						'filled': star <= (hoverValue !== null ? hoverValue : editValue),
+						'clickable': !localLoading && canEditCell(),
+						'hovering': hoverValue !== null
+					}"
+					:aria-label="t('tables', 'Set {star} stars', { star })"
+					@mouseenter="hoverValue = star"
+					@click="setStar(star)">
+					{{ star <= (hoverValue !== null ? hoverValue : editValue) ? '★' : '☆' }}
+				</span>
 			</div>
+			<div v-if="localLoading" class="icon-loading-small icon-loading-inline" />
 		</div>
 	</div>
 </template>
 
 <script>
-import cellEditMixin from '../mixins/cellEditMixin.js'
 import { translate as t } from '@nextcloud/l10n'
+import cellEditMixin from '../mixins/cellEditMixin.js'
 
 export default {
 	name: 'TableCellStars',
 
 	mixins: [cellEditMixin],
 
 	props: {
-		column: {
-			type: Object,
-			default: () => {},
-		},
-		rowId: {
-			type: Number,
-			default: null,
-		},
 		value: {
 			type: Number,
 			default: 0,
 		},
 	},
 
-	computed: {
-		getValue() {
-			const starEmpty = '☆'
-			const starFull = '★'
-			const v = this.value
-			return starFull.repeat(v) + starEmpty.repeat(5 - v)
-		},
+	data() {
+		return {
+			hoverValue: null,
+			editValue: this.value,
+		}
 	},
 
 	watch: {
-		isEditing(newValue) {
-			if (newValue) {
-				this.$nextTick(() => {
-					document.addEventListener('click', this.handleClickOutside)
-				})
-			} else {
-				document.removeEventListener('click', this.handleClickOutside)
-			}
+		value(newValue) {
+			this.editValue = newValue
 		},
 	},
 
@@ -83,11 +61,14 @@ export default {
 		setStar(starNumber) {
 			if (!this.localLoading && this.canEditCell()) {
 				// If clicking on a star that represents the current rating, clear to 0
-				if (starNumber === this.editValue) {
+				if (starNumber === this.value) {
 					this.editValue = 0
 				} else {
 					this.editValue = starNumber
 				}
+
+				this.hoverValue = null
+				this.saveChanges()
 			}
 		},
 
@@ -97,25 +78,16 @@ export default {
 			}
 
 			if (this.editValue === this.value) {
-				this.isEditing = false
 				return
 			}
 
 			const success = await this.updateCellValue(this.editValue)
 
 			if (!success) {
-				this.cancelEdit()
+				this.editValue = this.value
 			}
 
 			this.localLoading = false
-			this.isEditing = false
-		},
-
-		handleClickOutside(event) {
-			// Check if the click is outside the editing container
-			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
-				this.saveChanges()
-			}
 		},
 	},
 }
@@ -126,45 +98,35 @@ export default {
 	width: 100%;
 }
 
-.cell-stars > div:first-child {
-	cursor: pointer;
-}
-
-.stars-display {
-	font-size: 20px;
-	cursor: pointer;
-}
-
-.align-center {
-	align-items: center;
+.inline-editing-container {
 	display: flex;
-
-	&.is-loading {
-		opacity: 0.7;
-	}
+	align-items: center;
 }
 
-.clickable-stars {
+.interactive-stars {
 	display: flex;
 	align-items: center;
-	gap: 2px;
+	gap: 0;
 }
 
 .star {
-	font-size: 1.4em;
-	padding: 4px;
-	transition: transform 0.1s ease;
+	font-size: 20px;
+	color: var(--color-main-text);
+	padding: 0;
+	transition: color 0.1s ease;
 
 	&.clickable {
 		cursor: pointer;
-
-		&:hover {
-			transform: scale(1.1);
-		}
 	}
 
 	&.filled {
-		color: var(--color-warning);
+		color: var(--color-main-text);
+	}
+
+	&.hovering {
+		&.filled {
+			color: var(--color-text-maxcontrast);
+		}
 	}
 }
 

src/shared/components/ncTable/partials/TableCellTextLine.vue

@@ -8,7 +8,7 @@
 			{{ value || '' }}
 		</div>
 		<div v-else class="inline-editing-container">
-			<NcTextField v-model="editValue" :aria-label="t('tables', 'Cell input')" :disabled="localLoading || !canEditCell()" class="cell-input"
+			<NcTextField ref="input" v-model="editValue" :aria-label="t('tables', 'Cell input')" :disabled="localLoading || !canEditCell()" class="cell-input"
 				@keyup.enter="saveChanges" @keyup.esc="cancelEdit" @blur="saveChanges" />
 			<div v-if="localLoading" class="icon-loading-small icon-loading-inline" />
 		</div>

src/shared/components/ncTable/sections/CustomTable.vue

@@ -566,6 +566,7 @@ export default {
 		.inline-editing-container {
 			position: relative;
 			width: 100%;
+			overflow-y: hidden;
 
 			.cell-input {
 				width: 100%;