From 857d3ca02cfc3cf5921f66a89557308504c69405 Mon Sep 17 00:00:00 2001 From: Ruben Vereecken Date: Mon, 11 Aug 2014 14:51:34 +0200 Subject: [PATCH] Added some simple animations to achievement popups --- app/styles/achievements.sass | 32 ++++++++++--------- .../achievements/achievement-popup.jade | 4 +-- app/templates/editor/achievement/edit.jade | 1 - .../achievements/AchievementPopup.coffee | 22 +++++++------ .../achievement/AchievementEditView.coffee | 1 + test/demo/fixtures/achievements.coffee | 1 - .../achievement/AchievementGet.demo.coffee | 10 +++++- 7 files changed, 41 insertions(+), 30 deletions(-) diff --git a/app/styles/achievements.sass b/app/styles/achievements.sass index 2b539c910..574734048 100644 --- a/app/styles/achievements.sass +++ b/app/styles/achievements.sass @@ -51,10 +51,6 @@ // Specific to the user stats page #user-achievements-view - .row - //.col-lg-4, .col-xs-12 - padding-right: 0px !important - .achievement-body width: 335px height: 120px @@ -63,7 +59,7 @@ .achievement-icon width: 120px height: 120px - top: 0px + top: -10px .achievement-image img @@ -88,7 +84,7 @@ .achievement-popup padding: 20px 0px - cursor: default + position: relative .achievement-body .achievement-icon @@ -132,16 +128,23 @@ bottom: 48px .user-level + background-image: url("/images/achievements/level-bg.png") + color: white + width: 38px + height: 38px + line-height: 38px font-size: 20px position: absolute left: -15px - margin-top: -3px - box-shadow: 0 0 0 2px black, 0 0 0 4px lightgrey, 0 0 0 6px black + margin-top: -8px + vertical-align: middle + z-index: 1000 + font-family: $font-family-base > .progress-bar-wrapper position: absolute - margin-left: 12px - width: 319px + margin-left: 17px + width: 314px height: 20px z-index: 2 @@ -211,11 +214,6 @@ .xp-bar-left background-color: #fffbfd -.user-level - z-index: 1000 - box-shadow: 0 0 0 1px black, 0 0 0 3px lightgrey, 0 0 0 4px black - font-family: $font-family-base - // Achievements page .achievement-category-title margin-left: 20px @@ -235,3 +233,7 @@ position: fixed right: 0px bottom: 0px + +.popup + cursor: default + left: 600px diff --git a/app/templates/achievements/achievement-popup.jade b/app/templates/achievements/achievement-popup.jade index ff889a68e..f3cca98e4 100644 --- a/app/templates/achievements/achievement-popup.jade +++ b/app/templates/achievements/achievement-popup.jade @@ -9,10 +9,10 @@ if popup .progress-wrapper - span.user-level.badge= level + span.user-level= level .progress-bar-wrapper .progress .progress-bar.xp-bar-old(style="width:#{oldXPWidth}%" data-toggle="tooltip" data-placement="top" title="#{currentXP} XP in total") .progress-bar.xp-bar-new(style="width:#{newXPWidth}%" data-toggle="tooltip" title="#{newXP} XP earned") - .progress-bar.xp-bar-left(style="width:#{leftXPWidth}%" data-toggle="tooltip" title="#{leftXP} XP until level #{nextLevel}") + .progress-bar.xp-bar-left(style="width:#{leftXPWidth}%" data-toggle="tooltip" title="#{leftXP} XP until level #{level+1}") .progress-bar-border diff --git a/app/templates/editor/achievement/edit.jade b/app/templates/editor/achievement/edit.jade index b3ebf8005..17bab8045 100644 --- a/app/templates/editor/achievement/edit.jade +++ b/app/templates/editor/achievement/edit.jade @@ -21,7 +21,6 @@ block content #achievement-treema #achievement-view.clearfix - #achievement-view-inner hr diff --git a/app/views/achievements/AchievementPopup.coffee b/app/views/achievements/AchievementPopup.coffee index e9709936a..c8e68760f 100644 --- a/app/views/achievements/AchievementPopup.coffee +++ b/app/views/achievements/AchievementPopup.coffee @@ -13,6 +13,7 @@ module.exports = class AchievementPopup extends CocoView @container = options.container or @getContainer() @popup = options.container @popup ?= true + @className += ' popup' if @popup super options console.debug 'Created an AchievementPopup', @$el @@ -40,15 +41,6 @@ module.exports = class AchievementPopup extends CocoView #console.debug "Current level is #{currentLevel} (#{currentLevelExp} xp), next level is #{nextLevel} (#{nextLevelXP} xp)." #console.debug "Need a total of #{nextLevelXP - currentLevelExp}, already had #{previousXP} and just now earned #{achievedXP} totalling on #{currentXP}" - alreadyAchievedBar = $("
") - newlyAchievedBar = $("
") - emptyBar = $("
") - progressBar = $('
').append(alreadyAchievedBar).append(newlyAchievedBar).append(emptyBar) - - alreadyAchievedBar.tooltip(title: "#{currentXP} XP in total") - newlyAchievedBar.tooltip(title: "#{achievedXP} XP earned") - emptyBar.tooltip(title: "#{nextLevelXP - currentXP} XP until level #{nextLevel}") - data = title: @achievement.get('name') imgURL: @achievement.getImageURL() @@ -71,7 +63,17 @@ module.exports = class AchievementPopup extends CocoView render: -> console.debug 'render achievement popup' super() - @container.append @$el + @container.prepend @$el + if @popup + @$el.animate + left: 0 + @$el.on 'click', (e) => + @$el.animate + left: 600 + , => + @$el.remove() + @destroy() + getContainer: -> unless @container diff --git a/app/views/editor/achievement/AchievementEditView.coffee b/app/views/editor/achievement/AchievementEditView.coffee index 7872daa54..98d6a4f32 100644 --- a/app/views/editor/achievement/AchievementEditView.coffee +++ b/app/views/editor/achievement/AchievementEditView.coffee @@ -61,6 +61,7 @@ module.exports = class AchievementEditView extends RootView @pushChangesToPreview() pushChangesToPreview: => + $('#achievement-view').empty() if @treema? for key, value of @treema.data diff --git a/test/demo/fixtures/achievements.coffee b/test/demo/fixtures/achievements.coffee index 3dceb1d39..30d4c1bd3 100644 --- a/test/demo/fixtures/achievements.coffee +++ b/test/demo/fixtures/achievements.coffee @@ -15,7 +15,6 @@ module.exports.Simulated = Simulated = _id: '53ba76249259823746b6b482' name: 'Simulated' description: 'Simulated Games.' - icon: '/images/achievements/cup-02.png' worth: 1 collection: 'users' query: "{\"simulatedBy\":{\"$gt\":0}}" diff --git a/test/demo/views/achievement/AchievementGet.demo.coffee b/test/demo/views/achievement/AchievementGet.demo.coffee index 0154390c5..a1cbafa20 100644 --- a/test/demo/views/achievement/AchievementGet.demo.coffee +++ b/test/demo/views/achievement/AchievementGet.demo.coffee @@ -9,16 +9,24 @@ module.exports = -> me.set 'points', 48 unlockableObj = fixtures.DungeonArenaStarted - earnedUnlockableObj = earnedPoints: 3 notified: false + simulated = fixtures.Simulated + earnedSimulated = + achievedAmount: 1 + earnedPoints: 1 + notified: false + unlockable = new Achievement unlockableObj earnedUnlockable = new EarnedAchievement earnedUnlockableObj + simulated = new Achievement simulated + earnedSimulated = new EarnedAchievement earnedSimulated view = new RootView view.render() view.showNewAchievement unlockable, earnedUnlockable + #view.showNewAchievement simulated, earnedSimulated view