From b1252a44265ecd44d3a6491ff855e000352a9057 Mon Sep 17 00:00:00 2001 From: Dominik Kundel Date: Thu, 14 Aug 2014 22:29:57 +0200 Subject: [PATCH 1/4] moving the popover for palette entries into the body to fix layering with popover of autocomplete --- app/styles/play/level.sass | 11 ++- app/styles/play/level/tome/tome.sass | 84 ++++++++++++++++++- .../level/tome/SpellListTabEntryView.coffee | 8 +- .../level/tome/SpellPaletteEntryView.coffee | 13 +-- app/views/play/level/tome/SpellView.coffee | 20 ++++- 5 files changed, 118 insertions(+), 18 deletions(-) diff --git a/app/styles/play/level.sass b/app/styles/play/level.sass index 90e40715f..b0d52ea6f 100644 --- a/app/styles/play/level.sass +++ b/app/styles/play/level.sass @@ -38,10 +38,6 @@ body.is-playing top: 0px bottom: 0 transition: width 0.5s ease-in-out - &.fullscreen-editor - position: fixed - width: 100% - height: 100% #pointer position: absolute @@ -153,3 +149,10 @@ body.is-playing a color: white text-decoration: underline + +html.fullscreen-editor + #level-view + #code-area + position: fixed + width: 100% + height: 100% diff --git a/app/styles/play/level/tome/tome.sass b/app/styles/play/level/tome/tome.sass index e41128470..d3db84cd2 100644 --- a/app/styles/play/level/tome/tome.sass +++ b/app/styles/play/level/tome/tome.sass @@ -70,6 +70,11 @@ display: inline-block padding: 5px +// Set z-index of autocomplete popup smaller than the one of popovers +.ace_editor.ace_autocomplete + z-index: 20 !important + border-color: red !important + html.no-borderimage #tome-view .popover @@ -83,4 +88,81 @@ html.no-borderimage min-width: 600px bottom: inherit right: 50% - margin-right: -300px \ No newline at end of file + margin-right: -300px + + +// NEED TO MOVE THIS +// -------------------------------- + +.spell-palette-popover.popover + // Only those popovers which are our direct children (spell documentation) + max-width: 600px + + &.pinned + left: auto !important + top: 50px !important + right: 45% + // bottom: 151px + @include user-select(text) + // Wish I could set max-width and max-height (and override Bootstrap's stuff) + // but without explicitly setting height, child overflow-y: scroll doesn't work + min-width: 45% + height: 60% + + .arrow + display: none + + .close + position: absolute + top: 5% + right: 5% + font-size: 28px + font-weight: bold + @include opacity(0.6) + text-shadow: 0 1px 0 white + + &:hover + @include opacity(1) + + padding: 10px 10px 30px 10px + border-image: url(/images/level/popover_background.png) 18 fill round + border-width: 15px + @include box-shadow(0 0 0 #000) + + h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code) + font-family: Menlo, Monaco, Consolas, "Courier New", monospace + + .popover-title + background-color: transparent + margin: 0 14px + padding: 8px 0 + border-bottom-color: #ccc + + .popover-content + max-height: 100% + overflow-y: auto + margin-right: 10px + img + float: right + + &.top .arrow + bottom: -2% + &.bottom .arrow + top: -2% + &.left .arrow + right: 0% + &.right .arrow + left: -3% + +html.no-borderimage + .spell-palette-popover.popover + background: transparent url(/images/level/popover_background.png) + background-size: 100% 100% + border: 0 + +html.fullscreen-editor + .spell-palette-popover.popover.pinned + min-width: 600px + bottom: inherit + right: 50% + margin-right: -300px \ No newline at end of file diff --git a/app/views/play/level/tome/SpellListTabEntryView.coffee b/app/views/play/level/tome/SpellListTabEntryView.coffee index 68f946846..36059c504 100644 --- a/app/views/play/level/tome/SpellListTabEntryView.coffee +++ b/app/views/play/level/tome/SpellListTabEntryView.coffee @@ -95,9 +95,9 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView Backbone.Mediator.publish 'spell-beautify', spell: @spell onFullscreenClick: -> - $codearea = $('#code-area') - $codearea.css 'z-index', 20 unless $codearea.hasClass 'fullscreen-editor' - $('#code-area').toggleClass 'fullscreen-editor' + $codearea = $('html') + $('#code-area').css 'z-index', 20 unless $codearea.hasClass 'fullscreen-editor' + $('html').toggleClass 'fullscreen-editor' $('.fullscreen-code').toggleClass 'maximized' updateReloadButton: -> @@ -151,7 +151,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView break $codearea = $('#code-area') $codearea.on transitionListener, => - $codearea.css 'z-index', 1 unless $codearea.hasClass 'fullscreen-editor' + $codearea.css 'z-index', 1 unless $('html').hasClass 'fullscreen-editor' destroy: -> diff --git a/app/views/play/level/tome/SpellPaletteEntryView.coffee b/app/views/play/level/tome/SpellPaletteEntryView.coffee index 39a1d164e..ca9270616 100644 --- a/app/views/play/level/tome/SpellPaletteEntryView.coffee +++ b/app/views/play/level/tome/SpellPaletteEntryView.coffee @@ -9,6 +9,7 @@ module.exports = class SpellPaletteEntryView extends CocoView className: 'spell-palette-entry-view' template: template popoverPinned: false + overridePopoverTemplate: '' subscriptions: 'surface:frame-changed': 'onFrameChanged' @@ -41,8 +42,10 @@ module.exports = class SpellPaletteEntryView extends CocoView placement: 'top' trigger: 'manual' # Hover, until they click, which will then pin it until unclick. content: @docFormatter.formatPopover() - container: '#tome-view' + container: 'body' + template: @overridePopoverTemplate ) + window.element = @$el @$el.on 'show.bs.popover', => Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @ @@ -58,15 +61,15 @@ module.exports = class SpellPaletteEntryView extends CocoView togglePinned: -> if @popoverPinned @popoverPinned = false - @$el.add('#tome-view .popover').removeClass 'pinned' - $('#tome-view .popover .close').remove() + @$el.add('.spell-palette-popover.popover').removeClass 'pinned' + $('.spell-palette-popover.popover .close').remove() @$el.popover 'hide' else @popoverPinned = true @$el.popover 'show' - @$el.add('#tome-view .popover').addClass 'pinned' + @$el.add('.spell-palette-popover.popover').addClass 'pinned' x = $('') - $('#tome-view .popover').append x + $('.spell-palette-popover.popover').append x x.on 'click', @onClick Backbone.Mediator.publish 'tome:palette-pin-toggled', entry: @, pinned: @popoverPinned diff --git a/app/views/play/level/tome/SpellView.coffee b/app/views/play/level/tome/SpellView.coffee index 8a4c38f89..2169e6f91 100644 --- a/app/views/play/level/tome/SpellView.coffee +++ b/app/views/play/level/tome/SpellView.coffee @@ -50,6 +50,7 @@ module.exports = class SpellView extends CocoView 'tome:update-snippets': 'addZatannaSnippets' 'tome:insert-snippet': 'onInsertSnippet' 'spell-beautify': 'onSpellBeautify' + 'script:state-changed': 'onScriptStateChange' events: 'mouseout': 'onMouseOut' @@ -124,10 +125,17 @@ module.exports = class SpellView extends CocoView addCommand name: 'end-current-script' bindKey: {win: 'Shift-Space', mac: 'Shift-Space'} - passEvent: true # https://github.com/ajaxorg/ace/blob/master/lib/ace/keyboard/keybinding.js#L114 - # No easy way to selectively cancel shift+space, since we don't get access to the event. - # Maybe we could temporarily set ourselves to read-only if we somehow know that a script is active? - exec: -> Backbone.Mediator.publish 'level:shift-space-pressed' + # passEvent: true # https://github.com/ajaxorg/ace/blob/master/lib/ace/keyboard/keybinding.js#L114 + # No easy way to selectively cancel shift+space, since we don't get access to the event. + # Maybe we could temporarily set ourselves to read-only if we somehow know that a script is active? + exec: => + if @scriptRunning + console.log '>>>> BOOM <<<<' + Backbone.Mediator.publish 'level:shift-space-pressed' + else + console.log '>>>> BAEM <<<<' + @ace.insert ' ' + addCommand name: 'end-all-scripts' bindKey: {win: 'Escape', mac: 'Escape'} @@ -197,6 +205,7 @@ module.exports = class SpellView extends CocoView # window.snippetEntries = snippetEntries lang = @editModes[e.language].substr 'ace/mode/'.length @zatanna.addSnippets snippetEntries, lang + window.aceEditor = @ace onMultiplayerChanged: -> if @session.get('multiplayer') @@ -683,6 +692,9 @@ module.exports = class SpellView extends CocoView @spell.hasChangedSignificantly @getSource(), null, (hasChanged) => @recompile() if hasChanged + onScriptStateChange: (e) -> + @scriptRunning = if e.currentScript is null then false else true + destroy: -> $(@ace?.container).find('.ace_gutter').off 'click', '.ace_error, .ace_warning, .ace_info', @onAnnotationClick @firepad?.dispose() From 45e4079c2b7cae84da72d774237422ec58d885c7 Mon Sep 17 00:00:00 2001 From: Dominik Kundel Date: Fri, 15 Aug 2014 01:55:11 +0200 Subject: [PATCH 2/4] bumbed up zatanna to fix autocomplete issues --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 69204f667..06a1d55b4 100644 --- a/bower.json +++ b/bower.json @@ -44,7 +44,7 @@ "bootstrap": "~3.1.1", "validated-backbone-mediator": "~0.1.3", "jquery.browser": "~0.0.6", - "zatanna": "~0.0.4", + "zatanna": "~0.0.5", "modernizr": "~2.8.3" }, "overrides": { From 755a86e3d3955567e6568f388fa0a4c20a7d526d Mon Sep 17 00:00:00 2001 From: Dominik Kundel Date: Fri, 15 Aug 2014 01:56:01 +0200 Subject: [PATCH 3/4] moving some styling --- .../play/level/tome/spell_palette_entry.sass | 72 +++++++++++++++++ app/styles/play/level/tome/tome.sass | 78 ------------------- app/views/play/level/tome/SpellView.coffee | 3 +- 3 files changed, 73 insertions(+), 80 deletions(-) diff --git a/app/styles/play/level/tome/spell_palette_entry.sass b/app/styles/play/level/tome/spell_palette_entry.sass index f6afd320e..489fcab54 100644 --- a/app/styles/play/level/tome/spell_palette_entry.sass +++ b/app/styles/play/level/tome/spell_palette_entry.sass @@ -30,3 +30,75 @@ &.undefined color: rgb(197, 6, 11) +.spell-palette-popover.popover + // Only those popovers which are our direct children (spell documentation) + max-width: 600px + + &.pinned + left: auto !important + top: 50px !important + right: 45% + // bottom: 151px + @include user-select(text) + // Wish I could set max-width and max-height (and override Bootstrap's stuff) + // but without explicitly setting height, child overflow-y: scroll doesn't work + min-width: 45% + height: 60% + + .arrow + display: none + + .close + position: absolute + top: 5% + right: 5% + font-size: 28px + font-weight: bold + @include opacity(0.6) + text-shadow: 0 1px 0 white + + &:hover + @include opacity(1) + + padding: 10px 10px 30px 10px + border-image: url(/images/level/popover_background.png) 18 fill round + border-width: 15px + @include box-shadow(0 0 0 #000) + + h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code) + font-family: Menlo, Monaco, Consolas, "Courier New", monospace + + .popover-title + background-color: transparent + margin: 0 14px + padding: 8px 0 + border-bottom-color: #ccc + + .popover-content + max-height: 100% + overflow-y: auto + margin-right: 10px + img + float: right + + &.top .arrow + bottom: -2% + &.bottom .arrow + top: -2% + &.left .arrow + right: 0% + &.right .arrow + left: -3% + +html.no-borderimage + .spell-palette-popover.popover + background: transparent url(/images/level/popover_background.png) + background-size: 100% 100% + border: 0 + +html.fullscreen-editor + .spell-palette-popover.popover.pinned + min-width: 600px + bottom: inherit + right: 50% + margin-right: -300px \ No newline at end of file diff --git a/app/styles/play/level/tome/tome.sass b/app/styles/play/level/tome/tome.sass index d3db84cd2..64f0321b9 100644 --- a/app/styles/play/level/tome/tome.sass +++ b/app/styles/play/level/tome/tome.sass @@ -73,7 +73,6 @@ // Set z-index of autocomplete popup smaller than the one of popovers .ace_editor.ace_autocomplete z-index: 20 !important - border-color: red !important html.no-borderimage #tome-view @@ -89,80 +88,3 @@ html.no-borderimage bottom: inherit right: 50% margin-right: -300px - - -// NEED TO MOVE THIS -// -------------------------------- - -.spell-palette-popover.popover - // Only those popovers which are our direct children (spell documentation) - max-width: 600px - - &.pinned - left: auto !important - top: 50px !important - right: 45% - // bottom: 151px - @include user-select(text) - // Wish I could set max-width and max-height (and override Bootstrap's stuff) - // but without explicitly setting height, child overflow-y: scroll doesn't work - min-width: 45% - height: 60% - - .arrow - display: none - - .close - position: absolute - top: 5% - right: 5% - font-size: 28px - font-weight: bold - @include opacity(0.6) - text-shadow: 0 1px 0 white - - &:hover - @include opacity(1) - - padding: 10px 10px 30px 10px - border-image: url(/images/level/popover_background.png) 18 fill round - border-width: 15px - @include box-shadow(0 0 0 #000) - - h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code) - font-family: Menlo, Monaco, Consolas, "Courier New", monospace - - .popover-title - background-color: transparent - margin: 0 14px - padding: 8px 0 - border-bottom-color: #ccc - - .popover-content - max-height: 100% - overflow-y: auto - margin-right: 10px - img - float: right - - &.top .arrow - bottom: -2% - &.bottom .arrow - top: -2% - &.left .arrow - right: 0% - &.right .arrow - left: -3% - -html.no-borderimage - .spell-palette-popover.popover - background: transparent url(/images/level/popover_background.png) - background-size: 100% 100% - border: 0 - -html.fullscreen-editor - .spell-palette-popover.popover.pinned - min-width: 600px - bottom: inherit - right: 50% - margin-right: -300px \ No newline at end of file diff --git a/app/views/play/level/tome/SpellView.coffee b/app/views/play/level/tome/SpellView.coffee index 2169e6f91..db292efa6 100644 --- a/app/views/play/level/tome/SpellView.coffee +++ b/app/views/play/level/tome/SpellView.coffee @@ -201,11 +201,10 @@ module.exports = class SpellView extends CocoView tabTrigger: doc.snippets[e.language].tab snippetEntries.push entry - # window.zatanna = @zatanna + # window.zatannaInstance = @zatanna # window.snippetEntries = snippetEntries lang = @editModes[e.language].substr 'ace/mode/'.length @zatanna.addSnippets snippetEntries, lang - window.aceEditor = @ace onMultiplayerChanged: -> if @session.get('multiplayer') From 68828b67bb5052efa0dd3f7136742ab2694631a7 Mon Sep 17 00:00:00 2001 From: Dominik Kundel Date: Fri, 15 Aug 2014 02:04:46 +0200 Subject: [PATCH 4/4] removed console.log --- app/views/play/level/tome/SpellView.coffee | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/views/play/level/tome/SpellView.coffee b/app/views/play/level/tome/SpellView.coffee index db292efa6..45b201e26 100644 --- a/app/views/play/level/tome/SpellView.coffee +++ b/app/views/play/level/tome/SpellView.coffee @@ -130,10 +130,8 @@ module.exports = class SpellView extends CocoView # Maybe we could temporarily set ourselves to read-only if we somehow know that a script is active? exec: => if @scriptRunning - console.log '>>>> BOOM <<<<' Backbone.Mediator.publish 'level:shift-space-pressed' else - console.log '>>>> BAEM <<<<' @ace.insert ' ' addCommand