MOBILE-2334 assign: Fix styles

src/addon/mod/assign/components/index/index.html

@@ -14,10 +14,9 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">
 
     <!-- Description and intro attachments. -->
-    <ion-card *ngIf="description">
+    <ion-card *ngIf="description" (click)="expandDescription($event)">
         <ion-item text-wrap>
             <core-format-text [text]="description" [component]="component" [componentId]="componentId" maxHeight="120" (click)="expandDescription($event)"></core-format-text>
-            <ion-note *ngIf="note" item-end>{{ note }}</ion-note>
         </ion-item>
     </ion-card>
 

src/addon/mod/assign/components/submission/submission.html

@@ -26,7 +26,6 @@
         <!-- View the submission tab. -->
         <core-tab [title]="'addon.mod_assign.submission' | translate">
             <ng-template>
-                <ion-content>
                 <addon-mod-assign-submission-plugin *ngFor="let plugin of submissionPlugins" [assign]="assign" [submission]="userSubmission" [plugin]="plugin"></addon-mod-assign-submission-plugin>
 
                 <!-- Render some data about the submission. -->
@@ -136,14 +135,12 @@
                     <p *ngIf="lastAttempt.caneditowner">{{ 'addon.mod_assign.submissioneditable' | translate }}</p>
                     <p *ngIf="!lastAttempt.caneditowner">{{ 'addon.mod_assign.submissionnoteditable' | translate }}</p>
                 </ion-item>
-                </ion-content>
             </ng-template>
         </core-tab>
 
         <!-- Grade the submission tab. -->
         <core-tab [title]="'addon.mod_assign.grade' | translate" *ngIf="feedback || isGrading">
             <ng-template>
-                <ion-content>
                 <!-- Current grade if method is advanced. -->
                 <ion-item text-wrap *ngIf="feedback.gradefordisplay && (!isGrading || grade.method != 'simple')" class="core-grading-summary">
                     <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
@@ -204,15 +201,13 @@
                 </ion-item>
 
                 <!-- Data about the grader (teacher who graded). -->
-                    <ion-item text-wrap *ngIf="grader">
-                        <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
-                        <a (click)="openUserProfile(grader.id)" [title]="grader.fullname">
+                <ion-item text-wrap *ngIf="grader" (click)="openUserProfile(grader.id)" [title]="grader.fullname" detail-push>
                     <ion-avatar item-start>
                         <img [src]="grader.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: grader.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
                     </ion-avatar>
+                    <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
                     <h2>{{ grader.fullname }}</h2>
                     <p *ngIf="feedback.gradeddate">{{ feedback.gradeddate * 1000 | coreFormatDate:"dfmediumdate" }}</p>
-                        </a>
                 </ion-item>
 
                 <!-- Warning message if cannot save grades. -->
@@ -224,7 +219,6 @@
                         <ion-icon name="open"></ion-icon>
                     </a>
                 </div>
-                </ion-content>
             </ng-template>
         </core-tab>
     </core-tabs>

src/addon/mod/assign/feedback/comments/component/comments.html

@@ -6,11 +6,11 @@
     </p>
     <div item-end>
         <div text-right>
-            <a ion-button *ngIf="canEdit" (click)="editComment()" color="light">
+            <button ion-button icon-only clear *ngIf="canEdit" (click)="editComment()" color="dark">
                 <ion-icon name="create"></ion-icon>
-            </a>
+            </button>
         </div>
-        <ion-note *ngIf="!isSent">
+        <ion-note *ngIf="!isSent" color="dark">
             <ion-icon name="clock"></ion-icon>
             {{ 'core.notsent' | translate }}
         </ion-note>

src/addon/mod/assign/providers/assign.ts

@@ -488,7 +488,7 @@ export class AddonModAssignProvider {
             case 'nosubmission':
                 return 'danger';
             default:
-                return '';
+                return 'light';
         }
     }
 

src/components/file/file.scss

