From 50f06e0fd715f45b3f0dae569862e72a453d2175 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 23 May 2024 10:47:56 +0200
Subject: [PATCH] MOBILE-4470 calendar: Initially disable repeats when creating
 an event

---
 .../calendar/pages/edit-event/edit-event.html  | 18 +++++++++---------
 .../calendar/pages/edit-event/edit-event.ts    |  2 +-
 src/theme/components/ion-checkbox.scss         |  4 ++++
 src/theme/components/ion-radio.scss            |  4 ++++
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index b16a3baa0..c100ad69c 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -141,12 +141,12 @@
                     </ion-item-divider>
                     <ion-item>
                         <ion-radio [value]="0">
-                            <p>{{ 'addon.calendar.durationnone' | translate }}</p>
+                            {{ 'addon.calendar.durationnone' | translate }}
                         </ion-radio>
                     </ion-item>
                     <ion-item>
                         <ion-radio [value]="1">
-                            <p><label for="timedurationuntil-button">{{ 'addon.calendar.durationuntil' | translate }}</label></p>
+                            <label for="timedurationuntil-button">{{ 'addon.calendar.durationuntil' | translate }}</label>
                         </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 1">
@@ -163,7 +163,7 @@
                     </ion-item>
                     <ion-item>
                         <ion-radio [value]="2">
-                            <p><label for="timedurationminutes">{{ 'addon.calendar.durationminutes' | translate }}</label></p>
+                            <label for="timedurationminutes">{{ 'addon.calendar.durationminutes' | translate }}</label>
                         </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 2">
@@ -194,14 +194,14 @@
                             <p class="item-heading">{{ 'addon.calendar.repeatedevents' | translate }}</p>
                         </ion-label>
                     </ion-item-divider>
-                    <ion-item>
-                        <ion-radio value="1">
-                            <p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
+                    <ion-item class="ion-text-wrap">
+                        <ion-radio [value]="1">
+                            {{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}
                         </ion-radio>
                     </ion-item>
-                    <ion-item>
-                        <ion-radio value="0">
-                            <p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
+                    <ion-item class="ion-text-wrap">
+                        <ion-radio [value]="0">
+                            {{ 'addon.calendar.repeateditthis' | translate }}
                         </ion-radio>
                     </ion-item>
                 </ion-radio-group>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.ts b/src/addons/calendar/pages/edit-event/edit-event.ts
index a48ff91e7..fee6ccb9f 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.ts
+++ b/src/addons/calendar/pages/edit-event/edit-event.ts
@@ -118,7 +118,7 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
         this.form.addControl('duration', this.fb.control(0));
         this.form.addControl('timedurationminutes', this.fb.control(''));
         this.form.addControl('repeat', this.fb.control(false));
-        this.form.addControl('repeats', this.fb.control('1'));
+        this.form.addControl('repeats', this.fb.control({ value: '1', disabled: true }));
         this.form.addControl('repeateditall', this.fb.control(1));
 
         this.maxDate = CoreTimeUtils.getDatetimeDefaultMax();
diff --git a/src/theme/components/ion-checkbox.scss b/src/theme/components/ion-checkbox.scss
index 80afa1d8f..6fb4053a0 100644
--- a/src/theme/components/ion-checkbox.scss
+++ b/src/theme/components/ion-checkbox.scss
@@ -15,6 +15,10 @@ input[type=checkbox] {
     }
 }
 
+ion-checkbox::part(label) {
+    white-space: normal;
+}
+
 ion-checkbox {
     &.checkbox-disabled {
         @include pointer-events-on-buttons();
diff --git a/src/theme/components/ion-radio.scss b/src/theme/components/ion-radio.scss
index 3050b1711..ebab14798 100644
--- a/src/theme/components/ion-radio.scss
+++ b/src/theme/components/ion-radio.scss
@@ -22,6 +22,10 @@ input[type=radio],
     --outer-border-width: 1px;
 }
 
+ion-radio::part(label) {
+    white-space: normal;
+}
+
 .ios ion-radio {
     &::part(container) {
         width: var(--size);