refactor(bs3): port notifications

This commit is contained in:
Matteo Pagliazzi 2014-02-04 20:53:09 +01:00
parent b89081dd41
commit 379da41982
5 changed files with 32 additions and 21 deletions

View file

@ -28,7 +28,7 @@
"angular-bindonce": "~0.2.1",
"bootstrap": "~3.1.0",
"bootstrap-datepicker": "1.3.0",
"bootstrap-growl": "~1.1.0",
"bootstrap-growl": "git://github.com/ifightcrime/bootstrap-growl.git#master",
"bootstrap-tour": "~0.8.1",
"habitrpg-shared": "git://github.com/HabitRPG/habitrpg-shared.git#develop",
"BrowserQuest": "https://github.com/mozilla/BrowserQuest.git",

View file

@ -16,6 +16,16 @@
.wide-popover
max-width: 400px
#notification-area
position: fixed
top: 0
right: 0px
z-index: 1061
.alert
padding-top: 8px
padding-bottom: 8px
// variables
gpColor = #FBEFC0
@ -86,6 +96,8 @@ borderDarken = 20%
background-size: 18px
width: 14px
height: 14px
display: inline-block
vertical-align: middle
.icon-silver
background: url("/bower_components/habitrpg-shared/img/coin_single_silver.png") no-repeat
@ -93,6 +105,8 @@ borderDarken = 20%
background-size: 18px
width: 14px
height: 14px
display: inline-block
vertical-align: middle
.icon-death
background: url("/bower_components/habitrpg-shared/img/sprites/dead.png") no-repeat
@ -100,7 +114,8 @@ borderDarken = 20%
background-size: 14px
width: 14px
height: 14px
display: inline-block
vertical-align: middle
.undo-button
z-index: 3000

View file

@ -146,11 +146,6 @@ div.tooltip-inner {
#reset-modal
z-index:1500
#notification-area
position: fixed
top: 0
right: 0px
z-index: 1061
a
cursor: pointer

View file

@ -128,7 +128,8 @@ habitrpg.controller('NotificationCtrl',
$rootScope.openModal('questCompleted', 'InventoryCtrl');
});
$rootScope.$watch('party.quest.key && !party.quest.active && !questHold && party.quest.members[user._id] == undefined', function(after, before){
// Quest invitation modal
$rootScope.$watch('party.quest.key && !party.quest.active && party.quest.members[user._id] == undefined', function(after, before){
if (after == before || after != true) return;
$rootScope.openModal('questInvitation');
});

View file

@ -6,11 +6,11 @@ angular.module("notificationServices", [])
function growl(html, type) {
$.bootstrapGrowl(html, {
ele: '#notification-area',
type: type, //(null, 'text', 'error', 'success', 'gp', 'xp', 'hp', 'lvl', 'death', 'mp', 'crit')
type: type || 'warning', //('info', 'text', 'error', 'success', 'gp', 'xp', 'hp', 'lvl', 'death', 'mp', 'crit')
top_offset: 20,
align: 'right', //('left', 'right', or 'center')
width: 250, //(integer, or 'auto')
delay: 7000,
delay: 700000000,
allow_dismiss: true,
stackup_spacing: 10 // spacing between consecutive stacecked growls.
});
@ -25,11 +25,11 @@ angular.module("notificationServices", [])
gold = Math.floor(absolute);
silver = Math.floor((absolute - gold) * 100);
if (gold && silver > 0) {
return "" + gold + " <i class='icon-gold'></i> " + silver + " <i class='icon-silver'></i>";
return "" + gold + " <span class='icon-gold'></span> " + silver + " <span class='icon-silver'></span>";
} else if (gold > 0) {
return "" + gold + " <i class='icon-gold'></i>";
return "" + gold + " <span class='icon-gold'></span>";
} else if (silver > 0) {
return "" + silver + " <i class='icon-silver'></i>";
return "" + silver + " <span class='icon-silver'></span>";
}
};
@ -45,11 +45,11 @@ angular.module("notificationServices", [])
coins: coins,
hp: function(val) {
// don't show notifications if user dead
growl("<i class='icon-heart'></i> " + sign(val) + " " + round(val) + " HP", 'hp');
growl("<span class='glyphicon glyphicon-heart'></span>&nbsp; " + sign(val) + " " + round(val) + " HP", 'hp');
},
exp: function(val) {
if (val < -50) return; // don't show when they level up (resetting their exp)
growl("<i class='icon-star'></i> " + sign(val) + " " + round(val) + " XP", 'xp');
growl("<span class='glyphicon glyphicon-star'></span>&nbsp; " + sign(val) + " " + round(val) + " XP", 'xp');
},
gp: function(val, bonus) {
growl(sign(val) + " " + coins(val - bonus), 'gp');
@ -58,22 +58,22 @@ angular.module("notificationServices", [])
growl(val);
},
lvl: function(){
growl('<i class="icon-chevron-up"></i> Level Up!', 'lvl');
growl('<span class="glyphicon glyphicon-chevron-up"></span>&nbsp; Level Up!', 'lvl');
},
death: function(){
growl("<i class='icon-death'></i> Respawn!", "death");
growl("<span class='glyphicon glyphicon-death'></span>&nbsp; Respawn!", "death");
},
error: function(error){
growl("<i class='icon-exclamation-sign'></i> " + error, "error");
growl("<span class='glyphicon glyphicon-exclamation-sign'></span>&nbsp; " + error, "error");
},
mp: function(val) {
growl("<i class='icon-fire'></i> " + sign(val) + " " + round(val) + " MP", 'mp');
growl("<span class='glyphicon glyphicon-fire'></span>&nbsp; " + sign(val) + " " + round(val) + " MP", 'mp');
},
crit: function(val) {
growl("<i class='icon-certificate'></i> Critical Hit! Bonus: " + Math.round(val) + "%", 'crit');
growl("<span class='glyphicon glyphicon-certificate'></span>&nbsp; Critical Hit! Bonus: " + Math.round(val) + "%", 'crit');
},
drop: function(val) {
growl("<i class='icon-gift'></i> " + val, 'drop');
growl("<span class='glyphicon glyphicon-gift'></span>&nbsp; " + val, 'drop');
}
};
}