@@ -1,2 +1,11 @@
-core-file {
+.card-md core-file + core-file > .item-md.item-block > .item-inner {
+    border-top: 1px solid $list-md-border-color;
+}
+
+.card-ios core-file + core-file > .item-ios.item-block > .item-inner {
+    border-top: $hairlines-width solid $list-ios-border-color;
+}
+
+.card-wp core-file + core-file > .item-wp.item-block > .item-inner {
+    border-top: 1px solid $list-wp-border-color;
 }

src/components/local-file/local-file.html

@@ -1,29 +1,28 @@
-<a ion-item text-wrap class="item-media" (click)="fileClicked($event)" detail-none>
+<form (ngSubmit)="changeName(newFileName, $event)">
+    <a ion-item text-wrap stacked class="item-media" [class.item-input]="editMode" (click)="fileClicked($event)" detail-none>
         <img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" item-start />
 
         <!-- File name and edit button (if editable). -->
-    <p *ngIf="!editMode" class="core-text-with-icon-right">
-        {{fileName}}
-        <a ion-button icon-only clear *ngIf="manage" (click)="activateEdit($event)" [attr.aria-label]="'core.edit' | translate">
-            <ion-icon name="create" ios="md-create"></ion-icon>
-        </a>
-    </p>
+        <h2 *ngIf="!editMode">{{fileName}}</h2>
+        <!-- More data about the file. -->
+        <p *ngIf="size && !editMode">{{ size }}</p>
+        <p *ngIf="timemodified && !editMode">{{ timemodified }}</p>
 
         <!-- Form to edit the file's name. -->
-    <form *ngIf="editMode" (ngSubmit)="changeName(newFileName)">
-        <ion-input type="text" name="filename" [(ngModel)]="newFileName" [placeholder]="'core.filename' | translate" autocapitalize="none" autocorrect="off" (click)="$event.stopPropagation()" [core-auto-focus]></ion-input>
-        <button type="submit" ion-button icon-only clear class="core-button-icon-small" [attr.aria-label]="'core.save' | translate">
-            <ion-icon name="checkmark"></ion-icon>
-        </button>
-    </form>
-
-    <!-- More data about the file. -->
-    <p *ngIf="size">{{ size }}</p>
-    <p *ngIf="timemodified">{{ timemodified }}</p>
+        <ion-input type="text" name="filename" [placeholder]="'core.filename' | translate" autocapitalize="none" autocorrect="off" (click)="$event.stopPropagation()" [core-auto-focus] [(ngModel)]="newFileName" *ngIf="editMode"></ion-input>
 
         <div class="buttons" item-end *ngIf="manage">
+            <button *ngIf="!editMode" ion-button icon-only clear (click)="activateEdit($event)" [attr.aria-label]="'core.edit' | translate" color="dark">
+                <ion-icon name="create" ios="md-create"></ion-icon>
+            </button>
+
+            <button *ngIf="editMode" ion-button icon-only clear [attr.aria-label]="'core.save' | translate" color="success" type="submit">
+                <ion-icon name="checkmark"></ion-icon>
+            </button>
+
             <button ion-button clear icon-only (click)="deleteFile($event)" [attr.aria-label]="'core.delete' | translate" color="danger">
                 <ion-icon name="trash"></ion-icon>
             </button>
         </div>
     </a>
+</form>

src/components/local-file/local-file.ts

@@ -96,6 +96,10 @@ export class CoreLocalFileComponent implements OnInit {
      * @param {Event} e Click event.
      */
     fileClicked(e: Event): void {
+        if (this.editMode) {
+            return;
+        }
+
         e.preventDefault();
         e.stopPropagation();
 
@@ -127,8 +131,12 @@ export class CoreLocalFileComponent implements OnInit {
      * Rename the file.
      *
      * @param {string} newName New name.
+     * @param {Event}  e       Click event.
      */
-    changeName(newName: string): void {
+    changeName(newName: string, e: Event): void {
+        e.preventDefault();
+        e.stopPropagation();
+
         if (newName == this.file.name) {
             // Name hasn't changed, stop.
             this.editMode = false;