diff --git a/app/assets/images/level/scrubber_background.png b/app/assets/images/level/scrubber_background.png
index a70abeb97..517a4c8c4 100644
Binary files a/app/assets/images/level/scrubber_background.png and b/app/assets/images/level/scrubber_background.png differ
diff --git a/app/styles/base.sass b/app/styles/base.sass
index 0acc6fb48..581dd249a 100644
--- a/app/styles/base.sass
+++ b/app/styles/base.sass
@@ -153,40 +153,6 @@ a
cursor: pointer
-// Bigger versions of some Bootstrap icons
-// TODO: make the non-white versions of these if we ever need them
-.icon.big
- background-image: url(/images/pages/base/glyphicons-simplified.png)
-
-.icon-white.big
- background-image: url(/images/pages/base/glyphicons-simplified.png)
-
-.icon.big, .icon-white.big
- width: 19px
- height: 19px
- line-height: 19px
-
-.icon-pause.big
- background-position: -114px 0px
-
-.icon-play.big
- background-position: -95px 0px
-
-.icon-repeat.big
- background-position: -76px 0px
-
-.icon-volume-off.big
- background-position: -57px 0px
-
-.icon-volume-down.big
- background-position: -38px 0px
-
-.icon-volume-up.big
- background-position: -19px 0px
-
-.icon-cog.big
- background-position: 0px 0px
-
// loading screens for everything but the play view
.loading-screen
.progress
@@ -339,3 +305,7 @@ kbd
&.gem-60
width: 60px
height: 60px
+
+.popover
+ border-image: url(/images/level/popover_background.png) 29 39 fill stretch
+ border-width: 15px 20px
diff --git a/app/styles/play/level.sass b/app/styles/play/level.sass
index 2a1fc972d..3ba3274b6 100644
--- a/app/styles/play/level.sass
+++ b/app/styles/play/level.sass
@@ -144,14 +144,6 @@ $level-resize-transition-time: 0.5s
left: -3px
bottom: 0
- #hud-top-gradient
- top: -32px
- background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
- left: 0
- right: 0
- bottom: 0
- height: 3px
-
#canvas-left-gradient
left: 0px
width: 5px
diff --git a/app/styles/play/level/goals.sass b/app/styles/play/level/goals.sass
index 94aef8605..b65998a21 100644
--- a/app/styles/play/level/goals.sass
+++ b/app/styles/play/level/goals.sass
@@ -9,7 +9,7 @@
background: transparent url(/images/level/goals_background.png)
background-size: 100% 100%
- padding: 19px 17px 6px 25px
+ padding: 19px 17px 2px 25px
z-index: 3
font-size: 14px
diff --git a/app/styles/play/level/multiplayer-status.sass b/app/styles/play/level/multiplayer-status.sass
index 0e16da6bf..c0fe93828 100644
--- a/app/styles/play/level/multiplayer-status.sass
+++ b/app/styles/play/level/multiplayer-status.sass
@@ -4,6 +4,8 @@
// TODO: Replace this devart with nice shinies
#multiplayer-status-view
+ position: absolute
+
.player-count
color: white
.players-available
diff --git a/app/styles/play/level/playback.sass b/app/styles/play/level/playback.sass
index 2434fb1af..92e5a2c81 100644
--- a/app/styles/play/level/playback.sass
+++ b/app/styles/play/level/playback.sass
@@ -2,50 +2,52 @@
@import "app/styles/bootstrap/variables"
#playback-view
+ $playback-button-color: rgb(248, 197, 146)
+ // When 75% alpha, it will look like the rgb(194, 154, 114) from Heald's design
width: 55%
- height: 30px
+ height: 60px
+ padding-top: 17px
position: relative
- background: #383434
- // Counteract 50px height of absolutely positioned control bar.
- margin-top: 50px
+ background: transparent url(/images/level/scrubber_background.png)
+ background-size: 100% 100%
+ // Counteract 50px height of absolutely positioned control bar, but overlap by 10px of jagged transparent top.
+ margin-top: 50px - 10px
+ z-index: 2
button
- height: 26px
+ font-size: 26px
+ margin-left: 10px
background: transparent
- @include opacity(0.50)
- i
+ @include opacity(0.75)
+ color: $playback-button-color
+ text-shadow: 1px 1px 0px black
+
+ .glyphicon
position: relative
button:hover
- @include opacity(0.75)
-
+ @include opacity(1)
+
#play-button, #volume-button, #music-button
float: left
- margin-left: 2px
- margin-top: 2px
- width: 25px
position: relative
#music-button
- @include opacity(0.25)
- font-size: 20px
+ @include opacity(0.5)
span
position: relative
left: -3px
top: -2px
&:hover
- @include opacity(0.50)
+ @include opacity(0.75)
&.music-on
- @include opacity(0.50)
+ @include opacity(0.75)
&:hover
- @include opacity(0.75)
+ @include opacity(1)
#play-button, #volume-button
- i
+ .glyphicon
display: none
- position: absolute
- left: 2px
- top: 2px
#settings-button
padding-left: 4px
@@ -54,51 +56,58 @@
#playback-settings
float: right
position: relative
- top: 2px
- margin-right: 2px
- ul i
+ margin-right: 10px
+ ul button
margin: 0 10px
li:hover
background: #add8e6
- #play-button.disabled i
- @include opacity(0.5)
- #play-button.playing i.icon-pause
+ #play-button.disabled .glyphicon
+ @include opacity(0.75)
+ #play-button.playing .glyphicon-pause
display: inline-block
- #play-button.paused i.icon-play
+ #play-button.paused .glyphicon-play
display: inline-block
- #play-button.ended i.icon-repeat
+ #play-button.ended .glyphicon-repeat
display: inline-block
- #volume-button.vol-up i.icon-volume-up
+ #volume-button.vol-up .glyphicon.glyphicon-volume-up
display: inline-block
- #volume-button.vol-off i.icon-volume-off
+ #volume-button.vol-off .glyphicon.glyphicon-volume-off
display: inline-block
- @include opacity(0.50)
+ @include opacity(0.75)
&:hover
- @include opacity(0.75)
- #volume-button.vol-down i.icon-volume-down
+ @include opacity(1)
+ #volume-button.vol-down .glyphicon.glyphicon-volume-down
display: inline-block
.scrubber
position: absolute
- left: 100px
- top: 0px
+ left: 170px
+ top: 21px
bottom: 0px
- right: 125px
+ right: 175px
+ background: rgb(3, 3, 3)
+ height: 28px
+ border: 1px solid rgb(67, 67, 44)
+ border-radius: 14px
+
+ .scrubber-inner
+ border: 1px solid rgb(44, 38, 29)
+ width: 100%
+ height: 100%
+ border-radius: 14px
+ padding: 6px 8px
.progress
float: left
width: 100%
- height: 14px
- margin-top: 8px
+ height: 12px
cursor: pointer
overflow: visible
border: 1px solid #444
- // Remove gradient background in favor of solid fill
- background-color: #888
- background-image: none
- border-radius: 0
+ background: rgb(80, 67, 53)
+ border-radius: 6px
border: 0
// Can't do this transition because handle then jitters, but would be good for streaming.
//@include transition(width .2s linear)
@@ -113,19 +122,19 @@
@include transition(width .0s linear)
position: relative
// Remove gradient background in favor of solid fill
- background-color: #67A4C8
- //background-image: none // gradient looks kind of cool though; keep it in
+ background: rgb(245, 170, 49)
+ border: 1px solid rgb(62, 45, 16)
+ border-radius: 6px
.scrubber-handle
cursor: pointer
position: absolute
- right: -16px
- top: -9px
- background: transparent url(/images/level/playback_thumb.png)
- width: 32px
- height: 32px
- // z: above the gradient line bordering the playback bar
- z-index: 6
+ right: -18px
+ top: -11px
+ background: transparent url(/images/level/scrubber_knob.png)
+ background-size: contain
+ width: 36px
+ height: 36px
.ui-slider-handle
height: 100%
@@ -140,3 +149,5 @@
body.ipad #playback-view
#playback-settings
display: none
+ .scrubber
+ right: 25px
diff --git a/app/styles/play/spectate.sass b/app/styles/play/spectate.sass
index 227b86db0..d102a7197 100644
--- a/app/styles/play/spectate.sass
+++ b/app/styles/play/spectate.sass
@@ -124,14 +124,6 @@
left: -3px
bottom: 0
- #hud-top-gradient
- top: -32px
- background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
- left: 0
- right: 0
- bottom: 0
- height: 3px
-
#canvas-left-gradient
left: 0px
width: 5px
diff --git a/app/templates/play/level/goals.jade b/app/templates/play/level/goals.jade
index d1e0b689c..5186106dd 100644
--- a/app/templates/play/level/goals.jade
+++ b/app/templates/play/level/goals.jade
@@ -1,6 +1,6 @@
ul#primary-goals-list
div.goals-status
- strong(data-i18n="play_level.goals") Goals
+ span(data-i18n="play_level.goals") Goals
span.spr :
span(data-i18n="play_level.success").secret.goal-status.success Success!
span(data-i18n="play_level.incomplete").secret.goal-status.incomplete Incomplete
diff --git a/app/templates/play/level/hud.jade b/app/templates/play/level/hud.jade
index 5153f1379..5e093bf04 100644
--- a/app/templates/play/level/hud.jade
+++ b/app/templates/play/level/hud.jade
@@ -1,5 +1,3 @@
-#hud-top-gradient.gradient
-
.center
.thang-canvas-wrapper.thang-elem
diff --git a/app/templates/play/level/playback.jade b/app/templates/play/level/playback.jade
index 5502f78cb..5d494cb67 100644
--- a/app/templates/play/level/playback.jade
+++ b/app/templates/play/level/playback.jade
@@ -1,45 +1,29 @@
button.btn.btn-xs.btn-inverse#play-button.paused(title="Ctrl/Cmd + P: Toggle level play/pause")
- i.icon-play.icon-white.big
- i.icon-pause.icon-white.big
- i.icon-repeat.icon-white.big
+ .glyphicon.glyphicon-play
+ .glyphicon.glyphicon-pause
+ .glyphicon.glyphicon-repeat
button.btn.btn-xs.btn-inverse#volume-button(title="Adjust volume")
- i.icon-volume-off.icon-white.big
- i.icon-volume-down.icon-white.big
- i.icon-volume-up.icon-white.big
+ .glyphicon.glyphicon-volume-off
+ .glyphicon.glyphicon-volume-down
+ .glyphicon.glyphicon-volume-up
button.btn.btn-xs.btn-inverse#music-button(title="Toggle Music")
span ♫
.scrubber
- .progress.secret#timeProgress
- .progress-bar
- .scrubber-handle
- .popover.fade.top.in#timePopover
- .arrow
- h3.popover-title
- .popover-content
+ .scrubber-inner
+ .progress.secret#timeProgress
+ .progress-bar
+ .scrubber-handle
+ .popover.fade.top.in#timePopover
+ .arrow
+ h3.popover-title
+ .popover-content
.btn-group.dropup#playback-settings
button.btn.btn-xs.btn-inverse.toggle-fullscreen(title="Toggle fullscreen")
- i.icon-fullscreen.icon-white
+ .glyphicon.glyphicon-fullscreen
button.btn.btn-xs.btn-inverse#zoom-in-button(title="Zoom In (or scroll down)")
- i.icon-zoom-in.icon-white
+ .glyphicon.glyphicon-zoom-in
button.btn.btn-xs.btn-inverse#zoom-out-button(title="Zoom Out (or scroll up)")
- i.icon-zoom-out.icon-white
- button.btn.btn-xs.btn-inverse.dropdown-toggle(data-toggle="dropdown")#settings-button
- i.icon-cog.icon-white.big
- ul.dropdown-menu
- if me.get('name') == "Nick"
- li(title="Ctrl/Cmd + \\: Toggle debug display").selectable#debug-toggle
- i.icon-globe
- | Debug Mode
- i.icon-ok.secret
- li.selectable#view-keyboard-shortcuts
- i.icon-info-sign
- span(data-i18n="play_level.keyboard_shortcuts") Key Shortcuts
- li.selectable#edit-wizard-settings
- i.icon-user
- span(data-i18n="play_level.customize_wizard") Customize Wizard
- li.selectable#edit-editor-config
- i.icon-edit
- span(data-i18n="play_level.editor_config") Editor Config
+ .glyphicon.glyphicon-zoom-out
diff --git a/app/views/play/level/LevelPlaybackView.coffee b/app/views/play/level/LevelPlaybackView.coffee
index 81bf36555..31b495642 100644
--- a/app/views/play/level/LevelPlaybackView.coffee
+++ b/app/views/play/level/LevelPlaybackView.coffee
@@ -17,7 +17,6 @@ module.exports = class LevelPlaybackView extends CocoView
'level:scrub-forward': 'onScrubForward'
'level:scrub-back': 'onScrubBack'
'level:set-volume': 'onSetVolume'
- 'level:set-debug': 'onSetDebug'
'surface:frame-changed': 'onFrameChanged'
'god:new-world-created': 'onNewWorld'
'god:streaming-world-updated': 'onNewWorld'
@@ -28,10 +27,6 @@ module.exports = class LevelPlaybackView extends CocoView
'real-time-multiplayer:manual-cast': 'onRealTimeMultiplayerCast'
events:
- 'click #debug-toggle': 'onToggleDebug'
- 'click #edit-wizard-settings': 'onEditWizardSettings'
- 'click #edit-editor-config': 'onEditEditorConfig'
- 'click #view-keyboard-shortcuts': 'onViewKeyboardShortcuts'
'click #music-button': 'onToggleMusic'
'click #zoom-in-button': -> Backbone.Mediator.publish 'camera:zoom-in', {} unless @shouldIgnore()
'click #zoom-out-button': -> Backbone.Mediator.publish 'camera:zoom-out', {} unless @shouldIgnore()
@@ -52,59 +47,6 @@ module.exports = class LevelPlaybackView extends CocoView
'⌘+], ctrl+]': 'onScrubForward'
'⌘+⇧+], ctrl+⇧+]': 'onSingleScrubForward'
- # popover that shows at the current mouse position on the progressbar, using the bootstrap popover.
- # Could make this into a jQuery plugins itself theoretically.
- class HoverPopup extends $.fn.popover.Constructor
- constructor: () ->
- @enabled = true
- @shown = false
- @type = 'HoverPopup'
- @options =
- placement: 'top'
- container: 'body'
- animation: true
- html: true
- delay:
- show: 400
- @$element = $('#timeProgress')
- @$tip = $('#timePopover')
-
- @content = ''
-
- getContent: -> @content
-
- show: ->
- unless @shown
- super()
- @shown = true
-
- updateContent: (@content) ->
- @setContent()
- @$tip.addClass('fade top in')
-
- onHover: (@e) ->
- pos = @getPosition()
- actualWidth = @$tip[0].offsetWidth
- actualHeight = @$tip[0].offsetHeight
- calculatedOffset =
- top: pos.top - actualHeight
- left: pos.left + pos.width / 2 - actualWidth / 2
- this.applyPlacement(calculatedOffset, 'top')
-
- getPosition: ->
- top: @$element.offset().top
- left: if @e? then @e.pageX else @$element.offset().left
- height: 0
- width: 0
-
- hide: ->
- super()
- @shown = false
-
- disable: ->
- super()
- @hide()
-
constructor: ->
super(arguments...)
me.on('change:music', @updateMusicButton, @)
@@ -192,20 +134,6 @@ module.exports = class LevelPlaybackView extends CocoView
@currentTime = 0
@lastLoadedFrameCount = loadedFrameCount
- onToggleDebug: ->
- return if @shouldIgnore()
- flag = $('#debug-toggle i.icon-ok')
- Backbone.Mediator.publish('level:set-debug', {debug: flag.hasClass('invisible')})
-
- onEditWizardSettings: ->
- Backbone.Mediator.publish 'level:edit-wizard-settings', {}
-
- onEditEditorConfig: ->
- @openModalView new EditorConfigModal session: @options.session
-
- onViewKeyboardShortcuts: ->
- @openModalView new KeyboardShortcutsModal()
-
onDisableControls: (e) ->
if not e.controls or 'playback' in e.controls
@disabled = true
@@ -340,10 +268,6 @@ module.exports = class LevelPlaybackView extends CocoView
Backbone.Mediator.publish 'level:set-letterbox', on: false
Backbone.Mediator.publish 'playback:real-time-playback-ended', {}
- onSetDebug: (e) ->
- flag = $('#debug-toggle i.icon-ok')
- flag.toggleClass 'invisible', not e.debug
-
# to refactor
hookUpScrubber: ->
@@ -423,3 +347,56 @@ module.exports = class LevelPlaybackView extends CocoView
$(window).off('resize', @onWindowResize)
@onWindowResize = null
super()
+
+# popover that shows at the current mouse position on the progressbar, using the bootstrap popover.
+# Could make this into a jQuery plugins itself theoretically.
+class HoverPopup extends $.fn.popover.Constructor
+ constructor: () ->
+ @enabled = true
+ @shown = false
+ @type = 'HoverPopup'
+ @options =
+ placement: 'top'
+ container: 'body'
+ animation: true
+ html: true
+ delay:
+ show: 400
+ @$element = $('#timeProgress')
+ @$tip = $('#timePopover')
+
+ @content = ''
+
+ getContent: -> @content
+
+ show: ->
+ unless @shown
+ super()
+ @shown = true
+
+ updateContent: (@content) ->
+ @setContent()
+ @$tip.addClass('fade top in')
+
+ onHover: (@e) ->
+ pos = @getPosition()
+ actualWidth = @$tip[0].offsetWidth
+ actualHeight = @$tip[0].offsetHeight
+ calculatedOffset =
+ top: pos.top - actualHeight
+ left: pos.left + pos.width / 2 - actualWidth / 2
+ this.applyPlacement(calculatedOffset, 'top')
+
+ getPosition: ->
+ top: @$element.offset().top
+ left: if @e? then @e.pageX else @$element.offset().left
+ height: 0
+ width: 0
+
+ hide: ->
+ super()
+ @shown = false
+
+ disable: ->
+ super()
+ @hide()