Merge pull request #1656 from crazyserver/MOBILE-2782

Mobile 2782

ionic.config.json

@@ -6,5 +6,6 @@
   },
   "type": "ionic-angular",
   "watchPatterns": [],
-  "pro_id": "com.moodle.moodlemobile"
+  "pro_id": "com.moodle.moodlemobile",
+  "id": "com.moodle.moodlemobile"
 }

src/addon/mod/wiki/components/index/addon-mod-wiki-index.html

@@ -47,7 +47,7 @@
 
                     <article [ngClass]="{'addon-mod_wiki-noedit': !canEdit}">
                         <core-format-text *ngIf="pageContent" [component]="component" [componentId]="componentId" [text]="pageContent"></core-format-text>
-                        <core-empty-box *ngIf="!pageContent" icon="document" [message]="'addon.mod_wiki.nocontent' | translate"></core-empty-box>
+                        <core-empty-box *ngIf="!pageContent" icon="document" [message]="'addon.mod_wiki.nocontent' | translate" [inline]="true"></core-empty-box>
                     </article>
                 </div>
             </ng-template>

src/app/app.scss

@@ -69,27 +69,6 @@ ion-app.app-root {
     }
   }
 
-  @mixin core-headings() {
-    h1 {
-      font-size: 3rem;
-    }
-    h2 {
-      font-size: 2.8rem;
-    }
-    h3 {
-      font-size: 2.6rem;
-    }
-    h4 {
-      font-size: 2.2rem;
-    }
-    h5 {
-      font-size: 1.8rem;
-    }
-    h6 {
-      font-size: 1.4rem;
-    }
-  }
-
   // Define an alternative way to set a heading in an item without using a heading tag.
   // This is done for accessibility reasons when a heading is semantically incorrect.
   .item .item-heading {
@@ -212,13 +191,13 @@ ion-app.app-root {
     }
   }
 
-  /** Format Text */
+  /** Format Text - Show more styles. */
+  /** Styles of elements inside the directive should be placed in format-text.scss */
   core-format-text {
     user-select: text;
-  }
 
