Merge pull request #2426 from crazyserver/MOBILE-3401

Mobile 3401

Author: jleyva

src/addon/mod/quiz/components/index/index.scss

@@ -46,6 +46,12 @@ ion-app.app-root addon-mod-quiz-index {
                 background-color: $blue-dark;
                 color: $blue-light;
             }
+
+            .item.addon-mod_quiz-highlighted.activated,
+            .item.addon-mod_quiz-highlighted.activated p {
+                background-color: $blue;
+                color: $blue-light;
+            }
         }
     }
 }

src/app/app.scss

@@ -441,6 +441,18 @@ ion-app.app-root {
         }
       }
     }
+    @include darkmode() {
+      @each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
+        &.select-md-#{$color-name},
+        &.select-ios-#{$color-name} {
+           color: $color-base;
+
+          .select-icon .select-icon-inner {
+            color: $color-base;
+          }
+        }
+      }
+    }
   }
 
   .item-label-stacked ion-select[multiple="true"] {
@@ -1293,17 +1305,17 @@ ion-app.app-root {
 // QR scan. The scanner is at the background of the app, we need to hide the elements that overlay it.
 .core-scanning-qr {
   ion-app.app-root {
-    background-color: transparent;
+    background-color: transparent !important;
 
     .ion-page {
-      background-color: transparent;
+      background-color: transparent !important;
     }
     ion-content, ion-backdrop, ion-modal:not(.core-modal-fullscreen), core-ion-tabs {
-      display: none;
+      display: none !important;
     }
 
     &.ios .ion-page.show-page~.nav-decor {
-      display: none;
+      display: none !important;
     }
   }
 }

src/core/search/components/search-box/core-search-box.html

@@ -9,7 +9,7 @@
                 <ion-icon name="close"></ion-icon>
             </button>
         </ion-item>
-        <ion-list class="core-search-history with-borders">
+        <ion-list class="core-search-history with-borders" [hidden]="!historyShown">
             <a ion-item text-wrap *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" class="core-clickable" tabindex="1">
                 <core-icon name="fa-history" item-start></core-icon>
                 {{item.searchedtext}}

src/core/search/components/search-box/search-box.scss

@@ -23,7 +23,6 @@ ion-app.app-root core-search-box {
     }
 
     .core-search-history {
-        display: none;
         max-height: calc(-120px + 80vh);
         overflow-y: auto;
 
@@ -35,10 +34,4 @@ ion-app.app-root core-search-box {
             border-bottom: 0;
         }
     }
-
-    form:focus-within {
-        .core-search-history {
-            display: block;
-        }
-    }
 }

src/core/search/components/search-box/search-box.ts

@@ -78,6 +78,19 @@ export class CoreSearchBoxComponent implements OnInit {
         if (this.searchArea) {
             this.loadHistory();
         }
+
+        this.formElement.nativeElement.addEventListener('focus', () => {
+            this.historyShown = true;
+        }, true);
+
+        this.formElement.nativeElement.addEventListener('blur', () => {
+            // Wait the new element to be focused.
+            setTimeout(() => {
+                if (document.activeElement.closest('form') != this.formElement.nativeElement) {
+                    this.historyShown = false;
+                }
+            });
+        }, true);
     }
 
     /**
@@ -100,6 +113,7 @@ export class CoreSearchBoxComponent implements OnInit {
 
         this.domUtils.triggerFormSubmittedEvent(this.formElement, false, this.sitesProvider.getCurrentSiteId());
 
+        this.historyShown = false;
         this.searched = this.searchText;
         this.onSubmit.emit(this.searchText);
     }