MOBILE-3242 ui: Display different cursor in all clickable elements

dpalou · dpalou · commit e35bebd9af41 · 2020-01-10T10:41:36.000+01:00
diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss
@@ -89,6 +89,7 @@ ion-app.app-root addon-calendar-calendar {
         @include border-end(1px, solid, $calendar-border-color);
         overflow: hidden;
         min-height: 60px;
+        cursor: pointer;
 
         &:first-child {
             @include padding(null, null, null, 10px);
@@ -131,6 +132,7 @@ ion-app.app-root addon-calendar-calendar {
             border-radius: 50%;
         }
         &.dayblank {
+            cursor: auto;
             background-color: $gray-lighter;
             @include darkmode() {
                 background-color: $black;
diff --git a/src/addon/calendar/components/upcoming-events/upcoming-events.scss b/src/addon/calendar/components/upcoming-events/upcoming-events.scss
@@ -0,0 +1,5 @@
+ion-app.app-root addon-calendar-upcoming-events {
+    .addon-calendar-event {
+        cursor: pointer;
+    }
+}
diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html
@@ -48,7 +48,7 @@ <h3>{{ periodName }}</h3>
 
         <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
             <ng-container *ngFor="let event of filteredEvents">
-                <ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
+                <a ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                     <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
                     <core-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" item-start></core-icon>
                     <h2><core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId"></core-format-text></h2>
@@ -61,7 +61,7 @@ <h2><core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [c
                         <ion-icon name="trash"></ion-icon>
                         <span text-wrap>{{ 'core.deletedoffline' | translate }}</span>
                     </ion-note>
-                </ion-item>
+                </a>
             </ng-container>
         </ion-list>
 
diff --git a/src/addon/competency/pages/competency/competency.html b/src/addon/competency/pages/competency/competency.html
@@ -25,7 +25,7 @@ <h2>{{ user.fullname }}</h2>
                 <ng-container *ngIf="!competency.competency.comppath.showlinks">{{ competency.competency.comppath.framework.name }}</ng-container>
                 &nbsp;/&nbsp;
                 <span *ngFor="let ancestor of competency.competency.comppath.ancestors">
-                    <a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)">{{ ancestor.name }}</a>
+                    <a *ngIf="competency.competency.comppath.showlinks" (click)="openCompetencySummary(ancestor.id)" class="core-clickable">{{ ancestor.name }}</a>
                     <ng-container *ngIf="!competency.competency.comppath.showlinks">{{ ancestor.name }}</ng-container>
                     <ng-container *ngIf="!ancestor.last">&nbsp;/&nbsp;</ng-container>
                 </span>
@@ -35,7 +35,7 @@ <h2>{{ user.fullname }}</h2>
                 <div *ngIf="!competency.competency.hasrelatedcompetencies">{{ 'addon.competency.nocrossreferencedcompetencies' | translate }}</div>
                 <div *ngIf="competency.competency.hasrelatedcompetencies">
                     <p *ngFor="let relatedcomp of competency.competency.relatedcompetencies">
-                        <a (click)="openCompetencySummary(relatedcomp.id)">
+                        <a (click)="openCompetencySummary(relatedcomp.id)" class="core-clickable">
                             {{ relatedcomp.shortname }} - {{ relatedcomp.idnumber }}
                         </a>
                     </p>
diff --git a/src/addon/mod/assign/components/index/addon-mod-assign-index.html b/src/addon/mod/assign/components/index/addon-mod-assign-index.html
@@ -15,7 +15,7 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">
 
     <!-- Description and intro attachments. -->
-    <ion-card *ngIf="description" (click)="expandDescription($event)">
+    <ion-card *ngIf="description" (click)="expandDescription($event)" class="core-clickable">
         <ion-item text-wrap>
             <core-format-text [text]="description" [component]="component" [componentId]="componentId" maxHeight="120" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" (click)="expandDescription($event)"></core-format-text>
         </ion-item>
diff --git a/src/addon/mod/chat/pages/sessions/sessions.html b/src/addon/mod/chat/pages/sessions/sessions.html
@@ -20,7 +20,7 @@
                 <ion-label id="addon-chat-showalllabel">{{ 'addon.mod_chat.showincompletesessions' | translate }}</ion-label>
                 <ion-toggle [(ngModel)]="showAll" (ionChange)="fetchSessions(true)" aria-labelledby="addon-chat-showalllabel"></ion-toggle>
             </ion-item>
-            <ion-card *ngFor="let session of sessions" (click)="openSession(session)"
+            <ion-card *ngFor="let session of sessions" (click)="openSession(session)" class="core-clickable"
                     [class.addon-mod-chat-session-selected]="session.sessionstart == selectedSessionStart && groupId == selectedSessionGroupId"
                     [class.addon-mod-chat-session-show-more]="session.sessionusers.length < session.allsessionusers.length">
                 <ion-item text-wrap>
diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -43,7 +43,7 @@
                 </div>
 
                 <ng-container *ngFor="let discussion of offlineDiscussions">
-                    <ion-item text-wrap (click)="openNewDiscussion(discussion.timecreated)" [attr.no-lines]="discussion.groupname" [class.core-split-item-selected]="discussion.timecreated == -selectedDiscussion" class="addon-mod-forum-discussion">
+                    <a ion-item text-wrap (click)="openNewDiscussion(discussion.timecreated)" [attr.no-lines]="discussion.groupname" [class.core-split-item-selected]="discussion.timecreated == -selectedDiscussion" class="addon-mod-forum-discussion">
                         <div class="addon-mod-forum-discussion-title">
                             <h2>
                                 <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text>
@@ -57,10 +57,10 @@ <h3 *ngIf="discussion.userfullname">{{discussion.userfullname}}</h3>
                                 <p><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
                             </div>
                         </div>
-                    </ion-item>
+                    </a>
                 </ng-container>
                 <ng-container *ngFor="let discussion of discussions">
-                    <ion-item (click)="openDiscussion(discussion)" [class.core-split-item-selected]="discussion.discussion == selectedDiscussion" class="addon-mod-forum-discussion">
+                    <a ion-item (click)="openDiscussion(discussion)" [class.core-split-item-selected]="discussion.discussion == selectedDiscussion" class="addon-mod-forum-discussion">
                         <div class="addon-mod-forum-discussion-title">
                             <h2 text-wrap>
                                 <core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon>
@@ -94,7 +94,7 @@ <h3 *ngIf="discussion.userfullname">{{discussion.userfullname}}</h3>
                                 </ion-note>
                             </ion-col>
                         </ion-row>
-                    </ion-item>
+                    </a>
                 </ng-container>
 
                 <core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading>
diff --git a/src/addon/mod/label/label.scss b/src/addon/mod/label/label.scss
@@ -1,5 +1,6 @@
-.item.core-course-module-handler.addon-mod-label-handler {
+ion-app.app-root .item.core-course-module-handler.addon-mod-label-handler {
     align-items: center;
+    cursor: auto;
 
     &:hover {
         opacity: 1;
diff --git a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -98,7 +98,7 @@ <h2>{{ 'addon.mod_scorm.contents' | translate }}</h2>
                     <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
                         <p *ngIf="sco.isvisible">
                             <core-icon [name]="sco.image.icon" [label]="sco.image.description" item-start></core-icon>
-                            <a *ngIf="sco.prereq && sco.launch" (click)="open($event, sco.id)"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></a>
+                            <a *ngIf="sco.prereq && sco.launch" (click)="open($event, sco.id)" class="core-clickable"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></a>
                             <span *ngIf="!sco.prereq || !sco.launch"><core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></span>
                             <span *ngIf="accessInfo && accessInfo.canviewscores && sco.score_raw">({{ 'addon.mod_scorm.score' | translate }}: {{sco.score_raw}})</span>
                         </p>
diff --git a/src/addon/qtype/ddwtos/component/ddwtos.scss b/src/addon/qtype/ddwtos/component/ddwtos.scss
@@ -20,6 +20,7 @@ addon-qtype-ddwtos {
         border: 1px solid $gray-darker;
         margin-bottom: 2px;
         border-radius: 5px;
+        cursor: pointer;
     }
     .draghome, .drag {
         display: inline-block;
@@ -41,6 +42,7 @@ addon-qtype-ddwtos {
         z-index: 2;
         border-radius: 5px;
         line-height: 25px;
+        cursor: pointer;
     }
     .drag.selected {
         z-index: 3;
diff --git a/src/app/app.scss b/src/app/app.scss
@@ -333,6 +333,10 @@ ion-app.app-root {
         width: 100%;
     }
 
+    &[fullonclick="true"] {
+      cursor: pointer;
+    }
+
     audio, video, a, iframe {
       pointer-events: auto;
     }
@@ -371,6 +375,7 @@ ion-app.app-root {
       background-color: rgba(0, 0, 0, .5);
     }
     text-align: center;
+    cursor: pointer;
 
     width: 32px;
     height: 32px;
@@ -1081,6 +1086,7 @@ ion-app.app-root {
   }
 
   .core-expandable {
+    cursor: pointer;
     ion-icon[item-start] + .item-inner {
       @include margin-horizontal(0px, null);
     }
@@ -1101,6 +1107,12 @@ ion-app.app-root {
     transition: opacity 100ms ease-in-out;
     opacity: .1;
   }
+
+  a.item,
+  .core-clickable,
+  select {
+    cursor: pointer;
+  }
 }
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors) {
diff --git a/src/components/user-avatar/user-avatar.scss b/src/components/user-avatar/user-avatar.scss
@@ -1,5 +1,6 @@
 ion-avatar[core-user-avatar] {
     position: relative;
+    cursor: pointer;
 
     .contact-status {
         position: absolute;
diff --git a/src/core/block/components/only-title-block/only-title-block.scss b/src/core/block/components/only-title-block/only-title-block.scss
@@ -0,0 +1,5 @@
+ion-app.app-root core-block-only-title {
+    .item-divider {
+        cursor: pointer;
+    }
+}
diff --git a/src/core/grades/components/course/core-grades-course.html b/src/core/grades/components/course/core-grades-course.html
@@ -16,7 +16,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let row of gradesTable.rows" (click)="row.itemtype != 'category' && gotoGrade(row.id)" [class]="row.rowclass">
+                    <tr *ngFor="let row of gradesTable.rows" (click)="row.itemtype != 'category' && gotoGrade(row.id)" [class]="row.rowclass" [ngClass]='{"core-grades-grade-clickable": row.itemtype != "category"}'>
                         <ng-container *ngIf="row.itemtype">
                             <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan">
                             </td>
diff --git a/src/core/grades/components/course/course.scss b/src/core/grades/components/course/course.scss
@@ -85,6 +85,10 @@ ion-app.app-root core-grades-course {
         font-size: 0.85em;
       }
     }
+
+    .core-grades-grade-clickable {
+      cursor: pointer;
+    }
   }
 }
 
