⏱️ Combine the amount and unit

Signed-off-by: Joas Schilling <coding@schilljs.com>

2 files changed, 26 insertions, 33 deletions

diff --git a/src/AdminSettings.vue b/src/AdminSettings.vue
index 4e6dc2a..a8a4999 100644
--- a/src/AdminSettings.vue
+++ b/src/AdminSettings.vue
@@ -12,11 +12,8 @@
 					<th class="retention-heading__name">
 						{{ t('files_retention', 'Files tagged with') }}
 					</th>
-					<th class="retention-heading__amount">
-						{{ t('files_retention','Retention') }}
-					</th>
-					<th class="retention-heading__unit">
-						{{ t('files_retention','Time') }}
+					<th class="retention-heading__time">
+						{{ t('files_retention','Retention time') }}
 					</th>
 					<th class="retention-heading__after">
 						{{ t('files_retention','From date of') }}
@@ -39,14 +36,12 @@
 							:filter="filterAvailableTagList"
 							:close-on-select="true" />
 					</td>
-					<td class="retention-rule__amount">
+					<td class="retention-rule__time">
 						<NcTextField :value.sync="newAmount"
 							:disabled="loading"
 							type="text"
 							:label="amountLabel"
 							:placeholder="''" />
-					</td>
-					<td class="retention-rule__unit">
 						<NcMultiselect v-model="newUnit"
 							:disabled="loading"
 							:options="unitOptions"
@@ -276,16 +271,17 @@ export default {
 	.retention-heading,
 	.retention-rule {
 		&__name,
-		&__amount,
-		&__unit,
+		&__time,
 		&__after,
 		&__active,
 		&__action {
 			color: var(--color-text-maxcontrast);
 			padding: 10px 10px 10px 0;
 		}
-		&__amount {
-			text-align: right;
+
+		&__time {
+			text-align: center;
+			min-width: 260px;
 		}
 
 		&__action {
@@ -297,20 +293,22 @@ export default {
 
 	.retention-heading {
 		&__name,
-		&__unit,
+		&__time,
 		&__after,
 		&__active,
 		&__action {
 			padding-left: 13px;
 		}
-
-		&__amount {
-			padding-right: 23px;
-		}
 	}
 
 	.retention-rule {
-		&__amount {
+		&__time {
+			> div {
+				width: 49%;
+				min-width: 0;
+				display: inline-block;
+			}
+
 			::v-deep .input-field__input {
 				text-align: right;
 			}
diff --git a/src/Components/RetentionRule.vue b/src/Components/RetentionRule.vue
index 987ceb0..957efe9 100644
--- a/src/Components/RetentionRule.vue
+++ b/src/Components/RetentionRule.vue
@@ -7,11 +7,8 @@
 		<td class="retention-rule__name">
 			{{ tagName }}
 		</td>
-		<td class="retention-rule__amount">
-			{{ timeamount }}
-		</td>
-		<td class="retention-rule__unit">
-			{{ getUnit }}
+		<td class="retention-rule__time">
+			{{ getAmountAndUnit }}
 		</td>
 		<td class="retention-rule__after">
 			{{ getAfter }}
@@ -74,16 +71,16 @@ export default {
 			return OC.SystemTags.collection.get(this.tagid)?.attributes?.name
 		},
 
-		getUnit() {
+		getAmountAndUnit() {
 			switch (this.timeunit) {
 			case 0:
-				return t('files_retention', 'Days')
+				return n('files_retention', '%n day', '%n days', this.timeamount)
 			case 1:
-				return t('files_retention', 'Weeks')
+				return n('files_retention', '%n week', '%n weeks', this.timeamount)
 			case 2:
-				return t('files_retention', 'Months')
+				return n('files_retention', '%n month', '%n months', this.timeamount)
 			default:
-				return t('files_retention', 'Years')
+				return n('files_retention', '%n year', '%n years', this.timeamount)
 			}
 		},
 
@@ -113,8 +110,7 @@ export default {
 <style scoped lang="scss">
 .retention-rule {
 	&__name,
-	&__amount,
-	&__unit,
+	&__time,
 	&__after,
 	&__active,
 	&__action {
@@ -126,9 +122,8 @@ export default {
 		padding: 10px 10px 10px 13px;
 	}
 
-	&__amount {
-		text-align: right;
-		padding-right: 23px;
+	&__time {
+		text-align: center;
 	}
 
 	&__action {