fix(design): edit columns (#521)

- add column info popover - don't show -1 as maxTextLength, which just means unlimited - visual fixes Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>
nextcloud · Sep 8, 2023 · e279715 · e279715
1 parent cc08e4c
commit e279715
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/src/modules/main/partials/ColumnInfoPopover.vue b/src/modules/main/partials/ColumnInfoPopover.vue
@@ -5,36 +5,36 @@
 		</template>
 		<table>
 			<tr>
-				<td>
+				<td class="key">
 					{{ t('tables', 'Last edit') }}
 				</td>
-				<td>
-					{{ updateTime }}<br>
+				<td class="value">
+					{{ updateTime }}&nbsp;
 					<NcUserBubble :user="column.lastEditBy" :display-name="column.lastEditBy" />
 				</td>
 			</tr>
 			<tr>
-				<td>
+				<td class="key">
 					{{ t('tables', 'Create') }}
 				</td>
-				<td>
-					{{ createTime }}<br>
+				<td class="value">
+					{{ createTime }}&nbsp;
 					<NcUserBubble :user="column.createdBy" :display-name="column.createdBy" />
 				</td>
 			</tr>
 			<tr>
-				<td>
+				<td class="key">
 					{{ t('tables', 'Column ID') }}
 				</td>
-				<td>
+				<td class="value">
 					{{ column.id }}
 				</td>
 			</tr>
 			<tr>
-				<td>
+				<td class="key">
 					{{ t('tables', 'Table ID') }}
 				</td>
-				<td>
+				<td class="value">
 					{{ column.tableId }}
 				</td>
 			</tr>
@@ -80,4 +80,12 @@ export default {
 	vertical-align: text-top;
 }
 
+td {
+	vertical-align: top;
+}
+
+td.value {
+	text-align: end;
+}
+
 </style>
diff --git a/src/modules/modals/EditColumn.vue b/src/modules/modals/EditColumn.vue
@@ -22,13 +22,15 @@
 				</div>
 			</div>
 			<div class="buttons">
-				<ColumnInfoPopover v-if="debug" :column="column" />
-				<div class="last-edit-info">
-					{{ t('tables', 'Last edit') + ': ' }}
-					{{ updateTime }}
-					<NcUserBubble :user="column.lastEditBy" :display-name="column.lastEditBy" />
+				<div class="flex">
+					<ColumnInfoPopover :column="column" />&nbsp;
+					<div class="last-edit-info">
+						{{ t('tables', 'Last edit') + ': ' }}
+						{{ updateTime }}&nbsp;
+						<NcUserBubble :user="column.lastEditBy" :display-name="column.lastEditBy" />
+					</div>
 				</div>
-				<div style="display: flex">
+				<div class="flex">
 					<div class="button-padding-right">
 						<NcButton type="secondary" :aria-label="t('tables', 'Cancel')" @click="actionCancel">
 							{{ t('tables', 'Cancel') }}
@@ -109,8 +111,6 @@ export default {
 			editColumn: structuredClone(this.column),
 			deleteId: null,
 			editErrorTitle: false,
-			// To enable the column info popup
-			debug: false,
 		}
 	},
 	computed: {
@@ -204,4 +204,10 @@ export default {
 	align-items: center;
 }
 
+.buttons :deep(.user-bubble__wrapper) {
+	padding-top: 5px;
+}
+
+.flex { display: flex }
+
 </style>
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLineForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLineForm.vue
@@ -28,7 +28,7 @@
 				{{ t('tables', 'Maximum text length') }}
 			</div>
 			<div class="fix-col-4">
-				<input v-model="mutableColumn.textMaxLength"
+				<input v-model="getMaxLength"
 					type="number"
 					step="1"
 					min="0">
@@ -42,23 +42,32 @@
 import { translate as t } from '@nextcloud/l10n'
 
 export default {
-	name: 'TextLineForm',
+
 	props: {
 		column: {
 			type: Object,
 			default: null,
 		},
 	},
+
 	data() {
 		return {
 			mutableColumn: this.column,
 		}
 	},
+
+	computed: {
+		getMaxLength() {
+			return this.mutableColumn.textMaxLength > 0 ? this.mutableColumn.textMaxLength : null
+		},
+	},
+
 	watch: {
 		column() {
 			this.mutableColumn = this.column
 		},
 	},
+
 	methods: {
 		t,
 	},