Merge pull request #1646 from crazyserver/MOBILE-2774

Mobile 2774

src/addon/messages/pages/discussion/discussion.scss

@@ -102,6 +102,14 @@ ion-app.app-root page-addon-messages-discussion {
         background-color: transparent;
         padding: 0;
     }
+
+    .toolbar-title {
+        img {
+            @include margin-horizontal(null, 6px);
+        }
+        display: flex;
+        align-items: center;
+    }
 }
 
 ion-app.app-root.ios page-addon-messages-discussion ion-footer .toolbar:last-child {

src/addon/messages/pages/group-conversations/group-conversations.html

@@ -14,7 +14,7 @@
     </ion-navbar>
 </ion-header>
 <core-split-view>
-    <ion-content>
+    <ion-content class="core-expand-max">
         <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)">
             <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
         </ion-refresher>
@@ -48,7 +48,7 @@
             <!-- Conversations. -->
             <ion-list *ngIf="!search.showResults">
                 <!-- Favourite conversations. -->
-                <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)">
+                <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
                     <core-icon *ngIf="!favourites.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="favourites.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'core.favourites' | translate }} ({{ favourites.count }})
@@ -64,7 +64,7 @@
                 </div>
 
                 <!-- Group conversations. -->
-                <ion-item-divider color="light" text-wrap *ngIf="group.conversations" (click)="toggle(group)">
+                <ion-item-divider color="light" text-wrap *ngIf="group.conversations" (click)="toggle(group)" class="core-expandable">
                     <core-icon *ngIf="!group.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="group.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'addon.messages.groupmessages' | translate }} ({{ group.count }})
@@ -79,7 +79,7 @@
                     </ion-item>
                 </div>
 
-                <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)">
+                <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)" class="core-expandable">
                     <core-icon *ngIf="!individual.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="individual.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'addon.messages.messages' | translate }} ({{ individual.count }})

src/app/app.scss

@@ -984,6 +984,45 @@ ion-app.app-root {
   .core-iframe-offline-disabled {
     display: none !important;
   }
+
+  ion-content.core-expand-max .scroll-content {
+    overflow-y: hidden;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    core-loading {
+      flex-grow: 1;
+      position: relative !important;
+
+      .core-loading-content {
+        position: absolute;
+        @include position(0,0,0,0);
+      }
+    }
+
+    ion-list {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      > div {
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .core-expandable {
+    ion-icon[item-start] + .item-inner {
+      @include margin-horizontal(0px, null);
+    }
+    .icon.fa.fa-caret-right,
+    .icon.fa.fa-caret-down {
+      min-width: 16px;
+      min-height: 1.6rem;
+      font-size: 1.6rem;
+      line-height: 1;
+    }
+  }
 }
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors) {
@@ -994,7 +1033,6 @@ ion-app.app-root {
   }
 }
 
-
 [dir="ltr"] body, [dir="rtl"] body {
   padding-top: constant(safe-area-inset-top); //for iOS 11.2
   padding-top: env(safe-area-inset-top); //for iOS 11.1

src/components/icon/icon.scss

@@ -4,3 +4,13 @@
     color: $color-base;
   }
 }
+
+
+[dir=rtl] .icon {
+    &.core-icon-dir-flip,
+    &.fa-caret-right,
+    &.ion-md-send, &.ion-ios-send {
+      -webkit-transform: scale(-1, 1);
+      transform: scale(-1, 1);
+    }
+}

src/components/tabs/tabs.scss

@@ -18,17 +18,25 @@ ion-app.app-root .core-tabs-bar {
         font-size: 1.6rem;
         border: 0;
         padding: 0 !important;
+        display: flex;
+        flex-direction: row;
 
         span {
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
             word-wrap: break-word;
-            display: block;
-            width: 100%;
+            max-width: 100%;
             line-height: 1.2em;
         }
 
+        ion-badge.tab-badge {
+            position: relative;
+            @include position(auto, auto, auto, auto);
+            @include margin(null, null, null, 5px);
+
+        }
+
         &[aria-selected=true] {
             color: $core-top-tabs-color-active !important;
             border: 0 !important;

src/theme/variables.scss

@@ -84,7 +84,11 @@ $colors: (
   dark:       $black,
   warning:    $yellow,
   success:    $green,
-  info:       $blue
+  info:       $blue,
+  inverted: (
+    base: $white,
+    contrast: $core-color
+  )
 );
 
 $text-color:                 $black !default;