-  core-format-text[maxHeight],
+    &[maxHeight],
-  core-format-text[ng-reflect-max-height] {
+    &[ng-reflect-max-height] {
       display: block;
       position: relative;
       width: 100%;
@@ -288,8 +267,8 @@ ion-app.app-root {
       }
     }
 
-  core-format-text[singleLine="true"],
+    &[singleLine="true"],
-  core-format-text[ng-reflect-single-line="true"] {
+    &[ng-reflect-single-line="true"] {
         cursor: pointer;
         pointer-events: auto;
         white-space: nowrap;
@@ -300,6 +279,11 @@ ion-app.app-root {
         width: 100%;
     }
 
+    audio, video, a, iframe {
+      pointer-events: auto;
+    }
+  }
+
   .core-media-adapt-width {
     max-width: 100%;
   }
@@ -336,84 +320,6 @@ ion-app.app-root {
     }
   }
 
-  core-format-text {
-    audio, video, a, iframe {
-      pointer-events: auto;
-    }
-
-    // Fix lists styles in core-format-text.
-    ul {
-      list-style-type: disc;
-    }
-    ol {
-      list-style-type: decimal;
-    }
-    ul, ol {
-      -webkit-padding-start: 15px;
-      list-style-position: inside;
-      ul {
-        list-style-type: circle;
-      }
-      ol {
-        list-style-type: lower-latin;
-      }
-      ul, ol {
-        list-style-position: inside;
-        @include margin(null, null, null, 15px);
-      }
-    }
-
-    .badge {
-      position: initial !important;
-    }
-
-    .core-disable-media-adapt,
-    .core-disable-media-adapt .core-media-adapt-width {
-      max-width: none !important;
-      max-height: none !important;
-      width: initial !important;
-      height: initial !important;
-      display: inline-block !important;
-    }
-
-    @include core-headings();
-
-    img.icon {
-      font-size: 16px;
-      width: 16px;
-      height: 16px;
-      margin: 0;
-      padding: 0;
-      -webkit-box-sizing: content-box;
-      box-sizing: content-box;
-      margin-right: .5rem;
-    }
-  }
-
-  .item core-format-text {
-    @include core-headings();
-  }
-
-  .item core-format-text,
-  core-format-text {
-    p {
-      margin-bottom: 1rem;
-    }
-  }
-
-  // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
-  ion-card core-format-text img {
-    width: min-content;
-    display: inline;
-  }
-
-  // Message item.
-  .item-message {
-    core-format-text > p:only-child {
-      display: inline;
-    }
-  }
-
   // Media item, ideal for icons.
   .item-media {
     min-height: $item-media-height + ($content-padding * 2);
@@ -506,7 +412,6 @@ ion-app.app-root {
   }
 
 
-
   // File uploader.
   // -------------------------
   .core-fileuploader-file-handler {
@@ -607,85 +512,6 @@ ion-app.app-root {
     font-size: 20px;
   }
 
-  // Atto styles
-  // -------------------------
-  .atto_image_preview {
-      width: 100%;
-      height: 100%;
-      margin-left: auto;
-      margin-right: auto;
-  }
-
-  .atto_image_preview_box {
-      max-height: 200px;
-      margin-bottom: 1em;
-      overflow: auto;
-  }
-
-  .editor_atto_content img {
-      cursor: pointer;
-  }
-
-  .atto_image_size {
-      display: inline-block;
-  }
-
-  .atto_image_size input[type=checkbox] {
-      @include margin(null, 1em, null, 1em);
-  }
-
-  .atto_image_size input[type=text] {
-      width: 3em;
-  }
-
-  .atto_image_size label {
-      display: inline-block;
-  }
-
-  .atto_image_button_text-top,
-  .atto_image_button_middle,
-  .atto_image_button_text-bottom,
-  .atto_image_button_left,
-  .atto_image_button_right {
-    vertical-align: middle;
-    max-width: 100%;
-    height: auto;
-    width: auto;
-    display: inline-block;
-    margin: 0 0.5em;
-
-    &.img-responsive {
-      /* If the image is display: block then linking the image to URLs won't work. */
-      /*display: inline-block;*/
-      max-width: 100%;
-      height: auto;
-      width: auto;
-    }
-  }
-
-  .atto_image_button_text-top {
-      vertical-align: text-top;
-  }
-
-  .atto_image_button_middle {
-      vertical-align: middle;  }
-
-  .atto_image_button_text-bottom {
-      vertical-align: text-bottom;
-  }
-
-  /*rtl:begin:ignore*/
-  .atto_image_button_left {
-      @include float(start);
-      @include margin(0, 0.5em, 0, 0);
-  }
-
-  .atto_image_button_right {
-      @include float(end);
-      @include margin(0, 0, 0, 0.5em);
-  }
-  /*rtl:end:ignore*/
-
   .action-sheet-group {
       overflow: auto;
   }

src/components/rich-text-editor/rich-text-editor.scss

@@ -22,9 +22,6 @@ ion-app.app-root core-rich-text-editor {
         resize: none;
         background-color: $white;
         flex-grow: 1;
-        * {
-            overflow: hidden;
-        }
     }
 
     .core-rte-editor {
@@ -48,28 +45,6 @@ ion-app.app-root core-rich-text-editor {
         *:empty:after {
             content: '\200B';
         }
-
-        ul {
-            list-style-type: disc;
-        }
-        ol {
-            list-style-type: decimal;
-        }
-        ul, ol {
-            -webkit-padding-start: 15px;
-            list-style-position: inside;
-
-            ul {
-                list-style-type: circle;
-            }
-            ol {
-                list-style-type: lower-latin;
-            }
-            ul, ol {
-                list-style-position: inside;
-                @include margin(null, null, null, 15px);
-            }
-        }
     }
 
     .core-textarea {

src/components/tabs/tabs.scss

@@ -30,6 +30,10 @@ ion-app.app-root .core-tabs-bar {
             line-height: 1.2em;
         }
 
+        ion-icon {
+            @include margin(null, 5px, null, null);
+        }
+
         ion-badge.tab-badge {
             position: relative;
             @include position(auto, auto, auto, auto);

src/theme/format-text.scss

@@ -0,0 +1,192 @@
+/** Styles to match web platform */
+ion-app.app-root core-format-text,
+ion-app.app-root .item core-format-text,
+ion-app.app-root core-rich-text-editor .core-rte-editor {
+  @include core-headings();
+
+  font-size: 1.4rem;
+
+  p {
+    margin-bottom: 1rem;
+  }
+
+  // Fix lists styles in core-format-text.
+  ul {
+    padding-left: 1rem;
+  }
+  ol {
+    list-style-type: decimal;
+  }
+  ul, ol {
+    -webkit-padding-start: 15px;
+    ol {
+      list-style-type: lower-latin;
+    }
+    ul, ol {
+      @include margin(null, null, null, 15px);
+    }
+  }
+
+  .badge {
+    position: initial !important;
+  }
+
+  .core-disable-media-adapt,
+  .core-disable-media-adapt .core-media-adapt-width {
+    max-width: none !important;
+    max-height: none !important;
+    width: initial !important;
+    height: initial !important;
+    display: inline-block !important;
+  }
+
+  img.icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+    margin-right: .5rem;
+  }
+
+  // Atto styles
+  // -------------------------
+  .atto_image_preview {
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .atto_image_preview_box {
+    max-height: 200px;
+    margin-bottom: 1em;
+    overflow: auto;
+  }
+
+  .editor_atto_content img {
+    cursor: pointer;
+  }
+
+  .atto_image_size {
+    display: inline-block;
+  }
+
+  .atto_image_size input[type=checkbox] {
+    @include margin(null, 1em, null, 1em);
+  }
+
+  .atto_image_size input[type=text] {
+    width: 3em;
+  }
+
+  .atto_image_size label {
+    display: inline-block;
+  }
+
+  .atto_image_button_text-top,
+  .atto_image_button_middle,
+  .atto_image_button_text-bottom,
+  .atto_image_button_left,
+  .atto_image_button_right {
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    display: inline-block;
+    margin: 0 0.5em;
+
+    &.img-responsive {
+      /* If the image is display: block then linking the image to URLs won't work. */
+      /*display: inline-block;*/
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
+  }
+
+  .atto_image_button_text-top {
+    vertical-align: text-top;
+  }
+
+  .atto_image_button_middle {
+    vertical-align: middle;
+  }
+
+  .atto_image_button_text-bottom {
+    vertical-align: text-bottom;
+  }
+
+  /*rtl:begin:ignore*/
+  .atto_image_button_left {
+    @include float(start);
+    @include margin(0, 0.5em, 0, 0);
+  }
+
+  .atto_image_button_right {
+    @include float(end);
+    @include margin(0, 0, 0, 0.5em);
+  }
+  /*rtl:end:ignore*/
+
+  // Bootstrap 4 Styles
+  // -------------------------
+  .media {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .media-body {
+    flex: 1;
+  }
+
+  .alert {
+    position: relative;
+    padding: .75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 0 solid transparent;
+  }
+
+  // Headings for larger alerts
+  .alert-heading {
+    // Specified to prevent conflicts of changing $headings-color
+    color: inherit;
+  }
+
+  // Provide class for links that match alerts
+  .alert-link {
+    font-weight: 400;
+  }
+
+  @each $color-name, $color-base in get-colors($colors) {
+    .alert-#{$color-name} {
+      color: $color-base;
+      border-color: $color-base;
+      background-color: mix($color-base, white, 20%);
+
+      .alert-link {
+        color: darken($color-base, 10%);
+      }
+    }
+    .alert-#{$color-name} p {
+      color: $color-base;
+    }
+  }
+}
+
+// Special fixes
+// -------------------------
+ion-app.app-root {
+  // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
+  ion-card core-format-text img {
+    width: min-content;
+    display: inline;
+  }
+
+  // Message item.
+  .item-message core-format-text > p:only-child {
+    display: inline;
+  }
+}

src/theme/variables.scss

@@ -400,6 +400,30 @@ $core-question-state-incorrect-color: $red-light !default;
     }
 }
 
+@mixin core-headings() {
+  h1 {
+    font-size: 3rem;
+  }
+  h2 {
+    font-size: 2.8rem;
+  }
+  h3 {
+    font-size: 2.6rem;
+  }
+  h4 {
+    font-size: 2.2rem;
+  }
+  h5 {
+    font-size: 1.8rem;
+  }
+  h6 {
+    font-size: 1.4rem;
+  }
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";
+
+// Format text styles.
+@import "format-text";