Mobile 2914

src/addon/messages/pages/discussion/discussion.html

@@ -13,14 +13,14 @@
         <core-context-menu [aria-label]="'addon.messages.conversationactions' | translate">
             <core-context-menu-item [hidden]="isSelf || !showInfo || isGroup" [priority]="1000" [content]="'addon.messages.info' | translate" (action)="viewInfo()" iconAction="information-circle"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !showInfo || !isGroup" [priority]="1000" [content]="'addon.messages.groupinfo' | translate" (action)="viewInfo()" iconAction="information-circle"></core-context-menu-item>
-            <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800" [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' : 'addon.messages.addtofavourites') | translate" (action)="changeFavourite($event)" [closeOnClick]="false" [iconAction]="favouriteIcon"></core-context-menu-item>
+            <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversation" [priority]="800" [content]="(conversation && conversation.isfavourite ? 'addon.messages.removefromfavourites' : 'addon.messages.addtofavourites') | translate" (action)="changeFavourite($event)" [closeOnClick]="false" [iconAction]="favouriteIcon" [iconSlash]="favouriteIconSlash"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !otherMember || otherMember.isblocked" [priority]="700" [content]="'addon.messages.blockuser' | translate" (action)="blockUser()" [iconAction]="blockIcon"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.isblocked" [priority]="700" [content]="'addon.messages.unblockuser' | translate" (action)="unblockUser()" [iconAction]="blockIcon"></core-context-menu-item>
             <core-context-menu-item [hidden]="!muteEnabled || !conversation" [priority]="600" [content]="(conversation && conversation.ismuted ? 'addon.messages.unmuteconversation' : 'addon.messages.muteconversation') | translate" (action)="changeMute($event)" [closeOnClick]="false" [iconAction]="muteIcon"></core-context-menu-item>
             <core-context-menu-item [hidden]="!canDelete" [priority]="400" [content]="'addon.messages.showdeletemessages' | translate" (action)="toggleDelete()" [iconAction]="(showDelete ? 'checkbox-outline' : 'square-outline')"></core-context-menu-item>
             <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversationId || isGroup" [priority]="200" [content]="'addon.messages.deleteconversation' | translate" (action)="deleteConversation($event)" [closeOnClick]="false" [iconAction]="deleteIcon"></core-context-menu-item>
             <core-context-menu-item [hidden]="isSelf || !otherMember || otherMember.iscontact || requestContactSent || requestContactReceived" [priority]="100" [content]="'addon.messages.addtoyourcontacts' | translate" (action)="createContactRequest()" [iconAction]="addRemoveIcon"></core-context-menu-item>
-            <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.iscontact" [priority]="100" [content]="'addon.messages.removefromyourcontacts' | translate" (action)="removeContact()" [iconAction]="addRemoveIcon"></core-context-menu-item>
+            <core-context-menu-item [hidden]="isSelf || !otherMember || !otherMember.iscontact" [priority]="100" [content]="'addon.messages.removefromyourcontacts' | translate" (action)="removeContact()" [iconAction]="addRemoveIcon" [iconSlash]="true"></core-context-menu-item>
         </core-context-menu>
     </core-navbar-buttons>
 </ion-header>

src/addon/messages/pages/discussion/discussion.ts

@@ -80,9 +80,10 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
     isGroup = false;
     members: any = {}; // Members that wrote a message, indexed by ID.
     favouriteIcon = 'fa-star';
+    favouriteIconSlash = false;
     deleteIcon = 'trash';
     blockIcon = 'close-circle';
-    addRemoveIcon = 'add';
+    addRemoveIcon = 'person';
     otherMember: any; // Other member information (individual conversations only).
     footerType: 'message' | 'blocked' | 'requiresContact' | 'requestSent' | 'requestReceived' | 'unable';
     requestContactSent = false;
@@ -244,7 +245,6 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
                                 this.title = member.fullname;
                             }
                             this.blockIcon = this.otherMember && this.otherMember.isblocked ? 'checkmark-circle' : 'close-circle';
-                            this.addRemoveIcon = this.otherMember && this.otherMember.iscontact ? 'remove' : 'add';
                         }));
                     } else {
                         this.otherMember = null;
@@ -446,7 +446,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
                     this.title = conversation.name;
                     this.conversationImage = conversation.imageurl;
                     this.isGroup = conversation.type == AddonMessagesProvider.MESSAGE_CONVERSATION_TYPE_GROUP;
-                    this.favouriteIcon = conversation.isfavourite ? 'fa-star-o' : 'fa-star';
+                    this.favouriteIcon = 'fa-star';
+                    this.favouriteIconSlash = conversation.isfavourite;
                     this.muteIcon = conversation.ismuted ? 'volume-up' : 'volume-off';
                     if (!this.isGroup) {
                         this.userId = conversation.userid;
@@ -1118,7 +1119,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'Error changing favourite state.');
         }).finally(() => {
-            this.favouriteIcon = this.conversation.isfavourite ? 'fa-star-o' : 'fa-star';
+            this.favouriteIcon = 'fa-star';
+            this.favouriteIconSlash = this.conversation.isfavourite;
             done && done();
         });
     }
