MOBILE-2322 files: Style changes

src/addon/files/providers/helper.ts

@@ -68,7 +68,7 @@ export class AddonFilesHelperProvider {
                 modal.dismiss();
             });
         }).then(() => {
-            this.domUtils.showAlertTranslated('core.success', 'core.fileuploader.fileuploaded');
+            this.domUtils.showToast('core.fileuploader.fileuploaded', true, undefined, 'core-toast-success');
         });
     }
 }

src/app/app.ios.scss

@@ -21,6 +21,13 @@
   @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
 }
 
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+  .ios .core-#{$color-name}-card {
+    @extend .card-ios ;
+    @extend .card-content-ios;
+  }
+}
+
 // Highlights inside the input element.
 @if ($core-text-input-ios-show-highlight) {
   .card-ios, .list-ios {

src/app/app.md.scss

@@ -21,6 +21,13 @@
   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2) - 1, null);
 }
 
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  .md .core-#{$color-name}-card {
+    @extend .card-md;
+    @extend .card-content-md;
+  }
+}
+
 // Highlights inside the input element.
 @if ($core-text-input-md-show-highlight) {
   .card-md, .list-md {

src/app/app.scss

@@ -408,4 +408,27 @@ ion-select {
     margin: 0 0 0 0.5em;
     max-width: calc(100% - 1em);
 }
-/*rtl:end:ignore*/
+/*rtl:end:ignore*/
+
+.action-sheet-group {
+    overflow: auto;
+}
+.alert-message {
+    overflow-y: auto;
+}
+
+ion-toast.core-toast-success .toast-wrapper{
+    background: $green-dark;
+}
+
+ion-toast.core-toast-alert .toast-wrapper{
+    background: $red-dark;
+}
+
+// Message cards
+@each $color-name, $color-base, $color-contrast in get-colors($colors) {
+  .core-#{$color-name}-card {
+    @extend ion-card;
+    border-bottom: 3px solid $color-base;
+  }
+}

src/app/app.wp.scss

@@ -20,3 +20,10 @@
 .item-wp ion-spinner[item-start] + .item-input {
   @include margin-horizontal(($item-wp-padding-start / 2), null);
 }
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  .wp .core-#{$color-name}-card {
+    @extend .card-wp ;
+    @extend .card-content-wp;
+  }
+}

src/components/file/file.html

@@ -1,8 +1,8 @@
-<a ion-item text-wrap class="item-media" (click)="download($event, true)" [class.item-2-button-right]="canDelete" detail-none>
+<a ion-item text-wrap class="item-media" (click)="download($event, true)" detail-none>
     <img [src]="fileIcon" alt="" role="presentation" item-start />
     <p>{{fileName}}</p>
     <div class="buttons" item-end>
-        <button ion-button clear icon-only (click)="download($event)" *ngIf="!isDownloading && showDownload" [attr.aria-label]="'core.download' | translate">
+        <button ion-button clear icon-only (click)="download($event)" *ngIf="!isDownloading && showDownload" [attr.aria-label]="'core.download' | translate" color="dark">
             <ion-icon [name]="isDownloaded ? 'refresh' : 'cloud-download'"></ion-icon>
         </button>
         <button ion-button clear icon-only (click)="delete($event)" *ngIf="!isDownloading && canDelete" [attr.aria-label]="'core.delete' | translate" color="danger">

src/core/emulator/pages/capture-media/capture-media.html

@@ -4,7 +4,7 @@
             <button ion-button (click)="cancel()">{{ 'core.cancel' | translate }}</button>
         </ion-buttons>
 
-        <ion-title>{{ title }}</ion-title>
+        <ion-title>{{ title | translate }}</ion-title>
 
         <ion-buttons end>
             <button ion-button *ngIf="hasCaptured" (click)="done()">{{ 'core.done' | translate }}</button>

src/core/fileuploader/providers/helper.ts

@@ -368,7 +368,7 @@ export class CoreFileUploaderHelperProvider {
         return this.fileProvider.getFileObjectFromFileEntry(fileEntry).then((file) => {
             return this.confirmUploadFile(file.size).then(() => {
                 return this.uploadGenericFile(fileEntry.toURL(), file.name, file.type, deleteAfterUpload, siteId).then(() => {
-                    this.domUtils.showAlertTranslated('core.success', 'core.fileuploader.fileuploaded');
+                    this.domUtils.showToast('core.fileuploader.fileuploaded', true, undefined, 'core-toast-success');
                 });
             }).catch((err) => {
                 if (err) {

src/providers/utils/dom.ts

@@ -848,9 +848,10 @@ export class CoreDomUtilsProvider {
      * @param {string} text The text of the toast.
      * @param {boolean} [needsTranslate] Whether the 'text' needs to be translated.
      * @param {number} [duration=2000] Duration in ms of the dimissable toast.
+     * @param {string} [cssClass=""] Class to add to the toast.
      * @return {Toast} Toast instance.
      */
-    showToast(text: string, needsTranslate?: boolean, duration: number = 2000): Toast {
+    showToast(text: string, needsTranslate?: boolean, duration: number = 2000, cssClass: string = ''): Toast {
         if (needsTranslate) {
             text = this.translate.instant(text);
         }
@@ -859,6 +860,7 @@ export class CoreDomUtilsProvider {
             message: text,
             duration: duration,
             position: 'bottom',
+            cssClass: cssClass,
             dismissOnPageChange: true
         });
 

src/theme/variables.scss

@@ -78,7 +78,9 @@ $colors: (
   light:      $gray-lighter,
   gray:       $gray-dark,
   dark:       $black,
-  warning:    $yellow
+  warning:    $yellow,
+  success:    $green,
+  info:       $blue
 );
 
 $text-color:                 $black;
@@ -86,6 +88,11 @@ $link-color:                 $blue;
 $background-color:           $gray-light;
 $subdued-text-color:         $gray-darker;
 
+$core-warning-color: colors($colors, warning) !default; // yellow.
+$core-success-color: colors($colors, success) !default; // green.
+$core-info-color: colors($colors, info) !default; // / blue.
+$core-error-color: colors($colors, alert) !default; // Red.
+
 $list-background-color:      $white;
 
 $tabs-background:            $gray-darker;