Skip to content

Instantly share code, notes, and snippets.

@bobbyjam99-zz
Last active June 7, 2019 07:53
Show Gist options
  • Save bobbyjam99-zz/bd997f6199b8426d77a02fe497b64bcb to your computer and use it in GitHub Desktop.
Save bobbyjam99-zz/bd997f6199b8426d77a02fe497b64bcb to your computer and use it in GitHub Desktop.
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="notifications" type="List"/>
<aura:attribute name="isMuted" type="Boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<aura:registerEvent name="toastEvent" type="force:showToast"/>
<div class="countainer">
<!-- Header -->
<div class="slds-p-around_x-small slds-border_bottom slds-theme_shade">
<div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
<div>
<span class="slds-badge">{!v.notifications.length}</span>
</div>
<div>
<lightning:buttonIcon onclick="{!c.onClear}" iconName="utility:delete" title="Clear notifications" alternativeText="Clear notifications" variant="border-filled"/>
<lightning:buttonIcon onclick="{!c.onToggleMute}" iconName="{!v.isMuted ? 'utility:volume_off' : 'utility:volume_high'}" title="{!v.isMuted ? 'Unmute notifications' : 'Mute notifications'}" alternativeText="Toggle mute" variant="border-filled"/>
</div>
</div>
</div>
<!-- Notification list -->
<div class="slds-container_fluid slds-scrollable_y content">
<aura:iteration items="{!v.notifications}" var="notification">
<div class="slds-p-around_small slds-border_top">
<div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
<p>{!notification.message}</p>
<p class="slds-text-color_weak slds-p-left_x-small">{!notification.time}</p>
</div>
</div>
</aura:iteration>
</div>
</div>
</aura:component>
.THIS.container {
height: 100%;
}
.THIS .content {
height: calc(100% - 49px);
}
({
onInit: function (component, event, helper) {
component.set('v.notifications', [
{ time: '00:01', message: 'Greetings Trailblazer!'},
{ time: '00:02', message: 'Congratulations on building this first version of the app.'},
{ time: '00:03', message: 'Beware of the bears.'}
]);
helper.displayToast(component, 'success', 'Ready to receive notifications.');
},
onClear: function (component, event, helper) {
component.set('v.notifications', []);
},
onToggleMule: function (component, event, helper) {
const isMuted = component.get('v.isMuted');
component.set('v.isMuted', !isMuted);
helper.displayToast(component, 'success', 'Notifications ' + ((!isMuted) ? 'muted': 'unmuted') + '.');
}
})
({
displayToast : function(component, type, message) {
const toastEvent = $A.get('e.force:showToast');
toastEvent.setParams({
type: type,
message: message
});
toastEvent.fire();
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment