From abfc4ffb386127ed302f4d33a086307b57734764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 10 Feb 2022 13:24:18 +0100
Subject: [PATCH] MOBILE-3814 styles: Animate expandable chevrons

---
 .../group-conversations.html                    | 17 ++++++-----------
 .../pages/new-discussion/new-discussion.html    |  6 ++----
 .../components/course-index/course-index.html   | 11 ++++++-----
 .../components/course-index/course-index.scss   |  4 ++--
 .../features/grades/pages/course/course.html    |  4 ++--
 .../features/grades/pages/course/course.scss    |  5 +++++
 src/theme/theme.base.scss                       | 12 +++++++++++-
 src/theme/theme.light.scss                      |  9 +++++----
 8 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index 6b476b60f..e6165166a 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -40,11 +40,9 @@
                     [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
                     detail="false">
-                    <ion-icon *ngIf="!favourites.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon">
+                    <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                        [class.expandable-status-icon-expanded]="favourites.expanded">
                     </ion-icon>
-                    <ion-icon *ngIf="favourites.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
-                        class="expandable-status-icon"></ion-icon>
                     <ion-label>
                         <h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
                     </ion-label>
@@ -76,9 +74,8 @@
                 <ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true"
                     [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
                     aria-controls="addon-messages-groupconversations-group" role="heading" detail="false">
-                    <ion-icon *ngIf="!group.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon"></ion-icon>
-                    <ion-icon *ngIf="group.expanded" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
+                    <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                        [class.expandable-status-icon-expanded]="group.expanded">
                     </ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
@@ -111,11 +108,9 @@
                     [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
                     [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
                     detail="false">
-                    <ion-icon *ngIf="!individual.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                        class="expandable-status-icon">
+                    <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                        [class.expandable-status-icon-expanded]="individual.expanded">
                     </ion-icon>
-                    <ion-icon *ngIf="individual.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
-                        class="expandable-status-icon"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
                     </ion-label>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index e8b2c7232..85ca66dcf 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -34,10 +34,8 @@
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
                 aria-controls="addon-mod-forum-new-discussion-advanced">
-                <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
-                    class="expandable-status-icon"></ion-icon>
-                <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
-                </ion-icon>
+                <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
+                    [class.expandable-status-icon-expanded]="advanced"></ion-icon>
                 <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 0d27a9a42..e70f1b6fb 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -26,10 +26,11 @@
                 <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
                     [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false"
                     sticky="true">
-                    <ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'"
-                        flip-rtl slot="start" class="expandable-status-icon" (click)="toggleExpand($event, section)"
+                    <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
+                        class="expandable-status-icon" (click)="toggleExpand($event, section)"
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
-                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id">
+                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
+                        [class.expandable-status-icon-expanded]="section.expanded">
                     </ion-icon>
                     <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
                     </ion-icon>
@@ -45,8 +46,8 @@
                 </ion-item>
                 <ng-container *ngIf="section.expanded">
                     <ng-container *ngFor="let module of section.modules">
-                        <ion-item [class.item-dimmed]="!module.visible" (click)="selectSectionOrModule($event, section.id, module.id)"
-                            button>
+                        <ion-item class="module" [class.item-dimmed]="!module.visible"
+                            (click)="selectSectionOrModule($event, section.id, module.id)" button>
                             <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
                                 slot="start" aria-hidden="true"></ion-icon>
                             <ion-icon class="completioninfo completion_incomplete" name="far-circle" *ngIf="module.completionStatus === 0"
diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss
index d4862dd4c..169950d9d 100644
--- a/src/core/features/course/components/course-index/course-index.scss
+++ b/src/core/features/course/components/course-index/course-index.scss
@@ -16,11 +16,11 @@ ion-icon.completioninfo {
     width: 18px;
 }
 
-ion-item::part(native) {
+ion-item.module::part(native) {
     --padding-start: 0;
 }
 
-ion-icon {
+ion-item.module ion-icon {
     margin: 0;
     @include padding(12px, 16px, 12px, 16px);
 }
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 053b16cd1..c484de9f0 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -36,8 +36,8 @@
                                 <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan">
                                 </td>
                                 <th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan">
-                                    <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start"
-                                        [name]="row.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" class="expandable-status-icon">
+                                    <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start" name="fas-chevron-right"
+                                        class="expandable-status-icon" [class.expandable-status-icon-expanded]="row.expanded">
                                     </ion-icon>
                                     <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
                                     </ion-icon>
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index dec25329c..32bb2b00a 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -96,6 +96,11 @@
         .expandable-status-icon {
             font-size: 14px;
             @include margin-horizontal(0, 2px);
+            @include core-transition(transform, 200ms);
+
+            &.expandable-status-icon-expanded {
+                transform: var(--rotate-expandable);
+            }
         }
 
     }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 24d609fcf..38dc3ccd9 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -416,7 +416,7 @@ ion-alert {
 
 // Ionic list.
 ion-list {
-    padding: 0;
+    padding: 0 !important;
     --ion-item-background: transparent;
 }
 
@@ -1264,6 +1264,16 @@ ion-item.item.divider {
     ion-label h2.big {
         font-size: var(--item-divider-font-size-big);
     }
+
+    .expandable-status-icon {
+        font-size: 18px;
+        @include core-transition(transform, 200ms);
+        @include margin-horizontal(null, 16px);
+
+        &.expandable-status-icon-expanded {
+            transform: var(--rotate-expandable);
+        }
+    }
 }
 
 // Change default outline.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 691831088..9a0b55bc0 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -236,10 +236,6 @@
         --background: var(--item-divider-background);
         --color: var(--item-divider-color);
         --min-height: var(--item-divider-min-height);
-
-        .expandable-status-icon {
-            font-size: 18px;
-        }
     }
 
     --spacer-background: var(--light);
@@ -327,6 +323,11 @@
     --core-dd-question-radius: 10px;
     --core-dd-question-border: var(--medium);
 
+    --rotate-expandable: rotate(90deg);
+    &[dir=rtl] {
+        --rotate-expandable: rotate(-90deg);
+    }
+
     @for $i from 0 to length($core-course-image-background) {
         --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
         --core-course-color-#{$i}-tint: #{get-color-tint(nth($core-course-image-background, $i + 1))};