Merge pull request #2232 from dpalou/MOBILE-3242

MOBILE-3242 ui: Display different cursor in all clickable elements
main
Juan Leyva 2020-01-14 14:47:21 +01:00 committed by GitHub
commit dbac7520ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 45 additions and 13 deletions

View File

@ -89,6 +89,7 @@ ion-app.app-root addon-calendar-calendar {
@include border-end(1px, solid, $calendar-border-color); @include border-end(1px, solid, $calendar-border-color);
overflow: hidden; overflow: hidden;
min-height: 60px; min-height: 60px;
cursor: pointer;
&:first-child { &:first-child {
@include padding(null, null, null, 10px); @include padding(null, null, null, 10px);
@ -131,6 +132,7 @@ ion-app.app-root addon-calendar-calendar {
border-radius: 50%; border-radius: 50%;
} }
&.dayblank { &.dayblank {
cursor: auto;
background-color: $gray-lighter; background-color: $gray-lighter;
@include darkmode() { @include darkmode() {
background-color: $black; background-color: $black;

View File

@ -0,0 +1,5 @@
ion-app.app-root addon-calendar-upcoming-events {
.addon-calendar-event {
cursor: pointer;
}
}

View File

@ -48,7 +48,7 @@
<ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin> <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
<ng-container *ngFor="let event of filteredEvents"> <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"> <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> <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> <h2><core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId"></core-format-text></h2>
@ -61,7 +61,7 @@
<ion-icon name="trash"></ion-icon> <ion-icon name="trash"></ion-icon>
<span text-wrap>{{ 'core.deletedoffline' | translate }}</span> <span text-wrap>{{ 'core.deletedoffline' | translate }}</span>
</ion-note> </ion-note>
</ion-item> </a>
</ng-container> </ng-container>
</ion-list> </ion-list>

View File

@ -25,7 +25,7 @@
<ng-container *ngIf="!competency.competency.comppath.showlinks">{{ competency.competency.comppath.framework.name }}</ng-container> <ng-container *ngIf="!competency.competency.comppath.showlinks">{{ competency.competency.comppath.framework.name }}</ng-container>
&nbsp;/&nbsp; &nbsp;/&nbsp;
<span *ngFor="let ancestor of competency.competency.comppath.ancestors"> <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="!competency.competency.comppath.showlinks">{{ ancestor.name }}</ng-container>
<ng-container *ngIf="!ancestor.last">&nbsp;/&nbsp;</ng-container> <ng-container *ngIf="!ancestor.last">&nbsp;/&nbsp;</ng-container>
</span> </span>
@ -35,7 +35,7 @@
<div *ngIf="!competency.competency.hasrelatedcompetencies">{{ 'addon.competency.nocrossreferencedcompetencies' | translate }}</div> <div *ngIf="!competency.competency.hasrelatedcompetencies">{{ 'addon.competency.nocrossreferencedcompetencies' | translate }}</div>
<div *ngIf="competency.competency.hasrelatedcompetencies"> <div *ngIf="competency.competency.hasrelatedcompetencies">
<p *ngFor="let relatedcomp of competency.competency.relatedcompetencies"> <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 }} {{ relatedcomp.shortname }} - {{ relatedcomp.idnumber }}
</a> </a>
</p> </p>

View File

@ -15,7 +15,7 @@
<core-loading [hideUntil]="loaded" class="core-loading-center"> <core-loading [hideUntil]="loaded" class="core-loading-center">
<!-- Description and intro attachments. --> <!-- 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> <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> <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> </ion-item>

View File

@ -20,7 +20,7 @@
<ion-label id="addon-chat-showalllabel">{{ 'addon.mod_chat.showincompletesessions' | translate }}</ion-label> <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-toggle [(ngModel)]="showAll" (ionChange)="fetchSessions(true)" aria-labelledby="addon-chat-showalllabel"></ion-toggle>
</ion-item> </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-selected]="session.sessionstart == selectedSessionStart && groupId == selectedSessionGroupId"
[class.addon-mod-chat-session-show-more]="session.sessionusers.length < session.allsessionusers.length"> [class.addon-mod-chat-session-show-more]="session.sessionusers.length < session.allsessionusers.length">
<ion-item text-wrap> <ion-item text-wrap>

View File

@ -43,7 +43,7 @@
</div> </div>
<ng-container *ngFor="let discussion of offlineDiscussions"> <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"> <div class="addon-mod-forum-discussion-title">
<h2> <h2>
<core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text> <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text>
@ -57,10 +57,10 @@
<p><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p> <p><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
</div> </div>
</div> </div>
</ion-item> </a>
</ng-container> </ng-container>
<ng-container *ngFor="let discussion of discussions"> <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"> <div class="addon-mod-forum-discussion-title">
<h2 text-wrap> <h2 text-wrap>
<core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon> <core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon>
@ -94,7 +94,7 @@
</ion-note> </ion-note>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-item> </a>
</ng-container> </ng-container>
<core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading>

View File

@ -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; align-items: center;
cursor: auto;
&:hover { &:hover {
opacity: 1; opacity: 1;

View File

@ -98,7 +98,7 @@
<div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}"> <div *ngFor="let sco of toc" class="core-padding-{{sco.level}} addon-mod_scorm-type-{{sco.scormtype}}">
<p *ngIf="sco.isvisible"> <p *ngIf="sco.isvisible">
<core-icon [name]="sco.image.icon" [label]="sco.image.description" item-start></core-icon> <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="!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> <span *ngIf="accessInfo && accessInfo.canviewscores && sco.score_raw">({{ 'addon.mod_scorm.score' | translate }}: {{sco.score_raw}})</span>
</p> </p>

View File

@ -20,6 +20,7 @@ addon-qtype-ddwtos {
border: 1px solid $gray-darker; border: 1px solid $gray-darker;
margin-bottom: 2px; margin-bottom: 2px;
border-radius: 5px; border-radius: 5px;
cursor: pointer;
} }
.draghome, .drag { .draghome, .drag {
display: inline-block; display: inline-block;
@ -41,6 +42,7 @@ addon-qtype-ddwtos {
z-index: 2; z-index: 2;
border-radius: 5px; border-radius: 5px;
line-height: 25px; line-height: 25px;
cursor: pointer;
} }
.drag.selected { .drag.selected {
z-index: 3; z-index: 3;

View File

@ -333,6 +333,10 @@ ion-app.app-root {
width: 100%; width: 100%;
} }
&[fullonclick="true"] {
cursor: pointer;
}
audio, video, a, iframe { audio, video, a, iframe {
pointer-events: auto; pointer-events: auto;
} }
@ -371,6 +375,7 @@ ion-app.app-root {
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
} }
text-align: center; text-align: center;
cursor: pointer;
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -1081,6 +1086,7 @@ ion-app.app-root {
} }
.core-expandable { .core-expandable {
cursor: pointer;
ion-icon[item-start] + .item-inner { ion-icon[item-start] + .item-inner {
@include margin-horizontal(0px, null); @include margin-horizontal(0px, null);
} }
@ -1101,6 +1107,12 @@ ion-app.app-root {
transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out;
opacity: .1; opacity: .1;
} }
a.item,
.core-clickable,
select {
cursor: pointer;
}
} }
@each $color-name, $color-base, $color-contrast in get-colors($colors) { @each $color-name, $color-base, $color-contrast in get-colors($colors) {

View File

@ -1,5 +1,6 @@
ion-avatar[core-user-avatar] { ion-avatar[core-user-avatar] {
position: relative; position: relative;
cursor: pointer;
.contact-status { .contact-status {
position: absolute; position: absolute;

View File

@ -0,0 +1,5 @@
ion-app.app-root core-block-only-title {
.item-divider {
cursor: pointer;
}
}

View File

@ -16,7 +16,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <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"> <ng-container *ngIf="row.itemtype">
<td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan"> <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan">
</td> </td>

View File

@ -85,6 +85,10 @@ ion-app.app-root core-grades-course {
font-size: 0.85em; font-size: 0.85em;
} }
} }
.core-grades-grade-clickable {
cursor: pointer;
}
} }
} }