@@ -1306,7 +1308,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'core.error', true);
         }).finally(() => {
-            this.addRemoveIcon = this.otherMember.iscontact ? 'remove' : 'add';
+            this.addRemoveIcon = 'person';
         });
     }
 
@@ -1381,7 +1383,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'core.error', true);
         }).finally(() => {
-            this.addRemoveIcon = this.otherMember.iscontact ? 'remove' : 'add';
+            this.addRemoveIcon = 'person';
         });
     }
 

src/components/context-menu/context-menu-item.ts

@@ -39,6 +39,7 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
                                   // If is "spinner" an spinner will be shown.
                                   // If no icon or spinner is selected, no action or link will work.
                                   // If href but no iconAction is provided arrow-right will be used.
+    @Input() iconSlash?: boolean; // Display a red slash over the icon.
     @Input() ariaDescription?: string; // Aria label to add to iconDescription.
     @Input() ariaAction?: string; // Aria label to add to iconAction. If not set, it will be equal to content.
     @Input() href?: string; // Link to go if no action provided.

src/components/context-menu/core-context-menu-popover.html

@@ -3,7 +3,7 @@
     <a ion-item text-wrap *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden" [attr.detail-none]="!item.href || item.iconAction" role="menuitem">
         <core-icon *ngIf="item.iconDescription" [name]="item.iconDescription" [label]="item.ariaDescription" item-start></core-icon>
         <core-format-text [clean]="true" [text]="item.content"></core-format-text>
-        <core-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction" item-end></core-icon>
+        <core-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction" [slash]="item.iconSlash" item-end></core-icon>
         <ion-spinner *ngIf="(item.href || item.action) && item.iconAction == 'spinner'" item-end></ion-spinner>
         <ion-badge class="{{item.badgeClass}}" item-end *ngIf="item.badge">{{item.badge}}</ion-badge>
     </a>

src/components/icon/icon.scss

@@ -13,4 +13,43 @@
       -webkit-transform: scale(-1, 1);
       transform: scale(-1, 1);
     }
-}
+}
+
+// Center font awesome icons
+
+.icon.fa::before {
+  width: 1em;
+  text-align: center;
+}
+
+// Slash
+
+@font-face {
+  font-family: "Moodle Slash Icon";
+  font-style: normal;
+  font-weight: 400;
+  src: url("#{$font-path}/slash-icon.woff") format("woff");
+}
+
+.icon-slash {
+  position: relative;
+}
+
+.icon-slash::after {
+  content: "/";
+  font-family: "Moodle Slash Icon";
+  font-size: 0.75em;
+  margin-top: 0.125em;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: color($colors, danger);
+}
+
+.icon-slash.fa::after {
+  font-size: 1em;
+  margin-top: 0;
+}

src/components/icon/icon.ts

@@ -29,6 +29,7 @@ export class CoreIconComponent implements OnInit, OnDestroy {
     // Common params.
     @Input() name: string;
     @Input('color') color?: string;
+    @Input('slash') slash?: boolean; // Display a red slash over the icon.
 
     // Ionicons params.
     @Input('isActive') isActive?: boolean;
@@ -94,6 +95,10 @@ export class CoreIconComponent implements OnInit, OnDestroy {
             }
         }
 
+        if (this.slash) {
+            this.newElement.classList.add('icon-slash');
+        }
+
         this.element.parentElement.replaceChild(this.newElement, this.element);
     }
 

src/core/courses/components/course-options-menu/core-courses-course-options-menu.html

@@ -16,7 +16,7 @@ <h2>{{ 'core.courses.show' | translate }}</h2>
     <h2>{{ 'core.courses.addtofavourites' | translate }}</h2>
 </ion-item>
 <ion-item text-wrap (click)="action('unfavourite')" *ngIf="course.isfavourite">
-    <core-icon name="fa-star-o" item-start></core-icon>
+    <core-icon name="fa-star" [slash]="true" item-start></core-icon>
     <h2>{{ 'core.courses.removefromfavourites' | translate }}</h2>
 </ion-item>